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

<template>
	<view class="page">
		<view class="bg-gradient"></view>
		<van-nav-bar title="视力数据详情" 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">
				<text class="label">左眼远视力</text>
				<input class="value-input" v-model="formData.leftVision" type="digit" placeholder="请输入" @blur="formatVision('leftVision')" />
			</view>

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

			<view class="section-header" style="margin-top: 40rpx;">
				<text class="section-title">屈光度数据</text>
			</view>

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

			<view class="form-item">
				<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 { getStudentVisionData, updateVisionData } from '@/services/common'

const studentInfo = ref({})
const schoolName = ref('')
const visionDataId = ref('')
const userName = ref('')
const userPhone = ref('')

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

onLoad(async (options) => {
	studentInfo.value = {
		id: options.studentId || '',
		name: decodeURIComponent(options.studentName || ''),
		gender: decodeURIComponent(options.studentGender || ''),
		idCard: decodeURIComponent(options.studentIdCard || ''),
		class: `${decodeURIComponent(options.grade || '')} ${decodeURIComponent(options.className || '')}`
	}
	
	schoolName.value = decodeURIComponent(options.schoolName || '')
	userName.value = decodeURIComponent(options.userName || '')
	userPhone.value = decodeURIComponent(options.userPhone || '')
	
	await fetchVisionData()
})

const fetchVisionData = async () => {
	try {
		const res = await getStudentVisionData(studentInfo.value.id)
		if (res && res.code === 200 && res.data) {
			const data = res.data
			visionDataId.value = data.id || ''
			formData.value.leftVision = data.left_eye_vision !== null && data.left_eye_vision !== undefined ? data.left_eye_vision : ''
			formData.value.rightVision = data.right_eye_vision !== null && data.right_eye_vision !== undefined ? data.right_eye_vision : ''
			formData.value.leftRefraction = data.left_eye_refraction !== null && data.left_eye_refraction !== undefined ? data.left_eye_refraction : ''
			formData.value.rightRefraction = data.right_eye_refraction !== null && data.right_eye_refraction !== undefined ? data.right_eye_refraction : ''
		}
	} catch (error) {
		console.error('获取视力数据失败', error)
	}
}

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

const handleSave = async () => {
	if (!formData.value.leftVision || !formData.value.rightVision || !formData.value.leftRefraction || !formData.value.rightRefraction) {
		return uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
	}
	
	try {
		const params = {
			left_eye_vision: parseFloat(formData.value.leftVision),
			right_eye_vision: parseFloat(formData.value.rightVision),
			left_eye_refraction: parseFloat(formData.value.leftRefraction),
			right_eye_refraction: parseFloat(formData.value.rightRefraction),
			input_user: userName.value,
			operator_phone: userPhone.value
		}
		
		const res = await updateVisionData(visionDataId.value, params)
		if (res && res.code === 200) {
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 1000
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
	} catch (error) {
		console.error('保存失败', error)
	}
}

const onBack = () => {
	uni.navigateBack()
}
</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-input {
	font-size: 32rpx;
	font-weight: bold;
	color: #0063F5;
	flex: 1;
	text-align: center;
}

.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>