onlinenew_h5/pages/myDorm/myDorm.vue

<template>
	<view class="container">
		<view class="info">{{ info }}</view>

		<!-- 床位列表区域 -->
		<view class="bed_list">
			<!-- 每一个床位区域 -->
			<view class="bed_item" v-for="(item, index) in bedList" :key="index">
				<view class="item_top">
					<view class="top_left" v-if="item.isCheck == 0">暂无入住</view>
					<view class="top_left" v-if="item.isCheck == 1">{{ item.name ? '本人入住' : '已入住' }}</view>
					<view class="top_right">{{ index + 1 }}号床</view>
				</view>

				<!-- 详细信息区域 -->
				<view class="item_form icon" v-if="item.isCheck == 0">
					<image class="form_not" src="/static/5.png" mode="aspectFill"></image>
					暂无入住
				</view>
				<view class="item_form icon" v-if="item.isCheck == 1 && !item.name">
					<image class="form_have" src="/static/4.png" mode="aspectFill"></image>
					已入住
				</view>
				<view class="item_form" v-if="item.isCheck == 1 && item.name">
					<view class="form_left">
						<view class="left_box">
							<view class="box_key">姓名：</view>
							<view class="box_value">
								<input
									class="input"
									type="text"
									placeholder="请输入姓名"
									placeholder-style="color:#CCCCCC;font-size:28rpx"
									:value="item.name"
									:disabled="item.name"
								/>
							</view>
						</view>

						<view class="left_box">
							<view class="box_key">学院：</view>
							<view class="box_value">
								<input
									class="input"
									type="text"
									placeholder="请输入学院"
									placeholder-style="color:#CCCCCC;font-size:28rpx"
									:value="item.college"
									:disabled="item.college"
								/>
							</view>
						</view>

						<view class="left_box">
							<view class="box_key">专业：</view>
							<view class="box_value">
								<input
									class="input"
									type="text"
									placeholder="请输入专业"
									placeholder-style="color:#CCCCCC;font-size:28rpx"
									:value="item.major"
									:disabled="item.major"
								/>
							</view>
						</view>

						<view class="left_box">
							<view class="box_key">联系方式：</view>
							<view class="box_value">
								<input
									class="input"
									type="text"
									placeholder="请输入联系方式"
									placeholder-style="color:#CCCCCC;font-size:28rpx"
									:value="item.phone"
									:disabled="item.phone"
								/>
							</view>
						</view>

						<view class="left_box">
							<view class="box_key">家庭住址：</view>
							<view class="box_value">
								<input
									class="input"
									type="text"
									placeholder="请输入家庭住址"
									placeholder-style="color:#CCCCCC;font-size:28rpx"
									:value="item.address"
									:disabled="item.address"
								/>
							</view>
						</view>
					</view>
					<!-- 照片区域 -->
					<image class="form_photo" v-if="item.picture" :src="item.picture" mode="aspectFill"></image>
					<image class="form_photo" v-else src="@/static/7.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btns">
			<view class="btn_next" @click="handleLook">查看预报道凭证</view>

			<view class="btn_next" @click="handleCar">车牌预约</view>

			<view class="btn_next" @click="logout">退出登录</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getBedDetailsReq } from '@/api/index.js'

const info = ref()

const studentInfo = ref()

// 宿舍床位数组
const bedList = ref([])

onLoad((options) => {
	// console.log(options)
	info.value = options.str

	studentInfo.value = uni.getStorageSync('studentInfo')
	getBedDetails()
})

// 获取宿舍详情
const getBedDetails = async () => {
	const res = await getBedDetailsReq()
	// console.log(res)
	if (res.code == 200) {
		bedList.value = res.data
	}
}

// 查看电子凭证按钮回调
const handleLook = () => {
	let studentCard = uni.getStorageSync('studentInfo').cardId
	// console.log(studentCard)
	if (bedList.value.length) {
		let obj = bedList.value.find((ele) => ele.studentCard == studentCard)
		// console.log(obj)

		if (obj) {
			let msg = encodeURIComponent(JSON.stringify(obj))
			uni.navigateTo({
				url: `/pages/proof/proof?msg=${msg}`
			})
		} else {
			uni.showToast({
				title: '请先选择床位',
				icon: 'none'
			})
		}
	} else {
		uni.showToast({
			title: '请先选择床位',
			icon: 'none'
		})
	}
}

// 车牌预约按钮回调
const handleCar = () => {
	let info = uni.getStorageSync('studentInfo')
	// console.log(info)
	if (info.trafficMethod == '自驾') {
		uni.showModal({
			title: '提示',
			content: '确定前往车牌预约吗？',
			success: (res) => {
				if (res.confirm) {
					uni.reLaunch({
						url: '/pages/subscribe/subscribe'
					})
				}
			}
		})
	} else {
		uni.showToast({
			title: '您选择的交通方式不为自驾，不支持车牌预约',
			icon: 'none'
		})
	}
}

// 退出登录按钮回调
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '确定退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				let urlstr = uni.getStorageSync('urlstr')
				uni.clearStorageSync()
				window.location.href = `https://chtech.ncjti.edu.cn/welcome/welcomeH5/#/?urlstr=${urlstr}`
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding-top: 12rpx;
	padding-bottom: 50rpx;
	min-height: 100vh;
	background-color: #f5f9ff;

	.info {
		padding: 0 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
	}

	.bed_list {
		background-color: #fff;

		.bed_item {
			padding: 0 20rpx;
			margin-bottom: 20rpx;

			.item_top {
				display: flex;
				align-items: center;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #0061ff;

				.top_left {
					box-sizing: border-box;
					padding-left: 42rpx;
					width: 520rpx;
					height: 100%;
					line-height: 80rpx;
					border-radius: 9rpx 9rpx, 0rpx, 0rpx;
					background-color: #cce0ff;
				}

				.top_right {
					flex: 1;
					height: 100%;
					line-height: 80rpx;
					text-align: center;
				}
			}

			.item_form {
				display: flex;
				box-sizing: border-box;
				padding-top: 40rpx;
				width: 710rpx;
				height: 543rpx;
				border-radius: 8rpx;
				background-color: #f2f7ff;

				.form_left {
					width: 520rpx;

					.left_box {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.box_key {
							width: 140rpx;
							text-align: end;
							font-size: 28rpx;
						}

						.box_value {
							box-sizing: border-box;
							padding: 0 20rpx;
							width: 355rpx;
							height: 74rpx;
							border-radius: 4rpx;
							background-color: #fff;

							.input {
								height: 100%;
							}
						}
					}
				}

				.form_photo {
					margin-left: 20rpx;
					width: 156rpx;
					height: 199rpx;
					border-radius: 8rpx;
					border: 2rpx solid #ccc;
				}

				.form_have {
					margin-bottom: 5rpx;
					width: 132rpx;
					height: 132rpx;
				}

				.form_not {
					width: 174rpx;
					height: 174rpx;
				}
			}

			.icon {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}
		}
	}

	.btns {
		padding: 20rpx 20rpx 0;
		background-color: #fff;

		.btn_next {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx 20rpx;
			height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #0061ff;
		}
	}
}
</style>