H5-frontend/pages/index/vision-input.vue

<template>
	<view class="page">
		<view class="bg-gradient"></view>
		<van-nav-bar :title="inputType === 'vision' ? '视力录入' : '屈光度录入'" left-arrow @click-left="onBack" fixed :z-index="999" />
		<view class="header">
			<view class="student-info">
				<view class="info-row">
					<image class="gender-icon" :src="studentInfo.gender === '男' ? '/static/images/icon/man.png' : '/static/images/icon/woman.png'" mode="aspectFit"></image>
					<text class="student-name">{{ studentInfo.name }}</text>
				</view>
				<view class="detail-row">
					<text>学校：{{ schoolName }}</text>
				</view>
				<view class="detail-row">
					<text>班级：{{ studentInfo.class }}</text>
				</view>
				<view class="detail-row">
					<text>身份证：{{ studentInfo.idCard }}</text>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="section-header">
				<text class="section-title">眼科检查</text>
			</view>

			<view class="form-item" v-if="inputType === 'vision'">
				<text class="label">左眼远视力</text>
				<input class="value-input" v-model="formData.leftVision" type="digit" placeholder="请输入" @blur="formatVision('leftVision')" />
			</view>

			<view class="form-item" v-if="inputType === 'vision'">
				<text class="label">右眼远视力</text>
				<input class="value-input" v-model="formData.rightVision" type="digit" placeholder="请输入" @blur="formatVision('rightVision')" />
			</view>

			<view class="form-item" v-if="inputType === 'refraction'">
				<text class="label">左眼屈光度</text>
				<input class="value-input" v-model="formData.leftRefraction" type="number" placeholder="请输入" />
			</view>

			<view class="form-item" v-if="inputType === 'refraction'">
				<text class="label">右眼屈光度</text>
				<input class="value-input" v-model="formData.rightRefraction" type="number" placeholder="请输入" />
			</view>
		</view>

		<view class="footer">
			<view class="footer-btns">
				<van-button plain type="primary" round size="large" @click="onBack" icon="replay">返回</van-button>
				<van-button type="primary" round size="large" icon="success" @click="handleSave">保存</van-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { inputVisionData, inputRefractionData } from '@/services/common'

const STORAGE_KEY = 'eye_examine_user_info'
const userInfo = ref({})
const studentInfo = ref({})
const inputType = ref('')
const visionDataId = ref('')
const schoolName = ref('')

const formData = ref({
	leftVision: '',
	rightVision: '',
	leftRefraction: '',
	rightRefraction: ''
})

onLoad((options) => {
	studentInfo.value = {
		id: options.studentId || '',
		name: decodeURIComponent(options.studentName || ''),
		gender: decodeURIComponent(options.studentGender || ''),
		idCard: decodeURIComponent(options.studentIdCard || ''),
		classId: options.classId || '',
		class: `${decodeURIComponent(options.grade || '')} ${decodeURIComponent(options.className || '')}`
	}
	
	inputType.value = options.type || ''
	visionDataId.value = options.visionDataId || ''
	schoolName.value = decodeURIComponent(options.schoolName || '')
	
	userInfo.value = {
		name: decodeURIComponent(options.userName || ''),
		phone: decodeURIComponent(options.userPhone || ''),
		organization: decodeURIComponent(options.userOrg || '')
	}
})

const onBack = () => {
	uni.navigateBack({
		delta: 1
	})
}

const formatVision = (field) => {
	const value = parseFloat(formData.value[field])
	if (!isNaN(value)) {
		formData.value[field] = value.toFixed(1)
	}
}

const handleSave = async () => {
	if (inputType.value === 'vision') {
		if (!formData.value.leftVision || !formData.value.rightVision) {
			return uni.showToast({
				title: '请填写完整视力信息',
				icon: 'none'
			})
		}
		
		try {
			const params = {
				student_id: parseInt(studentInfo.value.id),
				left_eye_vision: parseFloat(formData.value.leftVision),
				right_eye_vision: parseFloat(formData.value.rightVision),
				input_user: userInfo.value.name,
				operator_phone: userInfo.value.phone
			}
			
			if (visionDataId.value) {
				params.vision_data_id = visionDataId.value
			}
			
			const res = await inputVisionData(params)
			if (res && res.code === 200) {
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack({ delta: 2 })
				}, 1000)
			}
		} catch (error) {
			console.error('保存视力数据失败', error)
		}
	} else if (inputType.value === 'refraction') {
		if (!formData.value.leftRefraction || !formData.value.rightRefraction) {
			return uni.showToast({
				title: '请填写完整屈光度信息',
				icon: 'none'
			})
		}
		
		try {
			const params = {
				student_id: parseInt(studentInfo.value.id),
				left_eye_refraction: parseFloat(formData.value.leftRefraction),
				right_eye_refraction: parseFloat(formData.value.rightRefraction),
				input_user: userInfo.value.name,
				operator_phone: userInfo.value.phone
			}
			
			if (visionDataId.value) {
				params.vision_data_id = visionDataId.value
			}
			
			const res = await inputRefractionData(params)
			if (res && res.code === 200) {
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack({ delta: 2 })
				}, 1000)
			}
		} catch (error) {
			console.error('保存屈光度数据失败', error)
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	position: relative;
}

.bg-gradient {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, #4A9FF5 0%, #E8F5FF 100%);
	z-index: 0;
	pointer-events: none;
}

.header {
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + 46px);
	position: relative;
	z-index: 1;
}

.student-info {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
}

.info-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.gender-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.student-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.detail-row {
	font-size: 26rpx;
	color: #666;
	margin-top: 10rpx;
}

.content {
	padding: 30rpx;
	position: relative;
	z-index: 1;
	padding-bottom: 150rpx;
}

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

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.form-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.label {
	font-size: 28rpx;
	color: #333;
}

.value {
	font-size: 32rpx;
	font-weight: bold;
	color: #0063F5;
	flex: 1;
	text-align: center;
}

.value-input {
	font-size: 32rpx;
	font-weight: bold;
	color: #0063F5;
	flex: 1;
	text-align: center;
}

.edit-icon {
	width: 40rpx;
	height: 40rpx;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: #fff;
	z-index: 10;
}

.footer-btns {
	display: flex;
	gap: 20rpx;
	
	button {
		flex: 1;
	}
}
</style>