212 lines
5.5 KiB
Vue
212 lines
5.5 KiB
Vue
<template>
|
|
<view class="order">
|
|
<view>
|
|
<u-tabs-swiper ref="tabs" :list="list" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
|
|
</view>
|
|
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
|
|
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
|
|
<view>
|
|
<view class="item-container" v-for="order in orderList" :key="order.order_id">
|
|
<OrderItem :order="order" @refreshOrderList="refreshOrderList" v-if="current != 4"></OrderItem>
|
|
<TryOrderItem :order="order" @refreshOrderList="refreshOrderList" v-else></TryOrderItem>
|
|
</view>
|
|
</view>
|
|
<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>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import OrderItem from '@/components/mine/order-item/index'
|
|
import TryOrderItem from '@/components/mine/order-item/try'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [{
|
|
name: '全部'
|
|
}, {
|
|
name: '待支付'
|
|
}, {
|
|
name: '待发货'
|
|
}, {
|
|
name: '待收货'
|
|
}, {
|
|
name: '试穿试送'
|
|
},{
|
|
name: '拼团中'
|
|
}, {
|
|
name: '售后'
|
|
}, {
|
|
name: '待评价'
|
|
}],
|
|
orderList: [],
|
|
loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
|
|
page: 0,
|
|
current: Number,
|
|
swiperCurrent: 0,
|
|
swiperHeight: '',
|
|
timer: true,
|
|
}
|
|
},
|
|
components: {
|
|
OrderItem,
|
|
TryOrderItem,
|
|
},
|
|
watch: {
|
|
current(value, origin) {
|
|
if((origin == 4 && value != 4) || (value == 4 && origin != 4)) {
|
|
this.orderList = [];
|
|
}
|
|
this.page = 0;
|
|
// reload 重新请求列表 loadmore 往列表里添加
|
|
if(value == 4) {
|
|
this.goodsTryOrderList({ load: 'reload' });
|
|
} else {
|
|
this.getOrderList({ load: 'reload' });
|
|
}
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
const current = option.current ? Number(option.current) : 0;
|
|
this.current = current;
|
|
this.swiperCurrent = this.current;
|
|
this.setViewHeight();
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.refreshOrderList();
|
|
},
|
|
methods: {
|
|
setOrderType() {
|
|
let type;
|
|
switch (this.current) {
|
|
case 1:
|
|
type = 1; // 待支付
|
|
break;
|
|
case 2:
|
|
type = 2; // 待发货
|
|
break;
|
|
case 3:
|
|
type = 3; // 待收货
|
|
break;
|
|
case 4:
|
|
type = -1; // 试穿试送
|
|
break;
|
|
case 5:
|
|
type = 9; // 拼团中
|
|
break;
|
|
case 6:
|
|
type = 8; // 售后
|
|
break;
|
|
case 7:
|
|
type = 4; // 待评价
|
|
break;
|
|
default:
|
|
type = -1;
|
|
break;
|
|
}
|
|
return type;
|
|
},
|
|
refreshOrderList() {
|
|
this.page = 0;
|
|
// if(this.current == 6) {
|
|
// this.getAfterSaleList({ load: 'reload' });
|
|
// } else
|
|
if(this.current == 4) {
|
|
this.goodsTryOrderList({ load: 'reload' });
|
|
} else {
|
|
this.getOrderList({ load: 'reload' });
|
|
}
|
|
},
|
|
// 普通
|
|
async getOrderList({ load = 'loadmore' } = {}) {
|
|
const type = this.setOrderType();
|
|
const res = await this.$u.api.getOrderList({
|
|
page: this.page,
|
|
type: type,
|
|
})
|
|
this.timer = true;
|
|
uni.stopPullDownRefresh(); // 结束刷新
|
|
if(res.errCode == 0) {
|
|
if(load == 'reload') this.orderList = res.data;
|
|
else if(load == 'loadmore') this.orderList.push(...res.data);
|
|
}
|
|
return res.data.length;
|
|
},
|
|
// 售后
|
|
async getAfterSaleList({ load = 'loadmore' } = {}) {
|
|
const res = await this.$u.api.getAfterSaleList({
|
|
page: this.page,
|
|
})
|
|
this.timer = true;
|
|
if(res.errCode == 0) {
|
|
if(load == 'reload') this.orderList = res.data;
|
|
else if(load == 'loadmore') this.orderList.push(...res.data);
|
|
}
|
|
return res.data.length;
|
|
},
|
|
// 试穿
|
|
async goodsTryOrderList({ load = 'loadmore' } = {}) {
|
|
const res = await this.$u.api.goodsTryOrderList({
|
|
page: this.page,
|
|
})
|
|
uni.stopPullDownRefresh(); // 结束刷新
|
|
this.timer = true;
|
|
if(res.errCode == 0) {
|
|
if(load == 'reload') this.orderList = res.data.list;
|
|
else if(load == 'loadmore') this.orderList.push(...res.data.list);
|
|
}
|
|
return res.data.list.length;
|
|
},
|
|
reachBottom() {
|
|
// 大于15条才会加载更多
|
|
if(this.orderList.length < 15) return false;
|
|
if(!this.timer) return false;
|
|
this.timer = false;
|
|
this.loadStatus.splice(this.current, 1, "loading");
|
|
this.page++;
|
|
let promise;
|
|
// if(this.current == 6) promise = this.getAfterSaleList();
|
|
// else
|
|
if(this.current == 4) promise = this.goodsTryOrderList();
|
|
else promise = this.getOrderList();
|
|
promise.then(length => {
|
|
this.loadStatus.splice(this.current, 1, "nomore");
|
|
if(length == 0) this.page--;
|
|
}).catch(() => {
|
|
this.loadStatus.splice(this.current, 1, "nomore");
|
|
this.page--;
|
|
})
|
|
},
|
|
tabsChange(index) {
|
|
this.current = Number(index);
|
|
this.swiperCurrent = Number(index);
|
|
},
|
|
animationfinish(e) {
|
|
let current = Number(e.detail.current);
|
|
this.swiperCurrent = current;
|
|
this.current = current;
|
|
},
|
|
setViewHeight() {
|
|
const sys = uni.getSystemInfoSync();
|
|
this.swiperHeight = sys.windowHeight - 88 / 2 + 'px';
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.order {
|
|
min-height: calc(100vh - var(--window-top));
|
|
background-color: #ECECEC;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.swiper-item {
|
|
.item-container {
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |