280 行
11 KiB
HTML
可执行文件
280 行
11 KiB
HTML
可执行文件
<!--[1.9.20]-->
|
|
<style>
|
|
.home_title {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.home_content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.hc_inner {
|
|
height: 12vw;
|
|
}
|
|
|
|
.hip_line {
|
|
height: 3.5vw;
|
|
}
|
|
|
|
.hip_num {
|
|
margin-left: 1vw;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hc_inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.home_title_inner {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.home_title_other {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-left: 20px;
|
|
}
|
|
.home_quant {
|
|
padding: 0;
|
|
}
|
|
.today-all {
|
|
color: orangered;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 0 5px;
|
|
}
|
|
</style>
|
|
|
|
<div id="storeIndex" v-cloak class="homeBox">
|
|
<div class="home_title">
|
|
<div class="home_title_inner">
|
|
<span>商户零售收银占比图</span>
|
|
<div class="home_title_other">
|
|
今日总金额: <span class="today-all">{{dataInfo.allMoney}}</span>元。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="home_content">
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售现金</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailCashMoney}}元</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailCashMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售支付宝</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailAliMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailAliMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售微信</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailWxMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailWxMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="!mecPayType">
|
|
<div class="hc_inner_sort">零售小程序商城微信</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailAppletMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailAppletMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="!mecPayType">
|
|
<div class="hc_inner_sort">会员卡支付</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.vipCardMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.vipCardMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">其他支付(商家自己的支付方式)</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.otherPayMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.otherPayMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="mecPayType">
|
|
<div class="hc_inner_sort">德育币支付</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.MecMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.MecMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日待退款金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.toRefundMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.toRefundMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日退款金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.refundMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="refundMoney"></el-progress>
|
|
</div>
|
|
</div>
|
|
<template v-if="dataInfo.credit">
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日赊账金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.creditArrMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="dataInfo.creditArrMoney>0?100:0"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日赊账待还金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.creditRepayMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.creditRepayMoney*100/(dataInfo.creditArrMoney==0?1:dataInfo.creditArrMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<template v-if="!mecPayType">
|
|
<div class="home_title">
|
|
<div class="home_title_inner">
|
|
会员数据
|
|
</div>
|
|
</div>
|
|
<div class="home_quant">
|
|
<div class="hq_inner">
|
|
<div class="hq_inner_left">
|
|
<img src="__PUBLIC__/Retail/images/s11.png"/>
|
|
<span>会员</span>
|
|
</div>
|
|
<div class="hq_inner_right">
|
|
<div>今日新增会员：{{dataInfo.vipIncNum}}</div>
|
|
<div>今日会员充值：{{dataInfo.vipRechargeMoney}}元</div>
|
|
<div>今日会员获得余额：{{dataInfo.vipGainMoney}}元</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
<script>
|
|
var storeIndex = new Vue({
|
|
el: '#storeIndex',
|
|
data() {
|
|
return {
|
|
mecPayType: false,
|
|
dataInfo: {
|
|
allMoney: 0,
|
|
retailCashMoney: 0,
|
|
retailAliMoney: 0,
|
|
retailWxMoney: 0,
|
|
retailAppletMoney: 0,
|
|
vipCardMoney: 0,
|
|
otherPayMoney: 0,
|
|
MecMoney: 0,
|
|
toRefundMoney: 0,
|
|
refundMoney: 0,
|
|
creditArrMoney: 0,
|
|
creditRepayMoney: 0,
|
|
vipIncNum: 0,
|
|
vipRechargeMoney: 0,
|
|
vipGainMoney: 0,
|
|
credit: false,
|
|
},
|
|
percentageColor: [
|
|
{color: '#76f1bc', percentage: 5},
|
|
{color: '#4de4ff', percentage: 25},
|
|
{color: '#42ab1d', percentage: 45},
|
|
{color: '#f0c550', percentage: 65},
|
|
{color: '#fe755f', percentage: 85},
|
|
{color: '#bf5aff', percentage: 10},
|
|
],
|
|
windowWidth: 100,
|
|
}
|
|
},
|
|
computed: {
|
|
percentageWidth() {
|
|
return ((this.windowWidth * 0.07).toFixed(2)) * 1;
|
|
},
|
|
refundMoney() {
|
|
let a = (this.dataInfo.allMoney + this.dataInfo.refundMoney).toFixed(2) * 1;
|
|
return (this.dataInfo.refundMoney * 100 / (a == 0 ? 1 : a)).toFixed(2) * 1;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.setWindowWidth();
|
|
window.onresize = () => {
|
|
this.setWindowWidth();
|
|
}
|
|
},
|
|
methods: {
|
|
getStatistics() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Statistics/getMerchantStatisticsList',
|
|
type: 'post',
|
|
data: {},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.dataInfo = res.data;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
setWindowWidth() {
|
|
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
},
|
|
//德育币插件 true使用 false不使用
|
|
getPlatformType() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Mgoods/getPlatformType',
|
|
type: "post",
|
|
data: {},
|
|
success: (res) => {
|
|
this.mecPayType = res.moral_education_coin;
|
|
}
|
|
})
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.getStatistics();
|
|
this.getPlatformType();
|
|
}
|
|
});
|
|
</script> |