book-hi/pages-mine/pages/apply-return.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>

		<!-- 订单列表 -->
		<page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty url="/token/order/scanLogs">
			<view v-if="orderList.length > 0" class="pad-20">
				<order-item isReturn v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
					@report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
			</view>
		</page-scroll>
	</view>
</template>

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

	export default {
		components: {
			OrderItem,
			pageScroll
		},
		data() {
			return {
				tabList: [{
						name: '已申请'
					},
					{
						name: '可退回'
					},
				],
				currentTab: 0,
				orderList: [],
			}
		},
		onLoad(options) {
			// 如果有传入状态，切换到对应tab
			if (options.status) {
				const index = this.tabList.findIndex(tab => tab.value === options.status)
				if (index !== -1) {
					this.currentTab = index
				}
			}
			this.loadOrders(true)
		},
		methods: {
			// 加载订单 
			loadOrders(bool = false) {
				this.$refs.pageRef?.loadData(bool)
			},

			handleTabChange(index) {
				this.currentTab = index
				this.page = 1
				this.loadOrders(true)
			},

			handleUpdateList(list) {
				this.orderList = list.map(item => {
					return {
						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'
							}
						]
					}
				})
			},
			// 订单操作方法
			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;
		}
	}
</style>