!584 【功能完善】商城: 客服

Merge pull request !584 from puhui999/dev

Author: YunaiV

src/store/modules/mall/kefu.ts

@@ -63,48 +63,14 @@ export const useMallKefuStore = defineStore('mall-kefu', {
       }
     },
     conversationSort() {
-      // TODO @puhui999：1）逻辑上，先按照置顶、再按照最后消息时间；2）感觉写的有一丢丢小复杂，发给大模型，看看有没可能简化哈。
-      this.conversationList.sort((obj1, obj2) => {
-        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 false，obj1 应该排在前面
-        if (obj1.adminPinned && !obj2.adminPinned) {
-          return -1
+      // 按置顶属性和最后消息时间排序
+      this.conversationList.sort((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1
         }
-        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 true，obj2 应该排在前面
-        if (!obj1.adminPinned && obj2.adminPinned) {
-          return 1
-        }
-
-        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 true，比较 adminUnreadMessageCount 的值
-        if (obj1.adminPinned && obj2.adminPinned) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 false，比较 adminUnreadMessageCount 的值
-        if (!obj1.adminPinned && !obj2.adminPinned) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 true，且 b 都大于 0，比较 adminUnreadMessageCount 的值
-        if (
-          obj1.adminPinned &&
-          obj2.adminPinned &&
-          obj1.adminUnreadMessageCount > 0 &&
-          obj2.adminUnreadMessageCount > 0
-        ) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 false，且 b 都大于 0，比较 adminUnreadMessageCount 的值
-        if (
-          !obj1.adminPinned &&
-          !obj2.adminPinned &&
-          obj1.adminUnreadMessageCount > 0 &&
-          obj2.adminUnreadMessageCount > 0
-        ) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        return 0
+        // 按照最后消息时间排序，最近的会在前面
+        return (b.lastMessageTime as unknown as number) - (a.lastMessageTime as unknown as number)
       })
     }
   }

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { toNumber } from 'lodash-es'
+import {toNumber} from 'lodash-es'
 
 /**
  *

src/views/mall/promotion/kefu/components/KeFuConversationList.vue

@@ -1,7 +1,7 @@
 <template>
   <el-aside class="kefu p-5px h-100%" width="260px">
-    <div class="color-[#999] font-bold my-10px"
-      >会话记录({{ kefuStore.getConversationList.length }})
+    <div class="color-[#999] font-bold my-10px">
+      会话记录({{ kefuStore.getConversationList.length }})
     </div>
     <div
       v-for="item in kefuStore.getConversationList"
@@ -78,6 +78,7 @@ import { formatPast } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { useAppStore } from '@/store/modules/app'
 import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 
 defineOptions({ name: 'KeFuConversationList' })
 
@@ -118,7 +119,7 @@ const getConversationDisplayText = computed(
       case KeFuMessageContentTypeEnum.VOICE:
         return '[语音消息]'
       case KeFuMessageContentTypeEnum.TEXT:
-        return replaceEmoji(lastMessageContent)
+        return replaceEmoji(jsonParse(lastMessageContent).text || lastMessageContent)
       default:
         return ''
     }

src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -52,7 +52,7 @@
                 <MessageItem :message="item">
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
-                      v-dompurify-html="replaceEmoji(item.content)"
+                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
                       class="flex items-center"
                     ></div>
                   </template>
@@ -62,8 +62,8 @@
                   <el-image
                     v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                     :initial-index="0"
-                    :preview-src-list="[item.content]"
-                    :src="item.content"
+                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
+                    :src="getMessageContent(item).picUrl || item.content"
                     class="w-200px"
                     fit="contain"
                     preview-teleported
@@ -75,12 +75,11 @@
                     v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
                     :picUrl="getMessageContent(item).picUrl"
                     :price="getMessageContent(item).price"
-                    :skuText="getMessageContent(item).introduction"
+                    :sales-count="getMessageContent(item).salesCount"
                     :spuId="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
                     :title="getMessageContent(item).spuName"
-                    :titleWidth="400"
-                    class="max-w-70%"
-                    priceColor="#FF3000"
+                    class="max-w-300px"
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
@@ -245,6 +244,7 @@ const getNewMessageList = async (val: KeFuConversationRespVO) => {
   total.value = messageList.value.length || 0
   loadHistory.value = false
   refreshContent.value = false
+  skipGetMessageList.value = false
   // 2.2 设置会话相关属性
   conversation.value = val
   queryParams.conversationId = val.id
@@ -268,7 +268,7 @@ const handleSendPicture = async (picUrl: string) => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.IMAGE,
-    content: picUrl
+    content: JSON.stringify({ picUrl })
   }
   await sendMessage(msg)
 }
@@ -288,7 +288,7 @@ const handleSendMessage = async (event: any) => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.TEXT,
-    content: message.value
+    content: JSON.stringify({ text: message.value })
   }
   await sendMessage(msg)
 }
@@ -392,7 +392,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
   &-content {
     margin: 0;
-    padding: 0;
+    padding: 10px;
     position: relative;
     height: 100%;
     width: 100%;

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

@@ -24,7 +24,22 @@
         交易订单
       </div>
     </el-header>
-    <el-main class="kefu-content">
+    <el-main class="kefu-content p-10px!">
+      <div v-if="!isEmpty(conversation)" v-loading="loading">
+        <!-- 基本信息 -->
+        <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
+          <template #header>
+            <CardTitle title="基本信息" />
+          </template>
+        </UserBasicInfo>
+        <!-- 账户信息 -->
+        <el-card v-if="activeTab === '会员信息'" class="h-full mt-10px" shadow="never">
+          <template #header>
+            <CardTitle title="账户信息" />
+          </template>
+          <UserAccountInfo :column="1" :user="user" :wallet="wallet" />
+        </el-card>
+      </div>
       <div v-show="!isEmpty(conversation)">
         <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
           <!-- 最近浏览 -->
@@ -45,11 +60,17 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
 import { debounce } from 'lodash-es'
 import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
+import { CardTitle } from '@/components/Card'
+import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
+import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
+import * as UserApi from '@/api/member/user'
+import * as WalletApi from '@/api/pay/wallet/balance'
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 
 const activeTab = ref('会员信息')
 const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
+
 /** tab 切换 */
 const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
 const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
@@ -63,6 +84,8 @@ const handleClick = async (tab: string) => {
 const getHistoryList = async () => {
   switch (activeTab.value) {
     case '会员信息':
+      await getUserData()
+      await getUserWallet()
       break
     case '最近浏览':
       await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
@@ -110,6 +133,37 @@ const handleScroll = debounce(() => {
     loadMore()
   }
 }, 200)
+
+/* 用户钱包相关信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: conversation.value.userId }
+  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+}
+
+const loading = ref(true) // 加载中
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
+
+/** 获得用户 */
+const getUserData = async () => {
+  loading.value = true
+  try {
+    user.value = await UserApi.getUser(conversation.value.userId)
+  } finally {
+    loading.value = false
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue

@@ -1,15 +1,14 @@
 <template>
   <ProductItem
     v-for="item in list"
-    :spu-id="item.spuId"
     :key="item.id"
     :picUrl="item.picUrl"
     :price="item.price"
-    :skuText="item.introduction"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
     :title="item.spuName"
-    :titleWidth="400"
     class="mb-10px"
-    priceColor="#FF3000"
   />
 </template>
 

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -14,11 +14,11 @@
       </div>
       <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
         <ProductItem
-          :spu-id="item.spuId"
           :num="item.count"
           :picUrl="item.picUrl"
           :price="item.price"
           :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :spu-id="item.spuId"
           :title="item.spuName"
         />
       </div>
@@ -112,14 +112,14 @@ function formatOrderStatus(order: any) {
   border-radius: 10px;
   padding: 10px;
   border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
+  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
 
   .order-card-header {
     height: 28px;
+    font-weight: bold;
 
     .order-no {
-      font-size: 12px;
-      font-weight: 500;
+      font-size: 13px;
 
       span {
         &:hover {
@@ -128,27 +128,30 @@ function formatOrderStatus(order: any) {
         }
       }
     }
+
+    .order-state {
+      font-size: 13px;
+    }
   }
 
   .pay-box {
     padding-top: 10px;
+    color: #fff;
+    font-weight: bold;
 
     .discounts-title {
       font-size: 16px;
       line-height: normal;
-      color: #999999;
     }
 
     .discounts-money {
       font-size: 16px;
       line-height: normal;
-      color: #999;
       font-family: OPPOSANS;
     }
 
     .pay-color {
       font-size: 13px;
-      color: var(--left-menu-text-color);
     }
   }
 }