qimall/addons/ShareRedpack/backend/views/invate/edit.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">
            <el-image style="height:50px;width:50px;border-radius: 50%;margin-right: 20px;" :src="userInfo.user.avatar_url? userInfo.avatar_url:'/resources/img/common/default-avatar.png'" lazy></el-image>
            <div>
                <div class="user_name">
                    {{userInfo.user.nickname}}
                </div>
                <div class="info">
                    <div>
                        <span>ID：</span>
                        <span class="text">{{ userInfo.user.id }}</span>
                    </div>
                    <div>
                        <span>手机号：</span>
                        <span class="text">{{userInfo.user.mobile || '无'}}</span>
                    </div>
<!--                    <div>-->
<!--                        <span>邀请码：</span>-->
<!--                        <span class="text">{{ userInfo.invite_code }}</span>-->
<!--                    </div>-->

                </div>
            </div>
        </div>

    </div>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-white" style="height: 35px;line-height: 35px;padding-left: 20px;background-color: #fff;margin-bottom: 5px;">
                邀请会员:
            </div>
        </el-col>
    </el-row>
    <el-table :data="userList" stripe style="width: 100%" v-loading="listLoading" v-if="is_team">

        <el-table-column prop="user.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.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>{{scope.row.user.nickname}}</div>
                        <div>{{scope.row.user.mobile}}</div>
                    </div>
                </div>
            </template>
        </el-table-column>

        <el-table-column label="注册时间" min-width="100" align="center">
            <template slot-scope="scope">
                <div>{{scope.row.user.created_at | dateTimeFormat("Y-m-d H:i:s")}}</div>
            </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: [],
                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('user_id');
            console.info(getQuery('user_id'));
            if (getQuery('id') && getQuery('id') != 0) {
                this.id = 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: 'share-redpack/invate/edit',
                        id: this.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.userInfo = res.data.data.detail;
                        this.pageCount = res.data.data.list.page_count;
                        this.userList = res.data.data.list.list;
                        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: 'team-data/default/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: 'team-data/default/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>