客服：完善订单消息发送

pages/chat/components/chatBox.vue

@@ -101,17 +101,16 @@
                   "
                 />
               </template>
-              <!--              <template v-if="item.contentType === KeFuMessageContentTypeEnum.ORDER">-->
-              <!--                <OrderItem-->
-              <!--                  from="msg"-->
-              <!--                  :orderData="item.content.item"-->
-              <!--                  @tap="-->
-              <!--                  sheep.$router.go('/pages/order/detail', {-->
-              <!--                    id: item.content.item.id,-->
-              <!--                  })-->
-              <!--                "-->
-              <!--                />-->
-              <!--              </template>-->
+              <template v-if="item.contentType === KeFuMessageContentTypeEnum.ORDER">
+                <OrderItem
+                  :orderData="JSON.parse(item.content)"
+                  @tap="
+                  sheep.$router.go('/pages/order/detail', {
+                    id: JSON.parse(item.content).id,
+                  })
+                "
+                />
+              </template>
               <!-- user头像 -->
               <image
                 v-if="item.senderType === UserTypeEnum.MEMBER"
@@ -133,9 +132,10 @@
 </template>
 
 <script setup>
-  import { nextTick, onBeforeUnmount, onMounted, reactive, ref, unref } from 'vue';
+  import { nextTick, reactive, ref, unref } from 'vue';
   import { onLoad } from '@dcloudio/uni-app';
   import GoodsItem from './goods.vue';
+  import OrderItem from './order.vue';
   import sheep from '@/sheep';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { isEmpty } from '@/sheep/helper/utils';

pages/chat/components/goods.vue

@@ -1,22 +1,15 @@
 <template>
-  <view class="goods ss-flex">
-    <image class="image" :src="sheep.$url.cdn(goodsData.picUrl)" mode="aspectFill"> </image>
-    <view class="ss-flex-1">
-      <view class="title ss-line-2">
-        {{ goodsData.spuName }}
-      </view>
-      <view v-if="goodsData.introduction" class="subtitle ss-line-1">
-        {{ goodsData.introduction }}
-      </view>
-      <view class="price ss-m-t-8">
-        ￥{{ goodsData.price }}
-      </view>
-    </view>
-  </view>
+  <s-goods-item
+    :title="goodsData.spuName"
+    :img="goodsData.picUrl"
+    :price="goodsData.price"
+    :skuText="goodsData.introduction"
+    priceColor="#FF3000"
+    :titleWidth="400"
+  />
 </template>
 
 <script setup>
-  import sheep from '@/sheep';
 
   const props = defineProps({
     goodsData: {
@@ -26,37 +19,3 @@
   });
 </script>
 
-<style lang="scss" scoped>
-  .goods {
-    background: #fff;
-    padding: 20rpx;
-    border-radius: 12rpx;
-
-    .image {
-      width: 116rpx;
-      height: 116rpx;
-      flex-shrink: 0;
-      margin-right: 20rpx;
-    }
-
-    .title {
-      height: 64rpx;
-      line-height: 32rpx;
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #333;
-    }
-
-    .subtitle {
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #999;
-    }
-
-    .price {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #ff3000;
-    }
-  }
-</style>

pages/chat/components/order.vue

@@ -1,49 +1,36 @@
 <template>
-  <view class="order">
-    <view class="top ss-flex ss-row-between">
-      <span>{{ orderData.order_sn }}</span>
-      <span>{{ orderData.create_time.split(' ')[1] }}</span>
-    </view>
-    <template v-if="from != 'msg'">
-      <view class="bottom ss-flex" v-for="item in orderData.items" :key="item">
-        <image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
-        <view class="ss-flex-1">
-          <view class="title ss-line-2">
-            {{ item.goods_title }}
-          </view>
-          <view v-if="item.goods_num" class="num ss-m-b-10"> 数量：{{ item.goods_num }} </view>
-          <view class="ss-flex ss-row-between ss-m-t-8">
-            <span class="price">￥{{ item.goods_price }}</span>
-            <span class="status">{{ orderData.status_text }}</span>
-          </view>
-        </view>
+  <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
+        :key="orderData.id">
+    <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+      <view class="order-no">订单号：{{ orderData.no }}</view>
+      <view class="order-state ss-font-26" :class="formatOrderColor(orderData)">
+        {{ formatOrderStatus(orderData) }}
       </view>
-    </template>
-    <template v-else>
-      <view class="bottom ss-flex" v-for="item in [orderData.items[0]]" :key="item">
-        <image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
-        <view class="ss-flex-1">
-          <view class="title title-1 ss-line-1">
-            {{ item.goods_title }}
-          </view>
-          <view class="order-total ss-flex ss-row-between ss-m-t-8">
-            <span>共{{ orderData.items.length }}件商品</span>
-            <span>合计 ¥{{ orderData.pay_fee }}</span>
-          </view>
-          <view class="ss-flex ss-row-right ss-m-t-8">
-            <span class="status">{{ orderData.status_text }}</span>
-          </view>
+    </view>
+    <view class="border-bottom" v-for="item in orderData.items" :key="item.id">
+      <s-goods-item
+        :img="item.picUrl"
+        :title="item.spuName"
+        :skuText="item.properties.map((property) => property.valueName).join(' ')"
+        :price="item.price"
+        :num="item.count"
+      />
+    </view>
+    <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
+      <view class="ss-flex ss-col-center">
+        <view class="discounts-title pay-color">共 {{ orderData.productCount }} 件商品,总金额:</view>
+        <view class="discounts-money pay-color">
+          ￥{{ fen2yuan(orderData.payPrice) }}
         </view>
       </view>
-    </template>
+    </view>
   </view>
 </template>
 
 <script setup>
-  import sheep from '@/sheep';
+  import { fen2yuan, formatOrderColor, formatOrderStatus } from '@/sheep/hooks/useGoods';
 
   const props = defineProps({
-    from: String,
     orderData: {
       type: Object,
       default: {},
@@ -52,71 +39,76 @@
 </script>
 
 <style lang="scss" scoped>
-  .order {
-    background: #fff;
-    padding: 20rpx;
-    border-radius: 12rpx;
+  .order-list-card-box {
+    .order-card-header {
+      height: 80rpx;
 
-    .top {
-      line-height: 40rpx;
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #999;
-      border-bottom: 1px solid rgba(223, 223, 223, 0.5);
-      margin-bottom: 20rpx;
-    }
-
-    .bottom {
-      margin-bottom: 20rpx;
+      .order-no {
+        font-size: 26rpx;
+        font-weight: 500;
+      }
 
-      &:last-of-type {
-        margin-bottom: 0;
+      .order-state {}
+    }
+    .pay-box {
+      .discounts-title {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999999;
       }
 
-      .image {
-        flex-shrink: 0;
-        width: 116rpx;
-        height: 116rpx;
-        margin-right: 20rpx;
+      .discounts-money {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999;
+        font-family: OPPOSANS;
       }
 
-      .title {
-        height: 64rpx;
-        line-height: 32rpx;
-        font-size: 26rpx;
-        font-weight: 500;
+      .pay-color {
         color: #333;
+      }
+    }
+    .order-card-footer {
+      height: 100rpx;
+
+      .more-item-box {
+        padding: 20rpx;
+
+        .more-item {
+          height: 60rpx;
 
-        &.title-1 {
-          height: 32rpx;
-          width: 300rpx;
+          .title {
+            font-size: 26rpx;
+          }
         }
       }
 
-      .num {
+      .more-btn {
+        color: $dark-9;
         font-size: 24rpx;
-        font-weight: 400;
-        color: #999;
       }
 
-      .price {
+      .content {
+        width: 154rpx;
+        color: #333333;
         font-size: 26rpx;
         font-weight: 500;
-        color: #ff3000;
       }
+    }
+  }
+  .warning-color {
+    color: #faad14;
+  }
 
-      .status {
-        font-size: 24rpx;
-        font-weight: 500;
-        color: var(--ui-BG-Main);
-      }
+  .danger-color {
+    color: #ff3000;
+  }
 
-      .order-total {
-        line-height: 28rpx;
-        font-size: 24rpx;
-        font-weight: 400;
-        color: #999;
-      }
-    }
+  .success-color {
+    color: #52c41a;
+  }
+
+  .info-color {
+    color: #999999;
   }
 </style>

pages/chat/index.vue

@@ -121,34 +121,13 @@
       case 'goods':
         msg = {
           contentType: KeFuMessageContentTypeEnum.PRODUCT,
-          content: JSON.stringify({
-            id: data.id,
-            spuName: data.spuName,
-            picUrl: data.picUrl,
-            price: data.price,
-            introduction: data.introduction,
-            stock: data.stock,
-          })
+          content: JSON.stringify(data)
         };
         break;
       case 'order':
         msg = {
           contentType: KeFuMessageContentTypeEnum.ORDER,
-          content: {
-            item: {
-              id: data.id,
-              order_sn: data.order_sn,
-              create_time: data.create_time,
-              pay_fee: data.pay_fee,
-              items: data.items.filter((item) => ({
-                goods_id: item.goods_id,
-                goods_title: item.goods_title,
-                goods_image: item.goods_image,
-                goods_price: item.goods_price,
-              })),
-              status_text: data.status_text,
-            },
-          },
+          content: JSON.stringify(data),
         };
         break;
     }