onlinenew_h5/pages/read/read.vue

<template>
	<view class="container">
		<!-- 标题区域 -->
		<view class="title">
			<view class="">新生报到安全须知</view>
			<view class="">请仔细阅读以下内容，确保平安顺利报到</view>
		</view>

		<!-- 内容区域 -->
		<view class="body">
			<view class="body_title">
				<view class="title_dot"></view>
				<view class="title_text">来校前准备</view>
			</view>

			<view class="prepare_box">
				<view class="box_title">形成规划</view>
				<view class="box_text">选择正规交通工具，避开深夜抵达车次，严禁乘坐"黑车"或私下拼车</view>
			</view>

			<view class="prepare_box">
				<view class="box_title">报到准备</view>
				<view class="box_text">提前完成线上流程：信息填报 → 缴费认证 → 宿舍选择 → 车牌预约</view>
			</view>

			<view class="prepare_box">
				<view class="box_title">物品保管</view>
				<view class="box_text">重要证件单独存放，行李标注姓名电话，随身现金不超过500元</view>
			</view>

			<view class="body_title">
				<view class="title_dot"></view>
				<view class="title_text">到校途中安全</view>
			</view>

			<view class="safe_box">
				<view class="box_top">
					<image class="top_img" src="/static/1.png" mode="aspectFill"></image>
					<view class="top_text">交通风险</view>
				</view>
				<view class="box_bottom">遵守交规，避开车辆盲区，不追逐打闹</view>
			</view>

			<view class="safe_box">
				<view class="box_top">
					<image class="top_img" src="/static/1.png" mode="aspectFill"></image>
					<view class="top_text">诈骗风险</view>
				</view>
				<view class="box_bottom">警惕"代缴学费"电话，不扫陌生二维码</view>
			</view>

			<view class="safe_box">
				<view class="box_top">
					<image class="top_img" src="/static/1.png" mode="aspectFill"></image>
					<view class="top_text">盗窃风险</view>
				</view>
				<view class="box_bottom">背包前置，手机握持，休息时固定行李</view>
			</view>

			<view class="body_title">
				<view class="title_dot"></view>
				<view class="title_text">紧急情况处理</view>
			</view>

			<view class="instancy_box">
				<view class="box_item">
					<view class="item_title">物品遗失</view>
					<view class="item_text">联系车站广播/警方(110)</view>
				</view>
				<view class="box_item">
					<view class="item_title">遭遇诈骗</view>
					<view class="item_text">校保卫处: 020-12345678</view>
				</view>
				<view class="box_item">
					<view class="item_title">身体不适</view>
					<view class="item_text">途中: 求助乘务员/拨打120</view>
				</view>
				<view class="box_item">
					<view class="item_title">校内急诊</view>
					<view class="item_text">校医院: 第一教学楼东侧</view>
				</view>
			</view>

			<view class="body_title">
				<view class="title_dot"></view>
				<view class="title_text">重要安全提醒</view>
			</view>

			<view class="import_box">
				<view class="">1. 所有缴费仅通过学校官方平台操作</view>
				<view class="">2. 宿舍分配以"我的报到单"为准</view>
				<image class="box_img" src="/static/2.png" mode="aspectFill"></image>
			</view>

			<!-- <uv-parse :content="safetyNotice"></uv-parse> -->

			<!-- 安全须知勾选区域 -->
			<view class="check">
				<checkbox :checked="isCheck" @click="handleCheck" />
				我已阅读并理解以上安全须知
			</view>

			<!-- 下一步按钮区域 -->
			<view class="btn" :class="{ active: isCheck }" @click="handleNext">下一步</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getInfoByTokenReq, getSettingsInfoReq } from '@/api/index.js'

// 是否勾选安全须知
const isCheck = ref(false)

// 安全须知内容
const safetyNotice = ref()

onLoad(() => {
	// 获取用户信息
	getInfoByToken()

	// 获取设置数据
	getSettingsInfo()
})

// 获取用户信息
const getInfoByToken = async () => {
	const res = await getInfoByTokenReq()
	// console.log(res)
	if (res.code == 200) {
		uni.setStorageSync('studentInfo', res.data)
		// uni.setStorageSync('TOKEN', res.data.token)
	}
}

// 获取设置数据
const getSettingsInfo = async () => {
	const res = await getSettingsInfoReq()
	// console.log(res)
	if (res.code == 200) {
		safetyNotice.value = res.data.safetyNotice
	}
}

// 勾选框切换回调
const handleCheck = () => {
	isCheck.value = !isCheck.value
}

// 点击下一步按钮回调
const handleNext = () => {
	if (isCheck.value) {
		uni.navigateTo({
			url: '/pages/info/info'
		})
	} else {
		uni.showToast({
			title: '请先勾选安全须知',
			icon: 'none',
			mask: true
		})
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f9ff;

	.title {
		padding: 20rpx 30rpx 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 46rpx;
		background-color: #fff;
	}

	.body {
		padding: 30rpx;
		margin-top: 10rpx;
		background-color: #fff;

		.body_title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.title_dot {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #0061ff;
			}

			.title_text {
				margin-left: 15rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.prepare_box {
			margin-bottom: 16rpx;
			padding-left: 55rpx;

			.box_title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.box_text {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 38rpx;
			}
		}

		.safe_box {
			margin-bottom: 24rpx;

			.box_top {
				display: flex;
				align-items: center;

				.top_img {
					width: 47rpx;
					height: 47rpx;
				}

				.top_text {
					margin-left: 14rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.box_bottom {
				padding-left: 55rpx;
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 38rpx;
			}
		}

		.instancy_box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			gap: 20rpx 40rpx;
			margin-bottom: 32rpx;

			.box_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 325rpx;
				height: 170rpx;
				border-radius: 4rpx;
				background-color: #f5f9ff;

				.item_title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.item_text {
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.import_box {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 32rpx;
			height: 152rpx;
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #fff2f2;

			.box_img {
				position: absolute;
				top: 35rpx;
				right: -7rpx;
				width: 156rpx;
				height: 156rpx;
			}
		}

		.check {
			margin-top: 32rpx;
			font-size: 28rpx;
		}

		.btn {
			margin-top: 55rpx;
			margin-bottom: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #ccc;
		}

		.active {
			background-color: #0061ff;
		}
	}
}
</style>