【新增】mall 客服订单消息

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

@@ -57,6 +57,8 @@
                 <ImageMessageItem :message="item" />
                 <!-- 商品消息 -->
                 <ProductMessageItem :message="item" />
+                <!-- 订单消息 -->
+                <OrderMessageItem :message="item" />
               </div>
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -104,6 +106,7 @@ 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 OrderMessageItem from './message/OrderMessageItem.vue'
 import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'

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

 <template>
   <!-- 图片消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
+  <template v-if="KeFuMessageContentTypeEnum.ORDER === message.contentType">
     <div
       :class="[
         message.senderType === UserTypeEnum.MEMBER
@@ -10,14 +10,33 @@
             : ''
       ]"
     >
-      <ProductItem
-        :img="getMessageContent.picUrl"
-        :price="getMessageContent.price"
-        :skuText="getMessageContent.introduction"
-        :title="getMessageContent.spuName"
-        :titleWidth="400"
-        priceColor="#FF3000"
-      />
+      <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
+        <div class="order-card-header flex items-center justify-between p-x-20px">
+          <div class="order-no">订单号：{{ getMessageContent.no }}</div>
+          <div :class="formatOrderColor(getMessageContent)" class="order-state font-26">
+            {{ formatOrderStatus(getMessageContent) }}
+          </div>
+        </div>
+        <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+          <ProductItem
+            :img="item.picUrl"
+            :num="item.count"
+            :price="item.price"
+            :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+            :title="item.spuName"
+          />
+        </div>
+        <div class="pay-box mt-30px flex justify-end pr-20px">
+          <div class="flex items-center">
+            <div class="discounts-title pay-color"
+              >共 {{ getMessageContent.productCount }} 件商品,总金额:
+            </div>
+            <div class="discounts-money pay-color">
+              ￥{{ fenToYuan(getMessageContent.payPrice) }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </template>
 </template>
@@ -27,10 +46,137 @@ import { KeFuMessageContentTypeEnum } from '../tools/constants'
 import ProductItem from './ProductItem.vue'
 import { UserTypeEnum } from '@/utils/constants'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { fenToYuan } from '@/utils'
 
-defineOptions({ name: 'ImageMessageItem' })
+defineOptions({ name: 'OrderMessageItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()
 const getMessageContent = computed(() => JSON.parse(props.message.content))
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+function formatOrderColor(order) {
+  if (order.status === 0) {
+    return 'info-color'
+  }
+  if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
+    return 'warning-color'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color'
+  }
+  return 'danger-color'
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+function formatOrderStatus(order) {
+  if (order.status === 0) {
+    return '待付款'
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货'
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销'
+  }
+  if (order.status === 20) {
+    return '待收货'
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成'
+  }
+  return '已关闭'
+}
 </script>
+
+<style lang="scss" scoped>
+.order-list-card-box {
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #e2e2e2;
+
+  .order-card-header {
+    height: 80rpx;
+
+    .order-no {
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+  }
+
+  .pay-box {
+    .discounts-title {
+      font-size: 24rpx;
+      line-height: normal;
+      color: #999999;
+    }
+
+    .discounts-money {
+      font-size: 24rpx;
+      line-height: normal;
+      color: #999;
+      font-family: OPPOSANS;
+    }
+
+    .pay-color {
+      color: #333;
+    }
+  }
+
+  .order-card-footer {
+    height: 100rpx;
+
+    .more-item-box {
+      padding: 20rpx;
+
+      .more-item {
+        height: 60rpx;
+
+        .title {
+          font-size: 26rpx;
+        }
+      }
+    }
+
+    .more-btn {
+      color: #999999;
+      font-size: 24rpx;
+    }
+
+    .content {
+      width: 154rpx;
+      color: #333333;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+  }
+}
+
+.warning-color {
+  color: #faad14;
+}
+
+.danger-color {
+  color: #ff3000;
+}
+
+.success-color {
+  color: #52c41a;
+}
+
+.info-color {
+  color: #999999;
+}
+</style>

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

@@ -116,6 +116,7 @@ const imagePrediv = (imgUrl: string) => {
 
 .ss-order-card-warp {
   padding: 20px;
+  border-radius: 10px;
   background-color: #e2e2e2;
 
   .img-box {

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

@@ -28,7 +28,7 @@ import ProductItem from './ProductItem.vue'
 import { UserTypeEnum } from '@/utils/constants'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 
-defineOptions({ name: 'ImageMessageItem' })
+defineOptions({ name: 'ProductMessageItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()