smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-11-02 14:43:01 +08:00
parent 17ccc0a27f
commit 889b97370a
7 changed files with 289 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: 商城模块 -->
<div class="h-full">
<h1>收藏记录</h1>
</div>
<FavoriteList class="h-full" :user-id="userId" />
</TabPane>
<TabPane tab="优惠劵" key="CouponList">
<CouponList class="h-full" :user-id="userId" />

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

@@ -2,9 +2,7 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberAddressApi } from '#/api/member/address';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { DICT_TYPE } from '@vben/constants';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAddressList } from '#/api/member/address';
@@ -13,58 +11,52 @@ 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: [
{
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(
Tag,
{
class: 'mr-1',
color: row.defaultStatus ? 'blue' : 'red',
},
() => (row.defaultStatus ? '是' : '否'),
);
},
},
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
],
columns,
keepSource: true,
pagerConfig: {
enabled: false,

101
apps/web-ele/src/views/member/user/detail/modules/user-favorite-list.vue → apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
View File

@@ -11,59 +11,64 @@ 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: [
{
field: 'id',
title: '商品编号',
},
{
field: 'picUrl',
title: '商品图',
cellRender: {
name: 'CellImage',
props: {
height: 40,
width: 40,
},
},
},
{
field: 'name',
title: '商品名称',
},
{
field: 'price',
title: '商品售价',
},
{
field: 'salesCount',
title: '销量',
},
{
field: 'createTime',
title: '收藏时间',
formatter: 'formatDateTime',
},
{
field: 'status',
title: '状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
},
},
],
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>

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

@@ -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: 商城模块 -->
<div class="h-full">
<UserFavoriteList class="h-full" :user-id="userId" />
</div>
<FavoriteList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="优惠劵" name="CouponList">
<CouponList class="h-full" :user-id="userId" />

87
apps/web-ele/src/views/member/user/detail/modules/address-list.vue Normal file
View File

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

98
apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue Normal file
View File

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

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

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