订单列表

+<template>
+  <div class="count-down-wrapper">
+    <span></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    leftTime: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      remainTime: this.props.leftTime,
+      countDown: "",
+      timeoutId: null
+    };
+  },
+  mounted() {
+    this.countDown = this.formatTime();
+
+    this.timeoutId = setInterval(() => {
+      this.remainTime--;
+      this.countDown = this.formatTime();
+    }, 1000);
+  },
+  destroyed() {
+    clearInterval(this.timeoutId);
+  },
+  computed: {
+    timeList: function() {}
+  },
+  methods: {
+    formatTime() {
+      if (this.remainTime < 0) {
+        return ["00", "00", "00"];
+      }
+      let remainTime = this.remainTime;
+
+      const hourInSecond = 60 * 60;
+      const numberOfHours = Math.floor(this.remainTime / hourInSecond);
+
+      remainTime = remainTime - numberOfHours * hourInSecond;
+
+      const numberOfMinutes = Math.floor(remainTime / 60);
+
+      const numberOfSeconds = remainTime - numberOfMinutes * 60;
+
+      return [numberOfHour, numberOfMinute, numberOfSeconds].map(time => {
+        return time < 10 ? `0${time}` : `${time}`;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.count-down-wrapper {
+  display: flex;
+}
+</style>
\ No newline at end of file

@@ -137,57 +137,7 @@ export default {
         default:
           return;
       }
-    },
-    createDialog(options) {
-      const {
-        confirmBtn,
-        cancelBtn,
-        onConfirm,
-        onCancle,
-        content,
-        ...config
-      } = options;
-      this.$createDialog(config, createElement => {
-        return [
-          createElement(
-            "a",
-            {
-              class: {
-                "cube-dialog-btn border-top-1px action-confirm": true
-              },
-              slot: "btns",
-              on: {
-                click: () => {
-                  console.log("--------btn------");
-                }
-              }
-            },
-            confirmBtn.text
-          ),
-          createElement(
-            "a",
-            {
-              class: {
-                "cube-dialog-btn border-top-1px action-cancel": true
-              },
-              slot: "btns"
-            },
-            cancelBtn.text
-          ),
-          createElement(
-            "p",
-            {
-              class: {
-                "action-dialog-content": true
-              },
-              slot: "content"
-            },
-            content
-          )
-        ];
-      }).show();
-    },
-    onActionConfirm() {}
+    }
   }
 };
 </script>

+<template>
+  <div class="tempty-wrapper">
+    <i></i>
+    <p>这里什么都没有...</p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.tempty-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 170px;
+
+  & > i {
+    width: 280px;
+    height: 280px;
+    background: url("~statics/image/order/order-list-empty@3x.png");
+    display: block;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  & > p {
+    margin-top: 20px;
+    font-size: 28px;
+    color: #ccc;
+  }
+}
+</style>
\ No newline at end of file

+<template>
+  <div class="order-info-wrapper">
+    <span>订单编号：{{ order.orderCode }}</span>
+    <span class="status">{{ order.statuStr }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    order: {
+      type: Object,
+      default: {}
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.order-info-wrapper {
+  font-size: 24px;
+  letter-spacing: 0;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+
+  .status {
+    font-weight: bold;
+  }
+}
+</style>
\ No newline at end of file

@@ -5,22 +5,29 @@
       :options="options"
       :data="orderList"
       class="order-list-scroll-wrap"
+      v-show="!isShowEmpty"
     >
       <ul class="list-wrapper">
         <li v-for="order in orderList" :key="order.orderCode">
+          <order-info :order="order" />
           <order-list-item :order="order" />
           <!-- 订单操作 -->
           <order-actions :order="order" />
         </li>
       </ul>
     </scroll>
+    <empty-list v-show="isShowEmpty" />
   </div>
 </template>
 
 <script>
-import { Button, Scroll } from "cube-ui";
+import { Scroll } from "cube-ui";
 import { createNamespacedHelpers } from "vuex";
+
 import OrderListItem from "./components/order-item";
+import OrderInfo from "./components/order-info.vue";
+import EmptyList from "./components/empty";
+
 import OrderActions from "../components/order-actions";
 
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
@@ -29,13 +36,14 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
 
 export default {
   components: {
-    Button,
     Scroll,
     OrderListItem,
-    OrderActions
+    OrderActions,
+    OrderInfo,
+    EmptyList
   },
   computed: {
-    ...mapState(["entryOrder", "notEntryOrder"]),
+    ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
     ...mapGetters(["orderList", "pullUpload"]),
     options: function() {
       return {

 <template>
   <div class="content-wrapper">
     <status-nav />
+
     <scroll
       @pulling-up="fetchMore"
       :options="options"
       :data="orderList"
       class="order-list-scroll-wrap"
+      v-show="!isShowEmpty"
     >
       <ul class="list-wrapper">
         <li v-for="order in orderList" :key="order.orderCode">
+          <order-info :order="order" />
           <order-list-item :order="order" />
           <!-- 订单操作 -->
           <order-actions :order="order" />
         </li>
       </ul>
-      <Modal v-model="isShowModal" @on-sure="() => {}"></Modal>
     </scroll>
+
+    <empty-list v-show="isShowEmpty" />
   </div>
 </template>
 
 <script>
-import { Button, Scroll } from "cube-ui";
+import { Scroll } from "cube-ui";
 import { createNamespacedHelpers } from "vuex";
+
 import OrderListItem from "./components/order-item";
 import StatusNav from "./components/status-nav";
-import Modal from "../components/confirm/modal";
+import OrderInfo from "./components/order-info.vue";
+import EmptyList from "./components/empty";
+
 import OrderActions from "../components/order-actions";
 
 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
@@ -33,15 +40,15 @@ const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
 
 export default {
   components: {
-    Button,
     Scroll,
     OrderListItem,
     StatusNav,
-    Modal,
-    OrderActions
+    OrderActions,
+    OrderInfo,
+    EmptyList
   },
   computed: {
-    ...mapState(["orderList", "pullUpLoad", "isShowModal"]),
+    ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
     options: function() {
       return {
         pullUpLoad: this.pullUpLoad

@@ -16,6 +16,7 @@ export default function() {
         list: [], // 订单列表
         pullUpload: true,
       },
+      isShowEmpty: false,
     },
     mutations: {
       setEntryOrder(state, res) {
@@ -33,6 +34,9 @@ export default function() {
       setNotEntryOrder(state, res) {
         let { page, pagetotal, data = [] } = res;
 
+        state.isShowEmpty =
+          state.entryOrder.list.length === 0 && page === 1 && data.length === 0;
+
         state.notEntryOrder.page = ++page;
         state.notEntryOrder.pagetotal = pagetotal;
         state.notEntryOrder.list = state.entryOrder.list.concat(data);

@@ -13,14 +13,13 @@ export default function() {
       currentStatus: 1,
       routerParam: {},
 
-      isShowModal: false,
-
-      // 订单操作
+      isShowEmpty: false,
     },
     mutations: {
       setOrderList(state, res) {
         let { page, pagetotal, data = [] } = res;
 
+        state.isShowEmpty = page === 1 && data.length === 0;
         state.page = ++page;
         state.pagetotal = pagetotal;
         state.orderList = state.orderList.concat(data);