qimall/backend/modules/mall/views/finance/stat.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2021/7/8 0008
 * Time: 10:07
 */
?>
<style>
@media screen and (max-width: 1370px) {
    #stat_pay {
        min-width: 1131px;
    }
}
.order_stat{
    background: #FFF;
    padding: 10px 10px 0;
    margin-bottom: 10px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 40px;
}

.order_stat > .title > .time{
    font-size: 13px;
    font-weight: 400;
    color: #BFBFBF;
    margin-left: 20px;
    flex: 1;
}

.order_stat .stat_details{
    padding: 30px 0;
    display: flex;
}

.stat_details .order_module{
    flex: 1;
    background: #F2F2F2;
    margin: 0 5px;
    padding: 20px 25px;
}

.order_module{
    display: flex;
    flex-direction: column;
}

.order_module:last-child{
    margin-right: 0;
}

.order_module:first-child{
    margin-left: 0;
}

.price{
    font-size: 22px;
    font-weight: bold;
    flex: 1;
    word-break: break-all;
}

.oirder_modul_title{
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.oirder_modul_title .text{
    margin-right: 10px;
}
.stat_icon{
    font-size: 19px;
    color: #BFBFBF;
}

.total{
    display: flex;
    margin-bottom: 10px;
}

.pay_total{
    flex: 1;
    flex-basis: 764px;
    background: #FFF;
    padding: 10px 10px 15px;
}

.pay_total:last-child{
    margin-left: 12px;
}

.el-date-editor .el-range-separator{
    padding: 0;
}

.pay_modules{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.module{
    /* width: 350px; */
    width: 46%;
    background: #F7F7F7;
    padding: 20px 25px;
    margin-bottom: 15px;
    display: flex;
}

.module_two{
    width: 33%;
    background: #F7F7F7;
    padding: 20px 25px;
    margin-bottom: 15px;
    display: flex;
}

.module:nth-child(2n){
    margin-left: 30px
}

.no_open{
    flex: 1;
    color: #2E8FF4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pay_button{
    display: flex;
    border: 1px solid #2E8FF4;
    border-radius: 4px;
    color: #464646;
}

.pay_button div{
    background: #FFF;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    width: 80px;
    height: 36px;
    border-radius: 4px;
    text-align: center;
}

.pay_button .pay_button_sel{
    background: #2E8FF4;
    color: #FFF;
    border-radius: 0;
}

.pay_img{
    width: 56px;
    height: 56px;
    margin-right: 20px;
}
.assets{
    color: #848484;
}

.data_chart{
    background: #FFF;
    padding: 10px 10px 15px;
    width: 100%;
    position: relative;
    /* display: flex; */

}

.data_chart_time{
    position: absolute;
    top: 10px;
    right: 50px;
    display: flex;
    font-size: 16px;
}

.sel_time{
    margin-right: 20px;
    padding-bottom: 5px;
    
}

.sel_time:hover{
cursor:pointer

}

.sel_color{
    border-bottom: 2px solid #5ED9A9;
}


.stat_chart{
    height:500px;
    /* width: 82rem; */
    width: 90%;
}
</style>

<div id="stat_pay" v-cloak>
    <div class="order_stat">
        <div class="title">
            <div>订单概况</div>
            <div class="time">更新时间：{{update_order_time}}</div>
            <el-date-picker 
                v-model="order_time" 
                type="month"
                placeholder="选择日期" 
                @change="updateOrderTime" 
                format='yyyy-MM' 
                value-format='yyyy-MM'>
            </el-date-picker>
            <!-- <el-date-picker
                v-model="order_time"
                type="daterange"
                align="right"
                unlink-panels
                format='yyyy-MM-dd'
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="updateOrderTime"
                >
            </el-date-picker> -->
        </div>
        <div class="stat_details">
            <div class="order_module" v-for="(item,index) in orderTotalArr" :key="item.type">
                <div class="oirder_modul_title">
                    <div class="text">{{item.name}}</div>
                    <el-tooltip class="item" effect="dark" v-if="item.prompt" :content="item.prompt" placement="bottom">
                        <i class="el-icon-question stat_icon"></i>
                    </el-tooltip>
                </div>
                <div class="price">
                    {{item.value}}
                </div>
            </div>
        </div>
    </div>

    <div class="total">
        <div class="pay_total">
            <div class="title">
                <div style="flex:1">支付统计</div>
               <!--  <el-date-picker
                    v-model="order_time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
                </el-date-picker> -->
            </div>
            <div class="pay_modules">
                <div class="module" v-for="(item,index) in rechargeArr" :key="item.type">
                    <div class="order_module">
                        <div class="oirder_modul_title" style="margin-bottom: 17px">{{item.name}}</div>
                        <div class="price">{{item.value}}</div>
                        <el-link type="info" :underline="false"
                                 style="margin-top: 10px;font-size: 10px;display: flex;justify-content: left">
                            含已退款: {{item.refund_value}}
                        </el-link>
                    </div>
<!--                    <div class="no_open" v-if="item.is_open == 0">-->
<!--                        未开通-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <div class="pay_total">
            <div class="title">
                <div style="flex:1">会员账户资产</div>
                <div class="pay_button">
                    <!-- <div @click="upButton(1)" :class="{pay_button_sel: buttonType == 1}">账户资产</div> -->
                   <!-- <div @click="upButton(2)" :class="{pay_button_sel: buttonType == 2}">货币</div> -->
                     <div @click="getAssetsDialog" :class="{pay_button_sel: buttonType == 1}">查看</div>
                </div>
            </div>
            <div class="pay_modules">
                <div class="module_two" style="background:#FFF;" v-for="(item,index) in memberAssets" :key="item.type">
                    <image class="pay_img" :src="item.img"></image>
                    <div class="assets">
                        <div>{{item.name}}</div>
                        <div style="color: #000;margin-top: 5px;">{{item.value}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="data_chart">
        <div ref="stat_chart" style="background: #FFF;" class="stat_chart"></div>
        <div class="data_chart_time">
            <div class="sel_time" :class="{sel_color: chartTimeType == 1}" style="margin-right: 20px;" @click="getChart(1)">近七天</div>
            <div class="sel_time" :class="{sel_color: chartTimeType == 2}" @click="getChart(2)">近一个月</div>
        </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="查看" :visible.sync="dialogVisible" width="50%">
        <div class="pay_total">
            <div class="title">
                <el-date-picker
                        v-model="account_assets_daily_time"
                        type="date"
                        @change="updateAccountAssetsDailyTime"
                        :picker-options="pickerOptions"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </div>
            <div class="text-tip" style="color:red;">仅可查到{{account_assets_daily_limit_date}}后的数据</div>
            <div class="pay_modules">
                <div class="module_two" style="background:#FFF;" v-for="(item,index) in accountAssetsDaily" :key="item.type">
                    <image class="pay_img" :src="item.img"></image>
                    <div class="assets">
                        <div>{{item.name}}</div>
                        <div style="color: #000;margin-top: 5px;">{{item.value}}</div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</div>


<script>
    new Vue({
        el: '#stat_pay',
        data(){
            return {
                update_order_time: '',
                order_time: [],
                buttonType: 1,
                user_total: null,
                order_total: null,
                //订单概况
                orderTotalArr: {
                    "order_money":{
                        type: 'order_amount',
                        name: '下单总金额',
                        value: '0.00',
                        prompt: '平台订单产生的总金额包含待付款和已付款',
                    },
                    "not_pay_money":{
                        type: 'nopaid_amount',
                        name: '下单待付款',
                        value: '0.00',
                        prompt: '平台产生的待支付或已失效订单金额',
                    },
                    "pay_money":{
                        type: 'paid_amount',
                        name: '下单已付款',
                        value: '0.00',
                        prompt: '订单已支付的实际金额',
                    },
                    "refund_order_money":{
                        type: 'refund_amount',
                        name: '退款金额',
                        value: '0.00',
                        prompt: '平台产生的订单退款金额',
                    },
                    "deduction_money":{
                        type: 'discount_amount',
                        name: '抵扣金额',
                        value: '0.00',
                        prompt: '（订单金额-实际支付金额=抵扣金额） 不计算货币',
                    },
                    "recharge_money":{
                        type: 'recharge_amount',
                        name: '充值金额',
                        value: '0.00',
                        prompt: '',
                    }
                },
                //支付统计
                rechargeArr: {
                    "balance":{
                        name: '余额支付',
                        value: '0.00',
                        refund_value: '0.00',
                    },
                    "wechat":{
                        name: '微信支付',
                        value: '0.00',
                        refund_value: '0.00',

                    },
                    "alipay":{
                        name: '支付宝支付',
                        value: '0.00',
                        refund_value: '0.00',
                    },
                    "joinpay_pay":{
                        name: '汇聚支付',
                        value: '0.00',
                        refund_value: '0.00',
                    }
                },
                // 会员资产
                memberAssets: {},
                accountInfo: {
                    "commission_total":{
                        type: 'income',
                        value: '0.00',
                        name: '待提现佣金（元）',
                        img: 'resources/img/stat/income.png',
                    },
                    "balance_total":{
                        type: 'balance',
                        value: '0.00',
                        name: '未使用余额（元）',
                        img: 'resources/img/stat/balance.png',
                    },
                    "score_total":{
                        type: 'score',
                        value: '0.00',
                        name: '未使用积分',
                        img: 'resources/img/stat/integral.png',
                    }
                },
                chartTimeType: 0,
                currencyInfo: [],
                chartTimeArr: [],
                paid_amount_arr: [],
                settle_income_arr: [],
                dialogVisible:false,
                account_assets_daily_time: '',
                account_assets_daily_limit_date: '',
                pickerOptions: {
                    disabledDate: (time) => {
                        return time.getTime() < (new Date(this.account_assets_daily_limit_date).getTime() - 8.64e7);
                    },
                },
                account_assets_daily_date: '',
                accountAssetsDaily: {
                    "commission_total": {
                        type: 'income',
                        value: '0.00',
                        name: '待提现佣金（元）',
                        img: 'resources/img/stat/income.png',
                    },
                    "balance_total": {
                        type: 'balance',
                        value: '0.00',
                        name: '未使用余额（元）',
                        img: 'resources/img/stat/balance.png',
                    },
                    "score_total": {
                        type: 'score',
                        value: '0.00',
                        name: '未使用积分',
                        img: 'resources/img/stat/integral.png',
                    }
                },
            }
        },
        created(){
            this.getAssets();
            this.getData();
            this.getChart();
            this.getAssetsDaily();
            this.$nextTick(v => {
                this.statChart();
            }) 
        },
        methods:{
            getData(){
                let that = this;
                that.currencyInfo = [];
                //that.memberAssets = [];
                let date = {
                    r: '/mall/finance/stat'
                }
                if(this.order_time){
                    // date.start_date = this.order_time[0];
                    // date.end_date = this.order_time[1];
                    date.order_time = this.order_time;
                }
                request({
                    params: date,
                    method: 'get',
                }).then(res => {
                    if (res.data.code == 0) {
                        that.update_order_time = res.data.data.update_time;
                        that.order_time = res.data.data.date;
                        //订单概况
                        for (let field in this.orderTotalArr) {
                            if (res.data.data.orderStatistics[field]) {
                                this.orderTotalArr[field]['value'] = res.data.data.orderStatistics[field];
                            } else {
                                this.orderTotalArr[field]['value'] = '0.00';
                            }
                        }
                        //支付统计
                        that.rechargeArr = res.data.data.payment_data;
                        that.memberAssets.push(...that.accountInfo);
                    }
                }).catch(e => {
                    
                });
            },
            //会员账户资产
            getAssets(){
                let date = {
                    r: '/mall/finance/account-assets'
                }
                request({
                    params: date,
                    method: 'get',
                }).then(res=>{
                    console.log(res.data.data)
                    for (let i in this.accountInfo) {
                        this.accountInfo[i]['value'] = res.data.data[i].toFixed(2);
                    }
                    this.memberAssets = this.accountInfo;
                }).catch(e => {
                    
                });
            },
            upButton(type){
                if(this.butbuttonType == type){
                    return;
                }
                this.buttonType = type;
                this.memberAssets = [];
                if(type == 2){
                    this.memberAssets.push(...this.currencyInfo);
                }else{
                    //this.memberAssets.push(...this.accountInfo);
                }
            },
            //图表
            getChart(type = 1){
                if(this.chartTimeType == type){
                    return;
                }
                this.chartTimeType = type;
                let that = this;
                that.chartTimeArr = [];
                that.paid_amount_arr = [];
                that.settle_income_arr = [];
                request({
                    params: {
                        r: '/mall/finance/income',
                        date_type: this.chartTimeType
                    },
                    method: 'get',
                }).then(res => {
                    if(res.data.code == 0){
                        res.data.data.forEach(v => {
                            that.chartTimeArr.push(v.stat_date);
                            that.paid_amount_arr.push(v.pay_money.toFixed(2));
                            that.settle_income_arr.push(v.settled_commission_total.toFixed(2));
                        });
                        that.$nextTick(v => {
                            that.statChart();
                        })
                    }
                })
            },
            statChart(){
                let echartStat = echarts.init(this.$refs.stat_chart);
                let option = {
                    title: {
                        text: '收支趋势'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x:'center',      //可设定图例在左、右、居中
                        y:'bottom',     //可设定图例在上、下、居中
                        data: ['已结算佣金', '佣金支出']
                    },
                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,  // false 不留白
                        data:  this.chartTimeArr
                    },
                    yAxis: {
                        type: 'value',
                        // name:'收支趋势'
                    },
                    series: [
                        {
                            name: '已结算佣金',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {  
                                normal : {  
                                    color:'#5ED9A9',  
                                    lineStyle:{  
                                        color:'#5ED9A9'  
                                    }  
                                }  
                            }, 
                            data: this.settle_income_arr
                        },
                        {
                            name: '佣金支出',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {  
                                normal : {  
                                    color:'#5B8FF9',  
                                    lineStyle:{  
                                        color:'#5B8FF9'  
                                    }  
                                }  
                            },
                            data: this.paid_amount_arr
                        }
                    
                    ]
                };
                echartStat.setOption(option)
                setTimeout(function (){
                    window.onresize = function () {
                        echartStat.resize();
                    }
                },200)
            },
            updateOrderTime(v){
                this.order_time = v;
                this.getData();
            },
            toFormatDate: function (date) {
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + MM + '-' + d;
            },
            getAssetsDialog(){
                this.dialogVisible = true;
            },
            updateAccountAssetsDailyTime(v){
                console.log('date date', v);
                this.getAssetsDaily(v);
            },
            getAssetsDaily(search_date = null){
                let date = {
                    r: '/mall/finance/account-assets-daily',
                    date: search_date,
                }
                request({
                    params: date,
                    method: 'get',
                }).then(res=>{
                    this.account_assets_daily_limit_date = res.data.data.limit_date
                    this.accountAssetsDaily.balance_total.value = res.data.data.balance_surplus_nums;
                    this.accountAssetsDaily.commission_total.value = res.data.data.commission_surplus_nums;
                    this.accountAssetsDaily.score_total.value = res.data.data.score_surplus_nums;
                    console.log('123', this.accountAssetsDaily);
                }).catch(e => {

                });
            },
        }
    })
</script>