staff/pagesA/verification/history.vue

<template>
	<view class="li-history-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">{{historyType=='1'?'入库历史':'核销历史'}}</text>
				</view>
			</template>
		</wd-navbar>

		<!-- 搜索框 -->
		<view class="li-w-90% li-mx-auto li-mt-30">
			<wd-search placeholderStyle="color:#d9d9d9" v-model="searchKeyword" hide-cancel placeholder-left
				placeholder="订单编号搜索" @search="search"></wd-search>
		</view>

		<!-- 历史记录列表 -->
		<view class="li-w-92% li-mx-auto li-mt-30">
			<view v-if="records.length > 0" class="records-list">
				<view v-for="(record, index) in records" :key="index" @click="btnDetail(record)"
					class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
					<view class="li-flex li-flex-col">
						<view class="li-flex li-items-center">
							<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
							<text class="li-text-30">{{record.order_no}}</text>
						</view>

						<text class="li-text-24 li-text-#999 li-mt-8">{{record.create_time}}</text>
						<view class="li-flex li-items-center li-mt-8">
							<text class="li-text-24 li-text-#999">操作人: {{ userInfo.realname }}</text>
						</view>
					</view>
					<view class="status-badge status-success">
						入库成功
					</view>
				</view>
			</view>

			<!-- 空状态提示 -->
			<view v-else class="!li-mt-100">
				<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/search.png'" tip="暂无记录记录" />
			</view>
		</view>
		<view v-if="records.length>0">
			<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" />
		</view>
		<zero-loading type="wobble" v-if="loading"></zero-loading>
		<!-- 顶部提示条（成功/失败消息提示） -->
		<wd-toast />
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { orderRecord } from '@/api/ticket'
	import { useNavigation } from '@/hooks/useNavigation'
	import { useToast } from '@/uni_modules/wot-design-uni'
	const Toast = useToast()
	// 使用导航 composable
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()

	// 搜索关键词
	const searchKeyword = ref('')
	const loading = ref<boolean>(false)
	const state = ref<string>('loading')
	const page = ref<number>(1)
	const limit = ref<number>(5)
	const historyType = ref<string>('1')
	const count = ref<number>(0)
	const userInfo = ref(uni.getStorageSync('userInfo'))


	// 历史记录数据
	const records = ref([])

	const btnDetail = (item) => {
		uni.navigateTo({
			url: '/pagesA/verification/historyDetail?order_no=' + item.order_no + '&type=' + historyType.value
		})
	}

	onPullDownRefresh(() => {
		uni.stopPullDownRefresh()
	})

	onReachBottom(() => {
		if (count.value <= records.value.length) {
			state.value = 'finished'
			return
		}
		state.value = 'loading'
		page.value++
		getOrderRecord()
	})

	onLoad((options) => {
		historyType.value = options?.type
		checkRouteStack()
		getOrderRecord()

	})

	const search = () => {
		page.value = 1
		records.value = []
		getOrderRecord()
	}

	const getOrderRecord = async () => {
		loading.value = true
		try {
			const res = await orderRecord({ page: page.value, limit: limit.value, type: historyType.value, order_no: searchKeyword.value })
			if (res.code == 200) {
				records.value = records.value.concat(res.data)
				count.value = res.count
				if (res.data.length < limit.value) {
					state.value = 'finished'
				}
			} else {
				Toast.error(res.msg)
			}
		} catch (error) {
			Toast.error(error?.msg)
		} finally {
			loading.value = false
		}
	}



	const toPages = (item : any) => {
		console.log(item);
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				})
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8fc;
	}

	.li-history-page {
		padding-bottom: 40rpx;

		.records-list {
			.record-item {
				&:not(:last-child) {
					margin-bottom: 30rpx; // 调整间距
				}
			}
		}

		// 状态标签
		.status-badge {
			padding: 4rpx 20rpx;
			border-radius: 30rpx;
			font-size: 24rpx;

			&.status-success {
				color: #07c160;
				background-color: rgba(7, 193, 96, 0.1);
			}

			&.status-fail {
				color: #fa5151;
				background-color: rgba(250, 81, 81, 0.1);
			}

			&.status-pending {
				color: #f0ad4e;
				background-color: rgba(240, 173, 78, 0.1);
			}
		}

		// 空状态
		.empty-state {
			padding-top: 100rpx;
		}
	}


	::v-deep .wd-search {
		background-color: #F6F7FB !important;
		padding: 0 !important;
	}

	::v-deep .wd-search__block {
		background-color: #FFFFFF !important;
		width: 480rpx !important;
		padding: 4rpx !important;
	}

	::v-deep .uni-input-placeholder,
	.uni-input-input {
		width: auto !important;
	}

	::v-deep .wd-divider,
	.wd-divider::after,
	.wd-divider::before {
		border: none !important;
		margin: 0 !important;
	}
</style>