1655 lines
54 KiB
Vue
1655 lines
54 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" @change="bindDateChange" >
|
|
<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':''}">{{showHeadMsg.uploadState?showHeadMsg.uploadState:''}}</text></span>
|
|
</view>
|
|
<view class="box" @click="handlePage">
|
|
<p class="allPrice">{{showHeadMsg.totalMoneyShow|| '0.00'}}</p>
|
|
<image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
|
|
</view>
|
|
<view class="addBox">
|
|
<image class="arrowTop" :src="Number(showHeadMsg.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">{{showHeadMsg.compared?showHeadMsg.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/business.svg"></image>
|
|
</view>
|
|
<view class="right">
|
|
<p class="typeName">客单交易<text class="unit">/笔</text></p>
|
|
<p class="price">{{showHeadMsg.ticketCount || 0}}</p>
|
|
</view>
|
|
</view>
|
|
|
|
<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">{{showHeadMsg.averagePrice || '0.00'}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail">
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
长款金额<text class="itemUnit">/元</text>
|
|
</p>
|
|
<p class="price">{{ showHeadMsg.diffMorePrice }}</p>
|
|
</view>
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
短款金额<text class="itemUnit">/元</text>
|
|
</p>
|
|
<p class="price">{{ showHeadMsg.diffLessPrice }}</p>
|
|
</view>
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
优惠金额<text class="itemUnit">/元</text>
|
|
</p>
|
|
<p class="price">{{showHeadMsg.totalOffAmount }}</p>
|
|
</view>
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
移动支付<text class="itemUnit">/元</text>
|
|
</p>
|
|
<p class="price">{{showHeadMsg.mobilePayment }}</p>
|
|
</view>
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
商品出售<text class="itemUnit">/件</text>
|
|
</p>
|
|
<p class="price">{{ showHeadMsg.totalCount }}</p>
|
|
</view>
|
|
<view class="detailItem">
|
|
<p class="itemName">
|
|
商品均价<text class="itemUnit">/元</text>
|
|
</p>
|
|
<p class="price">{{ showHeadMsg.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">
|
|
<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">{{ item.value }}</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">{{ item.add }}</text>
|
|
<text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>
|
|
</view>
|
|
<view v-else class="other">本月累计</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.data}}</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bar">
|
|
<div class="progress" :style="{width:item.bili+'%'}"></div>
|
|
</div>
|
|
<p class="number">{{item.bili+'%'}}</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.data}}</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bar">
|
|
<div class="progress" :style="{width:item.bili+'%'}"></div>
|
|
</div>
|
|
<p class="number">{{item.bili+'%'}}</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.data}}</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bar">
|
|
<div class="progress" :style="{width:item.bili+'%'}"></div>
|
|
</div>
|
|
<p class="number">{{item.bili+'%'}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</div>
|
|
|
|
<div class="thisMonth">
|
|
<p class="title">本月计划</p>
|
|
<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">
|
|
<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>
|
|
<div class="progess">
|
|
<image class="img" :style="{width: plan.percentageMonth + '%'}" 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}}</p>
|
|
</view>
|
|
<view class="success">
|
|
<p class="text">本月计划<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.BudgetMonth_Amount}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
<div class="thisYear" style="margin-top: 0px">
|
|
<p class="title">年度计划</p>
|
|
<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">
|
|
<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>
|
|
<div class="progess">
|
|
<image class="img" :style="{width: plan.percentageMonth + '%'}" 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}}</p>
|
|
</view>
|
|
<view class="success">
|
|
<p class="text">年度计划<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.BudgetYear_Amount}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<div class="notice" v-if="isShow">
|
|
<view class="left">
|
|
<image class="icon" src="/static/images/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:'',
|
|
shopUpload:'',
|
|
page:'/pages/index/index',
|
|
menu:'',
|
|
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: '/static/images/index/car.svg', path: '', name: '车流画像' },
|
|
{ imgUrl: '/static/images/index/guest.svg', path: '', name: '客群画像' },
|
|
{ imgUrl: '/static/images/index/business_icon.svg', path: '', name: '经营画像' },
|
|
{ imgUrl: '/static/images/index/trade.svg', path: '', name: '交易画像' },
|
|
{ imgUrl: '/static/images/index/brand.svg', path: '', name: '业态品牌' },],
|
|
detailTypeList:[{ name: '分润门店', unit: '/个', value: '', add: '', imgIcon: '/static/images/index/store.svg' },
|
|
{ name: '驿达分润', unit: '/元', value: '', imgIcon: '/static/images/index/yidaFenrun.svg' },
|
|
{ name: '订单配送', unit: '/单', value: '', add: '', imgIcon: '/static/images/index/orderDelivery.svg' },
|
|
{ name: '采购金额', unit: '/元', value: '', imgIcon: '/static/images/index/purchaseAmount.svg' },],
|
|
propOfRevenList:[ { name: '经营模式', value: 1 },
|
|
{ name: '经营业态', value: 2 },
|
|
{ name: '区域经营', value: 3 }],
|
|
selectTab:1,
|
|
single:timestampToTime((new Date(lastDay).getTime())),
|
|
thisDay:'',
|
|
isBig:false,//判断门店上传的前一个数字是否比后一个数字大
|
|
showPage: false,
|
|
opacity: 0, // 背景颜色透明度
|
|
customBarH: this.CustomBar,
|
|
statusBarH: this.StatusBar,
|
|
isLoading: true,
|
|
theRequest: null,
|
|
sevenDate: null,
|
|
lastDay: lastDay, // 该页面的最近有效日期
|
|
nowDay: nowDay,
|
|
headMsg: {},
|
|
showHeadMsg:{},//不变成字符串的headMsg
|
|
today: null, // 今日数据
|
|
regionList: null,
|
|
nowTab: 1,
|
|
carInfo:{},//车流信息
|
|
regionShow1: true,
|
|
regionProgress: null,
|
|
tradeType: null,
|
|
areaProgress: null,
|
|
bayonetProgress: null,
|
|
modelProgress: null,
|
|
isup: true,
|
|
monthPrice:0,//月度累计分润
|
|
yesterdayBillCount:0,//昨日累计配送
|
|
lastDayBillCount:0,//当前日的配送
|
|
buyPriceMonth:0,//月度的采购金额
|
|
totalData:null,
|
|
isInOnLoad:false,
|
|
isShow:false, //投诉建议是否显示
|
|
isShowTitle:0,//投诉建议条数
|
|
plan:{},//月度和年度接口的返回参数 一起的
|
|
ShareShopCountYes:0,//昨日的店铺数
|
|
yesterdayAllPay:0,//前一天的营收总额
|
|
nowDayAllPay:0,//今日营收总额
|
|
wechatPushSalesList: null // 甘肃单品排行数据
|
|
}
|
|
},
|
|
watch:{
|
|
user:{
|
|
handler:function (value){
|
|
console.log('监听user',value)
|
|
this.getData({})
|
|
},
|
|
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){ // 拿到手机参数
|
|
// if (!this.user.Membership_Id){
|
|
// uni.login({ // 登录
|
|
// async success (res) {
|
|
// console.log('re111s',res)
|
|
// await this.memberLogin(res.code)
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
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']
|
|
}
|
|
}
|
|
console.log(1111)
|
|
this.getData(option)
|
|
// if (!this.user.Membership_Id){
|
|
// this.getLoginCode().then(()=>{
|
|
// debugger
|
|
// this.getData(option)
|
|
// })
|
|
// }else {
|
|
// this.getData(option)
|
|
// }
|
|
},
|
|
onShow(){
|
|
// if (this.user.Membership_Id && !this.isInOnLoad){
|
|
// this.onRefresh()
|
|
// }
|
|
uni.hideTabBar()
|
|
},
|
|
onHide(){
|
|
this.isShow = false
|
|
},
|
|
methods:{
|
|
...mapActions(['memberLogin','getLoginCode']),
|
|
handlePage(){
|
|
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/index')
|
|
},
|
|
getData(option){
|
|
//老代码
|
|
if (this.user.Membership_Id){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
this.isInOnLoad=true
|
|
}
|
|
console.log('this.user.Membership_Id',this.user.Membership_Id)
|
|
console.log(2222)
|
|
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.initData()
|
|
this.initYesterdayData()
|
|
//车流分析
|
|
this.getCarInfo()
|
|
//月度计划、年度计划
|
|
this.monthYearPlan()
|
|
} else if (this.user.Membership_Id){ // 默认
|
|
// if (!this.PushAuthority){return}
|
|
// if (this.PushAuthority.length > 0) {
|
|
this.theRequest = this.defaultMsg() || {}
|
|
this.theRequest.time = this.lastDay
|
|
this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
|
|
this.initData(true)
|
|
this.initYesterdayData()
|
|
//车流分析
|
|
this.getCarInfo()
|
|
//月度计划、年度计划
|
|
this.monthYearPlan()
|
|
|
|
// this.bindDateChange(this.lastDay)
|
|
// } else {
|
|
// uni.hideLoading()
|
|
// this.theRequest = null
|
|
// this.isLoading = false
|
|
// this.showPage = false
|
|
// this.opacity = 1
|
|
//
|
|
// }
|
|
}
|
|
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(){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
console.log('this.PushAuthority',this.PushAuthority)
|
|
// if (!this.PushAuthority){return}
|
|
|
|
// if (this.PushAuthority.length > 0) {
|
|
this.theRequest = this.defaultMsg() || {}
|
|
this.theRequest.time = this.lastDay
|
|
this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
|
|
this.initData()
|
|
this.initYesterdayData()
|
|
// } else {
|
|
// uni.hideLoading()
|
|
// this.theRequest = null
|
|
// this.isLoading = false
|
|
// this.showPage = false
|
|
// this.opacity = 1
|
|
// }
|
|
//车流分析
|
|
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()
|
|
}
|
|
},
|
|
monthYearPlan(){
|
|
const monthDate= {
|
|
Province_Code:'340000',
|
|
Statistics_Date:this.lastDay
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
|
|
this.plan = res.Result_Data
|
|
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
|
|
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
|
|
|
|
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=>{
|
|
this.carInfo = res.Result_Data
|
|
this.carInfo.Vehicle_Count = res.Result_Data.Vehicle_Count
|
|
})
|
|
},
|
|
initYesterdayData(){
|
|
let _this = this
|
|
let yesterday = handleYesterday(this.lastDay)
|
|
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
|
|
})
|
|
_this.yesterdayAllPay = cashPay
|
|
})
|
|
//昨日的分润门店
|
|
request.$webGet('CommercialApi/Revenue/GetMobileShare',data).then(res=>{
|
|
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=>{
|
|
this.monthPrice = res.Result_Data.Royalty_Price
|
|
})
|
|
|
|
//这一日的订单配送
|
|
const todayData = {
|
|
Province_Code:'340000',
|
|
Statistics_Date: this.lastDay
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetMallDeliver',todayData).then(res=>{
|
|
this.lastDayBillCount = res.Result_Data.DeliverBill_Count
|
|
})
|
|
|
|
//昨日的订单配送
|
|
const deliveData = {
|
|
Province_Code:'340000',
|
|
Statistics_Date: yesterday
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetMallDeliver',deliveData).then(res=>{
|
|
this.yesterdayBillCount = res.Result_Data.DeliverBill_Count
|
|
})
|
|
|
|
//一个月的采购金额
|
|
const buyPrice = {
|
|
Province_Code:'340000',
|
|
StatisticsStartDate:`${y}-${m}-01`,
|
|
StatisticsEndDate:this.lastDay
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPrice).then(res=>{
|
|
this.buyPriceMonth = res.Result_Data.Deliver_Price
|
|
})
|
|
},
|
|
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()
|
|
},
|
|
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(value) { // 初始化营收数据
|
|
let _this = this
|
|
const [reginList, totalData, busniessTypePie, busniessTradePie, busniessAreaPie, bayonetPie] =
|
|
await anhuiYestodayRevenueData.getData(this.theRequest,null,value) // 获取实时数据
|
|
this.nowDayAllPay=totalData.cashPay
|
|
console.log('totalData',totalData)
|
|
|
|
|
|
// yesterdayRequest.time = yesterday
|
|
// //获取昨日的实时数据
|
|
// const [yesterdayReginList, yesterdayTotalData, yesterdayBusniessTypePie, yesterdayBusniessTradePie, yesterdayBusniessAreaPie, yesterdayBayonetPie] =
|
|
// await anhuiYestodayRevenueData.getData(yesterdayRequest) // 获取实时数据
|
|
// console.log('totalData',totalData)
|
|
// console.log('yesterdayTotalData',yesterdayTotalData)
|
|
|
|
if (this.theRequest.GroupType !== 1010) {
|
|
this.regionList = reginList // 营收上传列表 reginListModel[]
|
|
}
|
|
// 组合及格式化 头部卡片总营收数据。
|
|
totalData.tickave = totalData.ticketCount > 0 ? this.$util.fmoney(
|
|
totalData.cashPay / totalData.ticketCount, 2) : 0
|
|
totalData.countave = totalData.totalCount > 0 ? this.$util.fmoney(
|
|
totalData.cashPay / totalData.totalCount, 2) : 0
|
|
totalData.totalMoneyShow = this.$util.fmoney(totalData.cashPay) // 营收总数据格式化
|
|
totalData.dayOfShow = this.$util.cutDate(this.theRequest.time, 'MM月DD日') // 当前日期
|
|
totalData.budgetamoutShow = totalData.budgetAmount ?
|
|
_this.$util.fmoney(totalData.budgetAmount) : 0.00 // 预算总营收
|
|
|
|
busniessTypePie.forEach((n, i) => {
|
|
if (n.name === '自营') {
|
|
// 预算和实际差额
|
|
totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - n.data)
|
|
// 预算和实际增长额比例
|
|
totalData.diffBili = totalData.budgetAmount > 0 ?
|
|
this.$util.fmoney((totalData.diffBudgetTotal /
|
|
totalData.budgetAmount) * 100, 2) : '100'
|
|
}
|
|
});
|
|
this.headMsg = totalData
|
|
console.log('this.headMsginitData',this.headMsg)
|
|
// 饼图分析及数据条形分析
|
|
const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
|
|
this.modelProgress = progressList
|
|
// 经营类型分析
|
|
var colors1 = ['#FFAC37', '#6B75B8'];
|
|
// console.log(pieList)
|
|
this.showPie({
|
|
id: 'modelCont',
|
|
data: pieList,
|
|
colors: colors1,
|
|
});
|
|
// 经营业态
|
|
|
|
// 饼图分析及数据条形分析
|
|
const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)
|
|
|
|
this.regionProgress = tprogressList
|
|
// 经营类型分析
|
|
var colors2 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
|
|
this.showPie({
|
|
id: 'businessCont',
|
|
data: tpieList,
|
|
colors: colors2,
|
|
});
|
|
|
|
// 饼图分析及数据条形分析
|
|
const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
|
|
this.areaProgress = aprogressList
|
|
// 区域营收分析
|
|
var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6'];
|
|
this.showPie({
|
|
id: 'areaCont',
|
|
data: apieList,
|
|
colors: colors3,
|
|
});
|
|
|
|
// 安徽省本级显示的内容
|
|
if (this.theRequest.GroupType == 1000 && this.theRequest.ProvinceCode == 340000) {
|
|
// 显示片区车流量数据分析
|
|
const [bayonetList] = this.getBayonetData(bayonetPie)
|
|
this.bayonetProgress = bayonetList
|
|
}
|
|
|
|
if (reginList.length) {
|
|
this.showPage = true
|
|
}
|
|
this.isLoading = false
|
|
this.todayAmount()
|
|
this.isInOnLoad = true
|
|
uni.hideLoading()
|
|
},
|
|
todayAmount() {
|
|
let _this = this
|
|
// let theRequest = this.theRequest
|
|
//最近日
|
|
// this.$request.$get('getCurRevenue', {
|
|
// pushProvinceCode: theRequest.ProvinceCode,
|
|
// serverPartId: theRequest.GroupType == 1000 ? '' : theRequest.ServerpartIds
|
|
// }).then(res => {
|
|
// if (res.ResultCode != 100) return
|
|
//
|
|
// let avrticket = (res.Data.TOTALTICKET != 0 && res.Data.TOTALPRICE != 0) ? res.Data.TOTALPRICE /
|
|
// res.Data
|
|
// .TOTALTICKET : 0
|
|
// _this.today = {
|
|
// timeMoney: this.$util.fmoney(res.Data.TOTALPRICE, 2),
|
|
// totalTicketCount: res.Data.TOTALTICKET,
|
|
// avrticketCount: this.$util.fmoney(avrticket, 2),
|
|
// }
|
|
// _this.$forceUpdate()
|
|
// })
|
|
//分润门店
|
|
this.detailTypeList[0].value =this.headMsg.shareShopCount
|
|
//驿达分润 由于数据现成 这样写最方便
|
|
this.detailTypeList[1].value = this.$util.fmoney(this.monthPrice)
|
|
this.detailTypeList[0].add = this.headMsg.shareShopCount - this.ShareShopCountYes
|
|
this.detailTypeList[3].value = this.$util.fmoney(this.buyPriceMonth)
|
|
this.detailTypeList[2].value = this.lastDayBillCount
|
|
this.detailTypeList[2].add = this.lastDayBillCount - this.yesterdayBillCount
|
|
this.showHeadMsg = this.headMsg
|
|
this.showHeadMsg.averagePrice = Number(this.nowDayAllPay) / Number(this.headMsg.ticketCount)
|
|
this.showHeadMsg.compared = ((Number(this.nowDayAllPay) - this.yesterdayAllPay) / this.yesterdayAllPay) * 100
|
|
for (let i in this.showHeadMsg) {
|
|
if (i === 'ticketCount' || i === 'uploadState'){
|
|
this.showHeadMsg[i] = this.showHeadMsg[i]
|
|
}else{
|
|
this.showHeadMsg[i] = this.$util.fmoney(this.showHeadMsg[i], 2)
|
|
}
|
|
}
|
|
|
|
let index = this.showHeadMsg.uploadState.indexOf('/')
|
|
let first = this.showHeadMsg.uploadState.slice(0,index)
|
|
let second = this.showHeadMsg.uploadState.slice(index+1,1000)
|
|
if (Number(first)-Number(second)<0){
|
|
this.isBig = true
|
|
}
|
|
_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;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
.allPrice {
|
|
font-size: 56rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #782717;
|
|
line-height: 64rpx;
|
|
margin-top: 4px;
|
|
}
|
|
.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;
|
|
}
|
|
.other {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #a69e9f;
|
|
line-height: 36rpx;
|
|
margin-left: 2px;
|
|
}
|
|
.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;
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 44rpx;
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
background: #f5f2f2;
|
|
margin-top: 12px;
|
|
.top {
|
|
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 {
|
|
flex: 1;
|
|
padding: 2px 0;
|
|
.textTop{
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.progess{
|
|
width: 100%;
|
|
height: 8px;
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.pro{
|
|
position: absolute;
|
|
right: 0;
|
|
height: 8px;
|
|
background: #fff;
|
|
}
|
|
.img{
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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: PingFangSC-Semibold, PingFang SC;
|
|
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>
|