lihaiMiddleOfficeAdminWeb/src/views/user/details.vue

<template>
    <div class="edit-popup">
        <el-drawer title="用户详情" :size="1200" v-model="isOpen">
            <div class="flex mb-4">
                <el-avatar :src="formData.avatar" size="large"></el-avatar>
                <div class="ml-4 flex flex-col justify-around">
                    <div>昵称: {{ formData.nickname }}</div>
                    <div>电话: {{ formData.mobile }}</div>
                </div>
                <div class="ml-8 flex flex-col justify-around">
                    <div>账号: {{ formData.account }}</div>
                    <div>ID: {{ formData.id }}</div>
                </div>
            </div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first">
                    <el-descriptions class="margin-top" :column="2" border>
                        <el-descriptions-item label="真实姓名">
                            {{ formData.label_name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="用户性别">
                            <dict-value :options="dictData.sex" :value="formData.sex" />
                        </el-descriptions-item>
                        <el-descriptions-item label="注册渠道">
                            {{formData.channel}}
                        </el-descriptions-item>
                        <el-descriptions-item label="用户类型">
                            {{ formData.vip_name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="用户标签">{{ formData.label_name }}</el-descriptions-item>
                        <el-descriptions-item label="礼品券">{{ formData.integral }}</el-descriptions-item>
                        <el-descriptions-item label="返还金">{{ formData.return_money }}</el-descriptions-item>
                        <el-descriptions-item label="采购款">{{ formData.purchase_funds }}</el-descriptions-item>
                        <el-descriptions-item label="用户地址" :span="2">{{ formData.user_address }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间" :span="2">{{ formData.create_time }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="采购款明细" name="second">
                    <purchase ref="purchaseRef" :user_id="formData.id" :key="key+'a'" />
                </el-tab-pane>
                <el-tab-pane label="余额明细" name="three">
                    <balance ref="balanceRef" :user_id="formData.id" :key="key+'b'"  />
                </el-tab-pane>
                <el-tab-pane label="礼品券明细" name="four">
                    <merchandise ref="merchandiseRef" :user_id="formData.id" :key="key+'c'"  />
                </el-tab-pane>
                <el-tab-pane label="返还金明细" name="five">
                    <returnMoney ref="returnMoneyRef" :user_id="formData.id" :key="key+'d'"  />
                </el-tab-pane>
            </el-tabs>

        </el-drawer>
    </div>
</template>

<script lang="ts" setup name="storeProductDETAILS">
import { usePaging } from '@/hooks/usePaging'
import { ElMessage, type FormInstance } from 'element-plus'
import { apiUserDetail } from '@/api/user'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import feedback from '@/utils/feedback'
import purchase from './components/purchase.vue'
import balance from './components/balance.vue'
import merchandise from './components/merchandise.vue'
import returnMoney from './components/returnMoney.vue'

const purchaseRef = ref(null)
const balanceRef = ref(null)
const merchandiseRef = ref(null)
const returnMoneyRef = ref(null)
const key = ref(0);

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const isOpen = ref(false);
const activeName = ref('first');
const handleClick = (tab: any) => {
    if (tab.paneName == "second") purchaseRef.value?.getList({id:formData.id});
    if (tab.paneName == "three") balanceRef.value?.getList({id:formData.id});
    if (tab.paneName == "four") merchandiseRef.value?.getList({id:formData.id});
    if (tab.paneName == "five") returnMoneyRef.value?.getList({id:formData.id});
};

// 表单数据
const formData = reactive({
    "id": "",
    "nickname": "",
    "real_name": "",
    "sex": 0,
    "avatar": "",
    "account": "",
    "mobile": "",
    "channel": "",
    "create_time": "",
    "purchase_funds": "",
    "label_id": 0,
    "integral": "",
    "vip_name": "",
    "discount": 0,
    "limit": 0,
    "label_name": "",
    "sex_text": "",
    "user_address": "",
    "return_money": 0
})



// 获取详情
const setFormData = async (data: Record<any, any>) => {
    queryParams.product_id = data.id;
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    handleClick({
        paneName: activeName.value
    })
}

const getDetail = async (row: Record<string, any>) => {
    queryParams.product_id = row.id
    const data = await apiUserDetail({
        id: row.id
    })
    setFormData(data)
}

//打开弹窗
const open = () => {
    isOpen.value = true;
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

// 查询条件
const queryParams = reactive({
    product_id: "",
})



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>