feat: member detail

src/components/Container/src/collapse/CollapseContainer.vue

@@ -94,7 +94,6 @@ export default defineComponent({
 
 .@{prefix-cls} {
   background-color: var(--component-background);
-  border-radius: 6px;
   transition: all 0.3s ease-in-out;
 
   &__header {
@@ -103,6 +102,7 @@ export default defineComponent({
     justify-content: space-between;
     height: 32px;
     border-bottom: 1px solid var(--border-color);
+    border-radius: 6px;
   }
 
   &__footer {

src/views/member/user/UserDetailDrawer.vue

@@ -0,0 +1,58 @@
+<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)
+  console.info(res)
+  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>

src/views/member/user/index.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import UserModal from './UserModal.vue'
+import UserDetailDrawer from './UserDetailDrawer.vue'
 import UpdateLevelModal from './UpdateLevelModal.vue'
 import { columns, searchFormSchema } from './user.data'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useModal } from '@/components/Modal'
+import { useDrawer } from '@/components/Drawer'
 import { IconEnum } from '@/enums/appEnum'
 import { BasicTable, TableAction, useTable } from '@/components/Table'
 import { getUserPage } from '@/api/member/user'
@@ -12,6 +14,7 @@ defineOptions({ name: 'MemberUser' })
 
 const { t } = useI18n()
 const [registerModal, { openModal }] = useModal()
+const [registerDetailDrawer, { openDrawer }] = useDrawer()
 const [registerUpdateLevelModal, { openModal: openUpdateLevelModal }] = useModal()
 const [registerTable, { reload }] = useTable({
   title: '会员列表',
@@ -22,16 +25,21 @@ const [registerTable, { reload }] = useTable({
   showTableSetting: true,
   showIndexColumn: false,
   actionColumn: {
-    width: 200,
+    width: 240,
     title: t('common.action'),
     dataIndex: 'action',
     fixed: 'right',
   },
 })
 
+function handleDetail(record: Recordable) {
+  openDrawer(true, record)
+}
+
 function handleEdit(record: Recordable) {
   openModal(true, { record, isUpdate: true })
 }
+
 function updateLevelFormRef(record: Recordable) {
   openUpdateLevelModal(true, { record, isUpdate: true })
 }
@@ -44,6 +52,7 @@ function updateLevelFormRef(record: Recordable) {
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
+              { icon: IconEnum.VIEW, label: t('action.detail'), auth: 'member:user:update', onClick: handleDetail.bind(null, record) },
               { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'member:user:update', onClick: handleEdit.bind(null, record) },
               { icon: IconEnum.EDIT, label: '修改等级', auth: 'member:user:update-level', onClick: updateLevelFormRef.bind(null, record) },
             ]"
@@ -53,5 +62,6 @@ function updateLevelFormRef(record: Recordable) {
     </BasicTable>
     <UserModal @register="registerModal" @success="reload()" />
     <UpdateLevelModal @register="registerUpdateLevelModal" @success="reload()" />
+    <UserDetailDrawer @register="registerDetailDrawer" />
   </div>
 </template>

src/views/member/user/user.data.ts

@@ -2,6 +2,7 @@ import { getSimpleGroupList } from '@/api/member/group'
 import { getSimpleLevelList } from '@/api/member/level'
 import { getSimpleTagList } from '@/api/member/tag'
 import { getAreaTree } from '@/api/system/area'
+import type { DescItem } from '@/components/Description'
 import type { BasicColumn, FormSchema } from '@/components/Table'
 import { useRender } from '@/components/Table'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
@@ -264,3 +265,103 @@ export const updateLevelFormSchema: FormSchema[] = [
     component: 'InputTextArea',
   },
 ]
+
+export const userBasicInfoDesc: DescItem[] = [
+  {
+    label: '用户名',
+    field: 'name',
+  },
+  {
+    label: '昵称',
+    field: 'nickname',
+  },
+  {
+    label: '手机号',
+    field: 'mobile',
+  },
+  {
+    label: '性别',
+    field: 'sex',
+    render: (curVal) => {
+      return useRender.renderDict(curVal, DICT_TYPE.SYSTEM_USER_SEX)
+    },
+  },
+  {
+    label: '所在地',
+    field: 'areaName',
+  },
+  {
+    label: '注册 IP',
+    field: 'registerIp',
+  },
+  {
+    label: '生日',
+    field: 'birthday',
+    render: (curVal) => {
+      return useRender.renderDate(curVal)
+    },
+  },
+  {
+    label: '注册时间',
+    field: 'createTime',
+    render: (curVal) => {
+      return useRender.renderDate(curVal)
+    },
+  },
+  {
+    label: '最后登录时间',
+    field: 'loginDate',
+    render: (curVal) => {
+      return useRender.renderDate(curVal)
+    },
+  },
+]
+
+export const userAccountInfoDesc: DescItem[] = [
+  {
+    label: '等级',
+    field: 'levelName',
+  },
+  {
+    label: '成长值',
+    field: 'experience',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+  {
+    label: '当前积分',
+    field: 'point',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+  {
+    label: '总积分',
+    field: 'totalPoint',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+  {
+    label: '当前余额',
+    field: 'aaa',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+  {
+    label: '支出金额',
+    field: 'bbb',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+  {
+    label: '充值金额',
+    field: 'ccc',
+    render: (curVal) => {
+      return curVal || 0
+    },
+  },
+]