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