1807 lines
63 KiB
Vue
1807 lines
63 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="header">
|
||
<image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/index/indexBg.png"></image>
|
||
<div class="headerTop" :style="{ height: menu.bottom + 5 + 'px'}">
|
||
<view class="selectTime" :style="{ top: menu.top + (menu.height - 22) / 2 + 'px' }">
|
||
<image class="dateIcon" src="/static/images/index/dateTime.svg"></image>
|
||
<picker mode="date" :value="single" :start="startDate" :end="endData" @change="bindDateChange" @click="handleDateClick">
|
||
<view class="time">
|
||
<text class="day">{{ thisDay }}</text>
|
||
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
||
<image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</div>
|
||
<view class="other">
|
||
<view v-if="user.Membership_Id" >
|
||
<view class="topTitle">
|
||
<p class="title">对客营收</p>
|
||
<span class="text">门店上传: <text style="margin-left: 4px" :style="{color:isBig?'red':''}">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}/{{allShopCount?allShopCount:'-'}}</text></span>
|
||
</view>
|
||
<view class="box" @click="handlePage">
|
||
<view class="priceBox">
|
||
<p class="allPrice">{{showTableData.CashPay || '0.00'}}</p>
|
||
</view>
|
||
<image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
|
||
</view>
|
||
<view class="addBox">
|
||
<image class="arrowTop" :src="Number(showTableData.compared)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_top.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_reduce.svg'"></image>
|
||
<text class="text">{{showTableData.compared?showTableData.compared + '%':'-' + '%'}}</text>
|
||
<text class="compare">(相比昨日)</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="!user.Membership_Id" class="title" style="font-size: 16px" @click="handleReg">去授权 </view>
|
||
<view class="type">
|
||
<view class="item">
|
||
<view class="leftImg">
|
||
<image src="/static/images/index/average.svg"></image>
|
||
</view>
|
||
<view class="right">
|
||
<p class="typeName">客单交易<text class="unit">/笔</text></p>
|
||
<p class="price">{{showTableData.TicketCount?showTableData.TicketCount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<view class="leftImg">
|
||
<image src="/static/images/index/business.svg"></image>
|
||
</view>
|
||
<view class="right">
|
||
<p class="typeName">客单均价<text class="unit">/元</text></p>
|
||
<p class="price">{{showTableData.averagePrice?showTableData.averagePrice:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail">
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
长款金额<text class="itemUnit">/元</text>
|
||
</p>
|
||
<p class="price">{{ showTableData.Different_Price_More?showTableData.Different_Price_More:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
短款金额<text class="itemUnit">/元</text>
|
||
</p>
|
||
<p class="price">{{ showTableData.Different_Price_Less?showTableData.Different_Price_Less:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
优惠金额<text class="itemUnit">/元</text>
|
||
</p>
|
||
<p class="price">{{showTableData.TotalOffAmount?showTableData.TotalOffAmount:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
移动支付<text class="itemUnit">/元</text>
|
||
</p>
|
||
<p class="price">{{showTableData.MobilePayment?showTableData.MobilePayment:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
商品出售<text class="itemUnit">/件</text>
|
||
</p>
|
||
<p class="price">{{ showTableData.TotalCount?showTableData.TotalCount:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
商品均价<text class="itemUnit">/元</text>
|
||
</p>
|
||
<p class="price">{{ showTableData.countave?showTableData.countave:'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
入区车流<text class="itemUnit">/辆</text>
|
||
</p>
|
||
<p class="price">{{carInfo.Vehicle_Count?carInfo.Vehicle_Count:'-'}}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
入区率<text class="itemUnit">/%</text>
|
||
</p>
|
||
<p class="price">{{carInfo.Entry_Rate?carInfo.Entry_Rate :'-' }}</p>
|
||
</view>
|
||
<view class="detailItem">
|
||
<p class="itemName">
|
||
停留时长<text class="itemUnit">/分钟</text>
|
||
</p>
|
||
<p class="price">{{carInfo.Stay_Times?carInfo.Stay_Times:'-' }}</p>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="menu">
|
||
<image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/index/menuBg.png"></image>
|
||
<view class="content">
|
||
<div class="tabType">
|
||
<view v-for="(item, index) in tabTypeList" :key="index" class="item" @click="handleGoTab(item)">
|
||
<view class="big">
|
||
<image class="img" :src="item.imgUrl"></image>
|
||
</view>
|
||
<text class="name">{{ item.name }}</text>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="detailType">
|
||
<view v-for="(item, index) in detailTypeList" :key="index" class="item">
|
||
<view class="box">
|
||
<p class="title">
|
||
{{ item.name }}<text class="unit">{{ item.unit }}</text>
|
||
</p>
|
||
<p class="money" v-if="index===0 || index===2">{{ item.value }}</p>
|
||
<p class="money" v-else>{{ item.yesterValue }}</p>
|
||
<view v-if="index === 0 || index === 2" class="active">
|
||
<image v-if="Number(item.add)!==0" class="addIcon" :src="Number(item.add)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<text v-if="Number(item.add)!==0" class="add" :style="{color:Number(item.add)<0?'#07C160':'#FA5151'}">{{ item.add>0?'+' + item.add:item.add }}</text>
|
||
<text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>
|
||
</view>
|
||
<view class="otherBox" v-else>
|
||
<view class="other">本月累计</view>
|
||
<text class="month">{{ item.value }}</text>
|
||
</view>
|
||
<image :src="item.imgIcon" class="imgIcon"></image>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="propOfReven">
|
||
<p class="title">营收占比</p>
|
||
<view class="tabs">
|
||
<view
|
||
v-for="(item, index) in propOfRevenList"
|
||
:key="index"
|
||
:class="selectTab === item.value ? 'active tabItem' : 'tabItem'"
|
||
@click="handleSelectTab(item.value)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chart">
|
||
<div v-show="selectTab===1" v-if="modelProgress.length>0&& theRequest.ProvinceCode==340000">
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">
|
||
<div class="top">
|
||
<div class="left">
|
||
<div class="icon">
|
||
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
|
||
<text>{{o+1}}</text>
|
||
</div>
|
||
<p class="name">{{item.name}}</p>
|
||
</div>
|
||
<p class="price">{{item.value}}</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bar">
|
||
<div class="progress" :style="{width:item.percentage+'%'}"></div>
|
||
</div>
|
||
<p class="number">{{item.percentage+'%'}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="selectTab===2" v-if="regionProgress.length>0">
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
|
||
<div class="top">
|
||
<div class="left">
|
||
<div class="icon">
|
||
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
|
||
<text>{{o+1}}</text>
|
||
</div>
|
||
<p class="name">{{item.name}}</p>
|
||
</div>
|
||
<p class="price">{{item.value}}</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bar">
|
||
<div class="progress" :style="{width:item.percentage+'%'}"></div>
|
||
</div>
|
||
<p class="number">{{item.percentage+'%'}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="selectTab===3" v-if="areaProgress.length>0">
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
|
||
<div class="top">
|
||
<div class="left">
|
||
<div class="icon">
|
||
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
|
||
<text>{{o+1}}</text>
|
||
</div>
|
||
<p class="name">{{item.name}}</p>
|
||
</div>
|
||
<p class="price">{{item.value}}</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bar">
|
||
<div class="progress" :style="{width:item.percentage+'%'}"></div>
|
||
</div>
|
||
<p class="number">{{item.percentage+'%'}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="thisMonth" @click="handlePlanPageGo('month')">
|
||
<div class="titleTop">
|
||
<p class="title">本月自营计划</p>
|
||
<div class="question" @click.stop="handleShowNotice">
|
||
<image src="/static/images/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字</div>
|
||
<div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
|
||
</div>
|
||
<view class="box">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
|
||
<p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<view class="box2">
|
||
<image class="addIcon" :src="Number(monthAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
<!-- <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
|
||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">本月已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<div class="thisYear" style="margin-top: 0px" @click="handlePlanPageGo('year')">
|
||
<div class="titleTop">
|
||
<p class="title">年度自营计划</p>
|
||
<div class="question" @click.stop="handleShowNoticeYear">
|
||
<image src="/static/images/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNoticeYear" class="titleTopNotice">这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字</div>
|
||
<div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
|
||
</div>
|
||
<view class="box">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
|
||
<p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon" :src="Number(yearAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{yearAdd?yearAdd + '%':''}}</p>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
|
||
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">年度已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="notice" v-if="isShow">
|
||
<view class="left">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/warning.svg"></image>
|
||
<view class="text">
|
||
<p class="name">{{isShowTitle}}个投诉建议</p>
|
||
<!-- <p class="desc"></p>-->
|
||
</view>
|
||
</view>
|
||
<view class="right" @click="handleSearch">去查看</view>
|
||
</div>
|
||
<Tabbar ref="tabbar" :page="page"></Tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getThisDay, handleYesterday, timestampToTime} from "../../util/dateTime";
|
||
import {
|
||
mapActions,
|
||
mapGetters,
|
||
mapState
|
||
} from 'vuex';
|
||
import request from '@/util/index.js'
|
||
import uCharts from '@/components/u-charts.js';
|
||
import anhuiYestodayRevenueData from '../everdayRenven/components/anhuiYestodayRevenueData'
|
||
import Tabbar from "../../components/tabbar/tabbar.vue";
|
||
var rincanvas = {};
|
||
export default {
|
||
components: {Tabbar},
|
||
data() {
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
||
|
||
const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')
|
||
return {
|
||
statusBarHeight:'',// 每个手机的状态栏高度
|
||
page:'/pages/index/index',
|
||
menu:'', // 胶囊按钮高度
|
||
startDate:'',// 开始时间
|
||
endData:'', // 结束时间
|
||
detailList:[ { name: '长款金额', unit: '/元', price:0 },
|
||
{ name: '短款金额', unit: '/元', price: 0 },
|
||
{ name: '优惠金额', unit: '/元', price: 0 },
|
||
{ name: '移动支付', unit: '', price: 0 },
|
||
{ name: '商品出售', unit: '', price: 0 },
|
||
{ name: '商品均价', unit: '/元', price: 0 },
|
||
{ name: '入区车流', unit: '/辆', price: 0 },
|
||
{ name: '入区率', unit: '', price: 0 },
|
||
{ name: '停留时长', unit: '', price: 0 },],
|
||
tabTypeList:[ { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg', path: '/pages/commercialBI/carPortrait', name: '车流画像' },
|
||
{ imgUrl: '/static/images/index/guest.svg', path: '/pages/commercialBI/guestPortrait', name: '客群画像' },
|
||
{ imgUrl: '/static/images/index/business_icon.svg', path: '/pages/commercialBI/managePortrait', name: '经营画像' },
|
||
{ imgUrl: '/static/images/index/trade.svg', path: '/pages/commercialBI/businessPortrait', name: '交易画像' },
|
||
{ imgUrl: '/static/images/index/brand.svg', path: '/pages/commercialBI/formatPortrait', name: '业态品牌' },],
|
||
detailTypeList:[{ name: '分润门店', unit: '/个', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/store.svg' },
|
||
{ name: '驿达分润', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/yidaFenrun.svg' },
|
||
{ name: '订单配送', unit: '/单', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/orderDelivery.svg' },
|
||
{ name: '采购金额', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/purchaseAmount.svg' },],
|
||
propOfRevenList:[ { name: '经营模式', value: 1 },
|
||
{ name: '经营业态', value: 2 },
|
||
{ name: '区域经营', value: 3 }],
|
||
selectTab:1, // 选项卡的指针
|
||
mobileData :{}, // 移动支付分账接口返回的数据
|
||
single:'', // 时间选择器选择的时间
|
||
monthAdd:'',//月每天的相对增加
|
||
yearAdd:'', // 年度计划增加的百分比
|
||
thisDay:'', // 显示的星期几
|
||
isBig:false,//判断门店上传的前一个数字是否比后一个数字大
|
||
allShopCount:0,//门店总数
|
||
theRequest: null,
|
||
lastDay: lastDay, // 该页面的最近有效日期
|
||
nowDay: nowDay, // 当天时间
|
||
buyPriceYes:'',//昨日采购金额
|
||
regionList: null,
|
||
nowTab: 1,
|
||
showNotice:false,
|
||
showNoticeYear:false,
|
||
priceMove:false,//价格出现的动画效果
|
||
carInfo:{},//车流信息
|
||
regionProgress: null,
|
||
areaProgress: null,
|
||
modelProgress: null,
|
||
showTableData:{},
|
||
monthPrice:0,//月度累计分润
|
||
yesterdayBillCount:0,//昨日累计配送
|
||
lastDayBillCount:0,//当前日的配送
|
||
buyPriceMonth:0,//月度的采购金额
|
||
totalData:null,
|
||
option:{},//onLoad里面的option
|
||
isShow:false, //投诉建议是否显示
|
||
isShowTitle:0,//投诉建议条数
|
||
plan:{},//月度和年度接口的返回参数 一起的
|
||
ShareShopCountYes:0,//昨日的店铺数
|
||
yesterdayAllPay:0,//前一天的营收总额
|
||
wechatPushSalesList: null // 甘肃单品排行数据
|
||
}
|
||
},
|
||
watch:{
|
||
user:{
|
||
handler:function (value){
|
||
console.log('监听user',value)
|
||
this.getData(this.option)
|
||
},
|
||
deep:true
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
'PushAuthority': (state) => state.userData.PushAuthority,
|
||
'ProvinceCode': (state) => state.userData.ProvinceCode,
|
||
toDoMsg:(state)=>{return state.toDoMsg},
|
||
}),
|
||
hasSeverpartIndexAuthority() {
|
||
let theRequest = this.theRequest
|
||
if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
|
||
return this.PushAuthority.some(n =>
|
||
n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
|
||
)
|
||
}
|
||
return false
|
||
},
|
||
...mapGetters({'user':'getUser'})
|
||
},
|
||
onLoad(option){
|
||
// 处理页面显示的时间
|
||
this.single = timestampToTime((new Date(this.lastDay).getTime()))
|
||
// 获取手机参数对页面进行适配
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// 获取最近有效日期的时间，以昨天为主
|
||
const date = new Date(this.lastDay)
|
||
this.thisDay = getThisDay(date.getDay())
|
||
// 判断是否有投诉建议的悬浮框弹出
|
||
for(let key in this.toDoMsg){
|
||
if (key === 'd405ae13-3388-41c0-a5f6-d11194d0a943' && this.toDoMsg['d405ae13-3388-41c0-a5f6-d11194d0a943']){
|
||
this.isShow = true
|
||
this.isShowTitle = this.toDoMsg['d405ae13-3388-41c0-a5f6-d11194d0a943']
|
||
}
|
||
}
|
||
//拿到option的值
|
||
this.option = option
|
||
// 获取数据的方法
|
||
if (this.user.Membership_Id){
|
||
this.getData(option)
|
||
}
|
||
//设置日期选择器的开始时间和结束时间
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
let howDay
|
||
if (d - 8 <0){
|
||
let k = 8 - d
|
||
m = m - 1
|
||
const time = `${y}-${m}`
|
||
howDay = this.$util.getThisMonthDay(time)
|
||
this.startDate = `${y}-${m}-${howDay - k}`
|
||
}else{
|
||
this.startDate = `${y}-${m}-${d - 8}`
|
||
}
|
||
this.endData = this.lastDay
|
||
},
|
||
onShow(){
|
||
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
|
||
uni.hideTabBar()
|
||
},
|
||
onHide(){
|
||
// 离开页面投诉建议的悬浮框隐藏掉
|
||
this.isShow = false
|
||
this.selectTab = 1
|
||
},
|
||
methods:{
|
||
...mapActions(['memberLogin','getLoginCode']),
|
||
handleShowNotice(){
|
||
this.showNotice = true
|
||
},
|
||
handleNoShowNotice(){
|
||
this.showNotice = false
|
||
},
|
||
handleShowNoticeYear(){
|
||
this.showNoticeYear = true
|
||
},
|
||
handleNoShowNoticeYear(){
|
||
this.showNoticeYear = false
|
||
},
|
||
handlePlanPageGo(type){
|
||
this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
|
||
},
|
||
handlePage(){
|
||
this.$util.toNextRoute('navigateTo', `/pages/everdayRenven/index?time=${this.lastDay}`)
|
||
},
|
||
handleGoTab(item){
|
||
this.$util.toNextRoute('navigateTo', `${item.path}?time=${this.lastDay}&Serverpart_ID=372`)
|
||
},
|
||
getData(option){
|
||
//老代码
|
||
if (this.user.Membership_Id){
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
}
|
||
//判断是否从推送进来
|
||
if (option.ProvinceCode) { // 从推送进入
|
||
this.theRequest = option
|
||
option.time = this.$util.cutDate(option.time, 'YYYY-MM-DD')
|
||
option.month = this.$util.cutDate(option.time, 'YYYYMM')
|
||
this.lastDay = this.$util.cutDate(option.time, 'YYYY-MM-DD')
|
||
//修改时间选择器里面的时间
|
||
this.single = timestampToTime((new Date(this.lastDay).getTime()))
|
||
//显示当前选择的时间是星期几
|
||
const date = new Date(this.lastDay)
|
||
this.thisDay = getThisDay(date.getDay())
|
||
// 老项目的请求数据的那部分
|
||
this.initData()
|
||
//根据新页面请求数据的方法
|
||
this.initYesterdayData()
|
||
//车流分析
|
||
this.getCarInfo()
|
||
//月度计划、年度计划
|
||
this.monthYearPlan()
|
||
} else if (this.user.Membership_Id){ // 默认
|
||
// 不是从推送进来 走正常的请求方法
|
||
// if (!this.PushAuthority){return}
|
||
// if (this.PushAuthority.length > 0) {
|
||
|
||
// 定义initData中的入参
|
||
this.theRequest = this.defaultMsg() || {}
|
||
this.theRequest.time = this.lastDay
|
||
this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
|
||
// 请求数据的方法 initData是老项目中的接口，形参true传入 可以让两个没用到的接口不调用
|
||
this.initData()
|
||
// 请求用的到的 昨日的数据
|
||
this.initYesterdayData()
|
||
//车流分析
|
||
this.getCarInfo()
|
||
//月度计划、年度计划
|
||
this.monthYearPlan()
|
||
}
|
||
|
||
// 老项目代码
|
||
this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2
|
||
if (this.theRequest.GroupType == 1010) {
|
||
this.getDetail(this.theRequest)
|
||
}
|
||
// 若省份为甘肃，则加载甘肃单品排行
|
||
if (this.theRequest.ProvinceCode == 620000) {
|
||
|
||
this.getRankContent()
|
||
}
|
||
},
|
||
handleReg(){
|
||
this.$util.toNextRoute('redirectTo', '/pages/register/register')
|
||
},
|
||
handleSearch(){
|
||
this.$util.toNextRoute('navigateTo', '/pages/suggestion/suggestion')
|
||
},
|
||
// 改变时间触发的方法 ，改变页面的内容数据
|
||
onRefresh(){
|
||
this.getData(this.option)
|
||
},
|
||
monthYearPlan(){
|
||
const monthDate= {
|
||
Province_Code:'340000',
|
||
Statistics_Date:this.lastDay
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.plan = res.Result_Data
|
||
this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree
|
||
this.plan.percentageYear = res.Result_Data.YearBudget_Degree
|
||
|
||
this.monthAdd = this.plan.MonthGrowth_Rate
|
||
this.yearAdd = res.Result_Data.YearGrowth_Rate
|
||
//处理数据
|
||
this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
|
||
this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
|
||
this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
|
||
this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
|
||
})
|
||
},
|
||
getCarInfo(){
|
||
const data = {
|
||
Statistics_Date:this.lastDay,
|
||
Province_Code:'340000'
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetAvgBayonetAnalysis',data).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.carInfo = res.Result_Data
|
||
this.carInfo.Vehicle_Count = res.Result_Data.Vehicle_Count
|
||
})
|
||
},
|
||
initYesterdayData(){
|
||
let _this = this
|
||
// 传入最近的有效日期就可以拿到当前有效日期的前一天的日期
|
||
let yesterday = handleYesterday(this.lastDay)
|
||
console.log(this.lastDay)
|
||
if ((yesterday.substr(yesterday.length-1,1)) === '0'){
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() //不加1 反正要减1
|
||
let day = this.$util.getThisMonthDay(this.lastDay)
|
||
yesterday = `${y}-${m}-${day}`
|
||
}
|
||
console.log('yesterday', yesterday)
|
||
// 定义入参 除了改变时间 别的和老项目一致
|
||
const data = {
|
||
Statistics_Date:yesterday,
|
||
Statistics_Month:this.theRequest.month,
|
||
Province_Code:this.theRequest.ProvinceCode,
|
||
pushProvinceCode:this.theRequest.ProvinceCode,
|
||
Serverpart_ID:this.theRequest.ServerpartIds?this.theRequest.ServerpartIds:'',
|
||
SPRegionType_ID:this.theRequest.GroupType==1020?this.theRequest.ServerpartIds:''
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetRevenuePushList',data).then(res=>{
|
||
// 计算月总额 拿到昨日的全部对客营收 并拿到相对于昨日的增长比
|
||
let cashPay = 0
|
||
res.Result_Data.List.forEach(item=>{
|
||
cashPay= Number(item.CashPay) + cashPay
|
||
})
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
_this.yesterdayAllPay = cashPay
|
||
})
|
||
//昨日的分润门店
|
||
request.$webGet('CommercialApi/Revenue/GetMobileShare',data).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.ShareShopCountYes = res.Result_Data.ShareShop_Count
|
||
})
|
||
|
||
const date = new Date(this.lastDay)
|
||
const y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m<10){
|
||
m = '0' + m
|
||
}
|
||
//一个月分润门店
|
||
// 如果前一天是上个月 那么拿到的月份还是上一个月的月份 然后结束时间就是前一天 开始时间是月份开始的第一天
|
||
const monthDate={
|
||
Province_Code:'340000',
|
||
StatisticsStartDate:`${y}-${m}-01`,
|
||
StatisticsEndDate:this.lastDay,
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetMobileShare',monthDate).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.monthPrice = res.Result_Data.Royalty_Price
|
||
})
|
||
|
||
//这一日的订单配送
|
||
const todayData = {
|
||
Province_Code:'340000',
|
||
Statistics_Date: this.lastDay,//2023-04-02
|
||
ShowCompareRate:true
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetMallDeliver',todayData).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.lastDayBillCount = res.Result_Data
|
||
this.detailTypeList[2].value = this.lastDayBillCount.DeliverBill_Count
|
||
this.detailTypeList[2].add = this.lastDayBillCount.DeliverBillGrowth_Count
|
||
this.detailTypeList[3].value = this.$util.fmoney(this.lastDayBillCount.MonthDeliver_Price )
|
||
this.detailTypeList[3].yesterValue = this.$util.fmoney(this.lastDayBillCount.Deliver_Price)
|
||
})
|
||
|
||
//昨日的订单配送
|
||
const deliveData = {
|
||
Province_Code:'340000',
|
||
Statistics_Date: yesterday
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetMallDeliver',deliveData).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.yesterdayBillCount = res.Result_Data.DeliverBill_Count
|
||
})
|
||
//昨日采购金额
|
||
const buyPriceYes = {
|
||
Province_Code:'340000',
|
||
Statistics_Date: yesterday
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPriceYes).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.buyPriceYes = res.Result_Data.Deliver_Price
|
||
})
|
||
|
||
//一个月的采购金额
|
||
const buyPrice = {
|
||
Province_Code:'340000',
|
||
StatisticsStartDate:`${y}-${m}-01`,
|
||
StatisticsEndDate:this.lastDay
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPrice).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.buyPriceMonth = res.Result_Data.Deliver_Price
|
||
})
|
||
// 获取营收推送汇总数据
|
||
const allPriceData = {
|
||
pushProvinceCode:'340000',
|
||
Statistics_Date:this.lastDay,
|
||
ShowCompareRate: true
|
||
}
|
||
console.log('allPriceData',allPriceData)
|
||
request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',allPriceData).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
let result = res.Result_Data
|
||
console.log('resultresultresult',result)
|
||
for(let key in result){
|
||
if (key!=='RevenuePushModel' && key!=='GrowthRate'){
|
||
let all = 0
|
||
// 先算出全部的总额数量 用来计算百分比
|
||
result[key].forEach(item=>{
|
||
all += Number(item.value)
|
||
})
|
||
// 把百分比计算出来加到每一项中
|
||
result[key].map(item=>{
|
||
item.percentage = ((Number(item.value)/all)*100).toFixed(2)
|
||
})
|
||
// 格式化掉处理的数据
|
||
result[key].forEach(item=>{
|
||
item.value = _this.$util.fmoney(item.value)
|
||
})
|
||
}
|
||
}
|
||
this.modelProgress = result.BusinessTypeList
|
||
this.regionProgress = result.BusinessTradeList
|
||
this.areaProgress = result.SPRegionList
|
||
this.showTableData = result.RevenuePushModel
|
||
this.showTableData.compared = result.GrowthRate
|
||
this.todayAmount()
|
||
})
|
||
},
|
||
defaultMsg() {
|
||
let option = null
|
||
let _this = this
|
||
if (this.PushAuthority && this.PushAuthority.length > 1) {
|
||
option = this.PushAuthority.find(n => n.ProvinceCode === _this.ProvinceCode)
|
||
}else if(this.user.Membership_Id){
|
||
option = {GroupType: 1000,
|
||
ProvinceCode: 340000,
|
||
ServerpartIds: "",
|
||
ShopAnalysisType: 1}
|
||
}
|
||
else {
|
||
|
||
}
|
||
return {
|
||
...option
|
||
}
|
||
},
|
||
handleSelectTab(value){
|
||
this.selectTab = value
|
||
},
|
||
// 顶部的时间组件切换时间触发的方法
|
||
bindDateChange(e){
|
||
const date = new Date(e.detail.value).getTime()
|
||
this.single = timestampToTime(date)
|
||
this.lastDay = e.detail.value
|
||
this.thisDay = getThisDay(new Date(e.detail.value).getDay())
|
||
this.onRefresh()
|
||
},
|
||
//选择时间的点击事件
|
||
handleDateClick(){
|
||
// 用来修改对客营收的class属性
|
||
this.priceMove = false
|
||
},
|
||
showPie(obj) {
|
||
let data = {
|
||
series: []
|
||
}
|
||
const ctx = uni.createCanvasContext(obj.id, this);
|
||
data.series = data.series.concat(obj.data)
|
||
rincanvas[obj.id] = new uCharts({
|
||
// 小程序图表工具
|
||
// $this: this,
|
||
// canvasId: obj.id,
|
||
context: ctx,
|
||
color: obj.colors,
|
||
type: 'ring',
|
||
fontSize: 12,
|
||
padding: [15, 15, 25, 15],
|
||
legend: {
|
||
show: false,
|
||
padding: 5,
|
||
lineHeight: 11,
|
||
margin: 0,
|
||
},
|
||
background: '#FFFFFF',
|
||
pixelRatio: 1,
|
||
series: data.series,
|
||
animation: false,
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(510),
|
||
dataLabel: true,
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 40,
|
||
labelWidth: 16,
|
||
border: true,
|
||
borderWidth: 1,
|
||
|
||
borderColor: '#fff'
|
||
}
|
||
},
|
||
});
|
||
},
|
||
getBayonetData(data) {
|
||
var _data1 = [];
|
||
let _this = this
|
||
|
||
data.forEach((n, i) => {
|
||
var childData = [];
|
||
n.spList.forEach((m, i) => {
|
||
// 获取服务区各个方位的入区信息
|
||
var _list = [];
|
||
m.regionList.forEach((o, i) => {
|
||
_list.push({
|
||
name: o.name,
|
||
data: o.Vehicle_Count,
|
||
flow: o.SectionFlow_Count,
|
||
bili: o.SectionFlow_Count == 0 ? 100 : _this.$util.fmoney(
|
||
(o.Vehicle_Count / o.SectionFlow_Count) * 100, 2),
|
||
MinVehicle_Count: o.MinVehicle_Count,
|
||
MediumVehicle_Count: o.MediumVehicle_Count,
|
||
LargeVehicle_Count: o.LargeVehicle_Count
|
||
});
|
||
});
|
||
_list.sort(function(a, b) {
|
||
return b.bili - a.bili
|
||
})
|
||
|
||
childData.push({
|
||
name: m.name,
|
||
data: m.Vehicle_Count, //+Number(data2[n[0]])
|
||
flow: m.SectionFlow_Count,
|
||
bili: m.SectionFlow_Count == 0 ? 0 : _this.$util.fmoney(
|
||
(m.Vehicle_Count / m.SectionFlow_Count) * 100, 2),
|
||
list: _list
|
||
});
|
||
});
|
||
childData.sort(function(a, b) {
|
||
return b.bili - a.bili
|
||
})
|
||
|
||
_data1.push({
|
||
name: n.name,
|
||
index: n.index,
|
||
list: childData
|
||
});
|
||
});
|
||
_data1.sort(function(a, b) {
|
||
return a.index - b.index
|
||
})
|
||
|
||
return [_data1];
|
||
},
|
||
getProgressData(data, total) {
|
||
var _data1 = [];
|
||
var _data2 = [];
|
||
let _this = this
|
||
data.forEach((n, i) => {
|
||
|
||
_data1.push({
|
||
...n,
|
||
textColor: '#999',
|
||
formatter: function(arg) {
|
||
|
||
if (typeof arg === 'number') {
|
||
return [n.name, (arg * 100).toFixed(2) + '%']
|
||
} else {
|
||
return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
_data2.push({
|
||
name: n.name,
|
||
num: n.data,
|
||
data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
|
||
bili: _this.$util.fmoney((n.data / total) * 100, 2)
|
||
});
|
||
|
||
});
|
||
_data1.sort(function(a, b) {
|
||
return b.data - a.data
|
||
})
|
||
_data2.sort(function(a, b) {
|
||
return b.num - a.num
|
||
})
|
||
return [_data2, _data1];
|
||
},
|
||
async initData() { // 初始化营收数据
|
||
const data = {
|
||
pushProvinceCode:'340000',
|
||
Statistics_Date:this.lastDay
|
||
}
|
||
|
||
//获取服务区门店商家数量列表（根据省份、服务区、区域、统计日期查询）
|
||
const totalData = await request.$webGet('CommercialApi/BaseInfo/GetShopCountList',data)
|
||
console.log('totalData',totalData)
|
||
let all = 0
|
||
totalData.Result_Data.List.forEach(item=>{
|
||
all+=item.SHOP_REVENUECOUNT
|
||
})
|
||
this.allShopCount = all
|
||
|
||
//获取移动支付分账数据
|
||
const shareData = {
|
||
Province_Code: '340000',
|
||
Statistics_Date: this.lastDay,
|
||
ShowCompareRate: true
|
||
}
|
||
const mobileShareData = await request.$webGet('CommercialApi/Revenue/GetMobileShare',shareData)
|
||
this.mobileData = mobileShareData.Result_Data
|
||
|
||
|
||
//mobileData 是移动支付分账接口返回来的全部数据
|
||
this.detailTypeList[0].value = this.mobileData.ShareShop_Count
|
||
this.detailTypeList[0].add = this.mobileData.ShareShopGrowth_Count
|
||
this.detailTypeList[1].value = this.$util.fmoney(this.mobileData.MonthRoyalty_Price)
|
||
this.detailTypeList[1].yesterValue = this.$util.fmoney(this.mobileData.Royalty_Price) //返回数据可能有问题
|
||
// 让金额的动画效果出来
|
||
this.priceMove = true
|
||
//处理数据的方法
|
||
},
|
||
todayAmount() {
|
||
let _this = this
|
||
// 由于处理数据的时间 必须在全部接口请求完毕 所以加个延时器
|
||
setTimeout(()=>{
|
||
console.log('处理数据的方法')
|
||
// 由于页面大部分的内容采用渲染的格式 这样的方法是最快的对原数据进行赋值 对照data里面的几个主要的数组看就能看明白
|
||
// 门店上传的前后数字计算来决定样式
|
||
if(this.showTableData.Revenue_Upload >= this.allShopCount){
|
||
this.isBig = false
|
||
}else{
|
||
this.isBig = true
|
||
}
|
||
// 计算相对于昨日的增长率
|
||
// this.showTableData.compared = (((Number(this.showTableData.CashPay) - this.yesterdayAllPay) / this.yesterdayAllPay) * 100).toFixed(2)
|
||
// 客单均价
|
||
this.showTableData.averagePrice = (Number(this.showTableData.CashPay) / Number(this.showTableData.TicketCount)).toFixed(2)
|
||
// 商品均价
|
||
this.showTableData.countave = (Number(this.showTableData.CashPay) / Number(this.showTableData.TotalCount)).toFixed(2)
|
||
// 处理所有数据 变成有千分号和小数点的数据
|
||
for (let key in this.showTableData){
|
||
if (key==='uploadState' || key==='Revenue_Upload'){
|
||
this.showTableData[key] = this.showTableData[key]
|
||
}else if(key ==='TicketCount'){
|
||
this.showTableData[key] = this.$util.noDecimal(this.showTableData[key],0)
|
||
}else{
|
||
this.showTableData[key] = this.$util.fmoney(this.showTableData[key], 2)
|
||
}
|
||
}
|
||
uni.hideLoading()
|
||
_this.$forceUpdate()
|
||
})
|
||
},
|
||
getDetail(obj) {
|
||
let _this = this
|
||
this.$request.$webGet('CommercialApi/Revenue/GetServerpartEndAccountList', {
|
||
Serverpart_ID: obj.ServerpartIds,
|
||
pushProvinceCode: obj.ProvinceCode,
|
||
Statistics_Date: obj.time,
|
||
|
||
}).then(res => {
|
||
if (res.Result_Code != 100) return
|
||
res.Result_Data.ShopEndaccountList.map(n => {
|
||
n.show = false
|
||
n.detail = this.getListDetail(n)
|
||
})
|
||
|
||
_this.regionList = res.Result_Data.ShopEndaccountList
|
||
})
|
||
},
|
||
async getRankContent() { // 甘肃需要单品排行显示
|
||
const {
|
||
ProvinceCode,
|
||
time
|
||
} = this.theRequest
|
||
|
||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetWechatPushSalesList', {
|
||
pushProvinceCode: ProvinceCode,
|
||
Statistics_Date: time
|
||
})
|
||
|
||
if (data.Result_Code === 100 && data.Result_Data.TotalCount > 0) {
|
||
this.wechatPushSalesList = {}
|
||
data.Result_Data.List.forEach(n => {
|
||
this.wechatPushSalesList[n.Data_Type]= n.GoodsList
|
||
})
|
||
|
||
} else {
|
||
this.wechatPushSalesList = {}
|
||
}
|
||
this.$forceUpdate()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$iphoneHeight: env(safe-area-inset-bottom);
|
||
.main {
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
padding-bottom: calc(44px + env(safe-area-inset-bottom));
|
||
.header {
|
||
width: 100%;
|
||
height: 512px;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
position: relative;
|
||
.headerBg {
|
||
width: 100%;
|
||
height: 512px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
.headerTop{
|
||
width: 100%;
|
||
background: linear-gradient(315deg, #FFAF95 0%, #FFD6A6 100%);
|
||
position: fixed;
|
||
top: 0;left:0;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
z-index:9999999;
|
||
.selectTime {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
.dateIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 4px;
|
||
.day {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 44rpx;
|
||
margin-right: 4px;
|
||
}
|
||
.uni-input {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ae664e;
|
||
line-height: 36rpx;
|
||
}
|
||
.icon {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.other {
|
||
width: calc(100% - 32px);
|
||
position: absolute;
|
||
top: 104px;
|
||
.topTitle{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #782717;
|
||
line-height: 40rpx;
|
||
}
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 40rpx;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
@keyframes allPriceAnimation {
|
||
0%{
|
||
transform: translateY(30px);
|
||
}
|
||
100%{
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
.priceBox{
|
||
overflow: hidden;
|
||
.allPrice {
|
||
font-size: 56rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #782717;
|
||
line-height: 64rpx;
|
||
margin-top: 4px;
|
||
}
|
||
.allPriceMove{
|
||
animation: allPriceAnimation 2s;
|
||
}
|
||
}
|
||
.start {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.addBox {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
.arrowTop {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
}
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 40rpx;
|
||
margin-right: 4px;
|
||
}
|
||
.compare {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #c97e64;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.type {
|
||
width: 100%;
|
||
height: 45px;
|
||
margin-top: 24px;
|
||
.item {
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
float: left;
|
||
.leftImg {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 8px;
|
||
background: #fff;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.right {
|
||
.typeName {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 40rpx;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #c97a63;
|
||
line-height: 40rpx;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.price {
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #782717;
|
||
line-height: 44rpx;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.detail {
|
||
width: 100%;
|
||
height: 190px;
|
||
box-sizing: border-box;
|
||
padding: 16px 0;
|
||
background: linear-gradient(135deg, #fff2df 0%, #ffe3e5 100%);
|
||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||
border-radius: 8rpx;
|
||
margin-top: 24px;
|
||
margin-bottom: 16px;
|
||
.detailItem {
|
||
width: 33%;
|
||
box-sizing: border-box;
|
||
padding-left: 16px;
|
||
height: 42px;
|
||
text-align: left;
|
||
float: left;
|
||
margin-bottom: 16px;
|
||
.itemName {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
opacity: 0.8;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
.itemUnit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #c99f8f;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.price {
|
||
font-size: 16px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #782717;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.menu {
|
||
width: 100vw;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding-top: 16px;
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
top: -16px;
|
||
z-index: 1;
|
||
.topBg {
|
||
position: absolute;
|
||
width: 100vw;
|
||
height: 104px;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
}
|
||
.content {
|
||
padding: 0 16px;
|
||
margin: 0 auto;
|
||
z-index: 3;
|
||
.tabType{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.big {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
z-index: 10;
|
||
.img {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
.name {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.detailType{
|
||
width: 100%;
|
||
margin-top: 24px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
width: calc((100% - 8px) / 2);
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
background: #f9f6f6;
|
||
margin-bottom: 8px;
|
||
border-radius: 8px;
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.imgIcon {
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.otherBox{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.other {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
margin-left: 2px;
|
||
}
|
||
.month{
|
||
font-size: 24rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
.money {
|
||
font-size: 32rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
margin-top: 2px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.active {
|
||
display: flex;
|
||
align-items: center;
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
.add {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #fa5151;
|
||
line-height: 32rpx;
|
||
}
|
||
.yesterday {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item:nth-of-type(1),
|
||
.item:nth-of-type(3) {
|
||
margin-right: 8px;
|
||
}
|
||
.item:nth-of-type(3),
|
||
.item:nth-of-type(4) {
|
||
margin-bottom: 0px;
|
||
}
|
||
}
|
||
.propOfReven{
|
||
width: 100%;
|
||
margin-top: 28px;
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
margin-bottom: 12px;
|
||
}
|
||
.tabs {
|
||
width: 100%;
|
||
height: 38px;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
background: #f2f1f1;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.tabItem {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
padding: 5px 26px;
|
||
line-height: 40rpx;
|
||
}
|
||
.active {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
.chart {
|
||
width: 100%;
|
||
margin-top: 12px;
|
||
.operation-c-list{
|
||
width:100%;
|
||
margin-bottom: 12px;
|
||
.top{
|
||
width: 100%;
|
||
margin-bottom: 2px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
position: relative;
|
||
margin-right: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;left: 0;
|
||
}
|
||
text{
|
||
z-index:99;
|
||
font-size: 24rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.name{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.price{
|
||
font-size: 32rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.bottom{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.bar{
|
||
width: 70%;
|
||
height: 8px;
|
||
background: #F5F2F2;
|
||
border-radius: 5px;
|
||
position: relative;
|
||
.progress{
|
||
height: 100%;
|
||
background: #1777FF;
|
||
border-radius: 5px;
|
||
opacity: 0.9;
|
||
position: absolute;
|
||
top: 0;left: 0;
|
||
}
|
||
}
|
||
.number{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.thisMonth,.thisYear{
|
||
width: 100%;
|
||
margin-top: 28px;
|
||
padding-bottom: 28px;
|
||
.titleTop{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
.question{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.titleTopNotice{
|
||
position: absolute;
|
||
padding: 12px;
|
||
left:35%;
|
||
width: 50vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
|
||
}
|
||
.meng{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;left: 0;
|
||
}
|
||
}
|
||
.box {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background: #f5f2f2;
|
||
margin-top: 12px;
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
.big {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
.text {
|
||
width: calc(100% - 60px);
|
||
padding: 2px 0;
|
||
.textTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.number {
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #150002;
|
||
line-height: 40rpx;
|
||
}
|
||
.desc{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: #FF7043;
|
||
.success{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.comparePlan{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.box2{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.progressPlan{
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.trans{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||
}
|
||
.transYear{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||
}
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index:1;
|
||
//}
|
||
//.pro{
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;right: 0;
|
||
// background: #fff;
|
||
// z-index:2;
|
||
//}
|
||
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
margin-top: 16px;
|
||
padding-left: 48px;
|
||
.success {
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
.money {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.notice{
|
||
position: fixed;
|
||
bottom: 120px;
|
||
left: 5%;
|
||
width: 90%;
|
||
padding: 10px 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 10px;
|
||
z-index:999999;
|
||
background: #2c71f9;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
.icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
}
|
||
.text {
|
||
margin-left: 8px;
|
||
.name {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
.desc {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #B5CDFC;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
border: 1px solid #fff;
|
||
padding: 2px 6px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
border-radius: 11px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|