Skip to content

Commit fdee8d8

Browse files
author
puhui999
committed
【功能完善】商城: 客服会员信息
1 parent 33a4100 commit fdee8d8

File tree

3 files changed

+136
-19
lines changed

3 files changed

+136
-19
lines changed

‎src/views/mall/promotion/kefu/components/member/MemberInfo.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,21 @@
2525
</div>
2626
</el-header>
2727
<el-main class="kefu-content">
28+
<div v-if="!isEmpty(conversation)" v-loading="loading">
29+
<!-- 基本信息 -->
30+
<UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
31+
<template #header>
32+
<CardTitle title="基本信息" />
33+
</template>
34+
</UserBasicInfo>
35+
<!-- 账户信息 -->
36+
<el-card v-if="activeTab === '会员信息'" class="h-full" shadow="never">
37+
<template #header>
38+
<CardTitle title="账户信息" />
39+
</template>
40+
<UserAccountInfo :column="1" :user="user" :wallet="wallet" />
41+
</el-card>
42+
</div>
2843
<div v-show="!isEmpty(conversation)">
2944
<el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
3045
<!-- 最近浏览 -->
@@ -45,11 +60,17 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
4560
import { isEmpty } from '@/utils/is'
4661
import { debounce } from 'lodash-es'
4762
import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
63+
import { CardTitle } from '@/components/Card'
64+
import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
65+
import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
66+
import * as UserApi from '@/api/member/user'
67+
import * as WalletApi from '@/api/pay/wallet/balance'
4868
4969
defineOptions({ name: 'MemberBrowsingHistory' })
5070
5171
const activeTab = ref('会员信息')
5272
const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
73+
5374
/** tab 切换 */
5475
const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
5576
const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
@@ -63,6 +84,8 @@ const handleClick = async (tab: string) => {
6384
const getHistoryList = async () => {
6485
switch (activeTab.value) {
6586
case '会员信息':
87+
await getUserData()
88+
await getUserWallet()
6689
break
6790
case '最近浏览':
6891
await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
@@ -110,6 +133,37 @@ const handleScroll = debounce(() => {
110133
loadMore()
111134
}
112135
}, 200)
136+
137+
/* 用户钱包相关信息 */
138+
const WALLET_INIT_DATA = {
139+
balance: 0,
140+
totalExpense: 0,
141+
totalRecharge: 0
142+
} as WalletApi.WalletVO // 钱包初始化数据
143+
const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
144+
145+
/** 查询用户钱包信息 */
146+
const getUserWallet = async () => {
147+
if (!conversation.value.userId) {
148+
wallet.value = WALLET_INIT_DATA
149+
return
150+
}
151+
const params = { userId: conversation.value.userId }
152+
wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
153+
}
154+
155+
const loading = ref(true) // 加载中
156+
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
157+
158+
/** 获得用户 */
159+
const getUserData = async () => {
160+
loading.value = true
161+
try {
162+
user.value = await UserApi.getUser(conversation.value.userId)
163+
} finally {
164+
loading.value = false
165+
}
166+
}
113167
</script>
114168

115169
<style lang="scss" scoped>

‎src/views/member/user/detail/UserAccountInfo.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<el-descriptions :column="2">
2+
<el-descriptions :column="column">
33
<el-descriptions-item>
44
<template #label>
55
<descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
@@ -50,7 +50,9 @@ import * as UserApi from '@/api/member/user'
5050
import * as WalletApi from '@/api/pay/wallet/balance'
5151
import { fenToYuan } from '@/utils'
5252
53-
defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信息
53+
withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
54+
column: 2
55+
}) // 用户信息
5456
</script>
5557
<style lang="scss" scoped>
5658
.cell-item {

‎src/views/member/user/detail/UserBasicInfo.vue

Lines changed: 78 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,141 @@
33
<template #header>
44
<slot name="header"></slot>
55
</template>
6-
<el-row>
6+
<el-row v-if="mode === 'member'">
77
<el-col :span="4">
8-
<ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
8+
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
99
</el-col>
1010
<el-col :span="20">
1111
<el-descriptions :column="2">
1212
<el-descriptions-item>
1313
<template #label>
14-
<descriptions-item-label label="用户名" icon="ep:user" />
14+
<descriptions-item-label icon="ep:user" label="用户名" />
1515
</template>
1616
{{ user.name || '空' }}
1717
</el-descriptions-item>
1818
<el-descriptions-item>
1919
<template #label>
20-
<descriptions-item-label label="昵称" icon="ep:user" />
20+
<descriptions-item-label icon="ep:user" label="昵称" />
2121
</template>
2222
{{ user.nickname }}
2323
</el-descriptions-item>
2424
<el-descriptions-item label="手机号">
2525
<template #label>
26-
<descriptions-item-label label="手机号" icon="ep:phone" />
26+
<descriptions-item-label icon="ep:phone" label="手机号" />
2727
</template>
2828
{{ user.mobile }}
2929
</el-descriptions-item>
3030
<el-descriptions-item>
3131
<template #label>
32-
<descriptions-item-label label="性别" icon="fa:mars-double" />
32+
<descriptions-item-label icon="fa:mars-double" label="性别" />
3333
</template>
3434
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
3535
</el-descriptions-item>
3636
<el-descriptions-item>
3737
<template #label>
38-
<descriptions-item-label label="所在地" icon="ep:location" />
38+
<descriptions-item-label icon="ep:location" label="所在地" />
3939
</template>
4040
{{ user.areaName }}
4141
</el-descriptions-item>
4242
<el-descriptions-item>
4343
<template #label>
44-
<descriptions-item-label label="注册 IP" icon="ep:position" />
44+
<descriptions-item-label icon="ep:position" label="注册 IP" />
4545
</template>
4646
{{ user.registerIp }}
4747
</el-descriptions-item>
4848
<el-descriptions-item>
4949
<template #label>
50-
<descriptions-item-label label="生日" icon="fa:birthday-cake" />
50+
<descriptions-item-label icon="fa:birthday-cake" label="生日" />
5151
</template>
52-
{{ user.birthday ? formatDate(user.birthday) : '空' }}
52+
{{ user.birthday ? formatDate(user.birthday as any) : '空' }}
5353
</el-descriptions-item>
5454
<el-descriptions-item>
5555
<template #label>
56-
<descriptions-item-label label="注册时间" icon="ep:calendar" />
56+
<descriptions-item-label icon="ep:calendar" label="注册时间" />
5757
</template>
58-
{{ user.createTime ? formatDate(user.createTime) : '空' }}
58+
{{ user.createTime ? formatDate(user.createTime as any) : '空' }}
5959
</el-descriptions-item>
6060
<el-descriptions-item>
6161
<template #label>
62-
<descriptions-item-label label="最后登录时间" icon="ep:calendar" />
62+
<descriptions-item-label icon="ep:calendar" label="最后登录时间" />
6363
</template>
64-
{{ user.loginDate ? formatDate(user.loginDate) : '空' }}
64+
{{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
6565
</el-descriptions-item>
6666
</el-descriptions>
6767
</el-col>
6868
</el-row>
69+
<template v-if="mode === 'kefu'">
70+
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
71+
<el-descriptions :column="1">
72+
<el-descriptions-item>
73+
<template #label>
74+
<descriptions-item-label icon="ep:user" label="用户名" />
75+
</template>
76+
{{ user.name || '空' }}
77+
</el-descriptions-item>
78+
<el-descriptions-item>
79+
<template #label>
80+
<descriptions-item-label icon="ep:user" label="昵称" />
81+
</template>
82+
{{ user.nickname }}
83+
</el-descriptions-item>
84+
<el-descriptions-item label="手机号">
85+
<template #label>
86+
<descriptions-item-label icon="ep:phone" label="手机号" />
87+
</template>
88+
{{ user.mobile }}
89+
</el-descriptions-item>
90+
<el-descriptions-item>
91+
<template #label>
92+
<descriptions-item-label icon="fa:mars-double" label="性别" />
93+
</template>
94+
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
95+
</el-descriptions-item>
96+
<el-descriptions-item>
97+
<template #label>
98+
<descriptions-item-label icon="ep:location" label="所在地" />
99+
</template>
100+
{{ user.areaName }}
101+
</el-descriptions-item>
102+
<el-descriptions-item>
103+
<template #label>
104+
<descriptions-item-label icon="ep:position" label="注册 IP" />
105+
</template>
106+
{{ user.registerIp }}
107+
</el-descriptions-item>
108+
<el-descriptions-item>
109+
<template #label>
110+
<descriptions-item-label icon="fa:birthday-cake" label="生日" />
111+
</template>
112+
{{ user.birthday ? formatDate(user.birthday as any) : '空' }}
113+
</el-descriptions-item>
114+
<el-descriptions-item>
115+
<template #label>
116+
<descriptions-item-label icon="ep:calendar" label="注册时间" />
117+
</template>
118+
{{ user.createTime ? formatDate(user.createTime as any) : '空' }}
119+
</el-descriptions-item>
120+
<el-descriptions-item>
121+
<template #label>
122+
<descriptions-item-label icon="ep:calendar" label="最后登录时间" />
123+
</template>
124+
{{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
125+
</el-descriptions-item>
126+
</el-descriptions>
127+
</template>
69128
</el-card>
70129
</template>
71-
<script setup lang="ts">
130+
<script lang="ts" setup>
72131
import { DICT_TYPE } from '@/utils/dict'
73132
import { formatDate } from '@/utils/formatTime'
74133
import * as UserApi from '@/api/member/user'
75134
import { DescriptionsItemLabel } from '@/components/Descriptions/index'
76135
77-
const { user } = defineProps<{ user: UserApi.UserVO }>()
136+
withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
137+
mode: 'member'
138+
})
78139
</script>
79-
<style scoped lang="scss">
140+
<style lang="scss" scoped>
80141
.card-header {
81142
display: flex;
82143
justify-content: space-between;

0 commit comments

Comments
 (0)