qimall/addons/Happiness/backend/views/store-business/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="addbusiness()">添加推广员</el-button>
            </div>
        </div>


        <div class="table-body">
            <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-select size="small" v-model="searchData.level" placeholder="请选择等级">
                        <el-option
                                v-for="item in business_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.level_name}}</com-ellipsis>
                    </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="businessDelete(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="businessDialogVisible"
                   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="businessUser">
                            <div style="display: inline-block; margin-left: 15px;">会员ID：<span>{{businessUser.id}}</span></div>
                            <div style="display: inline-block; margin-left: 15px;">会员昵称：<span>{{businessUser.nickname}}</span></div>
                        </div>
                    </el-form-item>
                    <el-form-item label="推广人等级：" prop="level">
                        <el-select size="small" v-model="businessForm.level" placeholder="请选择等级">
                            <el-option
                                    v-for="item in business_level"
                                    :key="item.level"
                                    :label="item.name"
                                    :value="item.level">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>


            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="businessDialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="businessSave()">确 定</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="userInfo" :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,
                searchData: {
                    user_keyword: '',
                    level: '',
                },
                searchUserData: {
                    user_id: '',
                    keyword: '',
                },
                userInfo: null,
                userListLoading: false,
                listLoading: false,
                userPage: 1,
                userPageCount:0,
                businessUser:null,
                business_level:[],
                page: 1,
                type: "1",
                pageCount: 0,
                dialogVisible: false,
                businessDialogVisible: false,
                level: '',
                businessForm: {
                    level: '',
                    user_id: '',
                }
            };
        },
        mounted: function () {
            this.search();
        },
        methods: {
            // 获取会员列表
            getUser() {
                let self = this;
                console.log(self.userPage);
                self.userListLoading = true;
                request({
                    params: {
                        r: 'happiness/store-agent/get-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.businessUser = userInfo;
                }
            },
            // 清楚搜索条件
            clearSearch() {
                this.searchUserData.user_id = null;
                this.searchUserData.keyword = '';
                this.userPage = 1;
                this.getUser();
            },
            search() {
                this.page = 1;
                this.getbusinessList()
            },
            resetbusiness()
            {
                this.businessUser = {};
                this.businessForm = {
                    level: '',
                    user_id: '',
                }
            },
            addbusiness() {
                console.log('addbusiness');
                //重置businessForm
                this.resetbusiness();

                this.businessDialogVisible = true;
            },
            businessSave() {
                let self = this;
                if(self.businessForm.level == '')
                {
                    self.$message.error('请选择合伙人等级');
                    return false;
                }
                if(self.businessUser==null)
                {
                    self.$message.error('请选择会员');
                    return false;
                }
                self.businessForm.user_id = self.businessUser.id;
                request({
                    params: {
                        r: 'happiness/store-business/index',
                    },
                    method: 'post',
                    data: self.businessForm
                }).then(e => {
                    if (e.data.code == 0) {
                        self.businessDialogVisible = false;
                        self.getbusinessList();
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                })
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getbusinessList();

            },
            getbusinessList() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'happiness/store-business/index',
                        page: self.page,
                        user_keyword: this.searchData.user_keyword,
                        level: this.searchData.level,
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.business_level = e.data.data.business_list;
                    self.pageCount = e.data.data.page_count;
                }).catch(e => {
                    console.log(e);
                });
            },
            edit(id) {
                let self = this;
                request({
                    params: {
                        r: 'happiness/store-business/edit',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    self.businessForm = e.data.data;
                    self.businessUser = e.data.data.user;
                    self.businessDialogVisible = true;
                }).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-business/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;
                }
            },
            businessDelete(row, index) {
                let self = this;
                self.$confirm('删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'happiness/store-business/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('已取消删除')
                });
            },
        }
    });
</script>

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

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

</style>