订单追踪

src/components/orderComponents/orderList.vue

@@ -1322,14 +1322,14 @@ export default {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    font-size: 12px;
-    font-weight: 600;
+    font-weight: bold;
     display: flex;
     align-items: flex-end;
 
     .detail_txt {
       color: #b1b1b1;
-      padding-bottom: 13px;
+      padding-bottom: 7px;
+      font-size: 15px;
       border-bottom: 2px solid #fafafa;
       margin-right: 28px;
       cursor: pointer;

src/components/orderComponents/orderTrack.vue

@@ -2,10 +2,10 @@
   <div class="order-detail">
     <!-- 取货中 -->
     <div class="picking-up">
-      <div class="top-cancel" v-if="buttonStatus === -1 || buttonStatus === -2">
+      <!-- <div class="top-cancel" v-if="buttonStatus === -1 || buttonStatus === -2">
         <img src="../../../static/image/icon_warn.png" alt="" srcset="">
         {{showCancelType(trackOrder.cancelType)}}
-      </div>
+      </div> -->
       <div class="top" v-if="
           (buttonStatus === 2 && riderArriveTime.riderArriveMinute) ||
           (buttonStatus === 3 && riderArriveTime.estimateArriveTime)
@@ -17,34 +17,34 @@
         <span v-if="buttonStatus === 2" class="top-tlt-l">{{ riderArriveTime.riderArriveMinute }}分钟后到店取件</span>
         <span v-if="buttonStatus === 3" class="top-tlt-l">{{ riderArriveTime.estimateArriveTime }}送达</span>
       </div>
-      <el-collapse>
-        <el-collapse-item v-for="(v,i) in trackOrder.list" :key='i' :title="`第${i+1}次配送`" :name="i">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item v-for="(v,i) in list" :key='i' :title="`第${list.length - i}次配送`" :name="i">
           <!-- 配送信息 ( 待接单无配送信息 ) -->
-          <div class="send-info" v-if="trackOrder.deliveryName">
+          <div class="send-info" v-if="v.deliveryName">
             <div class="send-tlt">配送信息</div>
             <div class="delivery">
-              <img v-if="trackOrder.deliveryLogo" class="img" :src="trackOrder.deliveryLogo" alt="">
+              <img v-if="v.deliveryLogo" class="img" :src="v.deliveryLogo" alt="">
               <div class="con">
                 <div class="delivery-top">
-                  <div class="left">{{trackOrder.shipperName}}</div>
-                  <div class="right">{{trackOrder.shipperPhone}}</div>
+                  <div class="left">{{v.shipperName}}</div>
+                  <div class="right">{{v.shipperPhone}}</div>
                 </div>
-                <div class="delivery-bot" v-if="trackOrder.customerPhone">
-                  <div class="left">{{trackOrder.deliveryName}}客服</div>
-                  <div class="right">{{ trackOrder.customerPhone }}</div>
+                <div class="delivery-bot" v-if="v.customerPhone">
+                  <div class="left">{{v.deliveryName}}客服</div>
+                  <div class="right">{{ v.customerPhone }}</div>
                 </div>
               </div>
             </div>
             <div class="label">
               <div class="label-tlt">接单时间：</div>
               <div class="label-right">
-                <span>{{ trackOrder.receiveTime }}</span>
+                <span>{{ shipperReceiveTime(v.itemList) }}</span>
               </div>
             </div>
             <div class="label">
-              <div class="label-tlt">{{ trackOrder.deliveryName }}订单号：</div>
+              <div class="label-tlt">{{ v.deliveryName }}订单号：</div>
               <div class="label-right">
-                <span>{{ trackOrder.deliveryOrderSn }}</span>
+                <span>{{ v.outTradeNo }}</span>
               </div>
             </div>
           </div>
@@ -54,14 +54,14 @@
             <div class="label">
               <div class="label-tlt">支付金额：</div>
               <div class="label-right">
-                <span>¥{{ trackOrder.payAmount }}</span>
-                <div class="detail">明细</div>
+                <span>¥{{ v.payAmount }}</span>
+                <!-- <div class="detail">明细</div> -->
               </div>
             </div>
             <div class="label">
               <div class="label-tlt">发单时间：</div>
               <div class="label-right">
-                <span>{{ trackOrder.sendTime || '--' }}</span>
+                <span>{{ sendOrderTime(v.itemList) }}</span>
               </div>
             </div>
           </div>
@@ -69,23 +69,23 @@
           <div class="address-box">
             <div class="process">
               <el-timeline>
-                <el-timeline-item class="p-item" v-for="(v, i) in trackOrder.itemList" :key="i" type="info" size="large" :icon="i ? 'el-icon-success' : 'el-icon-circle-check'">
+                <el-timeline-item class="p-item" v-for="(item, i) in v.itemList" :key="i" type="info" size="large" :icon="i ? 'el-icon-success' : 'el-icon-circle-check'">
                   <div class="p-right">
                     <div class="p-top">
-                      <span class="p-status">{{ v.orderStatus === -1 ? showCancelType(trackOrder.cancelType) : orderStatus(v.orderStatus) }}</span>
-                      <span class="p-time">{{ v.nodeTime }}</span>
+                      <span class="p-status">{{ item.orderStatus === -1 ? showCancelType(v.cancelType) : orderStatus(item.orderStatus) }}</span>
+                      <span class="p-time">{{ item.nodeTime }}</span>
                     </div>
-                    <div class="p-bottom" v-if="v.orderStatus === 1">
+                    <div class="p-bottom" v-if="item.orderStatus === 1">
                       <span>20分钟内无骑手接单将自动取消订单</span>
                     </div>
-                    <div class="p-bottom" v-if="v.orderStatus === 2">
-                      {{ trackOrder.deliveryName }}骑手
-                      <span class="has-driver">{{ trackOrder.shipperName }}（{{
-                      trackOrder.shipperPhone
+                    <div class="p-bottom" v-if="item.orderStatus === 2">
+                      {{ v.deliveryName }}骑手
+                      <span class="has-driver">{{ v.shipperName }}（{{
+                      v.shipperPhone
                     }})</span>
                       已接单
                     </div>
-                    <div class="p-bottom" v-if="v.orderStatus === 3 && buttonStatus === 3">
+                    <div class="p-bottom" v-if="item.orderStatus === 3 && buttonStatus === 3">
                       <span class="send">正在派送中</span>
                     </div>
                   </div>
@@ -108,9 +108,32 @@ export default {
     riderArriveTime: Object,
   },
   data() {
-    return {};
+    return {
+      activeNames: 0,
+    };
+  },
+  computed: {
+    list() {
+      return (
+        this.trackOrder &&
+        this.trackOrder.list &&
+        this.$tool.deepClone(this.trackOrder.list).reverse()
+      );
+    },
   },
   methods: {
+    sendOrderTime(itemList) {
+      let data = itemList.find((v) => {
+        return v.orderStatus === 5;
+      });
+      return data.nodeTime || "--";
+    },
+    shipperReceiveTime(itemList) {
+      let data = itemList.find((v) => {
+        return v.orderStatus === 2;
+      });
+      return data.nodeTime || "--";
+    },
     showCancelType(type) {
       let name = "";
       switch (type) {
@@ -175,22 +198,6 @@ export default {
       }
       return name;
     },
-    getTrackOrder() {
-      if (!this.orderInfo) return;
-      trackOrder({ orderId: this.orderInfo.id }).then((res) => {
-        if (res.code === 200) {
-          this.trackOrder = res.data;
-          this.trackOrder.itemList = this.trackOrder.itemList.filter((v) => {
-            return v.orderStatus !== -2;
-          });
-        } else {
-          this.$message({
-            message: res.msg,
-            type: "error",
-          });
-        }
-      });
-    },
   },
 };
 </script>
@@ -202,6 +209,10 @@ export default {
 /deep/ .el-timeline-item__wrapper {
   width: 100%;
 }
+/deep/ .el-collapse-item__header {
+  font-size: 14px !important;
+  font-weight: bold !important;
+}
 .clearfix:after {
   content: "";
   font-size: 0;
@@ -212,7 +223,7 @@ export default {
 .order-detail {
   width: 100%;
   box-sizing: border-box;
-  padding: 16px 16px 40px;
+  padding: 16px 16px 80px;
   .picking-up {
     .top-cancel {
       display: flex;
@@ -263,7 +274,7 @@ export default {
       .send-tlt {
         font-size: 13px;
         font-weight: bold;
-        color: #333333;
+        color: #777;
         margin-bottom: 15px;
       }
       .delivery {