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

2025-10-07 17:10:54 +08:00
parent 25af653216
commit 4978bbbcf1
10 changed files with 79 additions and 51 deletions
--- a/apps/web-antd/src/router/routes/modules/member.ts
+++ b/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,
    },
  },
--- a/apps/web-antd/src/views/member/user/detail/index.vue
+++ b/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 UserAddressList from './modules/user-address-list.vue';
-import UserBalanceList from './modules/user-balance-list.vue';
-import UserBasicInfo from './modules/user-basic-info.vue';
-import UserExperienceRecordList from './modules/user-experience-record-list.vue';
-import UserPointList from './modules/user-point-list.vue';
-import UserSignList from './modules/user-sign-list.vue';
+import AccountInfo from './modules/account-info.vue';
+import AddressList from './modules/address-list.vue';
+import BalanceList from './modules/balance-list.vue';
+import BasicInfo from './modules/basic-info.vue';
+import ExperienceRecordList from './modules/experience-record-list.vue';
+import PointList from './modules/point-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>
-      <UserAccountInfo
+      </BasicInfo>
+      <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: 商城模块 -->
--- a/apps/web-antd/src/views/member/user/detail/modules/user-account-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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',
--- a/apps/web-antd/src/views/member/user/detail/modules/user-address-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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,
--- a/apps/web-antd/src/views/member/user/detail/modules/user-balance-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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,
--- a/apps/web-antd/src/views/member/user/detail/modules/user-basic-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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">
-        <Avatar :size="140" shape="square" :src="user.avatar" />
+      <Col :span="6">
+        <Avatar :size="180" shape="square" :src="user.avatar" />
      </Col>
-      <Col :span="20">
+      <Col :span="18">
        <Descriptions :column="2" :data="user" />
      </Col>
    </Row>
--- a/apps/web-antd/src/views/member/user/detail/modules/user-experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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,
--- a/apps/web-antd/src/views/member/user/detail/modules/user-point-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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,
--- a/apps/web-antd/src/views/member/user/detail/modules/user-sign-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/user-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,
--- a/apps/web-ele/src/router/routes/modules/member.ts
+++ b/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,
    },
  },