qimall/addons/DoubleCopy/backend/views/default/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>团队管理</span>
<!--            <div style="float: right">-->
<!--                <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="editClick">添加团长</el-button>-->
<!--            </div>-->
        </div>
        <div class="table-body">
            <el-form ref="form" style="margin-bottom: 10px;" :model="search" label-width="96px" size="mini">
                <el-row :gutter="12">
                    <el-col :span="6" style="padding-left: 0;" class="top_form">
                        <el-form-item label="会员ID">
                            <el-input v-model="search.user_id" placeholder="请输入会员ID" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" class="top_form">
                        <el-form-item label="会员">
                            <el-input v-model="search.mobile" placeholder="会员手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6"  class="top_form">
                        <el-form-item label="团队等级">
                            <el-select v-model="search.level" placeholder="请选择会员等级">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="(name,level) in level_arr" :label="name" :value="level" :key="level"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col class="top_form">
                        <el-form-item label="加入时间">
                            <el-date-picker
                                    v-model="search.time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    @change="addTimeChange"
                                    :default-time="['00:00:00', '23:59:59']"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col>
                        <el-button type="primary" size="mini" @click="toSearch" >搜索</el-button>
                        <el-button type="danger" size="mini" @click="resetSearch" >清除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-tabs v-model="activeName">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                    <el-table-column prop="user_id" label="会员ID" align="center" width="80"></el-table-column>
                    <el-table-column label="用户信息" align="center" width="180">
                        <template slot-scope="scope">
                            <el-tag class="user-tag" type="warning" size="small" v-if="scope.row.is_virtual" style="position: absolute;left: 5px;top: 5px;zoom: 0.8;">虚拟</el-tag>
                            <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                            <div>{{scope.row.user.nickname}}<br/>{{scope.row.user.mobile}}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="团队等级" prop="level" align="center" width="120">
                        <template slot-scope="scope">
                            <el-tag size="small" type="info" v-if="scope.row.level == 0">默认等级</el-tag>
                            <el-tag size="small" v-else>{{ level_arr[scope.row.level] }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="升级时间" align="center" width="160" >
                        <template slot-scope="scope">
                            <div v-if="scope.row.upgrade_level_at > 0">
                                {{ scope.row.upgrade_level_at|dateTimeFormat('Y-m-d H:i:s') }}
                            </div>
                            <div v-else>
                                {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="助力升级会员" align="center" width="100">
                        <template slot-scope="scope">
                            共 {{ scope.row.help_num }} 人<template v-if="scope.row.has_virtual"><el-tag class="user-tag" type="warning" size="small" style="zoom: 0.8;">含{{scope.row.virtual_user_num}}个虚拟会员</el-tag></template>
                            <el-button v-if="scope.row.help_num > 0" type="text" @click="handle('help', scope.row)" style="margin-left: 10px;">查看</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column label="推荐人" align="center" width="150">
                        <template slot-scope="scope">
                            <div v-if="scope.row.puser">
                                <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.puser.avatar_url ? scope.row.puser.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                                <div>ID：{{scope.row.puser.id}}<br/>{{scope.row.puser.nickname}}</div>
                            </div>
                            <div v-else="scope.row.puser">-</div>
                        </template>
                    </el-table-column>

                    <el-table-column :label="capital_map.second_prize + '用户'" align="center" width="150">
                        <template slot-scope="scope">
                            <div v-if="scope.row.topuser">
                                <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.topuser.avatar_url ? scope.row.topuser.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                                <div>ID：{{scope.row.topuser.id}}<br/>{{scope.row.topuser.nickname}}</div>
                            </div>
                            <div v-else="scope.row.puser">-</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="奖励类型" prop="reward_currency" align="center"></el-table-column>

                    <el-table-column label="已结算佣金" prop="commission" align="center"></el-table-column>

                    <el-table-column :label="capital_map.freeze_fund" prop="frozen_fund" align="center"></el-table-column>



                    <el-table-column label="业绩" prop="achievement" align="center"></el-table-column>

                    <el-table-column label="市场业绩" prop="achievement" align="center">
                        <template slot-scope="scope">
                            <el-tooltip placement="top" effect="light">
                                <div slot="content" style="line-height: 24px;">
                                    <div v-if="scope.row.market.length > 0">
                                        <span v-if="scope.row.market[0]">第一市场：￥{{ scope.row.market[0].achievement }}</span>
                                        <br/>
                                        <span v-if="scope.row.market[1]">第二市场：￥{{ scope.row.market[1].achievement }}</span>
                                    </div>
                                    <div v-else>暂无市场</div>
                                </div>
                                <el-button>查看</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column label="解冻基金达标" prop="is_thaw" align="center" width="100" >
                        <template slot-scope="scope">
                            <div v-if="scope.row.level == 1">-</div>
                            <div v-if="scope.row.level >= 2">
                                <el-tag type="danger" size="small" v-if="scope.row.is_thaw == 0">未达标</el-tag>
                                <el-tag type="success" size="small" v-if="scope.row.is_thaw == 1">达标</el-tag>
                                <el-tag size="small" v-if="scope.row.is_thaw == 2">部分解冻</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="加入时间"  align="center" width="160" >
                        <template slot-scope="scope">
                            {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="启用最高奖励"
                        width="120"
                        align="center">
                        <template slot-scope="scope">
                            <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                @change="handle('change_status', scope.row)"
                                v-model="scope.row.is_height_commission">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="最高奖励" prop="height_commission" align="center"></el-table-column>
                    <el-table-column label="升级为老板时间" align="center" width="160">
                        <template slot-scope="scope">
                            <div v-if="scope.row.upgrade_boss_at > 0">
                                {{ scope.row.upgrade_boss_at|dateTimeFormat('Y-m-d H:i:s') }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="120">
                        <!-- <template slot-scope="scope">
                            <el-button type="text" @click="handle('destroy',scope.row)">删除</el-button>
                        </template> -->
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleCommission(scope.row)">设置最高奖励</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>

    <!-- 查看助力用户 -->
    <el-dialog title="助力用户" :visible.sync="helpDialog" id="help-dialog" center v-if="helpDialog" :before-close="handleClose">
        <div style="position: absolute; left: 25px; top: 15px;">
            <el-button v-if="is_change === false" type="primary" size="small" @click="handle('open_change')">换位编辑</el-button>
        </div>
        <el-alert v-if="is_change" title="注意事项" type="warning" :closable="false">
            ① 鼠标拖拽可以对表格用户进行换位！<br>
            ② 对助力用户的位置进行更换会导致团队下的用户给平台补贴的人也会随之改变，所以请谨慎使用此功能！<br>
            ③ 换位任务正在处理中，有会员下单有可能会导致平台补贴给到不同用户，建议在系统非繁忙时段进行换位！<br>
            ④ 换位前此用户下1、2号位的位置业绩不会因为换位而改变
        </el-alert>
        <el-table :data="helpList" stripe v-loading="helpLoading" size="small" row-key="pos" style="margin-bottom: 15px;">
            <el-table-column prop="user_id" label="会员ID" align="center" width="150"></el-table-column>
            <el-table-column label="基本信息" align="center" width="200">
                <template slot-scope="scope">
                    <el-tag class="user-tag" type="warning" size="small" v-if="scope.row.is_virtual" style="position: absolute;left: 5px;top: 5px;zoom: 0.8;">虚拟</el-tag>
                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                    <div>{{scope.row.user.nickname}}<br/>{{scope.row.user.mobile}}</div>
                </template>
            </el-table-column>

            <el-table-column :label="pos_name" align="center">
                <template slot-scope="scope">
                    {{ scope.row.pos }}
                </template>
            </el-table-column>

            <el-table-column v-if="is_change" label="更改后位置" align="center">
                <template slot-scope="scope">
                    {{ scope.row.now_pos ?? scope.row.pos }}
                </template>
            </el-table-column>

            <el-table-column label="助力时间"  align="center">
                <template slot-scope="scope">
                    {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                </template>
            </el-table-column>
        </el-table>

        <div style="text-align: right;margin: 20px 0;">
            <el-pagination v-if="is_change === false" @current-change="helpPagination" background layout="prev, pager, next" :page-count="helpPageCount"></el-pagination>
        </div>
        <div style="display: flex; flex-direction: row-reverse;" v-if="is_change">
            <el-button style="margin-left: 15px;" type="primary" @click="handle('submit_change')" size="small">换位提交</el-button>
            <el-button @click="handle('close_change')" size="small">取消编辑</el-button>
        </div>
    </el-dialog>
    <el-dialog title="设置佣金最高奖励" :visible.sync="dialogCommission" width="30%">
        <el-form :model="commissionForm" label-width="80px" :rules="commissionFormRules" ref="commissionForm">
            <el-form-item label="最高奖励" prop="price" size="small">
                <el-input type="number" v-model="commissionForm.height_commission" placeholder="请输入金额"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCommission = false">取消</el-button>
            <el-button :loading="btnLoading" type="primary" @click="commissionSubmit">确定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeName: '-1',
            loading: false,
            helpLoading: false,
            helpDialog: false,
            page: 1,
            pageCount: 0,
            helpPage: 1,
            helpPageCount: 0,
            list: [],
            helpList: [],
            hepl_uid:0,
            search: {
                user_id: null,
                mobile: null,
                level: null,
                start_at: null,
                end_at: null,
            },
            //等级列表信息
            level_arr: [],
            capital_map: {
                first_prize: '直推奖',
                second_prize: '平台补贴',
                equal_prize: '培育奖',
                freeze_fund: '冻结基金',
            },
            is_change: false,
            pos_name: '助力位置',
            tableObject: {},
            helpLimit: 100,
            commissionForm: {
                id:0,
                height_commission:0,
            },
            commissionFormRules: {
                height_commission: [
                    {required: true, message: '金额不能为空', trigger: 'blur'},
                ],

            },
            btnLoading:false,
            dialogCommission:false,
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'double-copy/default/index',
                    page:this.page,
                };
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list.list;
                        this.level_arr = e.data.data.level_arr;
                        this.pageCount = e.data.data.list.page_count;
                        this.page = e.data.data.list.page;
                        if (!isEmpty(e.data.data.capital_map)) this.capital_map = e.data.data.capital_map;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            helpPagination(currentPage) {
                let self = this;
                self.helpPage = currentPage;
                self.loadHelpList();
            },
            //搜索时间处理
            addTimeChange(v){
                this.search.start_at = v?v[0]:'';
                this.search.end_at = v?v[1]:'';
            },
            //搜索
            toSearch() {
                this.page = 1;
                this.loadData();
            },
            //清空搜索
            resetSearch() {
                this.search = {};
                this.loadData();
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'destroy':
                        params = {id: data.id, status: -1};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {
                            this.send(params,'double-copy/default/handle',(resp) => {
                                if (resp.code == 0) this.loadData();
                            })
                        })
                        break;
                    case 'help':
                        this.helpDialog = true;
                        this.hepl_uid = data.user_id;
                        this.loadHelpList();
                        break;
                    case 'open_change':
                        this.helpList.forEach((item, index) => {
                            this.helpList[index].now_pos = item.pos
                        })
                        this.is_change = true;// 开启编辑
                        this.pos_name = '更换前位置'
                        this.$nextTick(() => {
                            this.rowDrop();
                        })
                        $("#help-dialog table tr").css({"cursor":"pointer"});
                        break;
                    case 'close_change':
                        this.close_change()
                        this.loadHelpList();
                        break;
                    case 'submit_change':
                        this.$confirm('确定更换这些助力会员位置吗?', '警告', {type: 'warning'}).then(() => {
                            this.send(this.helpList,'double-copy/default/change',(resp) => {
                                if (resp.code == 0) {
                                    this.handleClose();
                                    this.loadData();
                                }
                            }, 'post')
                        })
                        break;
                    case 'change_status':// 修改状态
                        params = {
                            id: data.id,
                            is_height_commission: data.is_height_commission
                        };
                        this.send(params,'double-copy/default/handle');
                        break;
                }
            },
            send(params,url,callback = null, method = 'get') {
                let self = this;
                let basic_params = {
                    r: url
                };
                let data = method === 'get' ? null : params
                params = method === 'get' ? Object.assign(basic_params, params) : basic_params;
                request({
                    params: params,
                    data: data,
                    method: method
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            handleClose() {
                this.helpDialog = false
                this.close_change()
            },
            close_change() {
                this.pos_name = '助力位置'
                this.is_change = false;// 开启编辑
                this.helpList.forEach((item, index) => {
                    this.helpList[index].now_pos = item.pos
                })
                $("#help-dialog table tr").css({"cursor":"default"});
                this.tableObject.destroy();
            },
            loadHelpList() {
                this.helpLoading = true;
                let params = {
                    r: 'double-copy/default/help-list',
                    user_id:this.hepl_uid,
                    page:this.helpPage,
                    limit:this.helpLimit,
                };
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.helpLoading = false;
                    if (e.data.code == 0) {
                        this.helpList = e.data.data.list;
                        this.helpPage = e.data.data.page;
                        this.helpPageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.helpLoading = false;
                });
            },
            //行拖拽
            rowDrop() {
                const tbody = document.querySelector('#help-dialog .el-table__body-wrapper tbody')
                console.log(tbody,'tbody')
                const _this = this
                this.tableObject = Sortable.create(tbody, {
                    onEnd({ newIndex, oldIndex }) {
                        let curr_page = (_this.helpPage - 1) * _this.helpLimit
                        _this.helpList[oldIndex].now_pos = newIndex + 1
                        const currRow = _this.helpList.splice(oldIndex, 1)[0]
                        _this.helpList.splice(newIndex, 0, currRow)
                        _this.helpList.forEach((item, index) => {
                            _this.helpList[index].now_pos = curr_page + (index + 1)
                        })
                        console.log(_this.helpList)
                    }
                })
            },
            handleCommission(row) {
                this.commissionForm.id = row.id;
                this.commissionForm.height_commission = row.height_commission;
                this.dialogCommission = true;
            },
            commissionSubmit() {
                this.$refs.commissionForm.validate((valid) => {
                    if (valid) {
                        this.commissionRequest();
                    }
                });
            },
            commissionRequest(){
                let para = Object.assign({}, this.commissionForm);
                this.btnLoading = true;
                request({
                    params: {
                        r: 'double-copy/default/commission',
                    },
                    method: 'post',
                    data: para,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        this.loadData();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.dialogCommission = false;
                    this.btnLoading = false;
                }).catch(e => {
                    this.dialogCommission = false;
                    this.btnLoading = false;
                });
            },
        }
    });
</script>