|
|
<template>
|
|
|
<view>
|
|
|
|
|
|
<topnav title="统计报表" @tohome='tohome'></topnav>
|
|
|
<view class="content">
|
|
|
|
|
|
<block v-for="(item,index) in info">
|
|
|
<view>
|
|
|
<view class="indexbox">
|
|
|
<boxtitle :title="item.name">
|
|
|
<text>{{item.data.recharge==null?0:item.data.recharge.total}}</text>
|
|
|
</boxtitle>
|
|
|
<view class="statBox" @click="toinfo(item,'recharge')">
|
|
|
<view class="statItem" style="width: 33.33%;" v-for="(mod,idx) in getRechargeItems(item.data.recharge)" :key="'recharge-'+idx">
|
|
|
<view class="statItemHeader ">
|
|
|
<view class="statItemCBar" :class="mod.barClass"></view>
|
|
|
<text class="statItemTitele">{{mod.label}}</text>
|
|
|
</view>
|
|
|
<view class="statNum mf-26">{{mod.value}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<boxtitle title="退款">
|
|
|
<text style="color: crimson;">{{item.data.refund}}</text>
|
|
|
</boxtitle>
|
|
|
<view class="statBox" @click="toinfo(item,'refund')">
|
|
|
<view class="statItem" style="width: 33.33%;" v-for="(mod,idx) in getRefundItems(item.data.refund_by_methods)" :key="'refund-'+idx">
|
|
|
<view class="statItemHeader ">
|
|
|
<view class="statItemCBar" :class="mod.barClass"></view>
|
|
|
<text class="statItemTitele">{{mod.label}}</text>
|
|
|
</view>
|
|
|
<view class="statNum mf-26">{{mod.value}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<boxtitle title="交账">
|
|
|
<text style="color: blue;">{{item.data.budget.total}}</text>
|
|
|
</boxtitle>
|
|
|
<view class="statBox">
|
|
|
<view class="statItem" style="width: 33.33%;" v-for="(mod,idx) in getBudgetItems(item.data.budget)" :key="'budget-'+idx">
|
|
|
<view class="statItemHeader ">
|
|
|
<view class="statItemCBar" :class="mod.barClass"></view>
|
|
|
<text class="statItemTitele">{{mod.label}}</text>
|
|
|
</view>
|
|
|
<view class="statNum mf-26">{{mod.value}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class="lCircle lc_1"></view>
|
|
|
<view class="lCircle lc_2"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<view class="btnBgWhite" @tap="backhome">
|
|
|
<text>返回首页</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
var util = require("../../../../utils/util.js");
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
info: [{
|
|
|
"type": "today",
|
|
|
"name": "今日营收",
|
|
|
"data": {}
|
|
|
}, {
|
|
|
"type": "yesterday",
|
|
|
"name": "昨日营收",
|
|
|
"data": {}
|
|
|
}, {
|
|
|
"type": "this_week",
|
|
|
"name": "本周营收",
|
|
|
"data": {}
|
|
|
}, {
|
|
|
"type": "this_month",
|
|
|
"name": "本月营收",
|
|
|
"data": {}
|
|
|
}]
|
|
|
}
|
|
|
},
|
|
|
onShow: function() {
|
|
|
var that = this;
|
|
|
var i = 0;
|
|
|
for (var m of that.info) {
|
|
|
that.loadData(m.type, i,
|
|
|
function(r, i) {
|
|
|
console.log(r.recharge)
|
|
|
|
|
|
|
|
|
r.refund_by_methods = r.refund_by_methods || {};
|
|
|
r.recharge = r.recharge || {};
|
|
|
r.refund_by_methods.online = that.num(r.refund_by_methods.weixin) + that.num(r.refund_by_methods.alipay);
|
|
|
|
|
|
that.info[i].data = r;
|
|
|
|
|
|
that.info[i].data.budget = {
|
|
|
|
|
|
total: r.recharge.total - r.refund,
|
|
|
|
|
|
cash: that.num(r.recharge.cash) - that.num(r.refund_by_methods.cash),
|
|
|
weixin: that.num(r.recharge.weixin) - that.num(r.refund_by_methods.weixin),
|
|
|
alipay: that.num(r.recharge.alipay) - that.num(r.refund_by_methods.alipay),
|
|
|
pos: that.num(r.recharge.pos) - that.num(r.refund_by_methods.pos),
|
|
|
offline_pos: that.num(r.recharge.offline_pos) - that.num(r.refund_by_methods.offline_pos),
|
|
|
offline_qrcode: that.num(r.recharge.offline_qrcode) - that.num(r.refund_by_methods.offline_qrcode),
|
|
|
transfer: that.num(r.recharge.transfer) - that.num(r.refund_by_methods.transfer),
|
|
|
offline_cash: that.num(r.recharge.offline_cash) - that.num(r.refund_by_methods.offline_cash)
|
|
|
};
|
|
|
})
|
|
|
i++;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
num: function(v) {
|
|
|
return parseFloat(v || 0);
|
|
|
},
|
|
|
getRechargeOfflineTotal: function(recharge) {
|
|
|
recharge = recharge || {};
|
|
|
return this.num(recharge.pos) + this.num(recharge.transfer) + this.num(recharge.offline_pos) + this
|
|
|
.num(recharge.offline_qrcode) + this.num(recharge.offline_cash);
|
|
|
},
|
|
|
getRefundOfflineTotal: function(refundByMethods) {
|
|
|
refundByMethods = refundByMethods || {};
|
|
|
return this.num(refundByMethods.pos) + this.num(refundByMethods.transfer) + this.num(
|
|
|
refundByMethods.offline_pos) + this.num(refundByMethods.offline_qrcode) + this.num(
|
|
|
refundByMethods.offline_cash);
|
|
|
},
|
|
|
getRechargeItems: function(recharge) {
|
|
|
recharge = recharge || {};
|
|
|
return [{
|
|
|
label: "现金（元）",
|
|
|
value: this.num(recharge.cash),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "微信（元）",
|
|
|
value: this.num(recharge.weixin),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "支付宝（元）",
|
|
|
value: this.num(recharge.alipay),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "刷卡（元）",
|
|
|
value: this.num(recharge.pos),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下POS（元）",
|
|
|
value: this.num(recharge.offline_pos),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "线下二维码（元）",
|
|
|
value: this.num(recharge.offline_qrcode),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "转账（元）",
|
|
|
value: this.num(recharge.transfer),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下现金（元）",
|
|
|
value: this.num(recharge.offline_cash),
|
|
|
barClass: "green"
|
|
|
}];
|
|
|
},
|
|
|
getRefundItems: function(refundByMethods) {
|
|
|
refundByMethods = refundByMethods || {};
|
|
|
return [{
|
|
|
label: "现金（元）",
|
|
|
value: this.num(refundByMethods.cash),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "微信（元）",
|
|
|
value: this.num(refundByMethods.weixin),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "支付宝（元）",
|
|
|
value: this.num(refundByMethods.alipay),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "刷卡（元）",
|
|
|
value: this.num(refundByMethods.pos),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下POS（元）",
|
|
|
value: this.num(refundByMethods.offline_pos),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "线下二维码（元）",
|
|
|
value: this.num(refundByMethods.offline_qrcode),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "转账（元）",
|
|
|
value: this.num(refundByMethods.transfer),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下现金（元）",
|
|
|
value: this.num(refundByMethods.offline_cash),
|
|
|
barClass: "green"
|
|
|
}];
|
|
|
},
|
|
|
getBudgetItems: function(budget) {
|
|
|
budget = budget || {};
|
|
|
return [{
|
|
|
label: "现金（元）",
|
|
|
value: this.num(budget.cash),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "微信（元）",
|
|
|
value: this.num(budget.weixin),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "支付宝（元）",
|
|
|
value: this.num(budget.alipay),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "刷卡（元）",
|
|
|
value: this.num(budget.pos),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下POS（元）",
|
|
|
value: this.num(budget.offline_pos),
|
|
|
barClass: "green"
|
|
|
}, {
|
|
|
label: "线下二维码（元）",
|
|
|
value: this.num(budget.offline_qrcode),
|
|
|
barClass: "blue"
|
|
|
}, {
|
|
|
label: "转账（元）",
|
|
|
value: this.num(budget.transfer),
|
|
|
barClass: ""
|
|
|
}, {
|
|
|
label: "线下现金（元）",
|
|
|
value: this.num(budget.offline_cash),
|
|
|
barClass: "green"
|
|
|
}];
|
|
|
},
|
|
|
toinfo: function(item, type) {
|
|
|
uni.navigateTo({
|
|
|
url: "../statinfo/statinfo?type=" + type + "&from=" + item.type
|
|
|
})
|
|
|
},
|
|
|
tohome: function() {
|
|
|
uni.navigateTo({
|
|
|
url: "../../../../pages/index/index"
|
|
|
})
|
|
|
},
|
|
|
backhome: function() {
|
|
|
uni.navigateTo({
|
|
|
url: "../../../../pages/index/index"
|
|
|
})
|
|
|
},
|
|
|
loadData: function(duration, index, success) {
|
|
|
var that = this;
|
|
|
var currentProject = uni.getStorageSync('currentProject');
|
|
|
util.request({
|
|
|
bindThis: that,
|
|
|
api: 'manager/statistics/by-duration',
|
|
|
customLoading: false,
|
|
|
data: {
|
|
|
project_id: currentProject.id,
|
|
|
duration: duration
|
|
|
},
|
|
|
utilSuccess: function(r) {
|
|
|
success(r, index);
|
|
|
},
|
|
|
utilFail: function(res) {}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
page {
|
|
|
padding-top: 160rpx;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
padding: 0rpx 31rpx;
|
|
|
}
|
|
|
|
|
|
.indexbox {
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.statBox {
|
|
|
display: flex;
|
|
|
margin-top: 20rpx;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.statItem {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
flex-direction: column;
|
|
|
width: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.statItemHeader {
|
|
|
display: flex;
|
|
|
line-height: 30rpx;
|
|
|
}
|
|
|
|
|
|
.statNum {
|
|
|
margin-top: 16rpx;
|
|
|
padding-left: 24rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
.statItem .statItemTitele {
|
|
|
font-family: SourceHanSansCN-Normal;
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
margin-left: 18rpx;
|
|
|
}
|
|
|
|
|
|
.statItemCBar {
|
|
|
background: #FDB030;
|
|
|
border: 2rpx solid #FFFFFF;
|
|
|
border-radius: 4rpx;
|
|
|
width: 6rpx;
|
|
|
height: 16rpx;
|
|
|
}
|
|
|
|
|
|
.blue {
|
|
|
background: #3C91F5;
|
|
|
}
|
|
|
|
|
|
.green {
|
|
|
background: #52D5A6;
|
|
|
}
|
|
|
</style> |
