订单物流信息

@@ -15,8 +15,9 @@
           isGoingOn && i === 0 ? 'content-wrapper active' : 'content-wrapper'
         "
       >
-        <p class="content">{{ deliveryDetail.acceptRemark }}</p>
+        <p class="remark">{{ deliveryDetail.acceptRemark }}</p>
         <p class="time">{{ deliveryDetail.createTimeStr }}</p>
+        <slot name="content" :detail="deliveryDetail"></slot>
       </div>
     </li>
   </ul>
@@ -65,11 +66,11 @@ export default {
       margin-top: -8px;
       line-height: 1;
 
-      &.active {
+      &.active .remark {
         color: #000;
       }
 
-      .content {
+      .remark {
         margin-bottom: 20px;
       }
     }

 <template>
-  <layout-app title="物流详情">
+  <layout-app :title="logisticInfo.expressSender">
     <div class="logistics-wrapper">
       <div class="header">
-        <!-- <p class="title">{{ logisticInfo.expressSender }}</p> -->
         <img class="step" alt="" :src="stageImgUrl" />
       </div>
       <div class="content">
@@ -34,10 +33,44 @@
           :key="i"
         >
           <span class="title">{{ detailInfo.title }}</span>
-          <time-line
-            :isGoingOn="i === 0"
-            :deliveryList="detailInfo.detailList"
-          />
+          <time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList">
+            <template #content="{detail: {miniFaultConfirm} }">
+              <div class="judge-content-wrapper" v-if="miniFaultConfirm">
+                <p class="tip">
+                  {{ miniFaultConfirm.text }},
+                  <span>
+                    请在<count-down
+                      :leftTime="miniFaultConfirm.leftTime"
+                      :isShowIcon="false"
+                      class="judge-count-down"
+                    />之前确定是否接受
+                  </span>
+                </p>
+                <ul class="img-wrapper">
+                  <li
+                    v-for="(imgUrl, i) in miniFaultConfirm.imageUrls"
+                    :key="i"
+                    v-if="i < 3"
+                  >
+                    <ImageFormat
+                      :data-secc="imgUrl"
+                      :src="imgUrl"
+                      alt=""
+                      :width="70"
+                      :height="70"
+                    />
+                  </li>
+                  <li v-if="miniFaultConfirm.imageUrls.length > 3">
+                    <Button class="more">查看更多</Button>
+                  </li>
+                </ul>
+                <div class="actions-wrapper">
+                  <Button>不接受</Button>
+                  <Button>接受，请发货</Button>
+                </div>
+              </div>
+            </template>
+          </time-line>
         </div>
       </div>
     </div>
@@ -48,24 +81,31 @@
 import { createNamespacedHelpers } from "vuex";
 import TimeLine from "./components/time-line";
 import { expressTypeEnum } from "constants/logistics-constants";
+import CountDown from "./components/count-down";
+import { Button } from "cube-ui";
 
 const STORE_PATH = "order/logisticsInfo";
 
-const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
-  STORE_PATH
-);
+const { mapActions, mapState } = createNamespacedHelpers(STORE_PATH);
 
 export default {
   components: {
-    TimeLine
+    TimeLine,
+    CountDown,
+    Button
   },
   computed: {
     ...mapState(["logisticInfo"]),
-    ...mapGetters(["stageImgUrl"]),
     platformName() {
       const { expressType: type } = this.logisticInfo;
       return expressTypeEnum[type];
     },
+    stageImgUrl() {
+      const { stage } = this.logisticInfo;
+      return stage
+        ? require(`../../statics/image/order/logistics_progress_${stage}@3x.png`)
+        : "";
+    },
     detailList() {
       const {
         // 物流信息
@@ -107,6 +147,68 @@ export default {
   height: 100vh;
   -webkit-box-orient: vertical;
 
+  .judge-content-wrapper {
+    font-size: 24px;
+    color: #000;
+    line-height: 1.5;
+    margin-bottom: 20px;
+
+    .actions-wrapper {
+      display: flex;
+      margin-top: 60px;
+
+      button {
+        font-size: 28px;
+        background: #fff;
+        color: #000;
+        border-radius: 35px;
+        padding: 16px 36px 14px 36px;
+        width: 240px;
+        border: 1px solid #ccc;
+        line-height: 1.3;
+
+        &:last-child {
+          border: none;
+          background: #002b47;
+          color: #fff;
+          margin-left: 40px;
+        }
+      }
+    }
+
+    .tip {
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+
+    .judge-count-down {
+      color: #d0021b;
+      font-size: 12px;
+      display: inline-block;
+    }
+
+    .img-wrapper {
+      // display: inline-block;
+      display: flex;
+
+      .more {
+        background: #fff;
+        font-size: 24px;
+        height: 100%;
+        width: 100%;
+        color: #999;
+        padding: 0;
+      }
+
+      li {
+        min-width: 3.5rem;
+        height: 3.5rem;
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+
   .content {
     padding: 0 40px;
 

@@ -10,13 +10,6 @@ export default function() {
         state.logisticInfo = data;
       },
     },
-    getters: {
-      stageImgUrl: ({ logisticInfo: { stage } }) => {
-        return stage
-          ? require(`../../statics/image/order/logistics_progress_${stage}@3x.png`)
-          : '';
-      },
-    },
     actions: {
       /**
        * 获取物流信息

+declare module 'yoho' {
+  interface IOrderLogisticInfo {
+    expressCompanyName: string; // 物流公司名称
+    expressSender: string; // 订单跟踪
+    expressType: number;
+    expressInfoDetailList: object[];
+    expressInfoDetailTitle: string;
+    judgeExpressInfoDetailList: IJudgeDetailInfo[];
+    judgeExpressInfoDetailTitle: string; // 平台鉴定
+  }
+
+  interface IJudgeDetailInfo {
+    acceptAddress: string;
+  }
+}