book-hi/pages-mine/pages/order-page.vue

<template>
	<view class="order-page">
		<!-- 标签页 -->
		<view class="tabs-wrapper">
			<u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
				active-color="#38C148" bar-width="60"></u-tabs>
		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-scroll" @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<block v-if="orderList.length > 0">
				<order-item v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
					@report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
			</block>

			<!-- 空状态 -->
			<u-empty v-else mode="list" text="暂无订单"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import OrderItem from '../components/order-item.vue'

	export default {
		components: {
			OrderItem
		},
		data() {
			return {
				tabList: [{
						name: '全部'
					},
					{
						name: '待初审'
					},
					{
						name: '待取件'
					},
					{
						name: '待审核'
					},
					{
						name: '待到款'
					}
				],
				currentTab: 0,
				orderList: [],
				isRefreshing: false,
				page: 1,
				pageSize: 10,
				hasMore: true
			}
		},
		onLoad(options) {
			// 如果有传入状态，切换到对应tab
			if (options.status) {
				const index = this.tabList.findIndex(tab => tab.value === options.status)
				if (index !== -1) {
					this.currentTab = index
				}
			}
			this.loadOrders()
		},
		methods: {
			handleTabChange(index) {
				this.currentTab = index
				this.page = 1
				this.orderList = []
				this.hasMore = true
				this.loadOrders()
			},
			async loadOrders() {
				// 模拟数据，实际开发需要对接接口
				const mockData = [{
						orderNo: '54631435441',
						status: 'pending_review',
						submitTime: '2024-12-06 15:00:00',
						books: [{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							}
						]
					}, {
						orderNo: '54631435442',
						status: 'cancelled',
						submitTime: '2024-12-06 14:30:00',
						books: [{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							}
						]
					},
					{
						orderNo: '54631435443',
						status: 'pending_audit',
						submitTime: '2024-12-06 13:45:00',
						books: [{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							},
							{
								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
							}
						]
					}
				]

				this.orderList = [...this.orderList, ...mockData]
				this.hasMore = mockData.length === this.pageSize
			},
			loadMore() {
				if (!this.hasMore) return
				this.page++
				this.loadOrders()
			},
			async onRefresh() {
				this.isRefreshing = true
				this.page = 1
				this.orderList = []
				await this.loadOrders()
				this.isRefreshing = false
			},
			// 订单操作方法
			handleCancel(order) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用取消订单接口
						}
					}
				})
			},
			handleReport(order) {
				uni.navigateTo({
					url: `/pages/order/report?orderNo=${order.orderNo}`
				})
			},
			handleEditAddress(order) {
				uni.navigateTo({
					url: `/pages/order/address?orderNo=${order.orderNo}`
				})
			},
			handleRemind(order) {
				uni.showToast({
					title: '已提醒审核',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-page {
		min-height: 100vh;
		background-color: #F5F5F5;

		.tabs-wrapper {
			position: sticky;
			top: 0;
			z-index: 99;
			background: #FFFFFF;
		}

		.order-scroll {
			height: calc(100vh - 88rpx); // 减去navbar和tabs的高度
			box-sizing: border-box;
			padding: 20rpx;
		}
	}

	// 修改tabs样式
	:deep(.u-tabs__wrapper__nav__line) {
		bottom: 10rpx;
		height: 4rpx;
		background: #38C148;
	}
</style>