ChuangHeng_new/src/views/modules/wechatUserDetail.vue

<template>
    <div class="agent_page">
        <div class="top adfac">
            <div class="top-left adfac" @click="handleBack">
                <img src="@/assets/images/agent/arrow_left.png">
                <span>返回</span>
            </div>
            <div class="top-title">用户详情</div>
        </div>
        <div class="basic">
            <div class="dtitle">基础资料</div>
            <div class="info adf">
                <div class="info-left adffcac">
                    <img src="@/assets/images/agent/dialog_avatar.png">
                    <div class="type">{{ (typeCfg[userInfo.type]||'默认')+"用户" }}</div>
                </div>
                <div class="info-right adf">
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">用户昵称：</div>
                        <div class="info-right-pre-content">{{ userInfo.realName }}</div>
                    </div>
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">手机号码：</div>
                        <div class="info-right-pre-content">{{ userInfo.mobile }}</div>
                    </div>
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">注册编号：</div>
                        <div class="info-right-pre-content">{{ userInfo.registerId }}</div>
                    </div>
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">注册时间：</div>
                        <div class="info-right-pre-content">{{ userInfo.createDate }}</div>
                    </div>
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">注册渠道：</div>
                        <div class="info-right-pre-content">{{ userInfo.channelName }}</div>
                    </div>
                    <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">渠道类型：</div>
                        <div class="info-right-pre-content">{{ channel_type.find(c=>c.value===userInfo.channelType)?.label }}</div>
                    </div>
                    <!-- <div class="info-right-pre adfac">
                        <div class="info-right-pre-title">最近登录时间：</div>
                        <div class="info-right-pre-content">{{ '2025-10-30 13:00:08' }}</div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="ap_line" style="margin-top: 25px;"></div>
        <div class="data">
            <div class="dtitle">使用数据</div>
            <div class="data-num adfac">
                <div class="data-num-pre adffcac">
                    <p>创建团队</p>
                    <span>{{ useData?.teamCount??0 }}</span>
                </div>
                <div class="data-num-pre adffcac">
                    <p>创建问卷</p>
                    <span>{{ useData?.questionnaireCount??0 }}</span>
                </div>
                <div class="data-num-pre adffcac">
                    <p>可用次数基础版</p>
                    <span>{{ useData?.basicCount??0 }}</span>
                </div>
                <div class="data-num-pre adffcac">
                    <p>可用次数专业版</p>
                    <span>{{ useData?.profeCount??0 }}</span>
                </div>
                <div class="data-num-pre adffcac">
                    <p>累计购买金额</p>
                    <span>￥{{ useData?.totalOrderAmount??0 }}</span>
                </div>
            </div>
        </div>
        <div class="ap_line" style="margin-top: 24px;"></div>
        <div class="list">
            <div class="tab adfac">
                <div class="tab-pre" :class="{'active':tidx===index}" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{ item }}</div>
            </div>
            <div class="table">
                <TeamManager v-if="tidx===0&&userInfo.id" :userId="userInfo.id"></TeamManager>
                <InviteRecord v-if="tidx===1&&userInfo.id" :userId="userInfo.id"></InviteRecord>
                <QuestionnaireManager v-if="tidx===2&&userInfo.id" :userId="userInfo.id"></QuestionnaireManager>
                <TeamUser v-if="tidx===3&&userInfo.id" :userId="userInfo.id"></TeamUser>
                <PayRecord v-if="tidx===4&&userInfo.id" :userId="userInfo.id"></PayRecord>
                <ReportRecord v-if="tidx===5&&userInfo.id" :userId="userInfo.id"></ReportRecord>
            </div>
        </div>
    </div>
</template>

<script setup name="">
    import TeamManager from './wechatUser/teamManager.vue'
    import InviteRecord from './wechatUser/inviteRecord.vue'
    import QuestionnaireManager from './wechatUser/questionnaireManager.vue'
    import TeamUser from './wechatUser/teamUser.vue'
    import PayRecord from './wechatUser/payRecord.vue'
    import ReportRecord from './wechatUser/reportRecord.vue'
    import { ref, getCurrentInstance, onMounted } from 'vue'
    const { proxy } = getCurrentInstance();
    const { channel_type } = proxy.useDict("channel_type");
    import { 
        getWechatUserInfoById,
        getWechatUserUseData
    } from '@/api/agent/indexTwo.js'
    
    const tidx = ref(0)
    const useData = ref({})
    const userInfo = ref({})
    const typeCfg = ref({
        1:'基础版',
        2:'专业版',
        3:'专家版'
    })
    const tabList = ref(['团队管理','邀请记录','问卷管理','团队成员','交易记录','报告记录'])

    const handleBack = () => {
        proxy.$router.go(-1)
    }

    const changeTab = (index) => {
        tidx.value = index
    }

    onMounted(() => {
        const id = proxy.$route.query.id
        getWechatUserInfoById(id).then((res) => {
            userInfo.value = res.data;
            userInfo.value.mobile = userInfo.value.mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1 **** $2");
        })
        getWechatUserUseData(id).then((res) => {
            useData.value = res.data;
        })
    })
</script>

<style scoped lang="scss">
    .agent_page{
        .dtitle{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #002846;
            line-height: 22px;
        }
        .top{
            padding: 13px 20px;
            border-bottom: 1px solid #F3F4F6;
            &-left{
                cursor: pointer;
                img{
                    width: 22px;
                    height: 22px;
                }
                span{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 14px;
                    color: #33A7A7;
                    line-height: 20px;
                    margin-left: 6px;
                }
            }
            &-title{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #33536B;
                line-height: 20px;
                margin-left: 25px;
            }
        }
        .basic{
            padding: 20px 21px 0;
            .info{
                margin-top: 18px;
                &-left{
                    width: 190px;
                    img{
                        width: 64px;
                        height: 64px;
                    }
                    .type{
                        padding: 4px 6px;
                        background: #FFE796;
                        border-radius: 4px;
                        margin-top: 10px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #667E90;
                        line-height: 16px;
                    }
                }
                &-right{
                    width: calc(100% - 190px);
                    margin-top: -20px;
                    flex-wrap: wrap;
                    &-pre{
                        width: calc(100% / 3);
                        margin-top: 20px;
                        &-title{
                            width: 100px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #667E90;
                            line-height: 16px;
                            text-align: right;
                        }
                        &-content{
                            width: calc(100% - 100px);
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #002846;
                            line-height: 16px;
                            padding-left: 12px;
                            box-sizing: border-box;
                        }
                    }
                }
            }
        }
        .ap_line{
            height: 16px;
        }
        .data{
            padding: 20px 21px 0;
            &-num{
                margin-top: 16px;
                &-pre{
                    width: calc(100% / 5);
                    p{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #667E90;
                        line-height: 16px;
                        text-align: center;
                    }
                    span{
                        font-family: D-DINExp, D-DINExp;
                        font-weight: bold;
                        font-size: 24px;
                        color: #002846;
                        line-height: 24px;
                        text-align: center;
                        margin-top: 12px;
                    }
                }
            }
        }
        .list{
            .tab{
                padding-top: 21px;
                border-bottom: 1px solid #ECEEF5;
                &-pre{
                    padding: 0 24px 17px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #33536B;
                    line-height: 16px;
                    cursor: pointer;
                    position: relative;
                    &.active{
                        font-weight: bold;
                        color: #002846;
                        &::after{
                            content: '';
                            width: 48px;
                            height: 3px;
                            background: #33A7A7;
                            border-radius: 2px;
                            position: absolute;
                            left: 50%;
                            margin-left: -24px;
                            bottom: 0;
                        }
                    }
                }
            }
            .table{
                padding: 0 20px 24px;
            }
        }
    }
</style>