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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>
<div id="app" class="content" v-cloak>

    <div class="detailtitle">
        <div class="border"></div>
        <div class="title">队列情况</div>
    </div>
    <div class="table-body">
        <el-table v-loading="groupLoading" :data="list" stripe style="width: 100%">
            <el-table-column prop="queue_len" label="待开团订单数" width="150" align="center"></el-table-column>
            </el-table-column>
            <el-table-column prop="activity_id" label="活动id" width="100" align="center">
            </el-table-column>
            <el-table-column prop="number" label="活动名称" width="150" align="center">
                <template slot-scope="scope">
                    <div>
                        <div>
                            <div v-if="scope.row.activity">
                                {{scope.row.activity.title}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="goods_id" label="商品id" width="100" align="center">
            </el-table-column>
            <el-table-column label="商品">
                <template slot-scope="scope">
                    <div flex="box:first">
                        <div style="padding-right: 10px;" v-if="scope.row.goods">
                            <com-image mode="aspectFill" :src="scope.row.goods.cover_pic"></com-image>
                        </div>
                        <div>
                            <div v-if="scope.row.goods">
                                {{scope.row.goods.goods_name}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 弹窗 -->
    <div class="modal">


    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            statusMap: [],
            // 开奖期数列表
            list: [],
            searchData: {
                goods_id: '',
            },
            groupModal: false,
            groupLoading: false,
            attendUserLists: [],
            goodsList: [],
        },
        mounted: function() {
            this.getList(getQuery('activity_id'));
        },
        methods: {

            getList(id) {
                this.listLoading = true;
                request({
                    params: {
                        r: 'lucky-group/group-activity/get-data',
                        activity_id: id,
                    },
                    method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                    } 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% 0 0;
        flex-wrap: wrap;
    }

    .content .list .list-item {
        background: #F2F2F2;
        width: 19%;
        font-weight: 700;
        font-size: 32px;
        padding: 20px 0 0 15px;
        margin: 20px 10px 10px 5px;
    }

    .content .list .list-item .title {}

    .content .list .list-item .num {
        margin: 20px 0;
    }

    .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>