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 :current="index"></OrderItem>
						</view>
						<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>
		</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: 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: {
		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,
				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() {
			return false;
			if(!this.timer) return false;
			this.loadStatus.splice(this.current, 1, "loading");
			this.page++;
			this.getOrderList.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;
	// > uni-swiper {
	// 	flex: 1;
	// }
	.swiper-item {
		.item-container {
			padding: 20rpx 30rpx;
		}
	}
}
</style>