429 lines
14 KiB
Vue
429 lines
14 KiB
Vue
<template>
|
||
<view class="hm-p-lr-20">
|
||
<view class="title">门店统计</view>
|
||
<view class="hm-p-b-20 hm-bg-f">
|
||
<view class="card card__violet">
|
||
<div class="card-body">
|
||
<div class="card-description">商品总量</div>
|
||
<div class="card-value"></div>
|
||
<div class="card-header">{{count.goods}}</div>
|
||
<div class="card-description">当前商品总数量</div>
|
||
</div>
|
||
<view class="card-icon">
|
||
<u-icon name="gift" size="40" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="card card__blue">
|
||
<div class="card-body">
|
||
<div class="card-description">用户总量</div>
|
||
<div class="card-value"></div>
|
||
<div class="card-header">{{count.user.all.all}}</div>
|
||
<div class="card-description">当前用户总数量</div>
|
||
</div>
|
||
<view class="card-icon">
|
||
<u-icon name="account" size="40" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="card card__red">
|
||
<div class="card-body">
|
||
<div class="card-description">订单总量</div>
|
||
<div class="card-value"></div>
|
||
<div class="card-header">{{count.order.all.all}}</div>
|
||
<div class="card-description">当前订单总数量</div>
|
||
</div>
|
||
<view class="card-icon">
|
||
<u-icon name="order" size="40" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="card card__primary">
|
||
<div class="card-body">
|
||
<div class="card-description">好评总量</div>
|
||
<div class="card-value"></div>
|
||
<div class="card-header">{{count.comment.all}}</div>
|
||
<div class="card-description">当前好评总数量</div>
|
||
</div>
|
||
<view class="card-icon">
|
||
<u-icon name="heart" size="40" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">订单统计</view>
|
||
<view class="hm-p-b-20 hm-bg-f">
|
||
<view class="card-box">
|
||
<view>堂食订单 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text :class="count.order.today.tang > 0?'hm-col-error hm-font-b':''">{{count.order.today.tang}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text :class="count.order.today2.tang > 0?'hm-col-error hm-font-b':''">{{count.order.today2.tang}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月；<text :class="count.order.month.tang > 0?'hm-col-error hm-font-b':''">{{count.order.month.tang}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text :class="count.order.month2.tang > 0?'hm-col-error hm-font-b':''">{{count.order.month2.tang}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>自取订单 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text :class="count.order.today.qu > 0?'hm-col-error hm-font-b':''">{{count.order.today.qu}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text :class="count.order.today2.qu > 0?'hm-col-error hm-font-b':''">{{count.order.today2.qu}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text :class="count.order.month.qu > 0?'hm-col-error hm-font-b':''">{{count.order.month.qu}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text :class="count.order.month2.qu > 0?'hm-col-error hm-font-b':''">{{count.order.month2.qu}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>外卖订单 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text :class="count.order.today.wai > 0?'hm-col-error hm-font-b':''">{{count.order.today.wai}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text :class="count.order.today2.wai > 0?'hm-col-error hm-font-b':''">{{count.order.today2.wai}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text :class="count.order.month.wai > 0?'hm-col-error hm-font-b':''">{{count.order.month.wai}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text :class="count.order.month2.wai > 0?'hm-col-error hm-font-b':''">{{count.order.month2.wai}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>退款订单 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text :class="count.order.today.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.order.today2.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today2.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text :class="count.order.month.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.order.month2.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month2.refund}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>预约订桌 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text :class="count.pact.today > 0?'hm-col-error hm-font-b':''">{{count.pact.today}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text :class="count.pact.today2 > 0?'hm-col-error hm-font-b':''">{{count.pact.today2}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text :class="count.pact.month > 0?'hm-col-error hm-font-b':''">{{count.pact.month}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text :class="count.pact.month2 > 0?'hm-col-error hm-font-b':''">{{count.pact.month2}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">交易统计</view>
|
||
<view class="hm-p-b-20 hm-bg-f">
|
||
<view class="card-box">
|
||
<view>订单金额 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text
|
||
:class="count.order.today.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.order}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.order.today2.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.order}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text
|
||
:class="count.order.month.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.order}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.order.month2.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.order}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>退款金额 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text
|
||
:class="count.order.today.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.order.today2.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text
|
||
:class="count.order.month.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.refund}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.order.month2.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.refund}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>优惠金额</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text
|
||
:class="count.order.today.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.activity}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.order.today2.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.activity}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text
|
||
:class="count.order.month.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.activity}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.order.month2.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.activity}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>充值金额 </view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text
|
||
:class="count.record['today']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['today']['10']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.record['today2']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['today2']['10']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text
|
||
:class="count.record['month']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['month']['10']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.record['month2']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['month2']['10']}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-box">
|
||
<view>赠送金额</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
今天：<text
|
||
:class="count.record['today']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['today']['40']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
昨天：<text
|
||
:class="count.record['today2']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['today2']['40']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
本月：<text
|
||
:class="count.record['month']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['month']['40']}}</text>
|
||
</view>
|
||
<view class="hm-font-22 hm-col-tips">
|
||
上月：<text
|
||
:class="count.record['month2']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['month2']['40']}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">七日走势</view>
|
||
<view class="canvas7">
|
||
<canvas canvas-id="areaCanvas"></canvas>
|
||
</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let App = getApp();
|
||
import wxCharts from '@/utils/wxcharts.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
count: [],
|
||
applet: {}
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
async onLoad(opt) {
|
||
let _this = this;
|
||
//等待onLaunch执行完毕
|
||
await _this.$onLaunched;
|
||
_this.applet = App.getApplet();
|
||
App.setTitle();
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onShow: function() {
|
||
let _this = this;
|
||
_this.getCount(); //获取统计数据
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 获取首页数据
|
||
*/
|
||
getCount: function() {
|
||
let _this = this;
|
||
|
||
App._get('index/getCount', {}, function(result) {
|
||
let count = result.data.count;
|
||
_this.count = result.data.count;
|
||
//前天
|
||
let day4 = new Date();
|
||
day4.setTime(day4.getTime() - 3 * 24 * 60 * 60 * 1000);
|
||
let d4 = day4.getMonth() + 1 + "月" + day4.getDate() + "日"; //前天
|
||
|
||
let day5 = new Date();
|
||
day5.setTime(day5.getTime() - 4 * 24 * 60 * 60 * 1000);
|
||
let d5 = day5.getMonth() + 1 + "月" + day5.getDate() + "日"; //前天
|
||
|
||
let day6 = new Date();
|
||
day6.setTime(day6.getTime() - 5 * 24 * 60 * 60 * 1000);
|
||
let d6 = day6.getMonth() + 1 + "月" + day6.getDate() + "日"; //前天
|
||
|
||
let day7 = new Date();
|
||
day7.setTime(day7.getTime() - 6 * 24 * 60 * 60 * 1000);
|
||
let d7 = day7.getMonth() + 1 + "月" + day7.getDate() + "日";
|
||
|
||
new wxCharts({
|
||
canvasId: 'areaCanvas',
|
||
type: 'area',
|
||
categories: ['今天', '昨天', '前天', d4, d5, d6, d7],
|
||
series: [{
|
||
name: '订单量',
|
||
data: [count.order['today']['all'], count.order['today2']['all'],
|
||
count
|
||
.order['today3']['all'], count.order['today4']['all'],
|
||
count.order['today5']['all'], count.order['today6']['all'],
|
||
count.order['today7']['all']
|
||
],
|
||
format: function(val) {
|
||
return val;
|
||
}
|
||
}, {
|
||
name: '成交额',
|
||
data: [count.order.today.money.order,
|
||
count.order.today2.money.order,
|
||
count.order.today3.money.order, count.order.today4.money.order,
|
||
count.order.today5.money.order, count.order.today6.money.order,
|
||
count.order.today7.money.order
|
||
],
|
||
format: function(val) {
|
||
return val;
|
||
}
|
||
}],
|
||
yAxis: {
|
||
format: function(val) {
|
||
return val;
|
||
}
|
||
},
|
||
width: 397,
|
||
height: 200
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.title {
|
||
padding: 20rpx 0;
|
||
font-size: 30rpx;
|
||
font-weight: 900;
|
||
color: #000;
|
||
}
|
||
|
||
.canvas7 {
|
||
padding: 20rpx 20rpx 20rpx 0rpx;
|
||
background-color: #FFF;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.canvas7 canvas {
|
||
width: 100%;
|
||
height: 350rpx;
|
||
}
|
||
|
||
|
||
/*下面是管理页面*/
|
||
.card {
|
||
display: inline-block;
|
||
width: 40%;
|
||
margin: 20rpx 0rpx 0rpx 20rpx;
|
||
height: 150rpx;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
|
||
}
|
||
|
||
.card.card__blue {
|
||
background: linear-gradient(-125deg, #57bdbf, #2f9de2);
|
||
}
|
||
|
||
.card.card__red {
|
||
background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
|
||
}
|
||
|
||
.card.card__violet {
|
||
background: linear-gradient(-113deg, #c543d8, #925cc3);
|
||
}
|
||
|
||
.card.card__primary {
|
||
background: linear-gradient(-141deg, #ecca1b, #f39526);
|
||
}
|
||
|
||
.card-box {
|
||
width: 23.5%;
|
||
margin: 20rpx 0 0 20rpx;
|
||
padding: 20rpx;
|
||
display: inline-block;
|
||
border-radius: 10rpx;
|
||
background-color: #ecf5ff;
|
||
border: 1rpx solid #a0cfff;
|
||
box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
|
||
}
|
||
|
||
.card-header {
|
||
position: relative;
|
||
display: block;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
text-transform: uppercase;
|
||
line-height: 50rpx;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.card-value {
|
||
position: relative;
|
||
font-weight: bold;
|
||
display: block;
|
||
color: #fff;
|
||
font-size: 50rpx;
|
||
line-height: 85rpx;
|
||
}
|
||
|
||
.card-description {
|
||
position: relative;
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.card-icon {
|
||
float: right;
|
||
margin-top: -120rpx;
|
||
}
|
||
</style>
|