You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.8 KiB
57 lines
1.8 KiB
<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>
|
|
|