qimall/addons/Pk/backend/views/personal/list.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 17:50
 */

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
ComponentHelper::loadComponentView('achievement-details', AddonHelper::getAddonRootPath('Pk') . 'backend/views/components');
?>
<div id="app" v-cloak>
    <el-card class="box-card"  shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">

                <el-breadcrumb-item>
				    <span style="color: #409EFF;cursor: pointer"
                          @click="$navigate({r:'pk/personal/index'})"><!--mall/stock/level  -->
				        个人PK
				    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>人员列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="table-body">
            <div class="head" style="display: flex;margin-bottom: 30px;flex-wrap: wrap;">

                <div style="display: flex;width: 220px;margin-right: 20px;align-items: center;margin-bottom: 15px;">
                    <div style="flex-shrink: 0;align-items: center;">人员名称：</div>
                    <el-input clearable size="small" type="text" v-model="search.nickname" @keyup.enter.native="toSearch" placeholder="请输入人员名称"></el-input>
                </div>

                <div style="display: flex;margin-right: 20px;align-items: center;margin-bottom: 15px;">
                    <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>

                <el-button size="mini" type="primary" icon="el-icon-search" style="height: 32px;" @click='toSearch'>搜索</el-button>

                <el-button size="mini" type="danger"  style="height: 32px;" @click='resetFun'>重置</el-button>
            </div>

            <el-table
                class="table1"
                v-loading="loading"
                :data="list"
                size="small"
                stripe
                style="width: 100%">
                <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    min-width="60">
                </el-table-column>
                <el-table-column
                    prop="scope.activity.name"
                    label="活动名称"
                    align="center"
                    min-width="100">

                    <template slot-scope="scope">
                        <!-- {{formatTime(scope.row.created_at)}} -->
                        {{scope.row.activity.name}}
                    </template>
                </el-table-column>

                <el-table-column
                    label="人员名称"
                    min-width="150">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <el-image fit="cover" :src="scope.row.user.avatar_url?scope.row.user.avatar_url:'resources/img/common/default-avatar.png'" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                            <div>
                                <div>{{scope.row.user.nickname}}</div>
                                <div>ID {{scope.row.user.id}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="performance"
                    label="个人目标"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                        {{scope.row.target}}<span v-if="type == 1">人</span>
                        <span v-else>元</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="个人排名"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope" v-if="type == 1">
                        {{ scope.row.new_user_num <= 0 ? '暂无排名' : 10*(search.page-1) + scope.$index+1 }}
                    </template>
                    <template slot-scope="scope" v-else>
                        {{ scope.row.order_money_num <= 0 ? '暂无排名' : 10*(search.page-1) + scope.$index+1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="个人成绩"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                        {{type == 1?scope.row.new_user_num+'人':scope.row.order_money_num+'元'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="PK类型"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                        <div v-if="type == 1">拉新</div>
                        <div v-else>业绩</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="created_at"
                    label="加入时间"
                    align="center"
                    min-width="100">
                    <template slot-scope="scope">
                        <!-- {{formatTime(scope.row.created_at)}} -->
                        {{scope.row.created_at  | dateTimeFormat('Y-m-d H:i') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    min-width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="showDetail(scope.row)">成绩明细<i class="el-icon-caret-right el-icon--right"></i></el-button>
                    </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() {
            return {
                edit:{
                    show:false,
                },
                id:0,
                time:'',
                pageCount:0,
                loading:false,
                srcList:[],
                PKlist:[//活动类型;1拉新;2业绩
                    {name:'全部',value:''},
                    {name:'拉新PK',value:1},
                    {name:'业绩PK',value:2},
                ],
                search: {
                    page: 1,
                    nickname:'',
                    begin_time:'',
                    end_time:'',
                },
                statusList:[//状态;0未开始;1进行中;2已结束;3已取消;
                    {name:'全部',value:''},
                    {name:'未开始',value:0},
                    {name:'进行中',value:1},
                    {name:'已结束',value:2},
                    {name:'已取消',value:3},
                ],
                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]);
                        }
                    }]
                },
                activity_type:'',
                type:1,
                list:[

                ]
            };
        },
        mounted() {

            if(getQuery('id')){
                this.id = getQuery('id');
            }
            if(getQuery('type')){
                this.type = getQuery('type');
            }
            this.getList();
        },
        watch:{

        },
        methods: {
            resetFun(){
                this.search = {
                    page: 1,
                    nickname:'',
                    begin_time:'',
                    end_time:'',
                }
                this.time = '';
                this.getList();
            },
            pageChange(page){
                this.search.page = page;
                this.getList();
            },
            previewImg(img){
                this.srcList.push(img);
            },
            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.getList();
            },
            toSearch() {
                this.search.page = 1;
                this.getList();
            },
            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;
            },
            getList(){
                let params = {
                    r: 'pk/personal/list',//个人活动队员列表
                    activity_id:this.id,
                    activity_type:this.type,
                    limit:10
                };
                params = Object.assign(params, this.search);
                //console.log('请求前的params='+JSON.stringify(params))
                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.activity_type = e.data.data.activity_type;
                        this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            showDetail(row){
                navigateTo({
                    r: 'pk/personal/user-log',
                    id: this.id,
                    type: this.type,
                    user_id:row.user.id,
                });
            }
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .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-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }
</style>