feat：【antd】【member 会员】完成详情界面的迁移

apps/web-antd/src/router/routes/modules/member.ts

@@ -8,6 +8,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '会员详情',
       icon: 'lucide:user',
+      activePath: '/member/user',
       hideInMenu: true,
     },
   },

apps/web-antd/src/views/member/user/detail/index.vue

@@ -15,13 +15,13 @@ import { getWallet } from '#/api/pay/wallet/balance';
 import { $t } from '#/locales';
 
 import Form from '../modules/form.vue';
-import UserAccountInfo from './modules/user-account-info.vue';
+import AccountInfo from './modules/account-info.vue';
-import UserAddressList from './modules/user-address-list.vue';
+import AddressList from './modules/address-list.vue';
-import UserBalanceList from './modules/user-balance-list.vue';
+import BalanceList from './modules/balance-list.vue';
-import UserBasicInfo from './modules/user-basic-info.vue';
+import BasicInfo from './modules/basic-info.vue';
-import UserExperienceRecordList from './modules/user-experience-record-list.vue';
+import ExperienceRecordList from './modules/experience-record-list.vue';
-import UserPointList from './modules/user-point-list.vue';
+import PointList from './modules/point-list.vue';
-import UserSignList from './modules/user-sign-list.vue';
+import SignList from './modules/sign-list.vue';
 
 const route = useRoute();
 const { closeCurrentTab, refreshTab } = useTabs();
@@ -34,27 +34,28 @@ const [FormModal, formModalApi] = useVbenModal({
 const userId = Number(route.query.id);
 const user = ref<MemberUserApi.User>();
 const wallet = ref<PayWalletApi.Wallet>();
-/* 钱包初始化数据 */
-const WALLET_INIT_DATA = {
-  balance: 0,
-  totalExpense: 0,
-  totalRecharge: 0,
-} as PayWalletApi.Wallet;
 
+/** 获取会员详情 */
 async function getUserDetail() {
   if (!userId) {
     message.error('参数错误，会员编号不能为空！');
-    closeCurrentTab();
+    await closeCurrentTab();
     return;
   }
   user.value = await getUser(userId);
-  wallet.value = (await getWallet({ userId })) || WALLET_INIT_DATA;
+  wallet.value = (await getWallet({ userId })) || {
+    balance: 0,
+    totalExpense: 0,
+    totalRecharge: 0,
+  };
 }
 
+/** 编辑会员 */
 function handleEdit() {
   formModalApi.setData(user.value).open();
 }
 
+/** 初始化 */
 onMounted(async () => {
   await getUserDetail();
 });
@@ -63,40 +64,40 @@ onMounted(async () => {
   <Page auto-content-height>
     <FormModal @success="refreshTab" />
     <div class="flex">
-      <UserBasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
+      <BasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
         <template #title> 基本信息 </template>
         <template #extra>
           <Button type="primary" @click="handleEdit">
             {{ $t('common.edit') }}
           </Button>
         </template>
-      </UserBasicInfo>
+      </BasicInfo>
-      <UserAccountInfo
+      <AccountInfo
         v-if="user && wallet"
         class="ml-4 w-2/5"
         :user="user"
         :wallet="wallet"
       >
         <template #title> 账户信息 </template>
-      </UserAccountInfo>
+      </AccountInfo>
     </div>
     <div class="mt-4">
       <Card title="账户明细">
         <Tabs>
           <TabPane tab="积分" key="UserPointList">
-            <UserPointList class="h-full" :user-id="userId" />
+            <PointList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="签到" key="UserSignList">
-            <UserSignList class="h-full" :user-id="userId" />
+            <SignList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="成长值" key="UserExperienceRecordList">
-            <UserExperienceRecordList class="h-full" :user-id="userId" />
+            <ExperienceRecordList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="余额" key="UserBalanceList">
-            <UserBalanceList class="h-full" :wallet-id="wallet?.id" />
+            <BalanceList class="h-full" :wallet-id="wallet?.id" />
           </TabPane>
           <TabPane tab="收货地址" key="UserAddressList">
-            <UserAddressList class="h-full" :user-id="userId" />
+            <AddressList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="订单管理" key="UserOrderList">
             <!-- Todo: 商城模块 -->

apps/web-antd/src/views/member/user/detail/modules/account-info.vue

@@ -21,14 +21,13 @@ withDefaults(
 
 const [Descriptions] = useDescription({
   componentProps: {
-    bordered: false,
     class: 'mx-4',
   },
   schema: [
     {
       field: 'levelName',
       label: '等级',
-      content: (data) => data.levelName || '无',
+      content: (data) => data.levelName || '-',
     },
     {
       field: 'experience',

apps/web-antd/src/views/member/user/detail/modules/address-list.vue

@@ -19,26 +19,32 @@ const [Grid] = useVbenVxeGrid({
       {
         field: 'id',
         title: '地址编号',
+        minWidth: 100,
       },
       {
         field: 'name',
         title: '收件人名称',
+        minWidth: 120,
       },
       {
         field: 'mobile',
         title: '手机号',
+        minWidth: 130,
       },
       {
         field: 'areaId',
         title: '地区编码',
+        minWidth: 120,
       },
       {
         field: 'detailAddress',
         title: '收件详细地址',
+        minWidth: 200,
       },
       {
         field: 'defaultStatus',
         title: '是否默认',
+        minWidth: 100,
         slots: {
           default: ({ row }) => {
             return h(
@@ -55,6 +61,7 @@ const [Grid] = useVbenVxeGrid({
       {
         field: 'createTime',
         title: '创建时间',
+        minWidth: 180,
         formatter: 'formatDateTime',
       },
     ],
@@ -73,6 +80,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

apps/web-antd/src/views/member/user/detail/modules/balance-list.vue

@@ -15,31 +15,33 @@ const [Grid] = useVbenVxeGrid({
       {
         field: 'id',
         title: '编号',
+        minWidth: 100,
       },
       {
         field: 'title',
         title: '关联业务标题',
+        minWidth: 200,
       },
       {
         field: 'price',
         title: '交易金额',
-        formatter: 'formatAmount2',
+        minWidth: 120,
+        formatter: 'formatFenToYuanAmount',
       },
       {
         field: 'balance',
         title: '钱包余额',
-        formatter: 'formatAmount2',
+        minWidth: 120,
+        formatter: 'formatFenToYuanAmount',
       },
       {
         field: 'createTime',
         title: '交易时间',
+        minWidth: 180,
         formatter: 'formatDateTime',
       },
     ],
     keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -54,6 +56,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

apps/web-antd/src/views/member/user/detail/modules/basic-info.vue

@@ -20,7 +20,6 @@ withDefaults(
 
 const [Descriptions] = useDescription({
   componentProps: {
-    bordered: false,
     class: 'mx-4',
   },
   schema: [
@@ -56,17 +55,17 @@ const [Descriptions] = useDescription({
     {
       field: 'birthday',
       label: '生日',
-      content: (data) => formatDate(data.birthday)?.toString() || '空',
+      content: (data) => formatDate(data.birthday)?.toString() || '-',
     },
     {
       field: 'createTime',
       label: '注册时间',
-      content: (data) => formatDate(data.createTime)?.toString() || '空',
+      content: (data) => formatDate(data.createTime)?.toString() || '-',
     },
     {
       field: 'loginDate',
       label: '最后登录时间',
-      content: (data) => formatDate(data.loginDate)?.toString() || '空',
+      content: (data) => formatDate(data.loginDate)?.toString() || '-',
     },
   ],
 });
@@ -81,10 +80,10 @@ const [Descriptions] = useDescription({
       <slot name="extra"></slot>
     </template>
     <Row v-if="mode === 'member'" :gutter="24">
-      <Col :span="4">
+      <Col :span="6">
-        <Avatar :size="140" shape="square" :src="user.avatar" />
+        <Avatar :size="180" shape="square" :src="user.avatar" />
       </Col>
-      <Col :span="20">
+      <Col :span="18">
         <Descriptions :column="2" :data="user" />
       </Col>
     </Row>

apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue

@@ -25,17 +25,22 @@ const [Grid] = useVbenVxeGrid({
         label: '业务类型',
         component: 'Select',
         componentProps: {
-          allowClear: true,
           options: getDictOptions(
             DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
             'number',
           ),
+          placeholder: '请选择业务类型',
+          allowClear: true,
         },
       },
       {
         fieldName: 'title',
         label: '标题',
         component: 'Input',
+        componentProps: {
+          placeholder: '请输入标题',
+          allowClear: true,
+        },
       },
       {
         fieldName: 'createDate',
@@ -53,15 +58,18 @@ const [Grid] = useVbenVxeGrid({
       {
         field: 'id',
         title: '编号',
+        minWidth: 100,
       },
       {
         field: 'createTime',
         title: '获得时间',
+        minWidth: 180,
         formatter: 'formatDateTime',
       },
       {
         field: 'experience',
         title: '经验',
+        minWidth: 100,
         slots: {
           default: ({ row }) => {
             return h(
@@ -79,22 +87,27 @@ const [Grid] = useVbenVxeGrid({
       {
         field: 'totalExperience',
         title: '总经验',
+        minWidth: 100,
       },
       {
         field: 'title',
         title: '标题',
+        minWidth: 200,
       },
       {
         field: 'description',
         title: '描述',
+        minWidth: 250,
       },
       {
         field: 'bizId',
         title: '业务编号',
+        minWidth: 120,
       },
       {
         field: 'bizType',
         title: '业务类型',
+        minWidth: 120,
         cellRender: {
           name: 'CellDict',
           props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
@@ -102,9 +115,6 @@ const [Grid] = useVbenVxeGrid({
       },
     ],
     keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -119,6 +129,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

apps/web-antd/src/views/member/user/detail/modules/point-list.vue

@@ -2,11 +2,11 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberPointRecordApi } from '#/api/member/point/record';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getRecordPage } from '#/api/member/point/record';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRecordPage } from '#/api/member/point/record';
 import { getRangePickerDefaultProps } from '#/utils';
 import { useGridColumns } from '#/views/member/point/record/data';
 
@@ -22,14 +22,19 @@ const [Grid] = useVbenVxeGrid({
         label: '业务类型',
         component: 'Select',
         componentProps: {
-          allowClear: true,
           options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
+          placeholder: '请选择业务类型',
+          allowClear: true,
         },
       },
       {
         fieldName: 'title',
         label: '积分标题',
         component: 'Input',
+        componentProps: {
+          placeholder: '请输入积分标题',
+          allowClear: true,
+        },
       },
       {
         fieldName: 'createDate',
@@ -45,9 +50,6 @@ const [Grid] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -62,6 +64,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

apps/web-antd/src/views/member/user/detail/modules/sign-list.vue

@@ -18,6 +18,10 @@ const [Grid] = useVbenVxeGrid({
         fieldName: 'day',
         label: '签到天数',
         component: 'Input',
+        componentProps: {
+          placeholder: '请输入签到天数',
+          allowClear: true,
+        },
       },
       {
         fieldName: 'createTime',
@@ -33,9 +37,6 @@ const [Grid] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -50,6 +51,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

apps/web-ele/src/router/routes/modules/member.ts

@@ -8,6 +8,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '会员详情',
       icon: 'lucide:user',
+      activeMenu: '/member/user',
       hideInMenu: true,
     },
   },