qimall/addons/Store/client/views/reserve-data/index.php

<?php
use common\helpers\ComponentHelper;
?>
<div id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>数据概况</span>
<!--                <span style="margin-left: 5px; color: #999999">更新时间：2023-10-10 10:10:00</span>-->
            </div>
        </div>
        <el-card shadow="hover">
            <div slot="header">
                累计数据简报
            </div>
            <el-row style="text-align: center" :gutter="10" v-loading="statisticsLoading">
                <el-col :span="12">
                    <div>
                        <span>{{statistics.total}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <strong>累计服务数量</strong>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <span>{{statistics.yesterday}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <strong>昨日服务数量</strong>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <el-card shadow="hover" style="margin-top: 10px">
            <div slot="header">
                {{ custom_text }}服务订单量排行
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-table v-loading="statisticsLoading" :data="order_rank.list">
                        <el-table-column label="排行" align="center">
                            <template slot-scope="scope">
                                {{scope.$index += 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_id"  label="会员ID" align="center"></el-table-column>
                        <el-table-column label="会员信息">
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.user.nickname}}</div>
                                        <div style="font-size: 12px;">{{scope.row.user.mobile}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单量" prop="store_order_num" align="center" ></el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                    <el-table v-loading="statisticsLoading" :data="rating_rank.list">
                        <el-table-column label="排行" align="center">
                            <template slot-scope="scope">
                                {{scope.$index += 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_id"  label="会员ID" align="center"></el-table-column>
                        <el-table-column label="会员信息">
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.user.nickname}}</div>
                                        <div style="font-size: 12px;">{{scope.row.user.mobile}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="评分" prop="store_service_rating" align="center"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                statistics: {
                    total: 0,
                    yesterday: 0
                },
                order_rank: [],
                rating_rank: [],
                statisticsLoading: false,
                custom_text: '',
            };
        },
        methods: {
            getData() {
                this.statisticsLoading = true;
                request({
                    params: {
                        r: 'store/client/reserve-data/index',
                        id: self.id
                    },
                    method: 'get',
                }).then(e => {
                    this.statisticsLoading = false;
                    if (e.data.code == 0) {
                        this.statistics = e.data.data.statistics
                        this.order_rank = e.data.data.order_rank
                        this.rating_rank = e.data.data.rating_rank
                        this.custom_text = e.data.data.custom_text
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.error(e);
                });
            },
        },
        mounted: function() {
            this.getData()
        },
    });
</script>

<style>
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>