personnel_management_mobile/pages/myReserve/index.vue

<template>
	<view class="container">
		<!-- 预约列表 -->
		<view class="list-container">
			<!-- 预约成功状态 -->
			<view class="reserve-item" v-for="(item, index) in successList" :key="`success-${index}`">
				<view class="item-header">
					<text class="item-time">{{ item.bookingTime }}</text>
					<text
						:class="['status', item.status == 1 ? 'success' : 'canceled']">{{ item.status == 1 ? '预约成功' : '已取消' }}</text>
				</view>
				<view class="item-content">
					<text class="item-project">{{ item.itemName }}</text>
				</view>
				<view class="item-btns">
					<button class="btn-cancel" v-if="item.status == 1" @click="handleCancel(item)">取消预约</button>
					<button class="btn-cancel" v-if="item.status == 4">{{getStatus(item.status)}}</button>
					<button class="btn-detail" @click="handleDetail(item)">查看详情</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-tip" v-if="successList.length === 0"> 暂无预约记录 </view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				// 预约成功列表（和设计图完全一致）
				successList: [],
				userinfo: {},
				statusList: [],
			}
		},
		onLoad() {
			this.getUserInfo()
			this.statusList = uni.getStorageSync('statusList');
		},
		methods: {
			getStatus(code){
				return this.statusList.find(item=>item.dictKey == code)?.dictValue
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.userinfo = res.data
					this.getList()
				})
			},
			getList() {
				let params = {
					size: 10,
					current: 1,
					idCard: this.userinfo.idCard,
					descs: 'update_time'
				}
				myReserve(params).then(res => {
					this.successList = res.data.records
				})
			},
			// 返回上一页
			handleGoBack() {
				uni.navigateBack()
			},
			// 取消预约
			handleCancel(item) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该预约吗？',
					success: res => {
						if (res.confirm) {
							cancel({
								id: item.id
							}).then(res => {
								if (res.code == 200) {
									this.getList()
								}
							})
						}
					}
				})
			},
			// 查看详情
			handleDetail(item) {
				uni.navigateTo({
					url: `/pages/myReserve/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style scoped>
	/* 全局容器 */
	.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;
	}

	/* 列表容器 */
	.list-container {
		flex: 1;
		padding: 20rpx 30rpx;
	}

	/* 预约项卡片 */
	.reserve-item {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.item-time {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
	}

	.status {
		font-size: 30rpx;
		font-weight: 500;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
	}

	.status.success {
		background-color: #e6f9e6;
		color: #00b578;
	}

	.status.canceled {
		background-color: #f0f0f0;
		color: #999999;
	}

	.item-content {
		margin-bottom: 30rpx;
	}

	.item-project {
		font-size: 32rpx;
		color: #333333;
		line-height: 1.5;
	}

	.item-btns {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.btn-cancel {
		margin: 0;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(255, 239, 239, 1);
		color: rgba(244, 54, 54, 1);
		border-radius: 35rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(255, 195, 195, 1);
	}

	.btn-detail {
		margin: 0;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(242, 247, 255, 1);
		color: rgba(49, 134, 255, 1);
		border-radius: 35rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(208, 227, 255, 1);
	}

	/* 空状态提示 */
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
</style>