H5-frontend/pages/index/index.vue

<template>
	<view class="wrap" v-if="isValidQrCode">
		<image class="bg-image" src="/static/images/welcome/eye-examine-bg.png" mode="widthFix"></image>
		<view class="content">
			<view class="form-box">
				<view class="school-name" v-if="schoolName">
					<text>{{ schoolName }}</text>
				</view>
				<van-field v-model="formData.name" label="姓名" placeholder="请输入姓名" required label-align="left" />
				<van-field v-model="formData.phone" label="电话" placeholder="请输入电话" type="tel" required label-align="left" />
				<van-field v-model="formData.organization" label="机构" placeholder="请输入机构" required label-align="left" />
			</view>
			<view class="btn-box">
				<van-button type="primary" block round @click="handleEnter" :disabled="!isFormValid">进入体检</van-button>
			</view>
		</view>
	</view>
	<view v-else class="error-page">
		<view class="error-text">当前二维码无效</view>
	</view>
</template>

<script setup>
import { getSchoolInfo } from '@/services/common'

const STORAGE_KEY = 'eye_examine_user_info'
const isValidQrCode = ref(true)
const schoolName = ref('')

const formData = ref({
	name: '',
	phone: '',
	organization: '',
	schoolId: ''
})

const isFormValid = computed(() => {
	const phoneReg = /^1[3-9]\d{9}$/
	return formData.value.name && phoneReg.test(formData.value.phone) && formData.value.organization
})

onLoad(async (options) => {
	const savedData = uni.getStorageSync(STORAGE_KEY)
	
	if (options.schoolId) {
		formData.value.schoolId = options.schoolId
	}
	
	if (savedData) {
		const saved = JSON.parse(savedData)
		formData.value.name = saved.name || ''
		formData.value.phone = saved.phone || ''
		formData.value.organization = saved.organization || ''
		
		if (options.schoolId && saved.schoolId !== options.schoolId) {
			formData.value.schoolId = options.schoolId
		} else if (saved.schoolId) {
			formData.value.schoolId = saved.schoolId
		}
	}
	
	if (!formData.value.schoolId) {
		isValidQrCode.value = false
		uni.showToast({
			title: '当前二维码无效',
			icon: 'none',
			duration: 3000
		})
		return
	}
	
	try {
		const res = await getSchoolInfo(formData.value.schoolId)
		if (res && res.code === 200) {
			schoolName.value = res.data.name || ''
		}
	} catch (error) {
		console.error('获取学校信息失败', error)
	}
})

const handleEnter = async () => {
	if (!formData.value.name || !formData.value.phone || !formData.value.organization) {
		return uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
	}
	
	if (!formData.value.schoolId) {
		return uni.showToast({
			title: '缺少学校ID',
			icon: 'none'
		})
	}
	
	uni.setStorageSync(STORAGE_KEY, JSON.stringify(formData.value))
	uni.navigateTo({
		url: '/pages/index/eye-examine-index'
	})
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #4A9FF5 0%, #FFFFFF 100%);
}

.bg-image {
	width: 100%;
	height: 200rpx;
	display: block;
}

.content {
	padding: 0 30rpx;
	margin-top: -300rpx;
	position: relative;
	z-index: 2;
}

.school-name {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	font-family: 'SimHei', 'Microsoft YaHei', sans-serif;
	color: #000;
	padding: 40rpx 30rpx 30rpx;
	border-bottom: 1px solid #eee;
	word-wrap: break-word;
	word-break: break-all;
	line-height: 1.5;
}

.form-box {
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 60rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.form-box :deep(.van-cell) {
	font-size: 36rpx;
	padding: 30rpx 16px;
	flex-direction: column;
	align-items: flex-start;
}

.form-box :deep(.van-field__label) {
	font-size: 36rpx;
	margin-bottom: 20rpx;
	width: 100%;
}

.form-box :deep(.van-field__control) {
	font-size: 36rpx;
	width: 100%;
}

.btn-box {
	padding: 0;
}

.btn-box :deep(.van-button) {
	height: 100rpx;
	font-size: 36rpx;
}

.error-page {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
}

.error-text {
	font-size: 32rpx;
	color: #999;
}
</style>