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
<template>
<router-link :to="toLinkParam">
<div class="order-item-wrapper">
<div class="item-img">
<image-format
alt=""
:src="goodsInfo.imageUrl"
:width="180"
:height="180"
/>
</div>
<div class="item-info">
<div>
<!-- <div class="price-status">
<span class="price">￥{{ order.realPrice }}</span>
<span class="delivery-fee-tip">(含运费)</span>
</div> -->
<p class="item-name">
{{ goodsInfo.productName }}
</p>
</div>
<p class="item-spec">
<span>{{ goodsInfo.colorName }},</span>
<span>{{ goodsInfo.sizeNumDesc }}</span>
<span>{{ goodsInfo.storageNumDesc }}</span>
</p>
</div>
</div>
</router-link>
</template>
<script>
import { ownType } from "constants/order-constants";
import { routeNames as detailRouteNames } from "../../order-detail";
export default {
props: {
order: {
type: Object,
default: {}
}
},
computed: {
goodsInfo: function() {
return this.$props.order.goodsInfo;
},
toLinkParam: function() {
const { owner = ownType.SELL } = this.$route.params;
return {
name:
owner === ownType.SELL
? detailRouteNames.SELL_ORDER_DETAIL
: detailRouteNames.BUY_ORDER_DETAIL,
params: { code: this.order.orderCode, owner }
};
}
}
};
</script>
<style lang="scss" scoped>
.order-item-wrapper {
display: flex;
.item-img {
width: 180px;
height: 180px;
justify-content: center;
display: flex;
align-items: center;
& > img {
max-height: 100%;
max-width: 100%;
}
}
.item-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.item-info {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 20px;
font-size: 24px;
justify-content: space-between;
.price-status {
margin-bottom: 12px;
.delivery-fee-tip {
color: #999;
}
.price {
font-size: 28px;
color: #d0021b;
letter-spacing: 0;
font-weight: bold;
}
.status {
color: #000;
letter-spacing: 0;
font-weight: bold;
}
}
.item-name {
color: #999;
letter-spacing: 0;
line-height: 36px;
}
.item-spec {
font-weight: bold;
& > :last-child {
padding-left: 10px;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions class="actions" :order="order" @on-action="onAction" />
</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>
\ No newline at end of file
... ... @@ -9,11 +9,9 @@
v-show="!isShowEmpty"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.secendLevelCreateTime">
<order-info :order="order" />
<order-list-item :order="order" />
<li v-for="(order, i) in orderList" :key="i">
<order-item :order="order" />
<!-- 订单操作 -->
<!-- <order-item-footer :order="order" @on-action="() => {}" /> -->
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions
... ... @@ -38,9 +36,7 @@
import { Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";
import OrderListItem from "./components/order-item";
import OrderInfo from "./components/order-info.vue";
import OrderItemFooter from "./components/order-footer";
import OrderItem from "./components/in-sale-order-item";
import EmptyList from "components//ufo-no-item";
... ... @@ -63,23 +59,21 @@ export default {
mixins: [orderActionMixin],
components: {
Scroll,
OrderListItem,
OrderInfo,
OrderItem,
EmptyList,
OrderItemFooter,
OrderActions,
CountDown
},
computed: {
...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
...mapGetters(["orderList", "pullUpload"]),
...mapGetters(["orderList", "pullUpLoad"]),
options: function() {
return {
pullUpload: this.pullUpload
pullUpLoad: this.pullUpLoad
};
},
isFetchEntryOrder() {
return this.entryOrder.pullUpload;
return this.entryOrder.pullUpLoad;
}
},
... ...
... ... @@ -11,11 +11,9 @@
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-info :order="order" />
<order-list-item :order="order" />
<order-item-header :order="order" />
<order-item :order="order" />
<!-- 订单操作 -->
<!-- <order-item-footer :order="order" /> -->
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions
... ... @@ -41,10 +39,9 @@
import { Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";
import OrderListItem from "./components/order-item";
import OrderItem from "./components/order-item";
import StatusNav from "./components/status-nav";
import OrderInfo from "./components/order-info.vue";
import OrderItemFooter from "./components/order-footer";
import OrderItemHeader from "./components/order-item-header";
import EmptyList from "components//ufo-no-item";
... ... @@ -62,11 +59,10 @@ export default {
mixins: [orderActionMixin],
components: {
Scroll,
OrderListItem,
OrderItem,
StatusNav,
OrderInfo,
OrderItemHeader,
EmptyList,
OrderItemFooter,
OrderActions,
CountDown
},
... ...
... ... @@ -4,14 +4,14 @@ const initailData = () => ({
pageSize: 10,
pagetotal: 0,
list: [], // 订单列表
pullUpload: true,
pullUpLoad: true,
},
notEntryOrder: {
page: 1,
pageSize: 10,
pagetotal: 0,
list: [], // 订单列表
pullUpload: true,
pullUpLoad: true,
},
isShowEmpty: false,
});
... ... @@ -30,7 +30,7 @@ export default function() {
// 分页结束
if (page > pagetotal) {
state.entryOrder.pullUpload = false;
state.entryOrder.pullUpLoad = false;
}
},
setNotEntryOrder(state, res) {
... ... @@ -45,7 +45,7 @@ export default function() {
// 分页结束
if (page > pagetotal) {
state.notEntryOrder.pullUpload = false;
state.notEntryOrder.pullUpLoad = false;
}
},
filterInSaleOrderList(state, orderCode) {
... ... @@ -70,8 +70,8 @@ export default function() {
},
getters: {
// scroll 组件参数，是否触发上拉事件
pullUpload: state =>
state.entryOrder.pullUpload || state.notEntryOrder.pullUpload,
pullUpLoad: state =>
state.entryOrder.pullUpLoad || state.notEntryOrder.pullUpLoad,
orderList: state => {
const {
entryOrder: { list: entryOrderList },
... ...
... ... @@ -75,7 +75,6 @@ export default function() {
tabType: owner,
type: status,
page,
limit: 5,
});
if (res.code === 200) {
... ...