qimall/addons/WechatVideoShop/backend/views/sharer/list.php

<?php

?>

<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">
            <span>分销员</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="onAsync">同步分销员</el-button>
            </div>
        </div>
        <div class="table-body">
            <div style="padding-bottom:20px">
                <el-row align="middle">
                    <el-col :span="16">
                        <p>分销员/导购员推广直播间</p>
                        <p>邀请商城的分销员/导购员成为视频号小店的分销员，邀请成功后，再奖两个身份进行绑定，绑定完成后，分销员/导购员推广视频号直播间的等场景，若产生订单，可赚取佣金。</p>
                        <p>分销员：视频号小店的推广者，分销员/导购员：七件事商场的推广者，七件事结合两个产品能力，分销员功能确定订单是谁推广的，分销员/导购员功能给推广者结算佣金。</p>
                    </el-col>
                    <el-col :span="8" style="text-align: center">
                        <el-button type="primary" size="small" @click="inviteSharerDialogVisible = true" style="padding: 9px 15px !important;">邀请分销员</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-form size="small">
                <div class="picker-container-1">
                    <div class="picker-container-2">分销员接受邀请时间（小店）：</div>
                    <div>
                        <el-date-picker style="margin-top: 1px;" size="small" @change="changeTime" v-model="datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                    </div>
                </div>
                <div class="picker-container-1">
                    <div class="picker-container-2">分销员/导购员绑定时间（七件事商城）：</div>
                    <div><el-date-picker style="margin-top: 1px;" size="small" @change="changeBindTime" v-model="bdatetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker></div>
                </div>
                <div></div>
                <div style="display:flex;">
                    <div class="item-box">
                        <el-select v-model="search.shop_id" placeholder="请选择所属店铺进行搜索" clearable size="small">
                            <el-option v-for="(name, index) in shops" :key="index" :label="name" :value="index"></el-option>
                        </el-select>
                    </div>
                    <div class="item-box">
                        <el-input clearable size="small" style="width: 200px" v-model="search.member" placeholder="请输入分销员手机号码"></el-input>
                    </div>
                    <div class="item-box">
                        <el-select v-model="search.level" placeholder="请选择分销员身份" clearable size="small">
                            <el-option v-for="(name, index) in levels" :key="index" :label="name" :value="index"></el-option>
                        </el-select>
                    </div>
                    <div class="item-box">
                        <el-select v-model="search.status" placeholder="请选择状态" clearable size="small">
                            <el-option label="绑定成功" value="100"></el-option>
                            <el-option label="绑定失败" value="1"></el-option>
                        </el-select>
                    </div>
                    <div class="item-box" flex="dir:left cross:center">
                        <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="searchs">搜索</el-button>
                    </div>
                </div>

            </el-form>

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;" @selection-change="handleSelectionChange">
                    <el-table-column label="绑定视频号小店" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.shop">
                                {{scope.row.shop.name}}
                            </div>
                            <div v-else>
                                -
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户ID" align="center" width="100px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.user">
                                {{scope.row.user.id}}
                            </div>
                            <div v-else>
                                -
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分销员身份（七件事商城）" align="left">
                        <template slot-scope="scope">
                            <div class="table-info-img-text" v-if="scope.row.user">
                                <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000; text-align: left">{{scope.row.user.nickname}}</div>
                                    <div style="font-size: 12px; text-align: left">{{scope.row.user.mobile}}</div>
                                </div>
                            </div>
                            <div v-else>-</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分销员名称（小店）" align="center">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" src="/resources/img/common/default-avatar.png">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000; text-align: left">{{scope.row.nickname}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="等级" align="center">
                        <template slot-scope="scope">
                            {{levels[scope.row.level] ? levels[scope.row.level] : '默认等级'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="累计销售额（元）" align="center">
                        <template slot-scope="scope">
                            {{scope.row.total_sales}}
                        </template>
                    </el-table-column>
                    <el-table-column label="累计客户数" align="center" width="100px">
                        <template slot-scope="scope">
                            {{scope.row.total_customers}}
                        </template>
                    </el-table-column>
                    <el-table-column label="分销员接受邀请时间（小店）" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.invite_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分销员/导购员绑定时间（七件事商城）" align="center">
                        <template slot-scope="scope">
                            {{scope.row.bind_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="100px">
                        <template slot-scope="scope">
                            <el-tag size="mini" :type="scope.row.user ? 'success' : 'danger'">
                                {{scope.row.user ? '绑定成功' : '绑定失败'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.user_id > 0" size="mini" type="text" @click="onShowCustomer(scope.row)">客户列表</el-button>
                            <el-button v-if="scope.row.user_id == 0" size="mini" type="text" @click="onBind(scope.row, scope.$index)">绑定</el-button>
<!--                            <el-popconfirm @confirm="onUnbind(scope.row, scope.$index)"-->
<!--                                           title="您真的要取消分销员资格吗？">-->
<!--                                <el-button type="text" slot="reference"-->
<!--                                           style="color: #F56C6C">取消分销员资格</el-button>-->
<!--                            </el-popconfirm>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <!-- 分页器 -->

            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                                   style="display: inline-block;float: right;" background @current-change="pageChange"
                                   layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>

        <el-dialog title="选择会员" :visible.sync="userDialogVisible" 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="clereSearch" 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%">
                <el-table-column prop="date" width="50">
                    <template slot-scope="scope">
                        <el-radio v-model="userInfo" :label="scope.row" @change="clickChange"><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-row type="flex" class="page" justify="end">
                    <el-pagination @current-change="userPagination" background layout="prev, pager, next" :page-count="pageCount" v-if="userList"></el-pagination>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="userDialogVisible = false">取 消</el-button>
            <el-button type="primary" v-loading="btnLoading" :disabled="btnLoading" @click="onBindSubmit">确 定</el-button>
        </span>
        </el-dialog>

        <el-dialog
                title="邀请视频号小店分销员"
                :visible.sync="inviteSharerDialogVisible"
                width="50%">
            <div>
                <h4>一、前往视频号小店后台，扫码给对应的分销员发送分销员邀请链接</h4>
                <p style="line-height: 24px">路径 -> 店铺管理 -> 店铺分销员管理</p>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/0.png'"></el-image>
                <p style="line-height: 24px">点击右上方红色关联按钮</p>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/1.png'"></el-image>
                <p style="line-height: 24px">扫码后进行分享</p>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/10.png'"></el-image>
                <h4>二、分销员在手机端接受分销员邀请</h4>
                <p style="line-height: 24px">被邀请人点击接受按钮</p>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/11.png'"></el-image>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/12.png'"></el-image>
                <h4>三、邀请成功后在七件事后台再进行分销员/导购员账号绑定</h4>
                <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/sharer/13.png'"></el-image>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="inviteSharerDialogVisible = false">取 消</el-button>
                <a style="margin-left: 15px" target="_blank" href="https://channels.weixin.qq.com/shop"><el-button type="primary">去邀请</el-button></a>
            </span>
        </el-dialog>


        <el-dialog title="客户列表" :visible.sync="customerSharerDialogVisible" width="50%">
            <div class="search-box">
                <div class="input-item" style="width: 150px">
                    <el-input size="small" placeholder="请输入会员ID" v-model="searchCustomerData.user_id"> </el-input>
                </div>
                <div class="input-item" style="width: 150px">
                    <el-input size="small" placeholder="会员昵称/手机号" v-model="searchCustomerData.keyword"> </el-input>
                </div>
                <div class="input-item" style="width: auto !important;">
                    <el-date-picker style="margin-top: 1px;" size="small" @change="changeCustomerTime" v-model="datetime" type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                </div>
                <el-button type="primary" size="small" @click="getUser">搜索</el-button>
                <el-button type="warning" size="small" @click="clearCustomerSearch"
                           v-if="searchCustomerData.keyword || searchCustomerData.user_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
            </div>
            <el-table :data="customerList" stripe v-loading="customerListLoading" style="width: 100%">
                <el-table-column prop="user_id" label="用户ID" align="center"></el-table-column>
                <el-table-column label="客户信息">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div style="color:#000; text-align: left">{{scope.row.user.nickname}}</div>
                                <div style="color:#000; text-align: left">{{scope.row.user.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop='order_num' label="累计购买订单数" align="center"></el-table-column>
                <el-table-column prop='pay_amount' label="累计支付金额" align="center"></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-row type="flex" class="page" justify="end">
                    <el-pagination @current-change="customerPagination" background layout="prev, pager, next" :page-count="customerPageCount" v-if="customerList"></el-pagination>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="customerSharerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="customerSharerDialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            time: [], //本地存时间，请求时不发送
            search: {
                sharer_type: '',
                shop_id: ''
            },
            loading: false,
            activeName: '-1',
            list: [], //列表数据
            status_map: {
                0: '全部',
                2: '审核拒绝',
                3: '审核通过'
            },
            datetime: [],
            bdatetime: [],
            currentItem: null,
            currentIndex: null,
            btnLoading: false,
            pagination: {
                totalCount: 0,
            },
            userDialogVisible: false,
            userListLoading: false,
            userList: [],
            searchUserData: {
                user_id: null,
                keyword: '',
            },
            currentUser: null,
            shops: {},
            pageCount: 0,
            levels: [],
            userInfo: null,
            inviteSharerDialogVisible: false,
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
            customerSharerDialogVisible: false,
            customerList: [],
            customerPageCount: 0,
            searchCustomerData: {
                user_id: null,
                keyword: '',
                parent_id: ''
            },
            customerListLoading: false,
            customerPage: 1,
        },
        mounted() {
            // 获取列表首页数据
            this.loadData(this.page, this.search); //获取列表数据
        },
        methods: {
            // 1.0 获取视频列表
            loadData(page, others) {
                this.loading = true;

                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/sharer/list',
                        page: page,
                        limit: 10,
                        ...others, //其他搜索字段
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list.list;
                        this.shops = e.data.data.shop;
                        this.levels = e.data.data.levels;
                        this.pagination = e.data.data.list.pagination;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },
            pageChange(page) {
                this.page = page;
                this.loadData(this.page, this.search);
            },
            handleClick(tab, event) {
                this.page = 1;
                this.search.status = this.activeName;
                this.loadData(this.page, this.search)
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function(item) {
                    self.choose_list.push(item.id);
                })
            },
            searchs() {
                this.page = 1;
                this.loadData(this.page, this.search);
            },
            onEdit(id) {
                let params = {
                    r: 'wechat-video-shop/order/index',
                };
                navigateTo(params);
            },
            changeTime(e) {
                if (e) {
                    this.search.invite_start_date = e[0]
                    this.search.invite_end_date = e[1]
                } else {
                    this.search.invite_start_date = ''
                    this.search.invite_end_date = ''
                }
            },
            changeBindTime(e) {
                if (e) {
                    this.search.bind_start_date = e[0]
                    this.search.bind_end_date = e[1]
                } else {
                    this.search.bind_start_date = ''
                    this.search.bind_end_date = ''
                }
            },
            changeCustomerTime(e) {
                if (e) {
                    this.searchCustomerData.start_date = e[0]
                    this.searchCustomerData.end_date = e[1]
                } else {
                    this.searchCustomerData.start_date = ''
                    this.searchCustomerData.end_date = ''
                }
            },
            onBind(item, index) {
                this.getUser()
                this.currentItem = item
                this.currentIndex = index
                this.userDialogVisible = true;
            },
            onBindSubmit() {
                //  提交
                this.btnLoading = true;
                this.currentItem.user_id = this.currentUser.id
                this.currentItem.shop_id = 1    //  需要店铺ID
                request({
                    method: 'post',
                    params: {
                        r: 'wechat-video-shop/sharer/bind',
                    },
                    data: this.currentItem
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        this.userDialogVisible = false;
                        this.loadData(this.page, this.search);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            onUnbind(item, index) {
                this.loading = true;
                request({
                    method: 'post',
                    params: {
                        r: 'wechat-video-shop/sharer/unbind',
                    },
                    data: item,
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        this.loadData(this.page, this.search);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            getUser() {
                let self = this;
                self.userListLoading = true;
                request({
                    params: {
                        r: 'wechat-video-shop/sharer/get-users',
                        page: self.currPage,
                        ...self.searchUserData,
                    },
                    method: 'get',
                }).then(e => {
                    self.userListLoading = false;
                    if (e.data.code == 0) {
                        self.userList = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },
            userPagination(page) {
                this.currPage = page
                this.getUser()
            },
            // 会员列表选中
            clickChange(userInfo) {
                this.currentUser = userInfo
            },
            clereSearch() {
                this.searchUserData = {
                    user_id: null,
                    keyword: '',
                }
                this.currPage = 1
                this.getUser()
            },
            onAsync() {
                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/sharer/async',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            onShowCustomer(item) {
                this.searchCustomerData.parent_id = item.user_id
                this.customerSharerDialogVisible = true
                this.getCustomer()
            },
            clearCustomerSearch() {
                this.searchCustomerData = {
                    user_id: null,
                    keyword: '',
                }
                this.currPage = 1
                this.getCustomer()
            },
            getCustomer() {
                let self = this;
                self.customerListLoading = true;
                request({
                    params: {
                        r: 'wechat-video-shop/sharer/customer',
                        page: self.customerPage,
                        ...self.searchCustomerData,
                    },
                    method: 'get',
                }).then(e => {
                    self.customerListLoading = false;
                    if (e.data.code == 0) {
                        self.customerList = e.data.data.list;
                        self.customerPageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },
            customerPagination(page) {
                this.customerPage = page
                this.getCustomer()
            },
        },
    });
</script>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }


    .input-item {
        margin: 0 0 20px;
    }

    .input-search {
        margin-right: 30px;
    }


    .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;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    .el-tabs__header {
        font-size: 16px;
    }

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

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .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;
    }

    .item-box {
        margin-right: 20px;
    }

    .item-box .label {
        margin-right: 8px;
    }

    .item-box .symbol {
        margin: 0 6px;
    }

    .form-nickname {
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .picker-container-1 {
        display: flex;
        align-items: center;
        padding-bottom: 20px
    }

    .picker-container-2 {
        width: 270px;
        text-align: right;
        padding-right: 20px
    }

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .price_col {
        color: #FF5D05;
    }
</style>