qimall/addons/Happiness/backend/views/store-agent/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" style="display:flex;align-items: center;justify-content: space-between;">
            <span>代理管理</span>
            <div>
                <el-button type="primary" size="small" @click="addAgent()">添加代理</el-button>
            </div>
        </div>


        <div class="table-body">
            <el-alert style="margin-bottom:20px;" type="info" title="代理管理端登录入口链接：" :closable="false">
                <template>
                    <span id="target">{{agent_login_url}}</span>
                    <el-button type="text" id="copy_btn" data-clipboard-action="copy" data-clipboard-target="#target"
                               size="mini">复制链接
                    </el-button>
                </template>
            </el-alert>
            <div>
                <div class="input-item">
                    <el-input size="small"
                              placeholder="会员昵称|ID|手机号"
                              v-model="searchData.user_keyword"
                              clearable>
                    </el-input>
                </div>
                <div class="input-item">
                    <el-input size="small"
                              placeholder="推广员昵称|ID|手机号"
                              v-model="searchData.parent_keyword"
                              clearable>
                    </el-input>
                </div>
                <div class="input-item">
                    <el-input size="small"
                              placeholder="代理区域"
                              v-model="searchData.region"
                              clearable>

                    </el-input>
                </div>
                <div class="input-item">
                    <el-select size="small" v-model="searchData.level" placeholder="请选择等级">
                        <el-option
                                v-for="item in agent_level"
                                :key="item.level"
                                :label="item.name"
                                :value="item.level">
                        </el-option>
                    </el-select>
                </div>
                <el-button type="primary" size="small" @click="search">搜索</el-button>

            </div>
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    stripe
                    style="width: 100%"
                    :cell-style="{ height: '80px' }"
            >
                <el-table-column label="会员ID" width="200" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.user_id}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="会员" width="200" align="center">
                    <template slot-scope="scope">
                        <com-image style="float: left;margin-right: 5px;" mode="aspectFill"
                                   :src="scope.row.user.avatar_url"></com-image>
                        <div>{{scope.row.user.nickname}}</div>
                        <div>{{scope.row.user.mobile}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="代理区域" align="center">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">{{scope.row.region_name}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="等级名称" align="center">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">{{scope.row.level_name}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="推广员" width="200" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.parent">
                        <com-image style="float: left;margin-right: 5px;" mode="aspectFill"
                                   :src="scope.row.parent.avatar_url"></com-image>
                        <div>{{scope.row.parent.nickname}}</div>
                        <div>{{scope.row.parent.mobile}}</div>
                        </div>
                    </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('status', scope.row)"
                                v-model="scope.row.status">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180"
                        align="center">
                    <template slot-scope="scope">
                        <el-button circle size="mini" type="text" @click="edit(scope.row.id)">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <img src="resources/img/mall/edit.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <el-button circle size="mini" type="text" @click="agentDelete(scope.row, scope.$index)">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img src="resources/img/mall/del.png" alt="">
                            </el-tooltip>
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <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-dialog title="添加代理"
                   :visible.sync="agentDialogVisible"
                   width="30%">
            <div>
                <el-form ref="form" label-width="100px">
                    <el-form-item label="会员：" prop="level">
                        <el-button type="primary" size="small" @click="chooseUser(1)">选择会员</el-button>
                        <div v-if="agentUser">
                            <div style="display: inline-block; margin-left: 15px;">会员ID：<span>{{agentUser.id}}</span></div>
                            <div style="display: inline-block; margin-left: 15px;">会员昵称：<span>{{agentUser.nickname}}</span></div>
                        </div>
                    </el-form-item>
                    <el-form-item label="代理等级：" prop="level">
                        <el-select size="small" v-model="agentForm.level" placeholder="请选择代理等级" @change="selectChangeAgentLevel">
                            <el-option
                                    v-for="item in agent_level"
                                    :key="item.level"
                                    :label="item.name"
                                    :value="item.level">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!--代理等级-->
<!--                    <el-form-item label="区域类型：" prop="level">-->
<!--                        <el-select size="small" v-model="agentForm.role" placeholder="请选择等级">-->
<!--                            <el-option-->
<!--                                    v-for="item in agent_role"-->
<!--                                    :key="item.role"-->
<!--                                    :label="item.name"-->
<!--                                    :value="item.role"-->
<!--                                    :disabled="item.disable">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <!--选择代理区域-->
                    <el-form-item label="代理区域：" prop="province_id">
                        <div class="flex flex-y-center">
                            <el-select size="small" v-model="provinceInfo" value-key='id' placeholder="请选择省"
                                       @change="regionChange($event, 1)" style="margin-right: 10px;">
                                <el-option v-for="item in provinces" :key="item.id" :label="item.name"
                                           :value="item"></el-option>
                            </el-select>
                            <el-select size="small" v-if="agentForm.role>=2" v-model="cityInfo" value-key='id'
                                       placeholder="请选择市"
                                       @change="regionChange
                            ($event, 2)" style="margin-right: 10px;">
                                <el-option v-for="item in citys" :key="item.id" :label="item.name"
                                           :value="item"></el-option>
                            </el-select>
                            <el-select size="small" v-if="agentForm.role>=3" v-model="districtInfo" value-key='id'
                                       placeholder="请选择区"
                                       @change='regionChange($event, 3)' style="margin-right: 10px;">
                                <el-option v-for="item in districts" :key="item.id" :label="item.name"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="推广员" >
                        <el-button type="primary" size="small" @click="chooseUser(2)">选择会员</el-button>
                        <div v-if="parentUser">
                        <div style="display: inline-block; margin-left: 15px;">会员ID：<span>{{parentUser.id}}</span></div>
                        <div style="display: inline-block; margin-left: 15px;">会员昵称：<span>{{parentUser.nickname}}</span></div>
                        </div>
                    </el-form-item>
                </el-form>


            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="agentDialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="agentSave()">确 定</el-button>
                </span>
        </el-dialog>
        <el-dialog title="选择会员" :visible.sync="dialogVisible" width="50%">
            <div class="search-box">
                <div class="input-item">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="请输入会员ID"
                              v-model="searchUserData.user_id"></el-input>
                </div>
                <div class="input-item">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="会员昵称/手机号"
                              v-model="searchUserData.keyword"></el-input>
                </div>
                <el-button type="primary" size="small" @click="getUser">搜索</el-button>
                <el-button type="warning" size="small" @click="clearSearch"
                           v-if="searchUserData.keyword || searchUserData.user_id"
                           style="padding: 9px 15px !important;">清除搜索条件
                </el-button>
            </div>
            <el-table :data="userList" stripe v-loading="userListLoading" style="width: 100%"
                      @current-change="clickChange">
                <el-table-column prop="date" width="50">
                    <template slot-scope="scope">
                        <el-radio v-model="currentUser" :label="scope.row"><i></i></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="avatar_url" label="会员" width="80">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.avatar_url" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" width="180"></el-table-column>
                <el-table-column prop="mobile" label="手机号" width="200">
                </el-table-column>
                <el-table-column prop="level_name" label="会员等级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.level > 0">等级{{scope.row.level_name}}</div>
                        <div v-else>普通用户</div>
                    </template>
                </el-table-column>
                <el-table-column prop="parent_nickname" label="已绑定推荐人">
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="userPagination" background layout="prev, pager, next" :current-page="userPage"
                               :page-count="userPageCount"></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="selectUser">确 定</el-button>
        </span>
        </el-dialog>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                userList: [],
                userType:1,
                agentUser:{},
                parentUser:{},
                currentUser:{},
                searchData: {
                    user_keyword: '',
                    parent_keyword: '',
                    level: '',
                    region: ''
                },
                searchUserData: {
                    user_id: '',
                    keyword: '',
                },
                userInfo: null,
                userListLoading: false,
                agent_level: [],
                listLoading: false,
                userPage: 1,
                userPageCount:0,
                page: 1,
                type: "1",
                pageCount: 0,
                dialogVisible: false,
                agentDialogVisible: false,
                level: '',
                agentForm: {
                    level: '',
                    province_id: '',
                    city_id: '',
                    district_id: '',
                    region: '',
                    role: '',
                    user_id: '',
                    parent_id: ''
                },
                provinces: [],
                provinceInfo: {},
                citys: [],
                cityInfo: {},
                districts: [],
                districtInfo: {},
                agent_login_url:'',
                agent_role: [
                    {
                        role: 1,
                        name: '省代',
                        disable:false
                    },
                    {
                        role: 2,
                        name: '市代',
                        disable:false
                    },
                    {
                        role: 3,
                        name: '区代',
                        disable:false
                    }
                ]
            };
        },
        mounted: function () {
            this.search();
        },
        methods: {
            selectChangeAgentLevel(value)
            {
                let self = this;
                self.agentForm.role =self.agent_level[value].role
            },
            // 获取会员列表
            getUser() {
                let self = this;
                console.log(self.userPage);
                self.userListLoading = true;
                request({
                    params: {
                        r: 'happiness/store-agent/get-agent-users',
                        page: self.userPage,
                        ...self.searchUserData,
                    },
                    method: 'get',
                }).then(e => {
                    self.userListLoading = false;
                    if (e.data.code == 0) {
                        self.userList = e.data.data.list;
                        self.userPageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },
            // 选择会员
            chooseUser(type) {
                this.userType=type
                this.userPage = 1;
                this.getUser()
                this.dialogVisible = true;
            },
            // 会员列表分页
            userPagination(currentPage) {
                this.userPage = currentPage;
                this.getUser();
                this.userinfo = null;
                this.$forceUpdate()
            },
            // 选中会员确定回调
            selectUser() {
                console.log('selectUser === : ', this.userInfo);
                this.dialogVisible = false;
            },
            // 会员列表选中
            clickChange(userInfo) {
                if(this.userType==1)
                {
                    this.agentUser = userInfo;
                }
                else
                {
                    this.parentUser = userInfo;
                }
                this.currentUser=userInfo;
            },
            // 清楚搜索条件
            clearSearch() {
                this.searchUserData.user_id = null;
                this.searchUserData.keyword = '';
                this.userPage = 1;
                this.getUser();
            },
            search() {
                this.page = 1;
                this.getAgentList()
            },
            resetAgent()
            {
                this.agentUser = {};
                this.parentUser = {};
                this.agentForm = {
                    level: '',
                    province_id: '',
                    city_id: '',
                    district_id: '',
                    region: '',
                    role: '',
                    user_id: '',
                    parent_id: ''
                }
            },
            addAgent() {
                console.log('addAgent');
                //重置agentForm
                this.resetAgent();

                this.agentDialogVisible = true;
            },
            agentSave() {
                let self = this;

                if(self.agentForm.level == '')
                {
                    self.$message.error('请选择代理等级');
                    return false;
                }
                if(self.agentForm.role == '')
                {
                    self.$message.error('请选择代理区域等级');
                    return false;
                }
                if(self.provinceInfo== null)
                {
                    self.$message.error('请选择省');
                    return false;
                }
                if(self.cityInfo== null && self.agentForm.role == 2)
                {
                    self.$message.error('请选择市');
                    return false;
                }
                if(self.districtInfo== null && self.agentForm.role == 3)
                {
                    self.$message.error('请选择区');
                    return false;
                }
                if(self.agentUser==null)
                {
                    self.$message.error('请选择会员');
                    return false;
                }
                self.agentForm.user_id = self.agentUser.id;
                self.agentForm.province_id = self.provinceInfo.id;
                self.agentForm.city_id = self.cityInfo.id?self.cityInfo.id:null;
                self.agentForm.district_id = self.districtInfo?self.districtInfo.id:null;
                self.agentForm.parent_id = self.parentUser?self.parentUser.id:null;
                request({
                    params: {
                        r: 'happiness/store-agent/index',
                    },
                    method: 'post',
                    data: self.agentForm
                }).then(e => {
                    if (e.data.code == 0) {
                        self.agentDialogVisible = false;
                        self.getAgentList();
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                })
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getAgentList();

            },
            getAgentList() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'happiness/store-agent/index',
                        page: self.page,
                        user_keyword: this.searchData.user_keyword,
                        parent_keyword: this.searchData.parent_keyword,
                        level: this.searchData.level,
                        region: this.searchData.region,
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.agent_level = e.data.data.agent_list;
                    self.agent_login_url=e.data.data.agent_login_url;
                    self.pageCount = e.data.data.page_count;
                    self.provinces = e.data.data.regions;
                }).catch(e => {
                    console.log(e);
                });
            },
            // 省市区三级联动
            regionChange(e, level) {
                // console.log(e);
                let self = this;
                request({
                    params: {
                        r: 'happiness/store-agent/get-regions',
                        region_id: e.id,
                        level: level,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        switch (level) {
                            case 1:
                                self.citys = e.data.data;
                                this.cityInfo = {}
                                this.districtInfo = {}
                                break;
                            case 2:
                                self.districts = e.data.data;
                                this.districtInfo = {}
                                break;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });

            },
            edit(id) {
                let self = this;
                request({
                    params: {
                        r: 'happiness/store-agent/edit',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    self.agentForm = e.data.data;
                    self.parentUser = e.data.data.parent;
                    self.agentUser = e.data.data.user;
                    self.agentDialogVisible = true;
                    self.citys = e.data.data.citys?e.data.data.citys:[];
                    self.districts = e.data.data.districts?e.data.data.districts:[];
                    if(self.agentForm.role == 1)
                    {
                        self.provinceInfo = {id: e.data.data.province_id};
                    }
                    if(self.agentForm.role == 2)
                    {
                        self.provinceInfo = {id: e.data.data.province_id};
                        self.cityInfo = {id: e.data.data.city_id};
                    }
                    if(self.agentForm.role == 3)
                    {
                        self.provinceInfo = {id: e.data.data.province_id};
                        self.cityInfo = {id: e.data.data.city_id};
                        self.districtInfo = {id: e.data.data.district_id};
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });

            },

            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let status = data ? parseInt(data.status) : '';
                switch (type) {
                    case 'status':
                        let self = this;
                        self.listLoading = true;
                        request({
                            params: {
                                r: 'happiness/store-agent/switch-status',
                            },
                            method: 'post',
                            data: {
                                id: id,
                                status: status,
                            }
                        }).then(e => {
                            self.listLoading = false;
                            if (e.data.code === 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                            self.getList();
                        }).catch(e => {
                            console.log(e);
                        });
                        break;

                    default:
                        break;
                }
            },
            agentDelete(row, index) {
                let self = this;
                self.$confirm('删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'happiness/store-agent/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = 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 => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
        }
    });
    var clipboard = new ClipboardJS('#copy_btn');

    var self = this;
    clipboard.on('success', function (e) {
        self.ELEMENT.Message.success('复制成功');
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        self.ELEMENT.Message.success('复制失败，请手动复制');
    });
</script>

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

    .input-item {
        display: inline-block;
        margin-right: 10px;
    }

</style>