订单列表

 <template>
 <template>
-  <div class="count-down-wrapper">
-    <span></span>
+  <div class="count-down-wrapper" v-if="countDown !== ''">
+    <i class="time-icon"></i>
+    <span>{{ countDown }}</span>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -14,29 +15,33 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      remainTime: this.props.leftTime,
+      remainTime: this.$props.leftTime,
       countDown: "",
       countDown: "",
       timeoutId: null
       timeoutId: null
     };
     };
   },
   },
   mounted() {
   mounted() {
-    this.countDown = this.formatTime();
+    this.countDown = this.formatTime().join(":");
 
 
     this.timeoutId = setInterval(() => {
     this.timeoutId = setInterval(() => {
       this.remainTime--;
       this.remainTime--;
-      this.countDown = this.formatTime();
+      this.countDown = this.formatTime().join(":");
     }, 1000);
     }, 1000);
   },
   },
   destroyed() {
   destroyed() {
     clearInterval(this.timeoutId);
     clearInterval(this.timeoutId);
   },
   },
-  computed: {
-    timeList: function() {}
+  watch: {
+    countDown(val) {
+      if (val === "") {
+        clearInterval(this.timeoutId);
+      }
+    }
   },
   },
   methods: {
   methods: {
     formatTime() {
     formatTime() {
-      if (this.remainTime < 0) {
-        return ["00", "00", "00"];
+      if (this.remainTime <= 0) {
+        return [];
       }
       }
       let remainTime = this.remainTime;
       let remainTime = this.remainTime;
 
 
@@ -49,7 +54,7 @@ export default {
 
 
       const numberOfSeconds = remainTime - numberOfMinutes * 60;
       const numberOfSeconds = remainTime - numberOfMinutes * 60;
 
 
-      return [numberOfHour, numberOfMinute, numberOfSeconds].map(time => {
+      return [numberOfHours, numberOfMinutes, numberOfSeconds].map(time => {
         return time < 10 ? `0${time}` : `${time}`;
         return time < 10 ? `0${time}` : `${time}`;
       });
       });
     }
     }
@@ -60,5 +65,21 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .count-down-wrapper {
 .count-down-wrapper {
   display: flex;
   display: flex;
+  font-size: 32px;
+  font-weight: bold;
+  align-items: center;
+
+  & > i {
+    width: 30px;
+    height: 30px;
+    display: block;
+    background: url("~statics/image/order/time-icon@3x.png");
+    background-size: contain;
+    background-position: center;
+  }
+
+  & > span {
+    padding: 0 9px;
+  }
 }
 }
 </style>
 </style>

@@ -161,7 +161,6 @@ export default {
 .actions-wrapper {
 .actions-wrapper {
   display: flex;
   display: flex;
   justify-content: flex-end;
   justify-content: flex-end;
-  margin-top: 40px;
 
 
   button {
   button {
     font-size: 24px;
     font-size: 24px;

@@ -59,7 +59,7 @@
     </div>
     </div>
     <!-- 操作 -->
     <!-- 操作 -->
     <div v-if="actionList.length" class="actions">
     <div v-if="actionList.length" class="actions">
-      <order-actions class="detail-actions" :order="orderDetail" />
+      <order-actions :order="orderDetail" />
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -215,10 +215,6 @@ export default {
     box-shadow: inset 0 1px 0 0 #eee;
     box-shadow: inset 0 1px 0 0 #eee;
     padding: 20px;
     padding: 20px;
     z-index: 10;
     z-index: 10;
-
-    .detail-actions {
-      margin-top: 0;
-    }
   }
   }
 }
 }
 </style>
 </style>

+<template>
+  <div class="footer-wrapper">
+    <count-down :leftTime="order.leftTime" />
+    <order-actions class="actions" :order="order" />
+  </div>
+</template>
+
+<script>
+import OrderActions from "../../components/order-actions";
+import CountDown from "../../components/count-down";
+
+export default {
+  props: {
+    order: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+    OrderActions,
+    CountDown
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.footer-wrapper {
+  display: flex;
+  margin-top: 40px;
+
+  .actions {
+    flex: 1;
+  }
+}
+</style>

@@ -12,7 +12,7 @@
           <order-info :order="order" />
           <order-info :order="order" />
           <order-list-item :order="order" />
           <order-list-item :order="order" />
           <!-- 订单操作 -->
           <!-- 订单操作 -->
-          <order-actions :order="order" />
+          <order-item-footer :order="order" />
         </li>
         </li>
       </ul>
       </ul>
     </scroll>
     </scroll>
@@ -27,8 +27,7 @@ import { createNamespacedHelpers } from "vuex";
 import OrderListItem from "./components/order-item";
 import OrderListItem from "./components/order-item";
 import OrderInfo from "./components/order-info.vue";
 import OrderInfo from "./components/order-info.vue";
 import EmptyList from "./components/empty";
 import EmptyList from "./components/empty";
-
-import OrderActions from "../components/order-actions";
+import OrderItemFooter from "./components/order-footer";
 
 
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
   "order/inSaleOrderList"
   "order/inSaleOrderList"
@@ -38,9 +37,9 @@ export default {
   components: {
   components: {
     Scroll,
     Scroll,
     OrderListItem,
     OrderListItem,
-    OrderActions,
     OrderInfo,
     OrderInfo,
-    EmptyList
+    EmptyList,
+    OrderItemFooter
   },
   },
   computed: {
   computed: {
     ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
     ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),

@@ -14,7 +14,7 @@
           <order-info :order="order" />
           <order-info :order="order" />
           <order-list-item :order="order" />
           <order-list-item :order="order" />
           <!-- 订单操作 -->
           <!-- 订单操作 -->
-          <order-actions :order="order" />
+          <order-item-footer :order="order" />
         </li>
         </li>
       </ul>
       </ul>
     </scroll>
     </scroll>
@@ -31,8 +31,7 @@ import OrderListItem from "./components/order-item";
 import StatusNav from "./components/status-nav";
 import StatusNav from "./components/status-nav";
 import OrderInfo from "./components/order-info.vue";
 import OrderInfo from "./components/order-info.vue";
 import EmptyList from "./components/empty";
 import EmptyList from "./components/empty";
-
-import OrderActions from "../components/order-actions";
+import OrderItemFooter from "./components/order-footer";
 
 
 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
   "order/orderList"
   "order/orderList"
@@ -43,9 +42,9 @@ export default {
     Scroll,
     Scroll,
     OrderListItem,
     OrderListItem,
     StatusNav,
     StatusNav,
-    OrderActions,
     OrderInfo,
     OrderInfo,
-    EmptyList
+    EmptyList,
+    OrderItemFooter
   },
   },
   computed: {
   computed: {
     ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
     ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),

@@ -82,7 +82,7 @@ export default function() {
         });
         });
 
 
         if (res.code === 200) {
         if (res.code === 200) {
-          commit('setEntryOrder', res.data);
+          commit('setNotEntryOrder', res.data);
         }
         }
       },
       },
     },
     },