Showing
7 changed files
with
76 additions
and
27 deletions
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"]), |
-
Please register or login to post a comment