客服：完善订单消息发送

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 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>
     </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 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>
-    <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>
-    </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;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      .image {
-        flex-shrink: 0;
-        width: 116rpx;
-        height: 116rpx;
-        margin-right: 20rpx;
-      }
-
-      .title {
-        height: 64rpx;
-        line-height: 32rpx;
+      .order-no {
         font-size: 26rpx;
         font-weight: 500;
-        color: #333;
+      }
 
-        &.title-1 {
-          height: 32rpx;
-          width: 300rpx;
+      .order-state {}
+    }
+    .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;
+          }
         }
       }
 
-      .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;
-      }
-
-      .status {
-        font-size: 24rpx;
-        font-weight: 500;
-        color: var(--ui-BG-Main);
-      }
-
-      .order-total {
-        line-height: 28rpx;
-        font-size: 24rpx;
-        font-weight: 400;
-        color: #999;
       }
     }
   }
+  .warning-color {
+    color: #faad14;
+  }
+
+  .danger-color {
+    color: #ff3000;
+  }
+
+  .success-color {
+    color: #52c41a;
+  }
+
+  .info-color {
+    color: #999999;
+  }
 </style>