<script lang="ts" setup> import { ref } from 'vue' import { Avatar } from 'ant-design-vue' import { userAccountInfoDesc, userBasicInfoDesc } from './user.data' import { BasicDrawer, useDrawerInner } from '@/components/Drawer' import { Description, useDescription } from '@/components/Description' import { CollapseContainer } from '@/components/Container' import { getUser } from '@/api/member/user' defineEmits(['success', 'register']) const userInfo = ref<any>() const loading = ref(true) const [registerBasicInfoDesc] = useDescription({ schema: userBasicInfoDesc, data: userInfo, }) const [registerAccountDesc] = useDescription({ schema: userAccountInfoDesc, data: userInfo, }) const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => { setDrawerProps({ loading: true }) const res = await getUser(data.id) userInfo.value = res loading.value = false setDrawerProps({ loading: false }) }) function handleEdit() { console.info('edit') } </script> <template> <BasicDrawer v-bind="$attrs" title="会员详情" width="80%" @register="registerDrawer"> <CollapseContainer title="基本信息" :can-expan="false" :loading="loading"> <template #action> <a-button type="link" @click="handleEdit"> 修改 </a-button> </template> <div class="flex"> <Avatar v-if="userInfo" class="w-1/5" :src="userInfo.avatar || ''" :size="72" /> <Description class="ml-4 w-4/5" :bordered="false" :column="4" @register="registerBasicInfoDesc" /> </div> </CollapseContainer> <CollapseContainer title="账户信息" :loading="loading"> <Description :bordered="false" :column="4" @register="registerAccountDesc" /> </CollapseContainer> <CollapseContainer title="账户明细" :loading="loading"> 账户明细 </CollapseContainer> </BasicDrawer> </template>