MemberInfo.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <!-- 右侧信息:会员信息 + 最近浏览 + 交易订单 -->
  2. <template>
  3. <el-container class="kefu">
  4. <el-header class="kefu-header">
  5. <div
  6. :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
  7. class="kefu-header-item cursor-pointer flex items-center justify-center"
  8. @click="handleClick('会员信息')"
  9. >
  10. 会员信息
  11. </div>
  12. <div
  13. :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
  14. class="kefu-header-item cursor-pointer flex items-center justify-center"
  15. @click="handleClick('最近浏览')"
  16. >
  17. 最近浏览
  18. </div>
  19. <div
  20. :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
  21. class="kefu-header-item cursor-pointer flex items-center justify-center"
  22. @click="handleClick('交易订单')"
  23. >
  24. 交易订单
  25. </div>
  26. </el-header>
  27. <el-main class="kefu-content p-10px!">
  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 mt-10px" shadow="never">
  37. <template #header>
  38. <CardTitle title="账户信息" />
  39. </template>
  40. <UserAccountInfo :column="1" :user="user" :wallet="wallet" />
  41. </el-card>
  42. </div>
  43. <div v-show="!isEmpty(conversation)">
  44. <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
  45. <!-- 最近浏览 -->
  46. <ProductBrowsingHistory v-if="activeTab === '最近浏览'" ref="productBrowsingHistoryRef" />
  47. <!-- 交易订单 -->
  48. <OrderBrowsingHistory v-if="activeTab === '交易订单'" ref="orderBrowsingHistoryRef" />
  49. </el-scrollbar>
  50. </div>
  51. <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
  52. </el-main>
  53. </el-container>
  54. </template>
  55. <script lang="ts" setup>
  56. import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
  57. import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
  58. import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
  59. import { isEmpty } from '@/utils/is'
  60. import { debounce } from 'lodash-es'
  61. import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
  62. import { CardTitle } from '@/components/Card'
  63. import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
  64. import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
  65. import * as UserApi from '@/api/member/user'
  66. import * as WalletApi from '@/api/pay/wallet/balance'
  67. defineOptions({ name: 'MemberBrowsingHistory' })
  68. const activeTab = ref('会员信息')
  69. const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
  70. /** tab 切换 */
  71. const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
  72. const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
  73. const handleClick = async (tab: string) => {
  74. activeTab.value = tab
  75. await nextTick()
  76. await getHistoryList()
  77. }
  78. /** 获得历史数据 */
  79. const getHistoryList = async () => {
  80. switch (activeTab.value) {
  81. case '会员信息':
  82. await getUserData()
  83. await getUserWallet()
  84. break
  85. case '最近浏览':
  86. await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
  87. break
  88. case '交易订单':
  89. await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
  90. break
  91. default:
  92. break
  93. }
  94. }
  95. /** 加载下一页数据 */
  96. const loadMore = async () => {
  97. switch (activeTab.value) {
  98. case '会员信息':
  99. break
  100. case '最近浏览':
  101. await productBrowsingHistoryRef.value?.loadMore()
  102. break
  103. case '交易订单':
  104. await orderBrowsingHistoryRef.value?.loadMore()
  105. break
  106. default:
  107. break
  108. }
  109. }
  110. /** 浏览历史初始化 */
  111. const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
  112. const initHistory = async (val: KeFuConversationRespVO) => {
  113. activeTab.value = '会员信息'
  114. conversation.value = val
  115. await nextTick()
  116. await getHistoryList()
  117. }
  118. defineExpose({ initHistory })
  119. /** 处理消息列表滚动事件(debounce 限流) */
  120. const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
  121. const handleScroll = debounce(() => {
  122. const wrap = scrollbarRef.value?.wrapRef
  123. // 触底重置
  124. if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
  125. loadMore()
  126. }
  127. }, 200)
  128. /** 查询用户钱包信息 */
  129. const WALLET_INIT_DATA = {
  130. balance: 0,
  131. totalExpense: 0,
  132. totalRecharge: 0
  133. } as WalletApi.WalletVO // 钱包初始化数据
  134. const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
  135. const getUserWallet = async () => {
  136. if (!conversation.value.userId) {
  137. wallet.value = WALLET_INIT_DATA
  138. return
  139. }
  140. wallet.value =
  141. (await WalletApi.getWallet({ userId: conversation.value.userId })) || WALLET_INIT_DATA
  142. }
  143. /** 获得用户 */
  144. const loading = ref(true) // 加载中
  145. const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
  146. const getUserData = async () => {
  147. loading.value = true
  148. try {
  149. user.value = await UserApi.getUser(conversation.value.userId)
  150. } finally {
  151. loading.value = false
  152. }
  153. }
  154. </script>
  155. <style lang="scss" scoped>
  156. .kefu {
  157. position: relative;
  158. width: 300px !important;
  159. background-color: #fff;
  160. &::after {
  161. content: '';
  162. position: absolute;
  163. top: 0;
  164. left: 0;
  165. width: 1px; /* 实际宽度 */
  166. height: 100%;
  167. background-color: var(--el-border-color);
  168. transform: scaleX(0.3); /* 缩小宽度 */
  169. }
  170. &-header {
  171. background: #fbfbfb;
  172. box-shadow: 0 0 0 0 #dcdfe6;
  173. display: flex;
  174. align-items: center;
  175. justify-content: space-around;
  176. &-title {
  177. font-size: 18px;
  178. font-weight: bold;
  179. }
  180. &-item {
  181. height: 100%;
  182. width: 100%;
  183. position: relative;
  184. &-activation::before {
  185. content: '';
  186. position: absolute; /* 绝对定位 */
  187. top: 0;
  188. left: 0;
  189. right: 0;
  190. bottom: 0; /* 覆盖整个元素 */
  191. border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
  192. pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
  193. }
  194. &:hover::before {
  195. content: '';
  196. position: absolute; /* 绝对定位 */
  197. top: 0;
  198. left: 0;
  199. right: 0;
  200. bottom: 0; /* 覆盖整个元素 */
  201. border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
  202. pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
  203. }
  204. }
  205. }
  206. &-content {
  207. margin: 0;
  208. padding: 0;
  209. position: relative;
  210. height: 100%;
  211. width: 100%;
  212. }
  213. &-tabs {
  214. height: 100%;
  215. width: 100%;
  216. }
  217. }
  218. .header-title {
  219. border-bottom: #e4e0e0 solid 1px;
  220. }
  221. </style>