fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 8c9cb4d191438dc8981f65f9089cdfaa9bdf2251 1 parent 3228dcc9

订单列表

Inline Side-by-side
Showing 7 changed files with 149 additions and 65 deletions
  1 +<template>
  2 + <router-link :to="toLinkParam">
  3 + <div class="order-item-wrapper">
  4 + <div class="item-img">
  5 + <image-format
  6 + alt=""
  7 + :src="goodsInfo.imageUrl"
  8 + :width="180"
  9 + :height="180"
  10 + />
  11 + </div>
  12 + <div class="item-info">
  13 + <div>
  14 + <!-- <div class="price-status">
  15 + <span class="price">￥{{ order.realPrice }}</span>
  16 + <span class="delivery-fee-tip">(含运费)</span>
  17 + </div> -->
  18 + <p class="item-name">
  19 + {{ goodsInfo.productName }}
  20 + </p>
  21 + </div>
  22 + <p class="item-spec">
  23 + <span>{{ goodsInfo.colorName }},</span>
  24 + <span>{{ goodsInfo.sizeNumDesc }}</span>
  25 + <span>{{ goodsInfo.storageNumDesc }}</span>
  26 + </p>
  27 + </div>
  28 + </div>
  29 + </router-link>
  30 +</template>
  31 +
  32 +<script>
  33 +import { ownType } from "constants/order-constants";
  34 +import { routeNames as detailRouteNames } from "../../order-detail";
  35 +
  36 +export default {
  37 + props: {
  38 + order: {
  39 + type: Object,
  40 + default: {}
  41 + }
  42 + },
  43 + computed: {
  44 + goodsInfo: function() {
  45 + return this.$props.order.goodsInfo;
  46 + },
  47 + toLinkParam: function() {
  48 + const { owner = ownType.SELL } = this.$route.params;
  49 + return {
  50 + name:
  51 + owner === ownType.SELL
  52 + ? detailRouteNames.SELL_ORDER_DETAIL
  53 + : detailRouteNames.BUY_ORDER_DETAIL,
  54 + params: { code: this.order.orderCode, owner }
  55 + };
  56 + }
  57 + }
  58 +};
  59 +</script>
  60 +
  61 +<style lang="scss" scoped>
  62 +.order-item-wrapper {
  63 + display: flex;
  64 +
  65 + .item-img {
  66 + width: 180px;
  67 + height: 180px;
  68 + justify-content: center;
  69 + display: flex;
  70 + align-items: center;
  71 +
  72 + & > img {
  73 + max-height: 100%;
  74 + max-width: 100%;
  75 + }
  76 + }
  77 +
  78 + .item-name {
  79 + display: -webkit-box;
  80 + -webkit-line-clamp: 2;
  81 + -webkit-box-orient: vertical;
  82 + overflow: hidden;
  83 + text-overflow: ellipsis;
  84 + }
  85 +
  86 + .item-info {
  87 + display: flex;
  88 + flex: 1;
  89 + flex-direction: column;
  90 + margin-left: 20px;
  91 + font-size: 24px;
  92 + justify-content: space-between;
  93 +
  94 + .price-status {
  95 + margin-bottom: 12px;
  96 +
  97 + .delivery-fee-tip {
  98 + color: #999;
  99 + }
  100 +
  101 + .price {
  102 + font-size: 28px;
  103 + color: #d0021b;
  104 + letter-spacing: 0;
  105 + font-weight: bold;
  106 + }
  107 +
  108 + .status {
  109 + color: #000;
  110 + letter-spacing: 0;
  111 + font-weight: bold;
  112 + }
  113 + }
  114 +
  115 + .item-name {
  116 + color: #999;
  117 + letter-spacing: 0;
  118 + line-height: 36px;
  119 + }
  120 +
  121 + .item-spec {
  122 + font-weight: bold;
  123 +
  124 + & > :last-child {
  125 + padding-left: 10px;
  126 + }
  127 + }
  128 + }
  129 +}
  130 +</style>
1 -<template>  
2 - <div class="footer-wrapper">  
3 - <count-down :leftTime="order.leftTime" />  
4 - <order-actions class="actions" :order="order" @on-action="onAction" />  
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>  
@@ -9,11 +9,9 @@ @@ -9,11 +9,9 @@
9 v-show="!isShowEmpty" 9 v-show="!isShowEmpty"
10 > 10 >
11 <ul class="list-wrapper"> 11 <ul class="list-wrapper">
12 - <li v-for="order in orderList" :key="order.secendLevelCreateTime">  
13 - <order-info :order="order" />  
14 - <order-list-item :order="order" /> 12 + <li v-for="(order, i) in orderList" :key="i">
  13 + <order-item :order="order" />
15 <!-- 订单操作 --> 14 <!-- 订单操作 -->
16 - <!-- <order-item-footer :order="order" @on-action="() => {}" /> -->  
17 <div class="footer-wrapper"> 15 <div class="footer-wrapper">
18 <count-down :leftTime="order.leftTime" /> 16 <count-down :leftTime="order.leftTime" />
19 <order-actions 17 <order-actions
@@ -38,9 +36,7 @@ @@ -38,9 +36,7 @@
38 import { Scroll } from "cube-ui"; 36 import { Scroll } from "cube-ui";
39 import { createNamespacedHelpers } from "vuex"; 37 import { createNamespacedHelpers } from "vuex";
40 38
41 -import OrderListItem from "./components/order-item";  
42 -import OrderInfo from "./components/order-info.vue";  
43 -import OrderItemFooter from "./components/order-footer"; 39 +import OrderItem from "./components/in-sale-order-item";
44 40
45 import EmptyList from "components//ufo-no-item"; 41 import EmptyList from "components//ufo-no-item";
46 42
@@ -63,23 +59,21 @@ export default { @@ -63,23 +59,21 @@ export default {
63 mixins: [orderActionMixin], 59 mixins: [orderActionMixin],
64 components: { 60 components: {
65 Scroll, 61 Scroll,
66 - OrderListItem,  
67 - OrderInfo, 62 + OrderItem,
68 EmptyList, 63 EmptyList,
69 - OrderItemFooter,  
70 OrderActions, 64 OrderActions,
71 CountDown 65 CountDown
72 }, 66 },
73 computed: { 67 computed: {
74 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]), 68 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
75 - ...mapGetters(["orderList", "pullUpload"]), 69 + ...mapGetters(["orderList", "pullUpLoad"]),
76 options: function() { 70 options: function() {
77 return { 71 return {
78 - pullUpload: this.pullUpload 72 + pullUpLoad: this.pullUpLoad
79 }; 73 };
80 }, 74 },
81 isFetchEntryOrder() { 75 isFetchEntryOrder() {
82 - return this.entryOrder.pullUpload; 76 + return this.entryOrder.pullUpLoad;
83 } 77 }
84 }, 78 },
85 79
@@ -11,11 +11,9 @@ @@ -11,11 +11,9 @@
11 > 11 >
12 <ul class="list-wrapper"> 12 <ul class="list-wrapper">
13 <li v-for="order in orderList" :key="order.orderCode"> 13 <li v-for="order in orderList" :key="order.orderCode">
14 - <order-info :order="order" />  
15 - <order-list-item :order="order" /> 14 + <order-item-header :order="order" />
  15 + <order-item :order="order" />
16 <!-- 订单操作 --> 16 <!-- 订单操作 -->
17 - <!-- <order-item-footer :order="order" /> -->  
18 -  
19 <div class="footer-wrapper"> 17 <div class="footer-wrapper">
20 <count-down :leftTime="order.leftTime" /> 18 <count-down :leftTime="order.leftTime" />
21 <order-actions 19 <order-actions
@@ -41,10 +39,9 @@ @@ -41,10 +39,9 @@
41 import { Scroll } from "cube-ui"; 39 import { Scroll } from "cube-ui";
42 import { createNamespacedHelpers } from "vuex"; 40 import { createNamespacedHelpers } from "vuex";
43 41
44 -import OrderListItem from "./components/order-item"; 42 +import OrderItem from "./components/order-item";
45 import StatusNav from "./components/status-nav"; 43 import StatusNav from "./components/status-nav";
46 -import OrderInfo from "./components/order-info.vue";  
47 -import OrderItemFooter from "./components/order-footer"; 44 +import OrderItemHeader from "./components/order-item-header";
48 45
49 import EmptyList from "components//ufo-no-item"; 46 import EmptyList from "components//ufo-no-item";
50 47
@@ -62,11 +59,10 @@ export default { @@ -62,11 +59,10 @@ export default {
62 mixins: [orderActionMixin], 59 mixins: [orderActionMixin],
63 components: { 60 components: {
64 Scroll, 61 Scroll,
65 - OrderListItem, 62 + OrderItem,
66 StatusNav, 63 StatusNav,
67 - OrderInfo, 64 + OrderItemHeader,
68 EmptyList, 65 EmptyList,
69 - OrderItemFooter,  
70 OrderActions, 66 OrderActions,
71 CountDown 67 CountDown
72 }, 68 },
@@ -4,14 +4,14 @@ const initailData = () => ({ @@ -4,14 +4,14 @@ const initailData = () => ({
4 pageSize: 10, 4 pageSize: 10,
5 pagetotal: 0, 5 pagetotal: 0,
6 list: [], // 订单列表 6 list: [], // 订单列表
7 - pullUpload: true, 7 + pullUpLoad: true,
8 }, 8 },
9 notEntryOrder: { 9 notEntryOrder: {
10 page: 1, 10 page: 1,
11 pageSize: 10, 11 pageSize: 10,
12 pagetotal: 0, 12 pagetotal: 0,
13 list: [], // 订单列表 13 list: [], // 订单列表
14 - pullUpload: true, 14 + pullUpLoad: true,
15 }, 15 },
16 isShowEmpty: false, 16 isShowEmpty: false,
17 }); 17 });
@@ -30,7 +30,7 @@ export default function() { @@ -30,7 +30,7 @@ export default function() {
30 30
31 // 分页结束 31 // 分页结束
32 if (page > pagetotal) { 32 if (page > pagetotal) {
33 - state.entryOrder.pullUpload = false; 33 + state.entryOrder.pullUpLoad = false;
34 } 34 }
35 }, 35 },
36 setNotEntryOrder(state, res) { 36 setNotEntryOrder(state, res) {
@@ -45,7 +45,7 @@ export default function() { @@ -45,7 +45,7 @@ export default function() {
45 45
46 // 分页结束 46 // 分页结束
47 if (page > pagetotal) { 47 if (page > pagetotal) {
48 - state.notEntryOrder.pullUpload = false; 48 + state.notEntryOrder.pullUpLoad = false;
49 } 49 }
50 }, 50 },
51 filterInSaleOrderList(state, orderCode) { 51 filterInSaleOrderList(state, orderCode) {
@@ -70,8 +70,8 @@ export default function() { @@ -70,8 +70,8 @@ export default function() {
70 }, 70 },
71 getters: { 71 getters: {
72 // scroll 组件参数，是否触发上拉事件 72 // scroll 组件参数，是否触发上拉事件
73 - pullUpload: state =>  
74 - state.entryOrder.pullUpload || state.notEntryOrder.pullUpload, 73 + pullUpLoad: state =>
  74 + state.entryOrder.pullUpLoad || state.notEntryOrder.pullUpLoad,
75 orderList: state => { 75 orderList: state => {
76 const { 76 const {
77 entryOrder: { list: entryOrderList }, 77 entryOrder: { list: entryOrderList },
@@ -75,7 +75,6 @@ export default function() { @@ -75,7 +75,6 @@ export default function() {
75 tabType: owner, 75 tabType: owner,
76 type: status, 76 type: status,
77 page, 77 page,
78 - limit: 5,  
79 }); 78 });
80 79
81 if (res.code === 200) { 80 if (res.code === 200) {