qimall/addons/Pk/backend/views/personal/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 style="display: none;"  type="primary"
                       @click="test"
                       size="small">测试推荐活动
            </el-button>
            <el-button type="primary" size="small" @click="$navigate({r: 'pk/personal/personal-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"
                    title="设定人数"
                    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.new_num+'人':scope.row.order_amount+'元'}}
                    </template>
                </el-table-column>

                <el-table-column
                    prop="price"
                    title="报名费用"
                    label="费用"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                        ￥{{scope.row.price}}
                    </template>
                </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.open_status == 0">未开始</el-tag>
                        <el-tag type="success" effect="dark" v-if="scope.row.open_status == 1">进行中</el-tag>
                        <el-tag type="warning" effect="dark" v-if="scope.row.open_status == 2">已结束</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="活动时间"
                    align="center"
                    min-width="200">
                    <template slot-scope="scope">
                        <div>{{scope.row.begin_time }}</div>
                        <div>{{scope.row.end_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="奖品"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                        <div v-if="scope.row.prize && scope.row.prize.length" @click="seeprize(scope.row.prize);"  style="text-align: left; cursor: pointer">
                            查看奖品
                        </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-button>
                            </template>
                            <template v-else>
                                <el-button type="text" size="mini" @click.native="edit(scope.row.id)">
                                    编辑
                                </el-button>
                            </template>
                            <el-button  size="mini" type="text" @click="delFun(scope.row, scope.$index)">
                                删除
                            </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)">人员列表</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>

    <!--        弹框提示开始-->
    <el-dialog title="活动奖品" width="30%" :visible.sync="dialogAddgsVisible"
               @close="dialogAddgsVisible = false" :modal-append-to-body="false">
        <div  style="text-align: left;">
            <el-table
                size="mini"
                :data="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_price"
                        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-dialog>
    <!--        弹框提示结束-->
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            prize:[],
            activeName: '-1',
            list: [],
            dialogAddgsVisible:false,
            pagination: null,
            agent_level_list: [],
            search: {
                page: 1,
                name:'',
                begin_time:'',
                end_time:'',
                status:'',
                performance_type:'',
                activity_type:1, //活动类型;1个人;2战队;
                /* goods_name:'',
                 keyword:'',
                 changes_dir:null,
                 changes_type:null,
                 is_settle:null */
            },
            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: {
            seeprize(data){
                this.dialogAddgsVisible = true;
                this.prize = data;
            },
            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;
            },
            loadData() {

                let params = {
                    r: 'pk/personal/index',//活动列表
                    /* page:1, */
                    limit:10
                };
                params = Object.assign(params, this.search);
                this.loading = true;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    //console.log('个人活动列表='+JSON.stringify(e))
                    this.loading = 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 => {
                    this.loading = false;
            });
            },
            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();
            },
            switchFun(event,id){
                this.loading = true;
                request({
                    params: {
                        r: 'pk/personal/patch'
                    },
                    method: 'post',
                    data:{
                        id:id,
                        is_enable:event
                    }
                }).then(e => {
                    this.loading = false;
                //console.log('添加的结果='+JSON.stringify(e))
                if (e.data.code == 0) {
                    this.$message.success('更改状态成功');
                    this.loadData();
                } else {
                    this.$message.error(e.data.msg);
                    this.loadData();
                }
            }).catch(e => {
                    this.loadData();
                this.$message.error(e.data.msg);
                this.loading = false;
            });
            },
            edit(id){
                //console.log(id)
                navigateTo({
                    r: 'pk/personal/personal-add',
                    id: id
                });
            },
            goTo(data){
                navigateTo({
                    r: 'pk/personal/list',
                    id:data.id,
                    type:data.performance_type
                });
            },
            test(){
                let self = this;
                self.loading = true;
                let basic_params = {
                    page: self.page,
                };
                params = Object.assign(basic_params, this.search);
                request({
                    params: {
                        r: 'pk/personal/test'
                    },
                    method: 'post',
                    data: params
                }).then(e => {

                }).catch(e => {
                    self.loading = false;
            });
            },
            delFun(row,index){
                let self = this;
                let message = '是否确认删除该活动?';
                if(row.status == 1){
                    message = '该活动正在进行中，是否确认继续删除该活动?';
                }
                self.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.loading = true;
                request({
                    params: {
                        r: 'pk/personal/destroy',
                        id:row.id
                    },
                    method: 'get',
                }).then(e => {

                    self.loading = false;
                if (e.data.code === 0) {
                    self.$message.success(e.data.msg);
                    self.list.splice(index, 1);
                } else {
                    self.$message.error(e.data.msg);
                }
            }).catch(e => {
                    self.loading = false;
                //console.log('catch='+JSON.stringify(e));
            });
            }).catch(() => {
                    self.$message.info('已取消删除')
            });
            }

        }
    });
</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>