review：【antd】【ele】member 增加 address-list、favorite-list 列表

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

@@ -22,6 +22,7 @@ import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+import FavoriteList from './modules/favorite-list.vue';
 import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
@@ -109,10 +110,7 @@ onMounted(async () => {
             <AfterSaleList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="收藏记录" key="FavoriteList">
-            <!-- Todo: 商城模块 -->
+            <FavoriteList class="h-full" :user-id="userId" />
-            <div class="h-full">
-              <h1>收藏记录</h1>
-            </div>
           </TabPane>
           <TabPane tab="优惠劵" key="CouponList">
             <CouponList class="h-full" :user-id="userId" />

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

@@ -2,9 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberAddressApi } from '#/api/member/address';
 
-import { h } from 'vue';
+import { DICT_TYPE } from '@vben/constants';
-
-import { Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAddressList } from '#/api/member/address';
@@ -13,9 +11,7 @@ const props = defineProps<{
   userId: number;
 }>();
 
-const [Grid] = useVbenVxeGrid({
+const columns = [
-  gridOptions: {
-    columns: [
   {
     field: 'id',
     title: '地址编号',
@@ -45,26 +41,22 @@ const [Grid] = useVbenVxeGrid({
     field: 'defaultStatus',
     title: '是否默认',
     minWidth: 100,
-        slots: {
+    cellRender: {
-          default: ({ row }) => {
+      name: 'CellDict',
-            return h(
+      props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-              Tag,
-              {
-                class: 'mr-1',
-                color: row.defaultStatus ? 'blue' : 'red',
-              },
-              () => (row.defaultStatus ? '是' : '否'),
-            );
-          },
     },
   },
   {
     field: 'createTime',
     title: '创建时间',
-        minWidth: 180,
     formatter: 'formatDateTime',
+    minWidth: 160,
   },
-    ],
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
     keepSource: true,
     pagerConfig: {
       enabled: false,

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

@@ -11,59 +11,64 @@ const props = defineProps<{
   userId: number;
 }>();
 
-const [Grid] = useVbenVxeGrid({
+const columns = [
-  gridOptions: {
-    columns: [
   {
     field: 'id',
     title: '商品编号',
+    minWidth: 100,
   },
   {
     field: 'picUrl',
     title: '商品图',
+    minWidth: 100,
     cellRender: {
       name: 'CellImage',
       props: {
-            height: 40,
+        width: 24,
-            width: 40,
+        height: 24,
       },
     },
   },
   {
     field: 'name',
     title: '商品名称',
+    minWidth: 200,
   },
   {
     field: 'price',
     title: '商品售价',
+    formatter: 'formatAmount2',
+    minWidth: 120,
   },
   {
     field: 'salesCount',
     title: '销量',
+    minWidth: 100,
   },
   {
     field: 'createTime',
     title: '收藏时间',
     formatter: 'formatDateTime',
+    minWidth: 160,
   },
   {
     field: 'status',
     title: '状态',
+    minWidth: 100,
     cellRender: {
       name: 'CellDict',
       props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
     },
   },
-    ],
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
     keepSource: true,
     pagerConfig: {
       pageSize: 10,
     },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -78,13 +83,13 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallFavoriteApi.Favorite>,
-  separator: false,
 });
 </script>
 

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

@@ -16,17 +16,17 @@ import { $t } from '#/locales';
 
 import Form from '../modules/form.vue';
 import AccountInfo from './modules/account-info.vue';
+import AddressList from './modules/address-list.vue';
 import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+import FavoriteList from './modules/favorite-list.vue';
 import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
-import UserAddressList from './modules/user-address-list.vue';
 import UserBrokerageList from './modules/user-brokerage-list.vue';
-import UserFavoriteList from './modules/user-favorite-list.vue';
 
 const route = useRoute();
 const { closeCurrentTab, refreshTab } = useTabs();
@@ -104,7 +104,7 @@ onMounted(async () => {
             <BalanceList class="h-full" :wallet-id="wallet?.id" />
           </ElTabPane>
           <ElTabPane label="收货地址" name="AddressList">
-            <UserAddressList class="h-full" :user-id="userId" />
+            <AddressList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="订单管理" name="OrderList">
             <OrderList class="h-full" :user-id="userId" />
@@ -113,10 +113,7 @@ onMounted(async () => {
             <AfterSaleList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="收藏记录" name="FavoriteList">
-            <!-- Todo: 商城模块 -->
+            <FavoriteList class="h-full" :user-id="userId" />
-            <div class="h-full">
-              <UserFavoriteList class="h-full" :user-id="userId" />
-            </div>
           </ElTabPane>
           <ElTabPane label="优惠劵" name="CouponList">
             <CouponList class="h-full" :user-id="userId" />

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

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberAddressApi } from '#/api/member/address';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAddressList } from '#/api/member/address';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const columns = [
+  {
+    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,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+    },
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAddressList({
+            userId: props.userId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberAddressApi.Address>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>

apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallFavoriteApi } from '#/api/mall/product/favorite';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as FavoriteApi from '#/api/mall/product/favorite';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const columns = [
+  {
+    field: 'id',
+    title: '商品编号',
+    minWidth: 100,
+  },
+  {
+    field: 'picUrl',
+    title: '商品图',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellImage',
+      props: {
+        width: 24,
+        height: 24,
+      },
+    },
+  },
+  {
+    field: 'name',
+    title: '商品名称',
+    minWidth: 200,
+  },
+  {
+    field: 'price',
+    title: '商品售价',
+    formatter: 'formatAmount2',
+    minWidth: 120,
+  },
+  {
+    field: 'salesCount',
+    title: '销量',
+    minWidth: 100,
+  },
+  {
+    field: 'createTime',
+    title: '收藏时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
+    },
+  },
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await FavoriteApi.getFavoritePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallFavoriteApi.Favorite>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>

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

@@ -1,94 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MemberAddressApi } from '#/api/member/address';
-
-import { h } from 'vue';
-
-import { ElTag } from 'element-plus';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAddressList } from '#/api/member/address';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const [Grid] = useVbenVxeGrid({
-  gridOptions: {
-    columns: [
-      {
-        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(
-              ElTag,
-              {
-                class: 'mr-1',
-                type: row.defaultStatus ? 'primary' : 'danger',
-              },
-              () => (row.defaultStatus ? '是' : '否'),
-            );
-          },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '创建时间',
-        formatter: 'formatDateTime',
-        minWidth: 160,
-      },
-    ],
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async () => {
-          return await getAddressList({
-            userId: props.userId,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MemberAddressApi.Address>,
-});
-</script>
-
-<template>
-  <Grid />
-</template>