qimall/addons/Pk/backend/views/personal/person-index.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * 文件描述
 * Author: xuyaoxiang
 * Date: 2021/1/29
 * Time: 18:29
 */

?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
            <div>个人PK 活动列表</div>
			<el-button type="primary" size="small" @click="$navigate({r: 'plugin/pk/mall/activity/person-add'})">+新增个人PK</el-button>

        </div>
        <div class="table-body">
			
			<div class="head" style="display: flex;margin-bottom: 30px;">
				
				<div style="display: flex;width: 220px;margin-right: 20px;align-items: center;">
					<div style="flex-shrink: 0;align-items: center;">活动名称：</div>
					<el-input clearable size="small" type="text" v-model="search.name" @keyup.enter.native="toSearch" placeholder="请输入活动名称"></el-input>
				</div>
				
				<div style="display: flex;margin-right: 20px;align-items: center;">
					<div style="flex-shrink: 0;align-items: center;">活动时间：</div>
					<el-date-picker
						size="small"
					     v-model="time"
						@change="datetimeChange"
						:picker-options="pickerOptions"
					     type="daterange"
					     range-separator="至"
					     start-placeholder="开始日期"
					     end-placeholder="结束日期"
						value-format="yyyy-MM-dd"
					     align="center">
					   </el-date-picker>
				</div>
				
				<div style="display: flex;width: 220px;margin-right: 20px;align-items: center;">
					<div style="flex-shrink: 0;align-items: center;">活动状态：</div>
					<el-select size="small" v-model="search.status" @change='toSearch' class="select"  placeholder="请选择活动状态">
					    <el-option :key="index" :label="item.name" :value="item.value" v-for="(item, index) in statusList"></el-option>
					</el-select>
				</div>
				
				<div style="display: flex;width: 220px;margin-right: 20px;align-items: center;">
					<div style="flex-shrink: 0;align-items: center;">PK类型：</div>
					<el-select size="small" v-model="search.performance_type" @change='toSearch' class="select" placeholder="请选择PK类型">
					    <el-option :key="index" :label="item.name" :value="item.value" v-for="(item, index) in PKlist"></el-option>
					</el-select>
				</div>
				

				
				<el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click='toSearch'>搜索</el-button>
				
				<el-button type="danger"  style="padding: 0 10px !important;" @click='resetFun'>重置</el-button>
			</div>
			
			<el-table
				  class="table1"
				  v-loading="loading"
			      :data="list"
				  size="small"
				  :row-class-name="tableRowClassName"
			      style="width: 100%">
				  <el-table-column
				    type="index"
				    label="序号"
				  	align="center"
				    min-width="60">
				  </el-table-column>
				  <el-table-column
				    prop="name"
				    label="活动名称"
				  	align="center"
				    min-width="100">
				  </el-table-column>
				  <el-table-column
				    label="PK类型"
				  	align="center"
				    min-width="80">
					<template slot-scope="scope">
						<div v-if="scope.row.performance_type == 1">拉新</div>
						<div v-if="scope.row.performance_type == 2">业绩</div>
					</template>
				  </el-table-column>
				   <el-table-column
				    prop="people_max_amount"
				    label="设定参与人数"
				  	align="center"
				    min-width="100">
					<template slot-scope="scope">
						<div v-if="scope.row.people_max_amount == -1">无限制</div>
						<div v-else>{{scope.row.people_max_amount}}</div>
					</template>
				  </el-table-column>
				  <el-table-column
				    prop="people_amount"
				    label="参加人员数"
				  	align="center"
				    min-width="100">
				  </el-table-column>
				  <el-table-column
				    prop="performance"
				    label="业绩"
				  	align="center"
				    min-width="100">
					<template slot-scope="scope">
						{{scope.row.performance_type == 1? scope.row.performance+'人':scope.row.performance+'元'}}
					</template>
				  </el-table-column>
				  <el-table-column
				    prop="price"
				    label="报名费用（元）"
				  	align="center"
				    min-width="80">
				  </el-table-column>
				  <el-table-column
				    prop="price"
				    label="活动状态"
				  	align="center"
				    min-width="80">
					<template slot-scope="scope"><!-- 状态;0未开始;1进行中;2已结束;3已取消; -->
						<el-tag type="info" effect="dark" v-if="scope.row.status == 0">未开始</el-tag>
						<el-tag type="success" effect="dark" v-if="scope.row.status == 1">进行中</el-tag>
						<el-tag type="warning" effect="dark" v-if="scope.row.status == 2">已结束</el-tag>
						<el-tag type="danger" effect="dark" v-if="scope.row.status == 3">已取消</el-tag>
					</template>
				  </el-table-column>
				  <el-table-column
				    label="活动时间"
				  	align="center"
				    min-width="140">
					<template slot-scope="scope">
						<div>{{scope.row.begin_time }}</div>
						<div> 至 </div>
						<div>{{scope.row.end_time}}</div>
					</template>
				  </el-table-column>
				  <el-table-column
				    label="奖品"
				  	align="center"
				    min-width="310">
				  	<template slot-scope="scope">
						<div v-if="scope.row.prize && scope.row.prize.length"  style="text-align: left;"><!--v-for="(item,index) in scope.row.prize" style="display: flex;justify-content: center;" -->

							<el-table
								size="mini"
							    :data="scope.row.prize"
							    border
								max-height="250"
							    style="width: 100%">
							    <el-table-column
							      prop="prize_level"
							      label="奖品等级"
								  align="center"
							     >
							    </el-table-column>
							    <el-table-column
							      prop="prize_name"
							      label="奖品名称"
								  align="center"
							      >
							    </el-table-column>
								<el-table-column
								  prop="prize_amount"
								  label="奖品数量"
								  align="center"
								 >
								</el-table-column>
								<el-table-column
								  prop="winner_amount"
								  label="奖励人数"
								  align="center"
								  >
								</el-table-column>
							  </el-table>
							
						</div>
						<el-tag type="info" v-if="!scope.row.prize || !scope.row.prize.length ">暂无数据</el-tag>
				  	</template>
				  </el-table-column>
				  <el-table-column
				    label="是否开启"
				  	align="center"
				    min-width="80">
					<template slot-scope="scope">
						<el-switch disabled v-if="scope.row.status==3"
								@change="((val)=>{switchFun(val,scope.row.id)})"
						        v-model="scope.row.is_enable"
						        :active-value="1"
						        :inactive-value="0"
						>
						</el-switch>
                        <el-switch v-else
								@change="((val)=>{switchFun(val,scope.row.id)})"
						        v-model="scope.row.is_enable"
						        :active-value="1"
						        :inactive-value="0"
						>
						</el-switch>
						
					</template>
				  </el-table-column>
				  <el-table-column
				    label="操作"
				  	align="center"
				    min-width="220">
					<template slot-scope="scope">
						 
						 <div style="display: flex;align-items: center;justify-content: center;">
                            <template v-if="scope.row.status==3">
                                <el-button disabled type="text" size="mini" @click.native="edit(scope.row.id)">
                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                        <img :src="diy_img_prefix + `/static/addons/Pk/edit.png`" alt="">
                                    </el-tooltip>
                                </el-button>
                            </template>
                            <template v-else>
                                <el-button type="text" size="mini" @click.native="edit(scope.row.id)">
                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                        <img :src="diy_img_prefix + `/static/addons/Pk/edit.png`" alt="">
                                    </el-tooltip>
                                </el-button>
                            </template>
							 <el-button  size="mini" type="text" @click="delFun(scope.row, scope.$index)">
							     <el-tooltip class="item" effect="dark" content="删除" placement="top">
							         <img :src="diy_img_prefix + `/static/addons/Pk/del.png"` alt="">
							     </el-tooltip>
							 </el-button>
							 <!-- <el-button style="margin: 4px;" type="primary" size="mini">战队申请</el-button> -->
							 <el-button style="margin: 4px;" type="primary" size="mini" @click="goTo(scope.row.id)">人员列表</el-button>
						 </div>
					</template>
				  </el-table-column>
			    </el-table>

            <div flex="box:last cross:center" style="margin-top: 15px;"><!--  v-if="list.length > 0" -->
                <div></div>
                <div>
                    <el-pagination

                            style="display: inline-block;float: right;"
                            background 
                            @current-change="pageChange"
                            layout="prev, pager, next" 
							:page-count="pageCount"
                            >
                    </el-pagination
                           >
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
            loading: false,
            activeName: '-1',
            list: [],
            pagination: null,
            agent_level_list: [],
            search: {
                page: 1,
				name:'',
				begin_time:'',
				end_time:'',
				status:'',
				performance_type:'',
				activity_type:1, //活动类型;1个人;2战队;
            },
			pageCount:0,
			time:'',
			capitalChange:[//资金变动方向 全部 “” 收入1 支出2 
				{name:'全部',value:''},
				{name:'收入',value:1},
				{name:'支出',value:2}
			],
			capitalChangeType:[//资金变动类型;100会员买货平级奖;101会员买货越级奖;102会员买货货款;103补货平级奖励;104补货越级奖励;105补货货款;106补货奖励;200提现;
				{name:'全部',value:''},
				{name:'会员买货平级奖',value:100},
				{name:'会员买货越级奖',value:101},
				{name:'会员买货货款',value:102},
				{name:'补货平级奖励',value:103},
				{name:'补货越级奖励',value:104},
				{name:'补货货款',value:105},
				{name:'补货奖励',value:106},
				{name:'提现',value:200},
			],
			settlementStatus:[//下拉框 收入结算状态 全部 “” 1已结算;0未结算;
				{name:'全部',value:''},
				{name:'已结算',value:1},
				{name:'未结算',value:0},
			],
			statusList:[//状态;0未开始;1进行中;2已结束;3已取消;
				{name:'全部',value:''},
				{name:'未开始',value:0},
				{name:'进行中',value:1},
				{name:'已结束',value:2},
				{name:'已取消',value:3},
			],
			PKlist:[//活动类型;1拉新;2业绩
				{name:'全部',value:''},
				{name:'拉新PK',value:1},
				{name:'业绩PK',value:2},
			],
			pickerOptions: {
			          shortcuts: [{
			            text: '最近一周',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', [start, end]);
			            }
			          }, {
			            text: '最近一个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit('pick', [start, end]);
			            }
			          }, {
			            text: '最近三个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              picker.$emit('pick', [start, end]);
			            }
			          }]
			        },
        },
        mounted() {
            this.loadData();
        },
        methods: {
			resetFun(){
			 this.search = {
                page: 1,
				name:'',
				begin_time:'',
				end_time:'',
				status:'',
				performance_type:'',
				activity_type:1, //活动类型;1个人;2战队;
				}
				this.time = '';
				this.loadData();
			},
			formatTime(timeStamp) {
			 var date = new Date();
			 date.setTime(timeStamp * 1000);
			 var y = date.getFullYear();
			 var m = date.getMonth() + 1;
			 m = m < 10 ? ('0' + m) : m;
			 var d = date.getDate();
			 d = d < 10 ? ('0' + d) : d;
			 var h = date.getHours();
			 h = h < 10 ? ('0' + h) : h;
			 var minute = date.getMinutes();
			 var second = date.getSeconds();
			 minute = minute < 10 ? ('0' + minute) : minute;
			 second = second < 10 ? ('0' + second) : second;
			 return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
			},
			computedType(type){//资金变动类型;100会员买货平级奖;101会员买货越级奖;102会员买货货款;103补货平级奖励;104补货越级奖励;105补货货款;106补货奖励;200提现;
				if(type == 100){
					return '会员买货平级奖'
				}else if(type == 101){
					return '会员买货越级奖'
				}else if(type == 102){
					return '会员买货货款'
				}else if(type == 103){
					return '补货平级奖励'
				}else if(type == 104){
					return '补货越级奖励'
				}else if(type == 105){
					return '补货货款'
				}else if(type == 106){
					return '补货奖励'
				}else if(type == 200){
					return '提现'
				}
			},
			tableRowClassName({row, rowIndex}){
				row.index = rowIndex+1;
			},

            pageChange(page) {
                this.search.page = page;
                this.loadData();
            },
            handleClick(tab, event) {
                this.search.page = 1;
                this.search.status = this.activeName;
                this.loadData()
            },
            toSearch() {
                this.search.page = 1;
                this.loadData();
            },
			datetimeChange(){
				if(this.time){
					this.search.begin_time = this.time[0];
					this.search.end_time = this.time[1];
				}else{
					this.search.begin_time = '';
					this.search.end_time = '';
				}
				this.toSearch();
			},


        }
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

   

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    
	
	.el-table thead{
		font-size: 14px;
		color: #333;
	}
	.table1 > .el-table__footer-wrapper,.table1 > .el-table__header-wrapper{
	  border-bottom: 1.4px solid #D6D6D6;
	 }
	 
	 /* .el-button+.el-button{
		 margin-left: 0px !important;
	 } */
	 
	 .el-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
	 		 width: 8%;
	 }
</style>