2020-06-08 15:23:23 +08:00
|
|
|
|
<template>
|
|
|
|
|
<view class="order">
|
|
|
|
|
<view>
|
|
|
|
|
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
|
|
|
|
|
</view>
|
2020-07-06 17:32:29 +08:00
|
|
|
|
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
|
|
|
|
|
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
|
2020-06-19 18:07:11 +08:00
|
|
|
|
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
|
|
|
|
|
<view>
|
2020-07-06 17:32:29 +08:00
|
|
|
|
<view class="item-container" v-for="order in orderList" :key="order.order_id">
|
2020-07-07 17:47:00 +08:00
|
|
|
|
<OrderItem :order="order"></OrderItem>
|
2020-06-19 18:07:11 +08:00
|
|
|
|
</view>
|
2020-06-08 15:23:23 +08:00
|
|
|
|
</view>
|
2020-07-07 17:47:00 +08:00
|
|
|
|
<u-empty text="暂无订单" mode="order" color="#000000" v-if="!orderList.length"></u-empty>
|
|
|
|
|
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20" v-if="orderList.length >= 15"></u-loadmore>
|
2020-06-08 15:23:23 +08:00
|
|
|
|
</scroll-view>
|
|
|
|
|
</swiper-item>
|
|
|
|
|
</swiper>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import OrderItem from '@/components/mine/order-item/index'
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
list: [{
|
|
|
|
|
name: '全部'
|
|
|
|
|
}, {
|
|
|
|
|
name: '待支付'
|
|
|
|
|
}, {
|
|
|
|
|
name: '已取消'
|
|
|
|
|
}, {
|
|
|
|
|
name: '待收货'
|
|
|
|
|
}, {
|
|
|
|
|
name: '试穿试送'
|
|
|
|
|
}, {
|
|
|
|
|
name: '待评价'
|
|
|
|
|
}, {
|
|
|
|
|
name: '售后'
|
|
|
|
|
}],
|
2020-07-07 17:47:00 +08:00
|
|
|
|
orderList: [],
|
2020-06-19 18:07:11 +08:00
|
|
|
|
loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
|
|
|
|
|
page: 0,
|
2020-06-08 15:23:23 +08:00
|
|
|
|
current: 0,
|
2020-06-19 18:07:11 +08:00
|
|
|
|
swiperCurrent: 0,
|
2020-07-06 17:32:29 +08:00
|
|
|
|
swiperHeight: '',
|
|
|
|
|
timer: true,
|
2020-06-08 15:23:23 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
OrderItem
|
|
|
|
|
},
|
2020-07-06 17:32:29 +08:00
|
|
|
|
watch: {
|
|
|
|
|
current() {
|
|
|
|
|
this.page = 0;
|
2020-07-07 17:47:00 +08:00
|
|
|
|
this.getOrderList('again');
|
2020-07-06 17:32:29 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
2020-06-08 15:23:23 +08:00
|
|
|
|
onLoad(option) {
|
2020-07-07 17:47:00 +08:00
|
|
|
|
const current = option.current ? Number(option.current) : 0;
|
|
|
|
|
this.current = current;
|
|
|
|
|
this.swiperCurrent = this.current;
|
2020-07-06 17:32:29 +08:00
|
|
|
|
this.setViewHeight();
|
2020-06-08 15:23:23 +08:00
|
|
|
|
},
|
|
|
|
|
methods: {
|
2020-07-07 17:47:00 +08:00
|
|
|
|
async getOrderList(reload = '') {
|
2020-07-06 17:32:29 +08:00
|
|
|
|
let type;
|
|
|
|
|
// state_type 订单状态:0:已取消 10:未付款 20:已付款 30:已发货 40:已收货
|
|
|
|
|
switch (this.current) {
|
|
|
|
|
case 1:
|
|
|
|
|
type = 10; // 待支付
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
type = 0; // 已取消
|
|
|
|
|
break;
|
|
|
|
|
case 3:
|
|
|
|
|
type = 30; // 待收货
|
|
|
|
|
break;
|
|
|
|
|
case 4:
|
|
|
|
|
type = -1; // 试穿试送
|
|
|
|
|
break;
|
|
|
|
|
case 5:
|
|
|
|
|
type = 20; // 待评价
|
|
|
|
|
break;
|
|
|
|
|
case 6:
|
|
|
|
|
type = 40; // 售后
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
type = -1;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
const res = await this.$u.api.getOrderList({
|
2020-06-30 18:06:50 +08:00
|
|
|
|
page: this.page,
|
2020-07-06 17:32:29 +08:00
|
|
|
|
type: type,
|
2020-06-30 18:06:50 +08:00
|
|
|
|
})
|
2020-07-07 17:47:00 +08:00
|
|
|
|
this.timer = true;
|
2020-07-06 17:32:29 +08:00
|
|
|
|
if(res.errCode == 0) {
|
2020-07-07 17:47:00 +08:00
|
|
|
|
if(reload) this.orderList = res.data;
|
|
|
|
|
else this.orderList.push(...res.data);
|
2020-07-06 17:32:29 +08:00
|
|
|
|
}
|
|
|
|
|
return res.data.length;
|
2020-06-30 18:06:50 +08:00
|
|
|
|
},
|
2020-06-19 18:07:11 +08:00
|
|
|
|
reachBottom() {
|
2020-07-06 17:32:29 +08:00
|
|
|
|
if(!this.timer) return false;
|
2020-07-07 17:47:00 +08:00
|
|
|
|
this.timer = false;
|
2020-06-19 18:07:11 +08:00
|
|
|
|
this.loadStatus.splice(this.current, 1, "loading");
|
|
|
|
|
this.page++;
|
2020-07-06 17:32:29 +08:00
|
|
|
|
this.getOrderList.then(length => {
|
|
|
|
|
this.loadStatus.splice(this.current, 1, "nomore");
|
|
|
|
|
if(length == 0) this.page--;
|
|
|
|
|
}).catch(() => {
|
2020-06-19 18:07:11 +08:00
|
|
|
|
this.loadStatus.splice(this.current, 1, "nomore");
|
2020-07-06 17:32:29 +08:00
|
|
|
|
this.page--;
|
|
|
|
|
})
|
2020-06-19 18:07:11 +08:00
|
|
|
|
},
|
2020-06-08 15:23:23 +08:00
|
|
|
|
tabsChange(index) {
|
2020-06-19 18:07:11 +08:00
|
|
|
|
this.current = Number(index);
|
2020-06-08 15:23:23 +08:00
|
|
|
|
this.swiperCurrent = Number(index);
|
|
|
|
|
},
|
|
|
|
|
animationfinish(e) {
|
|
|
|
|
let current = Number(e.detail.current);
|
|
|
|
|
this.swiperCurrent = current;
|
|
|
|
|
this.current = current;
|
2020-07-06 17:32:29 +08:00
|
|
|
|
},
|
|
|
|
|
setViewHeight() {
|
|
|
|
|
const sys = uni.getSystemInfoSync();
|
|
|
|
|
this.swiperHeight = sys.windowHeight - 88 / 2 + 'px';
|
|
|
|
|
},
|
2020-06-08 15:23:23 +08:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.order {
|
|
|
|
|
min-height: calc(100vh - var(--window-top));
|
|
|
|
|
background-color: #ECECEC;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2020-07-06 17:32:29 +08:00
|
|
|
|
// > uni-swiper {
|
|
|
|
|
// flex: 1;
|
|
|
|
|
// }
|
2020-06-08 15:23:23 +08:00
|
|
|
|
.swiper-item {
|
|
|
|
|
.item-container {
|
|
|
|
|
padding: 20rpx 30rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|