qimall/backend/modules/mall/views/user/my-customer.php

<style>
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        float: left;
        margin-right: 8px;
    }
</style>
<div id="my_customer"  v-cloak>
    <div class="user_info">
        <div class="user_detail" v-if="userInfo">
            <el-image style="height:50px;width:50px;border-radius: 50%;margin-right: 20px;" :src="userInfo.avatar_url? userInfo.avatar_url:'/resources/img/common/default-avatar.png'" lazy></el-image>
            <div>
                <div class="user_name">
                    {{userInfo.nickname}}
                </div>
                <div class="info">
                    <div>
                        <span>手机号：</span>
                        <span class="text">{{userInfo.mobile || '无'}}</span>
                    </div>
                    <div>
                        <span>注册时间：</span>
                        <span class="text">{{userInfo.created_at | dateTimeFormat("Y-m-d H:i")}}</span>
                    </div>
                    <div>
                        <span>推荐人：</span>
                        <span class="text">{{userInfo.p_nickname || userInfo.parent_id}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="user_total">
            <div class="module" >
                <div>团队人数</div>
                <div class="module_value">{{userInfo.team_num ? userInfo.team_num : 0}}</div>
            </div>
            <div class="module" >
                <div>好友人数</div>
                <div class="module_value">{{userInfo.first_num ? userInfo.first_num : 0}}</div>
            </div>
            <div class="module" >
                <div>粉丝人数</div>
                <div class="module_value">{{userInfo.second_num ? userInfo.second_num : 0}}</div>
            </div>
            <div class="module" >
                <div>累计消费金额</div>
                <div class="module_value">{{userInfo.pay_money ? userInfo.pay_money : 0.00}}</div>
            </div>
            <div class="module" >
                <div>累计收益</div>
                <div class="module_value">{{userInfo.commission ? userInfo.commission : 0.00}}</div>
            </div>
            <div class="module" >
                <div>待结算</div>
                <div class="module_value">{{userInfo.not_income ? userInfo.not_income : 0.00}}</div>
            </div>
        </div>
    </div>
    <el-card class="box-card">
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="直推客户" name="1"></el-tab-pane>
                <el-tab-pane label="间推客户" name="2"></el-tab-pane>
                <el-tab-pane label="我的团队" name="3"></el-tab-pane>
                <el-tab-pane label="推荐人" name="4"></el-tab-pane>
                <el-tab-pane label="我的收益" name="5"></el-tab-pane>
            </el-tabs>
        </template>
        <div class="tab_search" v-if="activeName=='1' || activeName=='2' || activeName=='3' || activeName=='4'" >
            <div class="search_form">
                <el-select style="width: 200px;margin-right: 10px;" v-model="search_type" @change="selectKeyword" placeholder="请选择搜索类型">
                    <el-option label="会员ID" value="1"></el-option>
                    <el-option label="会员名称" value="2"></el-option>
                    <el-option label="手机号码" value="3"></el-option>
                </el-select>
                <el-input style="margin-right: 10px;" v-model="keyword"></el-input>
                <el-button type="primary" @click="searchInfo">搜索</el-button>
            </div>
        </div>
        <div class="tab_search" v-if="activeName=='5'" >
            <div class="search_form">
                <el-select style="width: 200px;margin-right: 10px;" v-model="from_type" @change="selectFromType" placeholder="请选择搜索类型">
                    <el-option label="佣金类型" value=""></el-option>
                    <el-option :label="item" :value="index" v-for="(item, index) in capitalList"></el-option>
                </el-select>
                <el-button type="primary" @click="searchInfo">搜索</el-button>
            </div>
        </div>
    </el-card>
    <el-table :data="userList" stripe style="width: 100%" v-loading="listLoading" v-if="is_team">
        <el-table-column prop="id" label="会员ID" min-width="100" align="center"></el-table-column>
        <el-table-column key='3' label="会员名称" width="240" >
            <template slot-scope="scope">
                <div class="table-info-img-text">
                    <el-image class="table-info-img circle" :src="scope.row.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>{{scope.row.nickname}}</div>
                        <div>{{scope.row.mobile}}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column  label="推荐人" width="240" v-if="activeName == '3' || activeName == '2'">
            <template slot-scope="scope">
                <div class="table-info-img-text">
                    <el-image class="table-info-img circle" :src="scope.row.p_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>{{scope.row.p_nickname}}</div>
                        <div>ID：{{scope.row.p_id}}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-if="activeName != '4'" label="绑定时间" min-width="100" align="center">
            <template slot-scope="scope">
                <div>{{scope.row.bind_time | dateTimeFormat("Y-m-d H:i:s")}}</div>
            </template>
        </el-table-column>

        <el-table-column prop="pay_money" label="成交金额" min-width="100" align="center">
            <template slot-scope="scope">
                {{scope.row.pay_money}}
            </template>
        </el-table-column>
        <el-table-column prop="pay_num" label="成交订单数" min-width="100" align="center">
            <template slot-scope="scope">
                {{scope.row.pay_num}}
            </template>
        </el-table-column>

        <el-table-column label="操作" min-width="100" v-if="is_team">
            <template v-if="is_team" slot-scope="scope">
                <el-button type="text" size="small" @click="gotoUserDetail(scope.row.id)">详情</el-button>
                <el-button type="text" size="small" @click="gotoBy(scope.row.id)">我的客户</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-table :data="commissionList" stripe style="width: 100%" v-loading="listLoading" v-if="is_commission">
        <el-table-column prop="id" label="编号" min-width="100" align="center"></el-table-column>
        <el-table-column prop="change_num" label="变动金额" min-width="100" align="center">
            <template slot-scope="scope">
                <div style="font-size: 18px;" :style="{color: scope.row.change_type == 'add' ? '#68CF3D' : scope.row.change_type == 'sub' ? '#F6AA5A' : ''}">
                            {{scope.row.change_type == 'add' ? '+' : scope.row.change_type == 'sub' ? '-' : ''}}
                            {{scope.row.change_num}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="current_num" label="佣金类型" min-width="200" align="center">
            <template slot-scope="scope">
                {{capitalList[scope.row.capital_type] ? capitalList[scope.row.capital_type] : ''}}
            </template>
        </el-table-column>
        <el-table-column prop="current_num" label="变动前金额" min-width="200" align="center">
            <template slot-scope="scope">
                {{scope.row.current_num}}
            </template>
        </el-table-column>
        <el-table-column prop="current_num" label="变动后金额" min-width="150" align="center">
            <template slot-scope="scope">
<!--                <div v-if="scope.row.change_type == 'add'">{{scope.row.current_num + scope.row.change_num}}</div>-->
<!--                <div v-if="scope.row.change_type == 'sub'">{{scope.row.current_num - scope.row.change_num}}</div>-->
                <div v-if="scope.row.change_type == 'add'">{{formatData(scope.row.current_num,scope.row.change_num,'add')}}</div>
                <div v-if="scope.row.change_type == 'sub'">{{formatData(scope.row.current_num,scope.row.change_num,'sub')}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" min-width="100" align="center">
            <template slot-scope="scope">
                {{scope.row.desc}}
            </template>
        </el-table-column>
        <el-table-column prop="created_at" label="时间" min-width="100" 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 @current-change="pagination" background layout="prev, pager, next"
                               :page-count="pageCount" :current-page="currentPage"></el-pagination>
        </div>
    </div>

<script>
    // getQuery('order_id'),
    const app = new Vue({
        el: '#my_customer',
        data() {
            return {
                userInfo: <?= $user_info?>,
                activeName: '1',
                tabArr: [],
                userList: [],
                commissionList: [],
                capitalList: [],
                listLoading: false,
                isType: -1,
                keyword: '',
                search_type: '',
                pageCount: 1,
                currentPage: 1,
                page: 1,
                id: '',
                from_type:'',
                is_team: true,
                is_commission: false
            }
        },
        mounted(){
            this.user_id = getQuery('id');
            console.info(getQuery('id'));
            /* this.$navigate({
                // r: this.getOrderListUrl,
                r: 'mall/order/index',
            }) */
            this.getList();
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.is_team = true;
                this.is_commission = false;
                request({
                    params: {
                        r: 'mall/user/my-customer',
                        user_id: this.userInfo.id,
                        status: this.activeName,
                        keyword: this.keyword,
                        search_type: this.search_type,
                        page: this.page
                    },
                    method: 'get',
                }).then(res => {
                    this.listLoading = false;
                    if(res.data.code == 0){
                        this.userList = res.data.data.list;
                        this.pageCount = res.data.data.page_count;
                        console.log(this.userList);
                    }else {
                        this.listLoading = false;
                        this.$message.error(e.data.msg);
                    }

                }).catch(err => {
                    this.$message.error(err.data.msg);
                })
            },
            handleClick(tab, event){
                this.commissionList = [];
                this.userList = [];
                this.pageCount = 1;
                this.page = 1;
                this.from_type = '';
                if (tab.name == 5) {
                    this.listLoading = true;
                    this.is_commission = true;
                    this.is_team = false;
                    this.getCommission();
                } else {
                    this.activeName = tab.name;
                    this.keyword = '';
                    this.search_type = '';
                    this.getList();
                }

            },
            getCommission() {
                this.listLoading = true;
                this.is_commission = true;
                this.is_team = false;
                request({
                    params: {
                        r: 'mall/user/my-commission',
                        user_id: this.userInfo.id,
                        id: this.id,
                        capital_type: this.from_type,
                        page: this.page
                    },
                    method: 'get',
                }).then(res => {
                    this.listLoading = false;
                    if(res.data.code == 0){
                        this.commissionList = res.data.data.list;
                        this.capitalList = res.data.data.capital_type;
                        this.pageCount = res.data.data.page_count;
                    }else {
                        this.listLoading = false;
                        this.$message.error(e.data.msg);
                    }

                }).catch(err => {
                    this.listLoading = false;
                    this.$message.error(err.data.msg);
                })
            },
            selectKeyword(select){
                this.search_type = select;
            },
            searchInfo(){
                if ((this.search_type=='' || this.keyword=='') && this.from_type=='') {
                    this.$message.error('请选择搜索项');
                    return false;
                }
                this.commissionList = [];
                this.userList = [];
                this.pageCount = 1;
                this.page = 1;
                if (this.activeName == 5) {
                    this.getCommission();
                } else {
                    this.getList();
                }
            },
            pagination(currentPage){
                this.page = currentPage;
                if (this.activeName == 5) {
                    this.getCommission()
                } else {
                    this.getList();

                }
            },
            selectFromType(from_type) {
                this.capital_type = from_type;
            },
            gotoUserDetail(id){
                this.$navigate({
                    r: 'mall/user/user-detail',
                    id: id
                })
            },
            gotoBy(id){
                this.$navigate({
                    r: 'mall/user/my-customer',
                    user_id: id
                })
            },
            formatData(arg1,arg2,change_type){
                switch (change_type){
                    case 'add':
                        return (arg1+arg2).toFixed(2);
                    case 'sub':
                         return (arg1-arg2).toFixed(2);
                     default:
                        return 0;
                }
            }
        }
    })
</script>

<style>
.user_info{
    background: #FFF;
    padding: 20px;
    margin-bottom: 10px;
}

.user_detail{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.user_detail .info{
    display: flex;
    font-size: 12px;
    color: #939393;
}

.user_detail .info .text{
    color: #000;
    margin-right: 40px;
}

.user_detail .user_name{
    font-size: 15px;
    margin-bottom: 10px;
}

.user_total{
    background: #F2F2F2;
    display: flex;
    padding: 20px 30px;
}

.user_total .module{
    flex: 1;
    color: #919191;
}

.module_value{
    font-size: 25px;
    color: #000;
    margin-top: 8px;
}

.tab_module{
    background: #FFF;
    padding: 10px 20px;
}

.tab_search{
    display: flex;
}

.search_but{
    display: flex;
    flex: 1;
    color: #797979;
    align-items: center;
}

.search_but div{
    border: 1px solid #E6E6E6;
    padding: 5px 20px;
    margin-right: 30px;
    border-radius: 30px;
    height: 30px;
}

.search_but div:hover{
    cursor:pointer
}

.search_but_sel{
    color: #FFF;
    background: #2E8FF4;
}

.search_form{
    display:flex;
}

</style>