shuhi-ui/src/views/customer/list/components/customer-detail.vue

<template>
    <ele-drawer
        v-model="visible"
        title="客户详情"
        :size="1080"
        style="max-width: 100%"
        :body-style="{
            height: '100%',
            display: 'flex',
            'flex-direction': 'column'
        }"
    >
        <div class="flex items-center">
            <el-avatar :size="50" :src="detail.imgPath" />
            <el-text style="margin-left: 10px">{{ detail.nickName }}</el-text>
        </div>

        <div class="flex items-center mb-5 mt-5 ml-3">
            <el-statistic :value="detail.restMoney">
                <template #title>
                    <el-text>账户余额</el-text>
                </template>
            </el-statistic>
            <el-statistic :value="detail.orderNum" style="margin-left: 80px">
                <template #title>
                    <el-text>总订单数</el-text>
                </template>
            </el-statistic>
            <el-statistic :value="detail.sellNum" style="margin-left: 80px">
                <template #title>
                    <el-text>卖书订单数</el-text>
                </template>
            </el-statistic>
            <el-statistic :value="detail.buyNum" style="margin-left: 80px">
                <template #title>
                    <el-text>买书订单数</el-text>
                </template>
            </el-statistic>
        </div>

        <el-tabs v-model="activeName" class="demo-tabs flex-1">
            <el-tab-pane label="用户基础信息" name="baseinfo">
                <base-info :detail="detail" />
            </el-tab-pane>
            <el-tab-pane label="余额变动" name="accountChange">
                <account-change :row="currentRow" />
            </el-tab-pane>
            <el-tab-pane label="扫描记录" name="scanLog">
                <scan-log :row="currentRow" />
            </el-tab-pane>
            <el-tab-pane label="推荐信息" name="recommend">
                <recommend-info :row="currentRow" />
            </el-tab-pane>
            <el-tab-pane label="意见反馈" name="fallback">
                <fallback-info :userId="currentRow.id" />
            </el-tab-pane>
            <el-tab-pane label="搜索记录" name="searchLog">
                <search-log :row="currentRow" />
            </el-tab-pane>
            
        </el-tabs>
    </ele-drawer>
</template>

<script setup>
    import baseInfo from '@/views/customer/list/components/detail/base-info.vue';
    import accountChange from '@/views/customer/list/components/detail/account-change.vue';
    import scanLog from '@/views/customer/list/components/detail/scan-log.vue';
    import searchLog from '@/views/customer/list/components/detail/search-log.vue';
    import recommendInfo from '@/views/customer/list/components/detail/recommend-info.vue';
    import fallbackInfo from '@/views/customer/list/components/detail/fallback-info.vue';
    import request from '@/utils/request';
    const visible = ref(false);
    const activeName = ref('baseinfo');

    const currentRow = ref();
    function handleOpen(row, tabName) {
        visible.value = true;
        currentRow.value = row;
        nextTick(() => {
            activeName.value = tabName || 'baseinfo';
            getUserInfo(row.id);
        });
    }

    //获取用户信息
    const detail = ref({});
    const getUserInfo = (id) => {
        request({
            url: `/user/userInfo/getInfo/${id}`,
            method: 'get'
        }).then((res) => {
            detail.value = res.data.data;
        });
    };

    //获取用户账户信息
    const accountInfo = ref({ restMoney: 0, totalMoney: 0 });
    const getAccountInfo = (id) => {
        request({
            url: `/user/userAccountInfo/getUserAccount/${id}`,
            method: 'get'
        }).then((res) => {
            accountInfo.value = res.data.data;
        });
    };

    defineExpose({
        handleOpen
    });
</script>