【优化】根据代码评审优化 mall 客服

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

@@ -10,12 +10,13 @@
             : ''
       ]"
     >
-      <!-- TODO @puhui999：unocss -->
       <el-image
+        :initial-index="0"
+        :preview-src-list="[message.content]"
         :src="message.content"
+        class="w-200px"
         fit="contain"
-        style="width: 200px"
-        @click="imagePreview(message.content)"
+        preview-teleported
       />
     </div>
   </template>
@@ -25,17 +26,9 @@
 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' })
 defineProps<{
   message: KeFuMessageRespVO
 }>()
-
-/** 图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
 </script>

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

@@ -18,10 +18,9 @@
           </div>
         </div>
         <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
-          <!-- TODO @puhui999：要不把 img => picUrl 类似这种，搞的更匹配一点 -->
           <ProductItem
-            :img="item.picUrl"
             :num="item.count"
+            :picUrl="item.picUrl"
             :price="item.price"
             :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
             :title="item.spuName"
@@ -61,7 +60,7 @@ const getMessageContent = computed(() => JSON.parse(props.message.content))
  * @param order 订单
  * @return {string} 颜色的 class 名称
  */
-function formatOrderColor(order) {
+function formatOrderColor(order: any) {
   if (order.status === 0) {
     return 'info-color'
   }
@@ -79,7 +78,7 @@ function formatOrderColor(order) {
  *
  * @param order 订单
  */
-function formatOrderStatus(order) {
+function formatOrderStatus(order: any) {
   if (order.status === 0) {
     return '待付款'
   }
@@ -109,23 +108,23 @@ function formatOrderStatus(order) {
   background-color: #e2e2e2;
 
   .order-card-header {
-    height: 80rpx;
+    height: 80px;
 
     .order-no {
-      font-size: 26rpx;
+      font-size: 26px;
       font-weight: 500;
     }
   }
 
   .pay-box {
     .discounts-title {
-      font-size: 24rpx;
+      font-size: 24px;
       line-height: normal;
       color: #999999;
     }
 
     .discounts-money {
-      font-size: 24rpx;
+      font-size: 24px;
       line-height: normal;
       color: #999;
       font-family: OPPOSANS;
@@ -137,29 +136,29 @@ function formatOrderStatus(order) {
   }
 
   .order-card-footer {
-    height: 100rpx;
+    height: 100px;
 
     .more-item-box {
-      padding: 20rpx;
+      padding: 20px;
 
       .more-item {
-        height: 60rpx;
+        height: 60px;
 
         .title {
-          font-size: 26rpx;
+          font-size: 26px;
         }
       }
     }
 
     .more-btn {
       color: #999999;
-      font-size: 24rpx;
+      font-size: 24px;
     }
 
     .content {
-      width: 154rpx;
+      width: 154px;
       color: #333333;
-      font-size: 26rpx;
+      font-size: 26px;
       font-weight: 500;
     }
   }

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

@@ -8,7 +8,14 @@
       class="ss-order-card-warp flex items-stretch justify-between bg-white"
     >
       <div class="img-box mr-24px">
-        <el-image :src="img" class="order-img" fit="contain" @click="imagePrediv(img)" />
+        <el-image
+          :initial-index="0"
+          :preview-src-list="[picUrl]"
+          :src="picUrl"
+          class="order-img"
+          fit="contain"
+          preview-teleported
+        />
       </div>
       <div
         :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
@@ -44,12 +51,11 @@
 </template>
 
 <script lang="ts" setup>
-import { createImageViewer } from '@/components/ImageViewer'
 import { fenToYuan } from '@/utils'
 
 defineOptions({ name: 'ProductItem' })
 const props = defineProps({
-  img: {
+  picUrl: {
     type: String,
     default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
   },
@@ -101,14 +107,6 @@ const skuString = computed(() => {
   }
   return props.skuText
 })
-
-// TODO @puhui999：可以使用 preview-teleported
-/** 图预览 */
-const imagePrediv = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
 </script>
 
 <style lang="scss" scoped>

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

@@ -11,7 +11,7 @@
       ]"
     >
       <ProductItem
-        :img="getMessageContent.picUrl"
+        :picUrl="getMessageContent.picUrl"
         :price="getMessageContent.price"
         :skuText="getMessageContent.introduction"
         :title="getMessageContent.spuName"