personnel_management_mobile/pages/home/businessList.vue

<template>
	<!-- backBtn+logoutBtn 开启顶部两个按钮 -->
	<Container backBtn logoutBtn @handleBack="goBack">
		<template #main>
			<view class="wrap">
				<view class="list-card">
					<view class="page-title" v-if="titleName">{{ titleName }}</view>
					<view class="item" v-for="(item, idx) in businessList" :key="idx">
						<view class="left">
							<text class="dot">◆</text>
							<text class="title-text">{{ item.itemName }}</text>
						</view>
						<view class="btn-box">
							<view class="btn-guide" @click="openGuide(item)">办事指南</view>
							<view class="btn-take" @click="toTakeNum(item)">取号</view>
						</view>
					</view>
					<view class="empty" v-if="businessList.length === 0">
						暂无事项
					</view>
				</view>
			</view>
		</template>
	</Container>
</template>

<script>
	import Container from '@/components/container/container.vue'
	import {
		getBusinessList,
		getHistoryList,
		takeNumber,
	} from '@/api/ticket.js'

	export default {
		components: {
			Container
		},
		data() {
			return {
				titleName: '',
				source: '',
				subjectId: '',
				deptId: '',
				idcard: '',
				businessList: []
			}
		},
		onLoad(options) {
			this.source = options.source || ''
			this.subjectId = options.subjectId || ''
			this.deptId = options.deptId || ''
			this.idcard = options.idcard || ''
			this.titleName = options.titleName || options.subjectName || options.deptName || ''
			this.fetchList()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 根据 source 调用不同接口
			async fetchList() {
				let res = null
				try {
					switch (this.source) {
						case 'history':
							// 历史取号
							if (!this.idcard) {
								console.warn('历史取号缺少身份证号')
								return
							}
							res = await getHistoryList({
								applicantIdCard: this.idcard
							})
							break
						case 'business':
							// 业务取号（全部事项）
							res = await getBusinessList({
								status: 1
							})
							break
						case 'subject':
						default:
							// 主题取号 / 部门取号（兼容无 source 的旧跳转）
							const params = { status: 1 }
							if (this.subjectId) {
								params.subjectId = this.subjectId
							} else if (this.deptId) {
								params.deptId = this.deptId
							} else {
								// 兼容默认：无筛选查全部
							}
							res = await getBusinessList(params)
							break
					}
					if (res && res.success && res.data) {
						this.businessList = res.data.records || []
					}
				} catch (e) {
					console.error('获取列表失败', e)
				}
			},

			// 获取事项 ID（历史记录用 itemId，事项列表用 id）
			getItemId(item) {
				return item.itemId || item.id
			},

			// 点击取号
			async toTakeNum(row) {
				if (!this.idcard) {
					uni.showToast({
						title: '请先刷身份证',
						icon: 'none'
					})
					return
				}
				try {
					const res = await takeNumber({
						applicantIdCard: this.idcard,
						itemId: this.getItemId(row)
					})
					if (res.success) {
						uni.showToast({
							title: '取号成功',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('取号失败', e)
				}
			},

			// 办事指南
			openGuide(item) {
				const id = this.getItemId(item)
				uni.navigateTo({
					url: `/pages/home/guide?id=${id}&itemName=${item.itemName}`
				})
			}
		}
	}
</script>

<style scoped>
	.wrap {
		width: 100%;
		height: 100%;
		padding: 200px 60px 150px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.list-card {
		width: 100%;
		height: 740px;
		background: #fff;
		border-radius: 60px;
		padding: 30px 80px;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	.page-title {
		font-size: 36px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		padding: 20px 0 30px;
		border-bottom: 2px solid rgba(188, 200, 209, 1);
		margin-bottom: 20px;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid rgba(188, 200, 209, 1);
	}

	.item:first-child {
		padding-top: 0;
	}

	.item:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.left {
		display: flex;
		align-items: flex-start;
		width: 68%;
	}

	.dot {
		color: #3688ff;
		font-size: 30px;
		margin-right: 20px;
	}

	.title-text {
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		line-height: 1.5;
	}

	.btn-box {
		display: flex;
		gap: 20px;
	}

	.btn-guide {
		background: #28c068;
		color: #fff;
		font-size: 30px;
		padding: 1.2vh 3vw;
		border-radius: 99px;
	}

	.btn-take {
		background: #367bfa;
		color: #fff;
		font-size: 30px;
		padding: 1.2vh 3vw;
		border-radius: 99px;
	}

	.empty {
		text-align: center;
		font-size: 30px;
		color: #999;
		padding: 100px 0;
	}
</style>