|
...
|
...
|
@@ -3,23 +3,28 @@ |
|
|
|
:title="$route.params.owner === 'sell' ? '我的出售' : '我的购买订单'"
|
|
|
|
class="list-page"
|
|
|
|
>
|
|
|
|
<status-nav :status="status" :owner="owner" @select="onStatusChange"/>
|
|
|
|
<status-nav
|
|
|
|
class="order-status-nav"
|
|
|
|
:status="status"
|
|
|
|
:owner="owner"
|
|
|
|
@select="onStatusChange"
|
|
|
|
/>
|
|
|
|
<div class="content-wrapper">
|
|
|
|
<scroll
|
|
|
|
<LayoutScroll
|
|
|
|
@scroll="scrollHandler"
|
|
|
|
@pulling-up="fetchData"
|
|
|
|
@pulling-down="onRefresh"
|
|
|
|
:options="options"
|
|
|
|
:data="viewOrderList"
|
|
|
|
:loading="loadingOptions"
|
|
|
|
class="order-list-scroll-wrap"
|
|
|
|
ref="scroll"
|
|
|
|
>
|
|
|
|
<ul class="list-wrapper">
|
|
|
|
<li v-for="order in viewOrderList" :key="order.orderCode">
|
|
|
|
<order-item-header :order="order"/>
|
|
|
|
<order-item :order="order"/>
|
|
|
|
<order-item-header :order="order" />
|
|
|
|
<order-item :order="order" />
|
|
|
|
<!-- 订单操作 -->
|
|
|
|
<div class="footer-wrapper">
|
|
|
|
<count-down :leftTime="order.leftTime"/>
|
|
|
|
<count-down :leftTime="order.leftTime" />
|
|
|
|
<order-actions
|
|
|
|
class="actions"
|
|
|
|
pageName="list"
|
|
...
|
...
|
@@ -48,30 +53,29 @@ |
|
|
|
tip="这里什么都没有..."
|
|
|
|
v-show="orderStatus.isShowEmpty"
|
|
|
|
/>
|
|
|
|
</scroll>
|
|
|
|
</LayoutScroll>
|
|
|
|
</div>
|
|
|
|
</layout-app>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { Scroll } from 'cube-ui';
|
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
|
import { createNamespacedHelpers } from "vuex";
|
|
|
|
|
|
|
|
import OrderItem from './components/order-item';
|
|
|
|
import StatusNav from './components/status-nav';
|
|
|
|
import OrderItemHeader from './components/order-item-header';
|
|
|
|
import VideoPlayer from './components/video-player';
|
|
|
|
import OrderItem from "./components/order-item";
|
|
|
|
import StatusNav from "./components/status-nav";
|
|
|
|
import OrderItemHeader from "./components/order-item-header";
|
|
|
|
import VideoPlayer from "./components/video-player";
|
|
|
|
|
|
|
|
import EmptyList from 'components//ufo-no-item';
|
|
|
|
import EmptyList from "components//ufo-no-item";
|
|
|
|
|
|
|
|
import OrderActions from '../components/order-actions';
|
|
|
|
import CountDown from '../components/count-down';
|
|
|
|
import OrderActions from "../components/order-actions";
|
|
|
|
import CountDown from "../components/count-down";
|
|
|
|
|
|
|
|
import orderActionMixin from '../mixin/order-action';
|
|
|
|
import orderInSaleActionMixin from '../mixin/order-in-sale-action';
|
|
|
|
import { orderStatusKey, getOrderStatus } from 'constants/order-constants';
|
|
|
|
import orderActionMixin from "../mixin/order-action";
|
|
|
|
import orderInSaleActionMixin from "../mixin/order-in-sale-action";
|
|
|
|
import { orderStatusKey, getOrderStatus } from "constants/order-constants";
|
|
|
|
|
|
|
|
const STORE_PATH = 'order/orderList';
|
|
|
|
const STORE_PATH = "order/orderList";
|
|
|
|
|
|
|
|
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
|
|
|
|
STORE_PATH
|
|
...
|
...
|
@@ -81,7 +85,6 @@ export default { |
|
|
|
// 订单操作
|
|
|
|
mixins: [orderActionMixin, orderInSaleActionMixin],
|
|
|
|
components: {
|
|
|
|
Scroll,
|
|
|
|
OrderItem,
|
|
|
|
StatusNav,
|
|
|
|
OrderItemHeader,
|
|
...
|
...
|
@@ -90,30 +93,33 @@ export default { |
|
|
|
CountDown,
|
|
|
|
VideoPlayer
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
scrollY: 0
|
|
|
|
};
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
owner: String,
|
|
|
|
status: Number
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['orderListByType']),
|
|
|
|
...mapState(["orderListByType"]),
|
|
|
|
orderStatus() {
|
|
|
|
return this.orderListByType[orderStatusKey(this.owner, this.status)];
|
|
|
|
},
|
|
|
|
viewOrderList() {
|
|
|
|
return this.orderStatus.orderList;
|
|
|
|
},
|
|
|
|
options() {
|
|
|
|
const options = {
|
|
|
|
pullUpLoad: this.orderStatus.pullUpLoad,
|
|
|
|
bounce: !this.orderStatus.isShowEmpty
|
|
|
|
loadingOptions() {
|
|
|
|
return {
|
|
|
|
hide: !this.viewOrderList || !this.viewOrderList.length,
|
|
|
|
noMore: this.orderStatus.page >= this.orderStatus.pagetotal
|
|
|
|
};
|
|
|
|
// if (this.$refs.scroll && this.$refs.scroll.scroll) {
|
|
|
|
options.pullDownRefresh = this.orderStatus.isShowEmpty
|
|
|
|
? false
|
|
|
|
: { txt: '更新成功' };
|
|
|
|
// }
|
|
|
|
|
|
|
|
return options;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
if (this.$yoho.direction === "back") {
|
|
|
|
this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
...
|
...
|
@@ -127,8 +133,11 @@ export default { |
|
|
|
return store.dispatch(`${STORE_PATH}/fetchOrderList`, { owner, status });
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchOrderList', 'confirmReceipt']),
|
|
|
|
...mapMutations(['resetData']),
|
|
|
|
...mapActions(["fetchOrderList", "confirmReceipt"]),
|
|
|
|
...mapMutations(["resetData"]),
|
|
|
|
scrollHandler({ y }) {
|
|
|
|
this.scrollY = -y;
|
|
|
|
},
|
|
|
|
fetchData() {
|
|
|
|
this.fetchOrderList({
|
|
|
|
owner: this.owner,
|
|
...
|
...
|
@@ -170,9 +179,15 @@ export default { |
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.order-status-nav {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content-wrapper {
|
|
|
|
flex: 1 0 0;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.footer-wrapper {
|
|
|
|
display: flex;
|
|
...
|
...
|
@@ -188,6 +203,13 @@ export default { |
|
|
|
}
|
|
|
|
|
|
|
|
.order-list-scroll-wrap {
|
|
|
|
width: 100%;
|
|
|
|
padding-top: 100px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
.list-wrapper {
|
|
|
|
li {
|
|
|
|
padding: 40px 40px 0;
|
...
|
...
|
|
