mh/pages/me/order.vue

<template>
	<view class="order">
		<view class="order-top flex">
			<view class="order-top-item center" @click="changeIndex(index)" :class="{ active: index == i }" v-for="(item, index) in 3" :key="index">
				{{ index == 0 ? '待发货' : index == 1 ? '已发货' : '已完成' }}
			</view>
		</view>
		<view class="order-main">
			<view class="order-main-item" v-for="(item, index) in orderList" :key="index" @click="navTo(item)">
				<view class="order-main-info flex">
					<text>订单号：{{ item.delivery_order_no }}</text>
					<text>{{ item.status }}</text>
				</view>
				<view class="order-main-product">
					<view class="order-main-product-item flexs">
						<view class="order-main-product-bg"><image :src="item.goods_image" mode="aspectFill"></image></view>
						<view class="order-main-product-info">
							<view class="order-main-product-name">{{ item.goods_name }}</view>
							<view class="order-main-product-money">{{ item.goods_coin_price }}金币</view>
						</view>
					</view>
				</view>
				<view class="order-main-time flex">
					<text>下单时间</text>
					<text>{{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			i: 0, //选择哪个
			page: 1, //f分页
			pages: 0, //总页数
			orderList: [] //订单列表
		};
	},
	methods: {
		//去订单详情
		navTo(item) {
			uni.navigateTo({ url: '/pages/me/order-details?id=' + item.delivery_order_id });
		},
		//切换
		changeIndex(index) {
			this.i = index;
			this.page = 1;
			this.loadData();
		},
		//获取订单列表
		loadData() {
			this.$api.myOrderList({ status: Number(this.i) + 1, page: this.page, msg: '数据加载中' }).then(res => {
				uni.stopPullDownRefresh();
				if (res.code === 1) {
					this.pages = res.data.last_page;
					this.orderList = this.page == 1 ? res.data.data : [...this.orderList, ...res.data.data];
					console.log(res.data);
				}
			});
		}
	},
	onLoad({ type }) {
		this.i = type || 0;
	},
	onShow() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.loadData();
	},
	onReachBottom() {
		if (this.page < this.pages) {
			this.page++;
			this.loadData();
		}
	}
};
</script>

<style lang="scss">
.order {
	padding: 0 30rpx;
}
.order-top {
	width: 100%;
	top: 44px;
	padding: 0 50rpx;
	position: sticky;
	height: 90rpx;
	z-index: 2021;
	background: #fafafa;
	.order-top-item {
		font-weight: bold;
		font-size: 30rpx;
	}
	.active {
		color: #69a8f8;
	}
}
.order-main-item {
	overflow: hidden;
	margin-bottom: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	.order-main-info {
		height: 60rpx;
		padding: 0 30rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #fafafa;

		text {
			color: #999999;
			font-size: 26rpx;
			&:last-child {
				color: #f6af32;
				font-size: 24rpx;
			}
		}
	}
	.order-main-product {
		padding: 30rpx 0;
	}
	.order-main-product-item {
		padding: 0 30rpx;
		.order-main-product-bg {
			width: 168rpx;
			height: 168rpx;
			margin-right: 20rpx;
			image {
				border-radius: 10rpx;
			}
		}
		.order-main-product-info {
			display: flex;
			flex-direction: column;
			height: 168rpx;
			.order-main-product-name {
				font-size: 28rpx;
				line-height: 36rpx;
			}
			.order-main-item_price {
				color: #cf271b;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}
	.order-main-time {
		padding: 20rpx 30rpx;
		border-top: 2rpx solid #fafafa;
		text {
			color: #999999;
			&:first-child {
				font-size: 26rpx;
			}
		}
	}
}
</style>