deming/pageE/order/Index.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>