onlinenew_h5/pages/read/read.vue

<template>
	<view class="container" v-if="info">
		<view class="img_bg"></view>

		<image class="img_logo" src="/static/13.png" mode="aspectFill"></image>

		<image class="img_right" src="/static/14.png" mode="aspectFill"></image>

		<view class="name">{{ info.name }}同学</view>

		<view class="welcome">南昌交通学院欢迎您!</view>

		<!-- 内容区域 -->
		<scroll-view class="body" scroll-y>
			<uv-parse :content="safetyNotice"></uv-parse>

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

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

		<view class="btn margin" @click="logout">退出登录</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()

// 学生信息
const info = ref()

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

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

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

// 获取设置数据
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
		})
	}
}

// 退出登录回调
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '确定退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				let urlstr = uni.getStorageSync('urlstr')
				uni.clearStorageSync()
				window.location.href = `https://chtech.ncjti.edu.cn/welcome/welcomeH5/#/?urlstr=${urlstr}`
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 50rpx;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;

	.img_bg {
		width: 100%;
		height: 1110rpx;
		background-image: url(@/static/12.png);
		background-size: cover;
	}

	.img_logo {
		position: absolute;
		top: 29rpx;
		left: 35rpx;
		width: 309rpx;
		height: 84rpx;
	}

	.img_right {
		position: absolute;
		top: -90rpx;
		right: -120rpx;
		width: 408rpx;
		height: 408rpx;
	}

	.name {
		position: absolute;
		top: 180rpx;
		width: 100%;
		font-size: 70rpx;
		font-weight: bold;
		color: #0061ff;
		text-align: center;
	}

	.welcome {
		position: absolute;
		top: 289rpx;
		width: 100%;
		font-size: 70rpx;
		font-weight: bold;
		color: #0061ff;
		text-align: center;
	}

	.body {
		position: absolute;
		top: 829rpx;
		left: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		width: 711rpx;
		height: 356rpx;
		border: 2rpx solid #808080;
		overflow-y: auto;

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

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 125rpx auto 0;
		width: 711rpx;
		height: 100rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #ccc;
	}

	.active {
		background-color: #0061ff;
	}

	.margin {
		margin-top: 35rpx;
		background-color: #0061ff;
	}
}
</style>