H5-frontend/pages/index/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="pa tw-top-[50rpx] tw-right-0 tw-z-20 tw-text-[#333] tw-text-[24rpx] tw-font-bold tw-px-[24rpx] tw-py-[10rpx] shadow tw-bg-[rgba(255,255,255,0.7)]"
			style="border-radius: 50rpx 0 0 50rpx;" @click="handleInstructions">
			操作指南
		</view>
		<view class="w-full pr tw-z-10 tw-pb-[10rpx]">
			<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>

			<view class="tw-px-[10rpx]">
				<fs-notice-bar :list="noticeList" :interval="3000" :showClose="false" :vertical="true"
					bgColor="rgba(255,255,255,0.8)" color="#333"></fs-notice-bar>
			</view>

			<view class="tw-px-[30rpx] tw-pb-[30rpx]">
				<view
					class="card-shadow tw-mt-[40rpx] tw-p-[40rpx] tw-pb-[70rpx] tw-flex direction-column justify-between align-center pr"
					style="background-color: rgba(255, 255, 255, 0.6);" v-if="studentList.length === 0">
					<fs-avatar width="416rpx" height="191rpx" src="/static/images/tool/add-empty.png"></fs-avatar>
					<view class="sub pa tw-z-10 tw-mt-[100rpx]">
						添加学生信息查看体检报告
					</view>
					<view class="pa tw-z-10 tw-mt-[160rpx]" @click="handAddStudent">
						<view class="pr">
							<fs-avatar class="pa tw-top-[-10rpx] tw-left-0" size="100rpx"
								src="/static/images/icon/add.png"></fs-avatar>
							<view class="tw-px-[40rpx] tw-py-[12rpx] tw-pl-[90rpx]"
								style="background: linear-gradient(-76deg, #00EEA8, #0871FF);border-radius: 50rpx;">
								<text class="tw-text-[#fff] tw-text-[28rpx]">添加学生</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card-shadow tw-mt-[40rpx] tw-p-[30rpx]" style="background-color: rgba(255, 255, 255, 0.6);"
					v-else>
					<fs-grid :columnNum="4" bgColor="transparent">
						<fs-grid-item v-for="(item, index) in studentList" :key="index"
							@click="handStudentDetail(item)">
							<view class="text-center">
								<fs-avatar size="120rpx"
									:src="`/static/images/avatar/${item.gender == '男' ? 'man' : 'girl'}.png`"></fs-avatar>
								<view class="tw-mt-[10rpx] tw-text-[26rpx] tw-text-[#333] tw-font-bold">{{ item.name }}
								</view>
							</view>
						</fs-grid-item>
						<fs-grid-item @click="handAddStudent">
							<view class="text-center">
								<fs-avatar size="120rpx" src="/static/images/tool/add-avatar.png"></fs-avatar>
								<view class="tw-mt-[10rpx] tw-text-[26rpx] tw-text-[#999]">添加学生</view>
							</view>
						</fs-grid-item>
					</fs-grid>
				</view>

				<view class="tw-mt-[30rpx]">
					<view class="title-line">
						<text>常用功能</text>
					</view>
				</view>
				<view class="tw-mt-[10rpx]">
					<fs-grid gutter="0" :columnNum="1" bgColor="transparent">
						<fs-grid-item @click="handReport">
							<view
								class="w-full h-full tw-flex tw-justify-between tw-items-center tw-bg-white card-shadow tw-text-left tw-px-[30rpx] tw-py-[20rpx]">
								<view class="tw-flex tw-items-center">
									<fs-avatar size="150rpx" shape="square" class="pr tw-top-[8rpx]"
										src="/static/images/menu/menua1.png"></fs-avatar>
									<view class="tw-text-[#333] tw-text-[30rpx] tw-font-bold tw-ml-[10rpx] line1">
										快速查询学生体检报告
									</view>
								</view>
								<fs-avatar size="36rpx" shape="square"
									src="/static/images/icon/right-arrow.png"></fs-avatar>
							</view>
						</fs-grid-item>
						<fs-grid-item @click="handleProsthetics">
							<view
								class="w-full h-full tw-flex tw-justify-between tw-items-center tw-bg-white card-shadow tw-text-left tw-px-[30rpx] tw-py-[20rpx]">
								<view class="tw-flex tw-items-center">
									<fs-avatar size="150rpx" shape="square" class="pr tw-top-[8rpx]"
										src="/static/images/menu/menua2.png"></fs-avatar>
									<view class="tw-text-[#333] tw-text-[30rpx] tw-font-bold tw-ml-[10rpx] line1">
										一键办理学生休复学
									</view>
								</view>
								<fs-avatar size="36rpx" shape="square"
									src="/static/images/icon/right-arrow.png"></fs-avatar>
							</view>
						</fs-grid-item>
						<fs-grid-item @click="handActivity">
							<view
								class="w-full h-full tw-flex tw-justify-between tw-items-center tw-bg-white card-shadow tw-text-left tw-px-[30rpx] tw-py-[20rpx]">
								<view class="tw-flex tw-items-center">
									<fs-avatar size="150rpx" shape="square" class="pr tw-top-[8rpx]"
										src="/static/images/menu/menua3.png"></fs-avatar>
									<view class="tw-text-[#333] tw-text-[30rpx] tw-font-bold tw-ml-[10rpx] line1">
										公益健康服务预约
									</view>
								</view>
								<fs-avatar size="36rpx" shape="square"
									src="/static/images/icon/right-arrow.png"></fs-avatar>
							</view>
						</fs-grid-item>
						<fs-grid-item @click="handleOnlineStudy">
							<view
								class="w-full h-full tw-flex tw-justify-between tw-items-center tw-bg-white card-shadow tw-text-left tw-px-[30rpx] tw-py-[20rpx]">
								<view class="tw-flex tw-items-center">
									<fs-avatar size="150rpx" shape="square" class="pr tw-top-[8rpx]"
										src="/static/images/menu/menua4.png"></fs-avatar>
									<view class="tw-text-[#333] tw-text-[30rpx] tw-font-bold tw-ml-[10rpx] line1">
										保健E课堂在线学习
									</view>
								</view>
								<fs-avatar size="36rpx" shape="square"
									src="/static/images/icon/right-arrow.png"></fs-avatar>
							</view>
						</fs-grid-item>
					</fs-grid>
				</view>
			</view>
		</view>
	</view>
	<addStudentHint v-if="showAddStudentHint" @change="handleChange"></addStudentHint>
	<timeHint v-if="isShowtimeHint" :time="0" title="系统公告" :text="noticeInfo.content" @change="handleReserve">
	</timeHint>
</template>

<script setup>
import config from '@/utils/config'
import { useUserStore } from '@/stores/user'
import addStudentHint from '@/business/add-student-hint'
import timeHint from '@/business/time-hint'

const user = useUserStore()
const userInfo = computed(() => user.userInfo)
const openId = computed(() => user.openId)

const showAddStudentHint = ref(false)
const studentList = ref([])

const isShowtimeHint = ref(false)
const noticeInfo = ref({})

const noticeList = ref([
	{
		title: '本年度体检结果开放查询情况总览',
		url: '/modules/common/notice/notice-school-list',
	},
	{
		title: '本年度体检结果开放查询情况总览',
		url: '/modules/common/notice/notice-school-list',
	},
	{
		title: '本年度体检结果开放查询情况总览',
		url: '/modules/common/notice/notice-school-list',
	},
])

onLoad(() => {
	getNoticeData()
})

onShow(() => {
	getStudentList()
})

onPullDownRefresh(async () => {
	await getNoticeData()
	await getStudentList()
	uni.stopPullDownRefresh()
})

// 获取学生列表
const getStudentList = () => {
	return new Promise((resolve) => {
		if (openId.value) {
			// getBindStudentList({ openId: openId.value }).then(res => {
			// 	studentList.value = res.data || []
			// }).catch().finally(() => {
			// 	resolve()
			// })
			studentList.value = [
				{
					name: '张三',
					gender: '男',
					grade: '六年级',
					class: '1班',
					avatar: 'https://img2.baidu.com/it/u=3139169729,4118257360&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
				}
			]
			resolve()
		}
	})
}

// 获取公告
const getNoticeData = () => {
	return new Promise((resolve) => {
		// getNotice().then(res => {
		// 	if (res.success) {
		// 		noticeInfo.value = res.data || {}
		// 		if (noticeInfo.value.open) isShowtimeHint.value = true
		// 	}
		// }).finally(() => {
		// 	resolve()
		// })
		noticeInfo.value = {
			title: '2023年体测结果查询',
			content: '2023年体测结果查询',
			open: true,
			url: '/modules/common/notice/notice-school-list',
		}
		resolve()
	})
}
const handleReserve = (data) => {
	isShowtimeHint.value = data
}


const handleChange = () => {
	showAddStudentHint.value = false
	uni.navigateTo({
		url: '/modules/common/student/student-query'
	})
}

// 操作指南
const handleInstructions = () => {
	const url = `https://zxxwiki.sxidc.com/zh/%E5%B8%AE%E5%8A%A9%E4%B8%AD%E5%BF%83/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8/%E5%AE%B6%E9%95%BF%E5%85%A5%E9%97%A8`
	uni.navigateTo({
		url: `/modules/common/web-view?url=${encodeURIComponent(url)}`
	})
}
// 去添加
const handAddStudent = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	showAddStudentHint.value = true
}
// 去查看体检报告
const handReport = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	uni.navigateTo({
		url: `/modules/common/student/student-report-list`
	})
}
// 学生休复学
const handleProsthetics = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	uni.navigateTo({
		url: `/modules/common/student-prosthetics/index`
	})
}
// 公益活动
const handActivity = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	uni.navigateTo({
		url: `/modules/activity/activity-list`
	})
}
// 在线学习
const handleOnlineStudy = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	uni.navigateTo({
		url: `/modules/class/class`
	})
}

// 学生详情
const handStudentDetail = (item) => {
	uni.navigateTo({
		url: '/modules/common/student/student-detail?data=' + encodeURIComponent(JSON.stringify({
			req_data: item,
			res_data: { exist: true, bind: true, student: item }
		}))
	})
}

</script>

<style lang="scss" scoped>
::v-deep .fs-grid-item {
	padding: 10rpx 0 !important;
}
</style>