qimall/addons/DepositPresale/backend/views/default/open-list.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('group-list-search', dirname(__DIR__) . '/components');
?>
<style>
	.el-table th>.cell {
		color: #333;
		font-weight: bold;
		font-size: 14px;
	}

	.el-table__footer-wrapper,
	.el-table__header-wrapper {
		border-bottom: 1.4px solid #D6D6D6;
	}
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        height: 50px;
        width: 50px;
    }
</style>
<!-- 这个是定金预售列表 -->
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>开团列表</span>
        </div>
        <com-search @search="toSearch" @download="download" :is-show-order-type="true" :is-show-order-plugin="true">
        </com-search>
    </el-card>
    <div class="table-body">
    <template>
        <el-table
				v-loading="listLoading"
                :data="list"
                stripe
                style="width: 100%">
            <el-table-column
                    fixed
					label="开团id" 
					prop="id"
					show-overflow-tooltip 
					min-width="100"
					align="center">
            </el-table-column>
            <el-table-column label="团长" min-width="150">
					<template slot-scope="scope">
                            <div class="user_img">
                                <image style="width: 50px;height: 50px; border-radius: 50%;" :src="scope.row.user.avatar_url? scope.row.user.avatar_url:'resources/img/mall/default_avatar_url.png'"></image>
                            </div>
                            <div>
                                <div style="color:#000;">{{scope.row.user.nickname}}</div>
                            </div>
					</template>

			</el-table-column>
            <el-table-column  label="手机号" width="120" align="center">
                <template slot-scope="scope">
                        <div flex="cross:top cross:center">
                            {{scope.row.user.mobile}}
                        </div>
                </template>
            </el-table-column>
            <el-table-column label="开团时间" width="200" align="center">
                <template slot-scope="scope">
                    <span> {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</span>
                </template>
            </el-table-column>
            <el-table-column label="成团时间" width="200" align="center">
					<template slot-scope="scope">
                        <span >{{scope.row.win_time|dateTimeFormat('Y-m-d H:i:s')}}</span>
					</template>
            </el-table-column>
            <el-table-column  label="实际参团人数" width="120" align="center">
                <template slot-scope="scope">
<!--                    <span> {{scope.row.groupBuyActive.group_size - scope.row.groupBuyActive.virtual_group_size}}</span>-->
                    <span> {{scope.row.counts}}</span>
                </template>
            </el-table-column>
            <el-table-column label="虚拟定金预售人数" width="120" align="center">
                <template slot-scope="scope">
                    <span> {{scope.row.groupBuyActive.virtual_group_size}}</span>
                </template>
            </el-table-column>
			<el-table-column prop="order_status" label="定金预售状态" min-width="120" align="center">
					<template slot-scope="scope">
						<el-tag effect="dark" type="info" v-if="scope.row.order_status==0">待支付</el-tag>
						<el-tag effect="dark" type="" v-if="scope.row.order_status==1">参团中</el-tag>
						<el-tag effect="dark" type="success" v-if="scope.row.order_status==2">定金预售成功</el-tag>
						<el-tag effect="dark" type="warning" v-if="scope.row.order_status==3">定金预售失败</el-tag>
                        <el-tag effect="dark" type="danger" v-if="scope.row.order_status==4">已关闭</el-tag>
                    </template>
            </el-table-column>
            <el-table-column  label="操作" min-width="260" align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.order_status==1||scope.row.order_status==2" @click="groupMemberList(scope.row)" type="text" size="small">定金预售成员</el-button>
                    <el-button v-if="scope.row.groupBuyActive.is_virtual==1&&scope.row.order_status==1" @click="finish(scope.row)" type="text" size="small">结束定金预售</el-button>
                </template>
            </el-table-column>
        </el-table>

		<div flex="main:right cross:center" style="margin-top: 20px;">
            <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                           style="display: inline-block;float: right;" background @current-change="pageChange"
                           layout="prev, pager, next" :total="pagination.totalCount">
            </el-pagination>
		</div>
		
    </template>
    </div>
	<!-- 定金预售成员列表弹窗组件 -->
	<el-dialog title="定金预售成员" :visible.sync="dialogFormVisible">
	  <el-table :data="memberList" v-loading="dialogLoading">
	    <el-table-column label="用户头像" width="150" align="center">
			<template slot-scope="scope">
                <div class="user_img">
                    <image style="width: 50px;height: 50px; border-radius: 50%;" :src="scope.row.user.avatar_url? scope.row.user.avatar_url:'resources/img/mall/default_avatar_url.png'"></image>
                </div>
			</template>
		</el-table-column>
	    <el-table-column property="user.nickname" label="昵称" width="100" align="center"></el-table-column>
	    <el-table-column property="is_creator" label="角色" width="80" align="center">
			<template slot-scope="scope">
				<span v-html="scope.row.is_commander=='1'?'团长':'团员'"></span>
			</template>
		</el-table-column>
	    <el-table-column property="total_price" label="订单金额" width="100" align="center">
			<template slot-scope="scope">
				<span>￥{{scope.row.deposit_presale_price*scope.row.num}}</span>
			</template>
		</el-table-column>
          <el-table-column  label="状态" width="100" align="center">
              <template slot-scope="scope">
                  <el-tag effect="dark" type="info" v-if="scope.row.order_status==0">待支付</el-tag>
                  <el-tag effect="dark" type="" v-if="scope.row.order_status==1">参团中</el-tag>
                  <el-tag effect="dark" type="success" v-if="scope.row.order_status==2">定金预售成功</el-tag>
                  <el-tag effect="dark" type="warning" v-if="scope.row.order_status==3">定金预售失败</el-tag>
                  <el-tag effect="dark" type="danger" v-if="scope.row.order_status==4">已关闭</el-tag>
              </template>
          </el-table-column>
	    <el-table-column  label="下单时间" width="150" align="center">
            <template slot-scope="scope">
                <span> {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</span>
            </template>
        </el-table-column>

	    <el-table-column property="order_id" label="操作" align="center">
			<template slot-scope="scope">
			    <el-button v-if="scope.row.order_status==2" @click="toOrderDetail(scope.row.order_id)" type="text" size="small">订单详情</el-button>
			</template>
		</el-table-column>
	  </el-table>
	</el-dialog>
	
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                listLoading:false,
                list: [],
                pagination: {total: 0},
                loading: false,
				dialogLoading:false,
				deposit_presale_active_id : '',	//定金预售活动id
				pageCount: 0,		//总的页面数
				current_page: 1,	//默认显示第一页
				search : {},		//这个是搜索来的字段
				memberList: [],
				dialogFormVisible: false,
            }
        },
        methods: {
			// 0.1 点击搜索--这个也是要发请求
			toSearch(e){
				console.log('e==',e);
				let searchData = e;
				let others = {deposit_presale_active_id : this.deposit_presale_active_id}
				let search={};
				searchData.nickname?search['nickname']=searchData.nickname:'';
				searchData.begin_time?search['begin_time']=searchData.begin_time:'';
				searchData.end_time?search['end_time']=searchData.end_time:'';
				searchData.order_status=="选择定金预售状态"?'':search['order_status']=searchData.order_status;
				this.current_page = 1;
				this.search = search;
				this.loadData(this.current_page,others,search);
			},
            download(e){
                let searchData = e;
                let others = {deposit_presale_active_id : this.deposit_presale_active_id}
                // 创建一个search请求对象--可以用es6方法const {a1,b1} = a; const b ={a1,b1}
                let search={};
                searchData.nickname?search['nickname']=searchData.nickname:'';
                searchData.begin_time?search['begin_time']=searchData.begin_time:'';
                searchData.end_time?search['end_time']=searchData.end_time:'';
                searchData.status=="选择定金预售状态"?'':search['status']=searchData.status;
                this.search = search;
                this.toDownload(others,search);
            },

            toDownload(others,search) {
                request({
                    params: {
                        r: 'deposit-presale/default/open-list',
                        ...others,
                        ...search
                    },
                    method: 'GET',
                }).then(e => {
                    let res = e.data;
                    if (res.code == 0) {
                        console.log(res.data.url);
                        window.open(res.data.url, '_blank').location;
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(e => {
                });
            },
			
			
			// 页面跳转
            toPageAdd() {
                navigateTo({
                    r: 'plugin/deposit_presale/mall/index/add',
                })
            },
			// 跳转定金预售订单列表
			toOrderList() {
                navigateTo({
                    r: 'plugin/deposit_presale/mall/order/list',
                })
            },
			// 跳转定金预售订单列表
			toGroupList(){
				navigateTo({
				    r: 'plugin/deposit_presale/mall/group/list',
				})
			},
			
			// 跳转到订单详情
			toOrderDetail(order_id){
				navigateTo({
				    r: 'mall/order/detail',
					id:order_id,	//直接跳转到订单详情页，但是要确保获取时字段统一
				})
			},
			//页面数变化，获取新的数据--获取到页面数,发请求就完事了
			changePagination(e) {
				console.log(e);
				this.current_page = e;	//当前页
				let others = {deposit_presale_active_id : this.deposit_presale_active_id}
				this.loadData(this.current_page,others,this.search);
			},
			// 结束该团
            finish(row) {
                this.loading = true;
                request({
                    params: {
                        r: 'deposit-presale/default/finish',
                        open_group_id: row.id
                    },
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
					    let others = {deposit_presale_active_id : this.deposit_presale_active_id}
					    this.loadData(this.current_page,others,this.search);
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {
                });
            },
			
			// 请求获取数据--获取活动的开团列表
            loadData(page,others,search) {
                this.listLoading = true;
                request({
                    params: { 
                        r: 'deposit-presale/default/open-list',
                        page: page,
						...others,
						...search
                    },
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.list = res.data.list;
                        this.pageCount = res.data.pagination.page_count;	//返回了总的页面数
                        this.pagination = res.data.pagination; //拿到关于页码页容量的数据
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {
                });
            },
			
			// 获取该团下的定金预售成员列表
			groupMemberList(row) {
				this.dialogFormVisible = true;
			    this.dialogLoading = true;
			    request({
			        params: {
			            r: 'deposit-presale/default/deposit-presale-team',
                        open_group_id : row.open_group_id,
                        deposit_presale_active_id : row.deposit_presale_active_id,
                        commander_id : row.commander_id,
			        },
			        method: 'get',
			    }).then(e => {
			        let res = e.data;
			        this.dialogLoading = false;
			        if (res.code === 0) {
			            this.memberList = res.data.list;
			        } else {
			            this.$message.error(res.msg);
			        }
			    }).catch(e => {
			    });
			},
            pageChange(page) {
                let others = {deposit_presale_active_id : this.deposit_presale_active_id}
                this.loadData(page,others,this.search);
            },
            formatStatus: function (row) {
                switch (row.status) {
                    case '0':
                        return '全部';

                    case '1':
                        return '开团中';

                    case '2':
                        return '已结束';
                    default:
                        return '未知';
                }
            },
        },
		// 加载的时候获取到列表页
		created(){
			// 获取到活动id
			if(getQuery('deposit_presale_active_id')){
				this.deposit_presale_active_id = getQuery('deposit_presale_active_id');
			}
		},
        mounted(){
			// 数据初始化
			this.current_page = 1;
			this.pageCount = 0;
			// 默认是拿到对应定金预售id下的列表数据
			let others = {deposit_presale_active_id : this.deposit_presale_active_id}
            this.loadData(this.current_page,others,this.search);
        },
    })
</script>