deming/pageE/order/Index.vue
2020-08-12 11:45:12 +08:00

218 lines
6.0 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> -->
<u-tabs :list="list" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="88" font-size="26" :gutter="20" inactive-color="#333333"></u-tabs>
</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" class="order-scroll">
<view v-if="orderList[index]">
<view class="item-container" v-for="order in orderList[index]" :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[index] || !orderList[index].length"></u-empty>
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20" v-if="current != 4 && (!orderList[index] || orderList[index].length>3)" class="order-loadmore"></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: 0,
swiperCurrent: 0,
swiperHeight: '',
timer: true,
}
},
components: {
OrderItem,
TryOrderItem,
},
watch: {
current(value, origin) {
// this.orderList = [];
this.page = 0;
// reload 重新请求列表 loadmore 往列表里添加
if(value == 4) {
this.goodsTryOrderList({ load: 'reload' });
} else {
this.getOrderList({ load: 'reload' });
}
},
},
onShow() {
this.refreshOrderList();
},
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[this.current] = res.data;
else if(load == 'loadmore') this.orderList[this.current].push(...res.data);
}
this.$forceUpdate();
// console.log(this.orderList);
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[this.current] = res.data;
// else if(load == 'loadmore') this.orderList[this.current].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[this.current] = res.data.list;
else if(load == 'loadmore') this.orderList[this.current].push(...res.data.list);
}
this.$forceUpdate();
return res.data.list.length;
},
reachBottom() {
if(this.current == 4) return;
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();
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 {
.order-scroll {
.item-container {
padding: 20rpx 30rpx;
}
}
}
}
</style>