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

<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>