Authored by lea guo

订单列表

1 <template> 1 <template>
2 - <div class="count-down-wrapper">  
3 - <span></span> 2 + <div class="count-down-wrapper" v-if="countDown !== ''">
  3 + <i class="time-icon"></i>
  4 + <span>{{ countDown }}</span>
4 </div> 5 </div>
5 </template> 6 </template>
6 7
@@ -14,29 +15,33 @@ export default { @@ -14,29 +15,33 @@ export default {
14 }, 15 },
15 data() { 16 data() {
16 return { 17 return {
17 - remainTime: this.props.leftTime, 18 + remainTime: this.$props.leftTime,
18 countDown: "", 19 countDown: "",
19 timeoutId: null 20 timeoutId: null
20 }; 21 };
21 }, 22 },
22 mounted() { 23 mounted() {
23 - this.countDown = this.formatTime(); 24 + this.countDown = this.formatTime().join(":");
24 25
25 this.timeoutId = setInterval(() => { 26 this.timeoutId = setInterval(() => {
26 this.remainTime--; 27 this.remainTime--;
27 - this.countDown = this.formatTime(); 28 + this.countDown = this.formatTime().join(":");
28 }, 1000); 29 }, 1000);
29 }, 30 },
30 destroyed() { 31 destroyed() {
31 clearInterval(this.timeoutId); 32 clearInterval(this.timeoutId);
32 }, 33 },
33 - computed: {  
34 - timeList: function() {} 34 + watch: {
  35 + countDown(val) {
  36 + if (val === "") {
  37 + clearInterval(this.timeoutId);
  38 + }
  39 + }
35 }, 40 },
36 methods: { 41 methods: {
37 formatTime() { 42 formatTime() {
38 - if (this.remainTime < 0) {  
39 - return ["00", "00", "00"]; 43 + if (this.remainTime <= 0) {
  44 + return [];
40 } 45 }
41 let remainTime = this.remainTime; 46 let remainTime = this.remainTime;
42 47
@@ -49,7 +54,7 @@ export default { @@ -49,7 +54,7 @@ export default {
49 54
50 const numberOfSeconds = remainTime - numberOfMinutes * 60; 55 const numberOfSeconds = remainTime - numberOfMinutes * 60;
51 56
52 - return [numberOfHour, numberOfMinute, numberOfSeconds].map(time => { 57 + return [numberOfHours, numberOfMinutes, numberOfSeconds].map(time => {
53 return time < 10 ? `0${time}` : `${time}`; 58 return time < 10 ? `0${time}` : `${time}`;
54 }); 59 });
55 } 60 }
@@ -60,5 +65,21 @@ export default { @@ -60,5 +65,21 @@ export default {
60 <style lang="scss" scoped> 65 <style lang="scss" scoped>
61 .count-down-wrapper { 66 .count-down-wrapper {
62 display: flex; 67 display: flex;
  68 + font-size: 32px;
  69 + font-weight: bold;
  70 + align-items: center;
  71 +
  72 + & > i {
  73 + width: 30px;
  74 + height: 30px;
  75 + display: block;
  76 + background: url("~statics/image/order/time-icon@3x.png");
  77 + background-size: contain;
  78 + background-position: center;
  79 + }
  80 +
  81 + & > span {
  82 + padding: 0 9px;
  83 + }
63 } 84 }
64 </style> 85 </style>
@@ -161,7 +161,6 @@ export default { @@ -161,7 +161,6 @@ export default {
161 .actions-wrapper { 161 .actions-wrapper {
162 display: flex; 162 display: flex;
163 justify-content: flex-end; 163 justify-content: flex-end;
164 - margin-top: 40px;  
165 164
166 button { 165 button {
167 font-size: 24px; 166 font-size: 24px;
@@ -59,7 +59,7 @@ @@ -59,7 +59,7 @@
59 </div> 59 </div>
60 <!-- 操作 --> 60 <!-- 操作 -->
61 <div v-if="actionList.length" class="actions"> 61 <div v-if="actionList.length" class="actions">
62 - <order-actions class="detail-actions" :order="orderDetail" /> 62 + <order-actions :order="orderDetail" />
63 </div> 63 </div>
64 </div> 64 </div>
65 </template> 65 </template>
@@ -215,10 +215,6 @@ export default { @@ -215,10 +215,6 @@ export default {
215 box-shadow: inset 0 1px 0 0 #eee; 215 box-shadow: inset 0 1px 0 0 #eee;
216 padding: 20px; 216 padding: 20px;
217 z-index: 10; 217 z-index: 10;
218 -  
219 - .detail-actions {  
220 - margin-top: 0;  
221 - }  
222 } 218 }
223 } 219 }
224 </style> 220 </style>
  1 +<template>
  2 + <div class="footer-wrapper">
  3 + <count-down :leftTime="order.leftTime" />
  4 + <order-actions class="actions" :order="order" />
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 +import OrderActions from "../../components/order-actions";
  10 +import CountDown from "../../components/count-down";
  11 +
  12 +export default {
  13 + props: {
  14 + order: {
  15 + type: Object,
  16 + default: {}
  17 + }
  18 + },
  19 + components: {
  20 + OrderActions,
  21 + CountDown
  22 + }
  23 +};
  24 +</script>
  25 +
  26 +<style lang="scss" scoped>
  27 +.footer-wrapper {
  28 + display: flex;
  29 + margin-top: 40px;
  30 +
  31 + .actions {
  32 + flex: 1;
  33 + }
  34 +}
  35 +</style>
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 <order-info :order="order" /> 12 <order-info :order="order" />
13 <order-list-item :order="order" /> 13 <order-list-item :order="order" />
14 <!-- 订单操作 --> 14 <!-- 订单操作 -->
15 - <order-actions :order="order" /> 15 + <order-item-footer :order="order" />
16 </li> 16 </li>
17 </ul> 17 </ul>
18 </scroll> 18 </scroll>
@@ -27,8 +27,7 @@ import { createNamespacedHelpers } from "vuex"; @@ -27,8 +27,7 @@ import { createNamespacedHelpers } from "vuex";
27 import OrderListItem from "./components/order-item"; 27 import OrderListItem from "./components/order-item";
28 import OrderInfo from "./components/order-info.vue"; 28 import OrderInfo from "./components/order-info.vue";
29 import EmptyList from "./components/empty"; 29 import EmptyList from "./components/empty";
30 -  
31 -import OrderActions from "../components/order-actions"; 30 +import OrderItemFooter from "./components/order-footer";
32 31
33 const { mapActions, mapState, mapGetters } = createNamespacedHelpers( 32 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
34 "order/inSaleOrderList" 33 "order/inSaleOrderList"
@@ -38,9 +37,9 @@ export default { @@ -38,9 +37,9 @@ export default {
38 components: { 37 components: {
39 Scroll, 38 Scroll,
40 OrderListItem, 39 OrderListItem,
41 - OrderActions,  
42 OrderInfo, 40 OrderInfo,
43 - EmptyList 41 + EmptyList,
  42 + OrderItemFooter
44 }, 43 },
45 computed: { 44 computed: {
46 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]), 45 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 <order-info :order="order" /> 14 <order-info :order="order" />
15 <order-list-item :order="order" /> 15 <order-list-item :order="order" />
16 <!-- 订单操作 --> 16 <!-- 订单操作 -->
17 - <order-actions :order="order" /> 17 + <order-item-footer :order="order" />
18 </li> 18 </li>
19 </ul> 19 </ul>
20 </scroll> 20 </scroll>
@@ -31,8 +31,7 @@ import OrderListItem from "./components/order-item"; @@ -31,8 +31,7 @@ import OrderListItem from "./components/order-item";
31 import StatusNav from "./components/status-nav"; 31 import StatusNav from "./components/status-nav";
32 import OrderInfo from "./components/order-info.vue"; 32 import OrderInfo from "./components/order-info.vue";
33 import EmptyList from "./components/empty"; 33 import EmptyList from "./components/empty";
34 -  
35 -import OrderActions from "../components/order-actions"; 34 +import OrderItemFooter from "./components/order-footer";
36 35
37 const { mapActions, mapState, mapMutations } = createNamespacedHelpers( 36 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
38 "order/orderList" 37 "order/orderList"
@@ -43,9 +42,9 @@ export default { @@ -43,9 +42,9 @@ export default {
43 Scroll, 42 Scroll,
44 OrderListItem, 43 OrderListItem,
45 StatusNav, 44 StatusNav,
46 - OrderActions,  
47 OrderInfo, 45 OrderInfo,
48 - EmptyList 46 + EmptyList,
  47 + OrderItemFooter
49 }, 48 },
50 computed: { 49 computed: {
51 ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]), 50 ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
@@ -82,7 +82,7 @@ export default function() { @@ -82,7 +82,7 @@ export default function() {
82 }); 82 });
83 83
84 if (res.code === 200) { 84 if (res.code === 200) {
85 - commit('setEntryOrder', res.data); 85 + commit('setNotEntryOrder', res.data);
86 } 86 }
87 }, 87 },
88 }, 88 },