This commit is contained in:
2020-07-06 17:32:29 +08:00
parent c6bea7a19a
commit 8dc45b57fd
15 changed files with 384 additions and 264 deletions

View File

@@ -3,74 +3,14 @@
<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>
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<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="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
<view class="item-container" v-for="order in orderList" :key="order.order_id">
<OrderItem :current="index"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
<view>
<view class="item-container" v-for="(item, index) in orderList" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
<u-loadmore :status="loadStatus[6]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20" v-if="typeof orderList == Array ? (orderList.length >= 15) : (orderList >= 15)"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
@@ -97,44 +37,81 @@ export default {
}, {
name: '售后'
}],
orderList: 5,
orderList: 15,
loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
page: 0,
current: 0,
swiperCurrent: 0,
swiperHeight: '',
timer: true,
}
},
components: {
OrderItem
},
watch: {
current() {
this.page = 0;
this.getOrderList();
},
},
onLoad(option) {
if(option.current) {
this.current = Number(option.current);
this.swiperCurrent = this.current;
}
this.getOrderList();
this.setViewHeight();
},
methods: {
getOrderList() {
this.$u.api.getOrderList({
async getOrderList() {
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({
page: this.page,
}).then(res => {
if(res.errCode == 0) {
}
type: type,
})
this.timer = false;
if(res.errCode == 0) {
if(res.data.length) this.orderList = this.orderList.concat(res.data);
}
return res.data.length;
},
reachBottom() {
// console.log(this.page);
if(this.page >= 3) return;
// 修改当前的 loadStatus
console.log(this.loadStatus);
return false;
if(!this.timer) return false;
this.loadStatus.splice(this.current, 1, "loading");
this.page++;
setTimeout(() => {
this.orderList += 5;
this.getOrderList.then(length => {
this.loadStatus.splice(this.current, 1, "nomore");
}, 1200);
if(length == 0) this.page--;
}).catch(() => {
this.loadStatus.splice(this.current, 1, "nomore");
this.page--;
})
},
tabsChange(index) {
this.current = Number(index);
@@ -144,7 +121,11 @@ export default {
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>
@@ -154,9 +135,9 @@ export default {
background-color: #ECECEC;
display: flex;
flex-direction: column;
> uni-swiper {
flex: 1;
}
// > uni-swiper {
// flex: 1;
// }
.swiper-item {
.item-container {
padding: 20rpx 30rpx;