qimall/addons/LuckyGroup/backend/views/activity/stat-data.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>
<div id="app" class="content" v-cloak>
    <div class="list">
        <div class="list-item" v-for="(item,index) in activityStatisticsDatas">
            <div class="title">{{item.title}}</div>
            <div class="num">{{item.value}}</div>
        </div>
    </div>
    <!-- 拼团明细 -->
    <div class="detailtitle">
        <div class="border"></div>
        <div class="title">拼团明细</div>
    </div>
    <!-- 表格 -->
    <div class="table-body">
        <el-form size="small" :inline="true" flex="dir:left cross:center">

            <div class="item-box" flex="dir:left cross:center">
                <div style="margin-right: 5px; margin-left: 25px;">拼团商品</div>
                <el-select v-model="searchData.goods_id" @change='search' class="select" size="small" clearable @clear='search'>
                    <el-option :key="item.id" :label="item.goods_name" :value="item.id" v-for="item in goodsList"></el-option>
                </el-select>
            </div>
            <!-- <div class="item-box" flex="dir:left cross:center" v-if="searchData.activity_status || searchData.title || searchData.start_time || searchData.end_time">
		        <el-button size="small" type="warning" style="padding: 9px 15px !important;" @click="clearSearch">清除搜索条件
		        </el-button>
		    </div> -->
        </el-form>
        <el-table v-loading="groupLoading" :data="lottery_period_lists" stripe style="width: 100%">
            <el-table-column prop="number" label="成团期数" width="80" align="center"> </el-table-column>
            <el-table-column prop="group_amounts" label="成团金额" width="150" align="center"></el-table-column>
            <el-table-column prop="deplete_scores" label="消耗积分" width="150" title="" align="center"></el-table-column>
            <el-table-column prop="deplete_balances" label="消耗余额" width="150" title="" align="center"></el-table-column>
            <el-table-column prop="win_reward_balances" label="拼中奖励余额" width="150" title="" align="center"></el-table-column>
            <el-table-column prop="win_reward_scores" label="拼中奖励积分" width="150" title="" align="center"></el-table-column>
            <el-table-column prop="bonus_pool_amounts" label="分配奖金池金额" width="150" title="" align="center"></el-table-column>
            <el-table-column label="开团时间" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope" v-if="scope.row.status==1"> 成功 </template>
                <template slot-scope="scope" v-else> 失败 </template>
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                    <el-button circle size="small" type="text" @click="showModal(scope.row.number)">拼团人数</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 弹窗 -->
    <div class="modal">


    </div>
    <el-dialog :visible.sync="groupModal" width="33%" title="拼团人数">
        <el-table class="modaltable" v-loading="groupLoading" :data="attendUserLists" stripe style="width: 100%">
            <el-table-column prop="id" label="会员id" width="150" title="" align="center"></el-table-column>

            <el-table-column label="会员名称" align="center" width="150">
                <template slot-scope="scope">
                    <div class="member">
                        <div class="image">
                            <com-image :src="scope.row.avatar_url" style="width: 100%;height: 100%;"></com-image>
                        </div>
                        <div class="name">{{scope.row.nickname}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="加入拼团时间" width="300" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            statusMap: [],
            // 开奖期数列表
            lottery_period_lists: [],
            searchData: {
                goods_id: '',
            },
            groupModal: false,
            groupLoading: false,
            attendUserLists: [],
            activityStatisticsDatas: [
                {title: '成团金额', name: 'group_amounts', value: 0},
                {title: '成团人数', name: 'group_peoples', value: 0},
                {title: '成团期数', name: 'group_periods', value: 0},
                {title: '拼团失败次数', name: 'group_failed_times', value: 0},
                {title: '累计消耗积分', name: 'deplete_scores', value: 0},
                {title: '累计消耗余额', name: 'deplete_balances', value: 0},
                {title: '拼中奖励余额', name: 'win_reward_balances', value: 0},
                {title: '拼中奖励积分', name: 'win_reward_scores', value: 0},
                {title: '分配奖金金额', name: 'distribute_bonus_pool_amounts', value: 0},
            ],
            goodsList: [],
        },
        mounted: function() {
            this.getList(getQuery('activity_id'));
        },
        methods: {
            // 拼团人数
            showModal(number) {
                let self = this
                self.groupModal = true;
                // self.groupLoading = true;
                request({
                    params: {
                        r: 'lucky-group/group-activity/attend-user-list',
                        number: number,
                        activity_id: getQuery('activity_id'),
                    },
                    method: 'get'
                }).then(e => {
                    self.groupLoading = false;
                    if (e.data.code == 0) {
                        self.attendUserLists = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                })
            },
            //搜索
            search() {
                // console.log(this.searchData);
                this.getList(getQuery('activity_id'));
            },
            getList(id) {
                this.listLoading = true;
                request({
                    params: {
                        r: 'lucky-group/group-activity/activity-data',
                        activity_id: id,
                        // pagesize: 10,
                        // page: this.page,
                        // ...this.searchData,
                        goods_id: this.searchData.goods_id,
                    },
                    method: 'get',
                }).then(e => {
                    // console.log('等级列表=='+JSON.stringify(e))
                    this.listLoading = false;
                    if (e.data.code == 0) {
                        this.statusMap = e.data.data.status_map;
                        this.lottery_period_lists = e.data.data.lottery_periods;
                        this.pageCount = e.data.data.page_count;
                        if (e.data.data.activity_statistics) {
                            // this.activityStatisticsDatas = e.data.data.activity_statistics;
                            let forNum = this.activityStatisticsDatas.length;
                            for (let i = 0; i < forNum; i++) {
                                this.activityStatisticsDatas[i].value = e.data.data.activity_statistics[this.activityStatisticsDatas[i].name];
                            }
                        }
                        if (e.data.data.goods.length) {
                            this.goodsList = e.data.data.goods;
                        }
                    } else {
                        this.$message.error(e.data.msg)
                    }

                }).catch(e => {
                    console.log(e);
                });
            },

        }
    });
</script>
<style>
    .modal {
        position: fixed;
        top: 200px;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modaltable .member {
        display: flex;
    }

    .modaltable .member .image {
        width: 50px;
        height: 50px;

    }

    .modaltable .member .image img {
        border-radius: 50%;
    }

    .modaltable .member .name {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
    }

    .modalcontent {
        display: inline-flex;
        width: 50%;
    }

    page {
        background: #fff;
    }

    .content {
        background: #fff;
    }

    .content .list {
        display: flex;
        padding: 0 5% 15px 15px;
        flex-wrap: wrap;
    }

    .content .list .list-item {
        background: #F2F2F2;
        width: 15%;
        font-weight: 600;
        font-size: 16px;
        padding: 20px 0 0 20px;
        margin: 20px 10px 10px 30px;
        height: 111px;
    }

    .content .list .list-item .num {
        font-size: 30px;
        padding: 5px 0 0 20px;
    }

    .detailtitle {
        background: #F2F2f2;
        padding: 10px 0 10px 10px;
        display: flex;
    }

    .detailtitle .border {
        width: 7px;
        height: 30px;
        background: #1479f0;
    }

    .detailtitle .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
</style>