personnel_management_mobile/pages/myReserve/detail.vue

<template>
	<view class="container">

		<!-- 蓝色头部信息区 -->
		<view class="header-section">
			<view class="serial-no">流水号：{{orderInfo.code}}</view>
			<view class="time-info">{{orderInfo.bookingTime}}</view>
			<view class="project-info"> {{orderInfo.itemName}} </view>
		</view>

		<!-- 取号信息卡片 -->
		<view class="info-card new-card" v-if="isTicketInfoShow">
			<view class="ticket_status">无感取号成功</view>
			<view class="info-row">
				<text class="info-label">排队号</text>
				<text class="info-value">{{ticketInfo.queueNum}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">窗口号</text>
				<text class="info-value">{{ticketInfo.counterlist}}</text>
			</view>
		</view>

		<!-- 详情信息卡片 -->
		<view class="info-card">
			<view class="info-row">
				<text class="info-label">预约大厅</text>
				<text class="info-value">广西区直住房保障中心</text>
			</view>
			<view class="info-row">
				<text class="info-label">预约部门</text>
				<text class="info-value">{{orderInfo.deptName}}</text>
			</view>
		</view>

		<view class="info-card">
			<view class="info-row">
				<text class="info-label">姓名</text>
				<text class="info-value">{{ userinfo.name }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">手机号</text>
				<text class="info-value">{{ userinfo.phone }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">证件类型</text>
				<text class="info-value">身份证</text>
			</view>
			<view class="info-row">
				<text class="info-label">证件号码</text>
				<text class="info-value">{{ userinfo.idCard }}</text>
			</view>
		</view>

		<!-- 取消预约按钮 -->
		<view class="btn-wrap">
			<button class="btn-cancel" v-if="orderInfo.status==1" @click="handleCancel">取消预约</button>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
		getUserInfo,
		cancel,
		getIsSuccessTicket
	} from '@/api/reserve.js'

	export default {
		data() {
			return {
				// 可通过页面传参动态获取以下数据
				isTicketInfoShow: false,
				ticketInfo: {},
				orderInfo: {},
				userinfo: {},
				id: '',

			}
		},
		onLoad(options) {
			this.id = options.id
			this.getTicketInfo()
			this.getUserInfo()
			this.getDetail()

		},
		methods: {
			// 取号详情
			getTicketInfo() {
				getIsSuccessTicket({
					yyNo: this.id
				}).then(res => {
					if (res.code) {
						this.isTicketInfoShow = Object.keys(res.data).length > 0 ? true : false
						this.ticketInfo = res.data
					}
				})
			},
			// 预约详情
			getDetail() {
				getDetail({
					id: this.id
				}).then(res => {
					this.orderInfo = res.data

				})
			},
			// 个人信息详情
			getUserInfo() {
				getUserInfo().then(res => {
					this.userinfo = res.data
				})
			},
			// 返回上一页
			handleGoBack() {
				uni.navigateBack()
			},
			// 取消预约
			handleCancel() {
				uni.showModal({
					title: '提示',
					content: '确定要取消该预约吗？',
					success: (res) => {
						if (res.confirm) {
							cancel({
								id: this.orderInfo.id
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									})

									setTimeout(() => {
										uni.navigateBack({
											delta: 1 // 返回的页面数
										})
									}, 2000)
								}
							})

						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	/* 全局容器 */
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		display: flex;
		flex-direction: column;
	}

	/* 蓝色头部信息区 */
	.header-section {
		width: 100%;
		background: linear-gradient(to right, rgba(75, 112, 252, 1), rgba(67, 195, 252, 1));
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.serial-no {
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		margin-bottom: 30rpx;
		opacity: 0.9;
	}

	.time-info {
		font-size: 38rpx;
		font-weight: 500;
		color: #ffffff;
		margin-bottom: 15rpx;
		line-height: 1.4;
	}

	.project-info {
		font-size: 32rpx;
		color: #ffffff;
		line-height: 1.5;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		padding: 20rpx;
	}

	/* 信息卡片 */
	.info-card {
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 20rpx 30rpx;
		padding: 0 30rpx;
	}

	.new-card {
		padding-top: 20rpx;
	}

	.ticket_status {
		margin: 0 auto;
		padding: 10rpx 32rpx;
		width: fit-content;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(3, 195, 106, 1);
		background-color: rgba(220, 255, 239, 1);
		border-radius: 10rpx;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
	}

	.info-label {
		width: 220rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		flex-shrink: 0;
	}

	.info-value {
		flex: 1;
		font-size: 34rpx;
		color: #333333;
		text-align: right;
		line-height: 1.5;
	}

	/* 取消预约按钮 */
	.btn-wrap {
		padding: 20rpx 30rpx 40rpx;
	}

	.btn-cancel {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(255, 239, 239, 1);
		color: rgba(244, 54, 54, 1);
		border-radius: 44rpx;
		font-size: 34rpx;
		font-weight: 500;
		border: 2rpx solid rgba(255, 195, 195, 1);
	}
</style>