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

feat：【ele】【member 会员】优化会员详情

Browse Source
This commit is contained in:
YunaiV
2025-10-07 20:46:52 +08:00
parent a2ed4445f2
commit 5e5ae1195e
15 changed files with 168 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web-ele/src/views/member/signin/record/data.ts
View File

@@ -68,8 +68,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
return h(
ElTag,
{
class: 'mr-5px',
color: row.point > 0 ? 'blue' : 'red',
type: row.point > 0 ? 'primary' : 'danger',
},
() => (row.point > 0 ? `+${row.point}` : row.point),
);

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

@@ -15,18 +15,18 @@ 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 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';
import UserAddressList from './modules/user-address-list.vue';
import UserAfterSaleList from './modules/user-after-sale-list.vue';
import UserBalanceList from './modules/user-balance-list.vue';
import UserBasicInfo from './modules/user-basic-info.vue';
import UserBrokerageList from './modules/user-brokerage-list.vue';
import UserCouponList from './modules/user-coupon-list.vue';
import UserExperienceRecordList from './modules/user-experience-record-list.vue';
import UserFavoriteList from './modules/user-favorite-list.vue';
import UserOrderList from './modules/user-order-list.vue';
import UserPointList from './modules/user-point-list.vue';
import UserSignList from './modules/user-sign-list.vue';
const route = useRoute();
const { closeCurrentTab, refreshTab } = useTabs();
@@ -39,28 +39,29 @@ const [FormModal, formModalApi] = useVbenModal({
const userId = Number(route.query.id);
const user = ref<MemberUserApi.User>();
const wallet = ref<PayWalletApi.Wallet>();
const activeName = ref('UserPointList');
/* 钱包初始化数据 */
const WALLET_INIT_DATA = {
balance: 0,
totalExpense: 0,
totalRecharge: 0,
} as PayWalletApi.Wallet;
const activeName = ref('PointList');
/** 获取会员详情 */
async function getUserDetail() {
if (!userId) {
ElMessage.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();
});
@@ -69,66 +70,66 @@ 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>
<ElButton type="primary" @click="handleEdit">
{{ $t('common.edit') }}
</ElButton>
</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">
<ElCard title="账户明细">
<ElTabs v-model="activeName">
<ElTabPane label="积分" name="UserPointList">
<UserPointList class="h-full" :user-id="userId" />
<ElTabPane label="积分" name="PointList">
<PointList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="签到" name="UserSignList">
<UserSignList class="h-full" :user-id="userId" />
<ElTabPane label="签到" name="SignList">
<SignList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="成长值" name="UserExperienceRecordList">
<UserExperienceRecordList class="h-full" :user-id="userId" />
<ElTabPane label="成长值" name="ExperienceRecordList">
<ExperienceRecordList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="余额" name="UserBalanceList">
<UserBalanceList class="h-full" :wallet-id="wallet?.id" />
<ElTabPane label="余额" name="BalanceList">
<BalanceList class="h-full" :wallet-id="wallet?.id" />
</ElTabPane>
<ElTabPane label="收货地址" name="UserAddressList">
<ElTabPane label="收货地址" name="AddressList">
<UserAddressList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="订单管理" name="UserOrderList">
<ElTabPane label="订单管理" name="OrderList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<UserOrderList class="h-full" :user-id="userId" />
</div>
</ElTabPane>
<ElTabPane label="售后管理" name="UserAfterSaleList">
<ElTabPane label="售后管理" name="AfterSaleList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<UserAfterSaleList class="h-full" :user-id="userId" />
</div>
</ElTabPane>
<ElTabPane label="收藏记录" name="UserFavoriteList">
<ElTabPane label="收藏记录" name="FavoriteList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<UserFavoriteList class="h-full" :user-id="userId" />
</div>
</ElTabPane>
<ElTabPane label="优惠劵" name="UserCouponList">
<ElTabPane label="优惠劵" name="CouponList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<UserCouponList class="h-full" :user-id="userId" />
</div>
</ElTabPane>
<ElTabPane label="推广用户" name="UserBrokerageList">
<ElTabPane label="推广用户" name="BrokerageList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<UserBrokerageList class="h-full" :user-id="userId" />

8
apps/web-ele/src/views/member/user/detail/modules/user-account-info.vue → apps/web-ele/src/views/member/user/detail/modules/account-info.vue
View File

@@ -19,12 +19,12 @@ withDefaults(
},
);
const [Description] = useDescription({
const [Descriptions] = useDescription({
componentProps: {
border: false,
column: 2,
direction: 'horizontal',
labelWidth: 100,
labelWidth: 140,
title: '',
extra: '',
},
@@ -32,7 +32,7 @@ const [Description] = useDescription({
{
field: 'levelName',
label: '等级',
content: (data) => data.levelName || '无',
content: (data) => data.levelName || '-',
},
{
field: 'experience',
@@ -76,7 +76,7 @@ const [Description] = useDescription({
<template #extra>
<slot name="extra"></slot>
</template>
<Description
<Descriptions
:column="mode === 'member' ? 2 : 1"
:data="{
...user,

13
apps/web-ele/src/views/member/user/detail/modules/user-balance-list.vue → apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
View File

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

20
apps/web-ele/src/views/member/user/detail/modules/user-basic-info.vue → apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
View File

@@ -18,12 +18,12 @@ withDefaults(
},
);
const [Description] = useDescription({
const [Descriptions] = useDescription({
componentProps: {
border: false,
column: 2,
direction: 'horizontal',
labelWidth: 100,
labelWidth: 140,
title: '',
extra: '',
},
@@ -60,17 +60,17 @@ const [Description] = 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() || '-',
},
],
});
@@ -85,16 +85,16 @@ const [Description] = useDescription({
<slot name="extra"></slot>
</template>
<ElRow v-if="mode === 'member'" :gutter="24">
<ElCol :span="4">
<ElAvatar :size="140" shape="square" :src="user.avatar" />
<ElCol :span="6">
<ElAvatar :size="180" shape="square" :src="user.avatar" />
</ElCol>
<ElCol :span="20">
<Description :column="2" :data="user" />
<ElCol :span="18">
<Descriptions :column="2" :data="user" />
</ElCol>
</ElRow>
<template v-else-if="mode === 'kefu'">
<ElAvatar :size="140" shape="square" :src="user.avatar" />
<Description :column="1" :data="user" />
<Descriptions :column="1" :data="user" />
</template>
</ElCard>
</template>

28
apps/web-ele/src/views/member/user/detail/modules/user-experience-record-list.vue → apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
View File

@@ -4,13 +4,13 @@ import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { ElTag } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExperienceRecordPage } from '#/api/member/experience-record';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
const props = defineProps<{
@@ -25,17 +25,22 @@ const [Grid] = useVbenVxeGrid({
label: '业务类型',
component: 'Select',
componentProps: {
clearable: true,
options: getDictOptions(
DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
'number',
),
placeholder: '请选择业务类型',
clearable: true,
},
},
{
fieldName: 'title',
label: '标题',
component: 'Input',
componentProps: {
placeholder: '请输入标题',
clearable: true,
},
},
{
fieldName: 'createDate',
@@ -53,22 +58,24 @@ 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(
ElTag,
{
class: 'mr-1',
color: row.experience > 0 ? 'blue' : 'red',
type: row.point > 0 ? 'primary' : 'danger',
},
() =>
row.experience > 0 ? `+${row.experience}` : row.experience,
@@ -79,22 +86,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 +114,6 @@ const [Grid] = useVbenVxeGrid({
},
],
keepSource: true,
pagerConfig: {
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
@@ -119,6 +128,7 @@ const [Grid] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

1
apps/web-ele/src/views/member/user/detail/modules/user-point-list.vue → apps/web-ele/src/views/member/user/detail/modules/point-list.vue
View File

@@ -23,6 +23,7 @@ const [Grid] = useVbenVxeGrid({
component: 'Select',
componentProps: {
clearable: true,
placeholder: '请选择业务类型',
options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
},
},

8
apps/web-ele/src/views/member/user/detail/modules/user-sign-list.vue → apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
View File

@@ -18,6 +18,10 @@ const [Grid] = useVbenVxeGrid({
fieldName: 'day',
label: '签到天数',
component: 'Input',
componentProps: {
placeholder: '请输入签到天数',
clearable: 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,

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

@@ -19,33 +19,39 @@ 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(
ElTag,
{
class: 'mr-1',
color: row.defaultStatus ? 'blue' : 'red',
type: row.defaultStatus ? 'primary' : 'danger',
},
() => (row.defaultStatus ? '是' : '否'),
);
@@ -56,6 +62,7 @@ const [Grid] = useVbenVxeGrid({
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
minWidth: 160,
},
],
keepSource: true,

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

@@ -4,6 +4,9 @@ import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
import { ref, watch } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -11,9 +14,6 @@ import {
deleteCoupon,
getCouponPage,
} from '#/api/mall/promotion/coupon/coupon';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
const props = defineProps<{