qimall/backend/modules/mall/views/statistics/team-achievement.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-user-info');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        :api-params="apiParams"
        :search-list="searchList"
        @get-api-data="handleSetData"
    >
        <el-table-column prop="user_id" label="会员ID" align="center"></el-table-column>
        <el-table-column prop="user" label="会员" align="center">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>
        <el-table-column prop="order_no" label="订单号" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.order_no }}
            </template>
        </el-table-column>
        <el-table-column prop="pay_money" label="支付金额" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.pay_money.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="shipping_money" label="运费" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.shipping_money.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="achievement" label="业绩" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.achievement.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="pay_time" label="支付时间" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.pay_time|dateTimeFormat('Y-m-d H:i:s') }}
            </template>
        </el-table-column>
        <el-table-column prop="created_at" label="下单时间" align="center">
        <template slot-scope="scope">
                {{ scope.row.order.created_at|dateTimeFormat('Y-m-d H:i:s') }}
            </template>
        </el-table-column>
        <el-table-column prop="created_at" label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="mini" @click="lookDetail(scope.row.order_id)">订单详情</el-button>
            </template>
        </el-table-column>
        <!-- 统计 -->
        <template slot="statistics">
            <el-row :gutter="24" class="statistics-box">
                <el-col :span="8" v-for="(item, index) in statistic" :key="index">
                    <el-statistic
                        group-separator=","
                        :precision="item.precision"
                        :value="item.value"
                        :title="item.title"
                    ></el-statistic>
                </el-col>
            </el-row>
        </template>
        <template slot="header-left">
            <el-button type="primary" size="mini" @click="exportData" :loading="btnLoad" :disabled="btnLoad">导出全部</el-button>
        </template>
    </com-list-table>

    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="80%" >
        <el-table :data="tableData" border style="width: 100%; max-height: 500px; overflow: hidden; scroll: hidden;">
            <el-table-column prop="id" label="编号" width="80" align='center'>
            </el-table-column>
            <el-table-column prop="order_no" label="订单号" align='center'>
            </el-table-column>
            <el-table-column prop="" label="商品名" align='center'>
                <template slot-scope="scope">
                    {{ scope.row.detail[0].goods_name }}
                </template>
            </el-table-column>
            <el-table-column prop="" label="规格" align='center'>
                <template slot-scope="scope">
                    <div class="detail-for">
                        <div v-for="(item, index) in scope.row.detail" :key="index">
                            {{ item.goods_attr_name}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="" label="购买数量" align='center'>
                <template slot-scope="scope">
                    <div class="detail-for">
                        <div v-for="(item, index) in scope.row.detail" :key="index">
                            {{ item.num}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="" label="单价" align='center'>
                <template slot-scope="scope">
                    <div class="detail-for">
                        <div v-for="(item, index) in scope.row.detail" :key="index">
                            {{ item.price}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="" label="支付金额" align='center'>
                <template slot-scope="scope">
                    <div class="detail-for">
                        <div v-for="(item, index) in scope.row.detail" :key="index">
                            {{ item.goods_price}}
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="detail-center">
            <el-button type="primary" size="mini" @click="dialogVisible = false">返回</el-button>
        </div>
    </el-dialog>
</com-list-page>
<script>
    const application = new Vue({
        el: '#application',
        data: {
            uid: 0,
            name: '',
            levelList: [],
            searchList: [
                {
                    key: 'keyword',
                    title: '会员ID/昵称/手机号',
                    type: 'text',
                },
                {
                    key: 'date',
                    title: '下单日期',
                    type: 'date-picker',
                    valueFormat: 'yyyy-MM-dd',
                },
            ],
            btnLoad: false,
            statistic: [
                {
                    title: '粉丝订单数',
                    value: 0,
                    precision: 0,
                },
                {
                    title: '粉丝订单金额',
                    value: 0,
                    precision: 2,
                },
                {
                    title: '粉丝订单业绩',
                    value: 0,
                    precision: 2,
                },
            ],
            dialogVisible: false,
            tableData: [],
        },
        computed: {
            apiParams() {
                return {
                    r: 'mall/statistics/team-achievement',
                    uid: this.uid
                }
            },
            crumbs() {
                return [
                    {
                        title: '首页',
                        router: 'mall/overview/index',
                    },
                    {
                        title: '团队人数',
                        router: 'mall/statistics/team-size',
                    },
                    {
                        title: this.name + '的团队业绩',
                    }
                ]
            },
        },
        created() {
            this.uid = getQuery('uid')
            this.name = getQuery('name')
        },
        methods: {
            handleSetData(data) {
                this.statistic[0].value = data.total_order_num
                this.statistic[1].value = data.total_pay_money
                this.statistic[2].value = data.total_pay_achievement
            },
            exportData() {
                let searchParams = JSON.stringify(this.$refs['table'].searchParams) == '{}'
                    ? {}
                    : this.$refs['table'].searchParams
                let params = {
                    date: searchParams.date,
                    uid: this.uid,
                }
                this.btnLoad = true;
                request({
                    params: {
                        r: 'mall/statistics/team-achievement-export'
                    },
                    data: {params},
                    method: 'post',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg)
                    } else {
                        this.$message.error(e.data.msg)
                    }
                    this.btnLoad = false
                }).catch(e => {
                    this.btnLoad = false
                    this.$message.error('未知错误')
                })
            },
            lookDetail(id) {
                request({
                    params: {
                        r: 'mall/statistics/order-detail',
                        order_id: id
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.dialogVisible = true
                        this.tableData = e.data.data
                    } else {
                        this.$message.error(e.data.msg)
                    }
                }).catch(e => {
                    this.$message.error('未知错误')
                })
            },
        }
    })
</script>

<style>
    .statistics-box {
        margin: 10px 0;
    }
    .detail-for {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .detail-center {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>