162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<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>
|
||
<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="getOrderList"></OrderItem>
|
||
</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'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [{
|
||
name: '全部'
|
||
}, {
|
||
name: '待支付'
|
||
}, {
|
||
name: '已取消'
|
||
}, {
|
||
name: '待收货'
|
||
}, {
|
||
name: '试穿试送'
|
||
}, {
|
||
name: '待评价'
|
||
}, {
|
||
name: '售后'
|
||
}],
|
||
orderList: [],
|
||
loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
|
||
page: 0,
|
||
current: Number,
|
||
swiperCurrent: 0,
|
||
swiperHeight: '',
|
||
timer: true,
|
||
}
|
||
},
|
||
components: {
|
||
OrderItem
|
||
},
|
||
watch: {
|
||
current(value) {
|
||
this.page = 0;
|
||
// again 重新请求列表 不然往列表里添加
|
||
value == 6 ? this.getAfterSaleList({ reload: 'again' }): this.getOrderList({ reload: 'again' });
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
const current = option.current ? Number(option.current) : 0;
|
||
this.current = current;
|
||
this.swiperCurrent = this.current;
|
||
this.setViewHeight();
|
||
},
|
||
methods: {
|
||
setOrderType() {
|
||
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 = 'state_noeval'; // 待评价
|
||
break;
|
||
default:
|
||
type = -1;
|
||
break;
|
||
}
|
||
return type;
|
||
},
|
||
async getOrderList({ reload = '' } = {}) {
|
||
const type = this.setOrderType();
|
||
const res = await this.$u.api.getOrderList({
|
||
page: this.page,
|
||
type: type,
|
||
})
|
||
this.timer = true;
|
||
if(res.errCode == 0) {
|
||
if(reload) this.orderList = res.data;
|
||
else this.orderList.push(...res.data);
|
||
}
|
||
return res;
|
||
},
|
||
async getAfterSaleList({ reload = '' } = {}) {
|
||
const res = await this.$u.api.getAfterSaleList({
|
||
page: this.page,
|
||
})
|
||
this.timer = true;
|
||
if(res.errCode == 0) {
|
||
if(reload) this.orderList = res.data;
|
||
else this.orderList.push(...res.data);
|
||
}
|
||
return res;
|
||
},
|
||
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 promise = this.getOrderList();
|
||
promise.then(res => {
|
||
this.loadStatus.splice(this.current, 1, "nomore");
|
||
if(res.data.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> |