!527 【功能优化】商城客服聊天相关优化

Merge pull request !527 from 卢越/master

!527 【功能优化】商城客服聊天相关优化
Merge pull request !527 from 卢越/master
1911ed99 · 芋道源码 · Gitee · b9970045 · 075cf0c1 · 1911ed99
Commit 1911ed99 authored Aug 25, 2024 by 芋道源码 Committed by Gitee Aug 25, 2024
5 changed files
--- a/src/api/mall/promotion/kefu/conversation/index.ts
+++ b/src/api/mall/promotion/kefu/conversation/index.ts
@@ -30,6 +30,6 @@ export const KeFuConversationApi = {
  },
  // 删除客服会话
  deleteConversation: async (id: number) => {
-    return await request.get({ url: '/promotion/kefu-conversation/delete?id' + id })
+    return await request.delete({ url: `/promotion/kefu-conversation/delete?id=${id}`})
  }
 }
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -71,6 +71,7 @@
                <MessageItem :message="item">
                  <ProductItem
                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
+                    :spuId="getMessageContent(item).spuId"
                    :picUrl="getMessageContent(item).picUrl"
                    :price="getMessageContent(item).price"
                    :skuText="getMessageContent(item).introduction"
@@ -393,7 +394,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-top: 5px solid transparent;
-          border-right: 5px solid #ffffff;
+          border-right: 5px solid var(--app-content-bg-color);
        }
      }
    }
@@ -412,7 +413,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
          right: -19px;
          top: calc(50% - 10px);
          position: absolute;
-          border-left: 5px solid #ffffff;
+          border-left: 5px solid var(--app-content-bg-color);
          border-bottom: 5px solid transparent;
          border-top: 5px solid transparent;
          border-right: 5px solid transparent;
@@ -422,9 +423,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
    // 消息气泡
    .kefu-message {
-      color: #333;
+      color: #A9A9A9;
      border-radius: 5px;
-      box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.2);
+      box-shadow: 3px 3px 5px rgba(220,220,220, 0.1);
      padding: 5px 10px;
      width: auto;
      max-width: 50%;
@@ -432,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
      display: inline-block !important;
      position: relative;
      word-break: break-all;
-      background-color: #ffffff;
+      background-color: var(--app-content-bg-color);
      transition: all 0.2s;
      &:hover {
@@ -454,7 +455,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
  .chat-tools {
    width: 100%;
-    border: #e4e0e0 solid 1px;
+    border: var(--el-border-color) solid 1px;
    border-radius: 10px;
    height: 44px;
  }

--- a/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue
 <template>
  <ProductItem
    v-for="item in list"
+    :spu-id="item.spuId"
    :key="item.id"
    :picUrl="item.picUrl"
    :price="item.price"

--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
 <template>
-  <div v-if="isObject(getMessageContent)">
+  <div v-if="isObject(getMessageContent)" @click="openDetail(getMessageContent.id)" style="cursor: pointer;">
    <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
      <div class="order-card-header flex items-center justify-between p-x-5px">
        <div class="order-no">订单号：{{ getMessageContent.no }}</div>
@@ -9,6 +9,7 @@
      </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"
@@ -36,6 +37,8 @@ import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 import { isObject } from '@/utils/is'
 import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
+const { push } = useRouter()
 defineOptions({ name: 'OrderItem' })
 const props = defineProps<{
  message?: KeFuMessageRespVO
@@ -46,6 +49,12 @@ const getMessageContent = computed(() =>
  typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
 )
+/** 查看订单详情 */
+const openDetail = (id: number) => {
+  console.log(getMessageContent)
+  push({ name: 'TradeOrderDetail', params: { id } })
+}
 /**
 * 格式化订单状态的颜色
 *
@@ -97,7 +106,7 @@ function formatOrderStatus(order: any) {
 .order-list-card-box {
  border-radius: 10px;
  padding: 10px;
-  border: 1px #6a6a6a solid;
+  border: 1px var(--el-border-color) solid;
  background-color: var(--app-content-bg-color);
  .order-card-header {

--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
 <template>
-  <div>
+  <div @click.stop="openDetail(props.spuId)" style="cursor: pointer;">
    <div>
      <slot name="top"></slot>
    </div>
@@ -15,6 +15,7 @@
          class="order-img"
          fit="contain"
          preview-teleported
+          @click.stop
        />
      </div>
      <div
@@ -53,8 +54,14 @@
 <script lang="ts" setup>
 import { fenToYuan } from '@/utils'
+const { push } = useRouter()
 defineOptions({ name: 'ProductItem' })
 const props = defineProps({
+  spuId: {
+    type: Number,
+    default: 0
+  },
  picUrl: {
    type: String,
    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
@@ -107,13 +114,19 @@ const skuString = computed(() => {
  }
  return props.skuText
 })
+/** 查看商品详情 */
+const openDetail = (spuId: number) => {
+  console.log(props.spuId)
+  push({ name: 'ProductSpuDetail', params: { id: spuId } })
+}
 </script>
 <style lang="scss" scoped>
 .ss-order-card-warp {
  padding: 20px;
  border-radius: 10px;
-  border: 1px #6a6a6a solid;
+  border: 1px var(--el-border-color) solid;
  background-color: var(--app-content-bg-color);
  .img-box {
@@ -134,7 +147,7 @@ const skuString = computed(() => {
    .tool-box {
      position: absolute;
-      right: 0px;
+      right: 0;
      bottom: -10px;
    }
  }