H5-frontend/pages/index/eye-examine-index.vue

<template>
	<view class="wrap pr">
		<view class="w-full pa tw-top-0 tw-left-0 tw-z-0">
			<image class="w-full" :src="config.ossPathPerfixs + '/index-bg.png'" mode="widthFix"></image>
		</view>
		<view class="w-full pr tw-z-10">
			<view class="tw-p-[30rpx]">
				<view class="tw-flex tw-items-center tw-justify-start tw-mt-[60rpx]">
					<fs-avatar size="100rpx" src="/static/images/tool/logo.png"></fs-avatar>
					<text class="tw-text-[#fff] tw-text-[26rpx] tw-ml-[4rpx]"
						style="letter-spacing: 1rpx;">太原市中小学学生卫生保健所</text>
				</view>
				<view class="tw-mt-[20rpx] tw-text-[#fff] tw-text-[32rpx] tw-font-bold">
					学校：{{ schoolInfo.name || userInfo.organization || '暂无学校信息' }}
				</view>
			</view>
			
			<view class="switch-btn" @click="switchInputMethod">
				<van-icon name="exchange" size="20" color="#fff" />
				<text class="switch-text">切换录入方式</text>
			</view>
			
			<view class="tw-px-[30rpx] tw-mt-[40rpx] tw-pb-[100rpx]">
				<view class="tw-bg-white tw-rounded-[20rpx] tw-overflow-hidden" style="height: calc(100vh - 400rpx);">
					<view class="tw-flex tw-h-full">
						<view class="grade-list">
							<view 
								v-for="grade in grades" 
								:key="grade" 
								:class="['grade-item', selectedGrade === grade ? 'active' : '']"
								@click="selectGrade(grade)"
							>
								{{ grade }}
							</view>
						</view>
						<view class="class-list">
							<view 
								v-for="cls in classes" 
								:key="cls.id" 
								class="class-item"
								@click="selectClass(cls)"
							>
								{{ cls.class_name }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import config from '@/utils/config'
import { getSchoolInfo, getSchoolGrades, getGradeClasses } from '@/services/common'

const STORAGE_KEY = 'eye_examine_user_info'
const userInfo = ref({})
const schoolInfo = ref({})

const grades = ref([])
const classes = ref([])
const selectedGrade = ref('')

onLoad(async () => {
	const savedData = uni.getStorageSync(STORAGE_KEY)
	if (savedData) {
		userInfo.value = JSON.parse(savedData)
	}
	
	const schoolId = userInfo.value.schoolId || ''
	if (!schoolId) {
		return uni.showToast({
			title: '缺少学校ID',
			icon: 'none'
		})
	}
	
	try {
		const [schoolRes, gradesRes] = await Promise.all([
			getSchoolInfo(schoolId),
			getSchoolGrades(schoolId)
		])
		
		if (schoolRes && schoolRes.code === 200) {
			schoolInfo.value = schoolRes.data
		}
		
		if (gradesRes && gradesRes.code === 200) {
			grades.value = gradesRes.data.grades || []
			if (grades.value.length > 0) {
				selectGrade(grades.value[0])
			}
		}
	} catch (error) {
		console.error('获取数据失败', error)
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		})
	}
})

const selectGrade = async (grade) => {
	selectedGrade.value = grade
	classes.value = []
	
	const schoolId = userInfo.value.schoolId || ''
	
	try {
		const res = await getGradeClasses(schoolId, grade)
		if (res && res.code === 200) {
			classes.value = res.data.list || []
		}
	} catch (error) {
		console.error('获取班级列表失败', error)
		uni.showToast({
			title: '获取班级列表失败',
			icon: 'none'
		})
	}
}

const selectClass = (cls) => {
	const params = {
		classId: cls.id,
		className: cls.class_name,
		grade: selectedGrade.value,
		schoolName: schoolInfo.value.name || '',
		userName: userInfo.value.name || '',
		userPhone: userInfo.value.phone || '',
		userOrg: userInfo.value.organization || ''
	}
	uni.navigateTo({
		url: `/pages/index/student-list?${Object.keys(params).map(k => `${k}=${encodeURIComponent(params[k])}`).join('&')}`
	})
}

const switchInputMethod = () => {
	uni.navigateTo({
		url: '/pages/index/input-method-select'
	})
}
</script>

<style lang="scss" scoped>
.switch-btn {
	position: fixed;
	right: 30rpx;
	bottom: 10%;
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background: #0063F5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 99, 245, 0.3);
	z-index: 999;
}

.switch-text {
	font-size: 22rpx;
	font-weight: bold;
	color: #fff;
	margin-top: 8rpx;
	text-align: center;
	line-height: 1.2;
}

.grade-list {
	width: 200rpx;
	background: #f5f5f5;
	overflow-y: auto;
	height: 100%;
}

.grade-item {
	padding: 30rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333;
	border-left: 4rpx solid transparent;
}

.grade-item.active {
	background: #fff;
	color: #0063F5;
	border-left-color: #0063F5;
}

.class-list {
	flex: 1;
	padding: 20rpx;
	overflow-y: auto;
	height: 100%;
}

.class-item {
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
	background: #f5f5f5;
	border-radius: 10rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333;
}
</style>