From 9dfb869a4bb7d57a41292cf34e241f90d2d494de Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 9 Jul 2024 16:14:51 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=95=86=E5=93=81=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue |   3 +
 .../components/message/ProductMessageItem.vue | 101 ++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index ff577325..d7b9aeff 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -55,6 +55,8 @@
                 <TextMessageItem :message="item" />
                 <!-- 图片消息 -->
                 <ImageMessageItem :message="item" />
+                <!-- 商品消息 -->
+                <ProductMessageItem :message="item" />
               </div>
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -101,6 +103,7 @@ import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
 import PictureSelectUpload from './tools/PictureSelectUpload.vue'
 import TextMessageItem from './message/TextMessageItem.vue'
 import ImageMessageItem from './message/ImageMessageItem.vue'
+import ProductMessageItem from './message/ProductMessageItem.vue'
 import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
new file mode 100644
index 00000000..847369f8
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
@@ -0,0 +1,101 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+    >
+      <div class="goods flex items-center">
+        <el-image
+          :src="getMessageContent.picUrl"
+          class="image"
+          fit="contain"
+          @click="imagePreview(getMessageContent.picUrl)"
+        />
+        <view class="flex-1">
+          <view class="title ss-line-2">
+            {{ getMessageContent.spuName }}
+          </view>
+          <view v-if="getMessageContent.introduction" class="subtitle ss-line-1">
+            {{ getMessageContent.introduction }}
+          </view>
+          <view class="price mt-8px"> ￥{{ getMessageContent.price }}</view>
+        </view>
+      </div>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ImageMessageItem' })
+const props = defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const getMessageContent = computed(() => JSON.parse(props.message.content))
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
+<style lang="scss" scoped>
+.goods {
+  padding: 20px;
+  border-radius: 12px;
+  background-color: #e1e1e1;
+
+  .ss-line {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    &-1 {
+      -webkit-line-clamp: 1;
+    }
+
+    &-2 {
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .image {
+    width: 116px;
+    height: 116px;
+    flex-shrink: 0;
+    margin-right: 20px;
+  }
+
+  .title {
+    height: 64px;
+    line-height: 32px;
+    font-size: 26px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .subtitle {
+    font-size: 24px;
+    font-weight: 400;
+    color: #999;
+  }
+
+  .price {
+    font-size: 26px;
+    font-weight: 500;
+    color: #ff3000;
+  }
+}
+</style>