H5-frontend/business/add-student-hint.vue

<template>
	<view class="modal" v-if="visible">
		<view class="modal-content">
			<image :src="config.ossPathPerfixs + '/pop-up-bg.png'" mode="widthFix" class="modal-content-bg"></image>
			<view class="modal-content-box">
				<view class="modal-content-box-title">
					<text class="modal-content-box-title-text">温馨提示</text>
				</view>
				<view class="modal-content-box-section" v-html="innerHtml" v-if="innerHtml"></view>
				<fs-empty padding="100rpx 0" imageWidth="200rpx" v-else></fs-empty>
				<view class="modal-content-box-footer-btn">
					<fs-button round type="primary" @click="handleSubmit" :disabled="isDisabled">
						<text>我已阅读并同意</text>
						<text v-if="timerNum > 0">({{ timerNum }}s)</text>
					</fs-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import config from '@/utils/config'

const props = defineProps({
	time: {
		type: Number,
		default: 5
	}
})

const emits = defineEmits(['change'])

const visible = ref(false)
const timer = ref(null)
const timerNum = ref(0)
const isDisabled = computed(() => timerNum.value > 0)
const innerHtml = ref('')

onMounted(() => {
	visible.value = true
	timerNum.value = props.time
	timer.value = setInterval(() => {
		if (timerNum.value <= 0) return clearInterval(timer.value)
		timerNum.value -= 1
	}, 1000)
	getWarmPromptData()
})

const getWarmPromptData = async () => {
	// getWarmPrompt().then(res => {
	// 	innerHtml.value = res.data || ''
	// })
	innerHtml.value = `
		<p>为保障学生安全、规范信息管理并提升校园体验，现发布以下注意事项，请全体学生及家长予以重视和配合。</p>
		<p>录入信息时，请严格按学号顺序排列。‌</p>
		<p>姓名、身份证号必须与户口本信息完全一致。‌‌</p>
		<p>出生日期、入学年月等日期信息，应统一使用“YYYY-MM-DD”格式的阳历日期，并与身份证保持一致。‌‌‌</p>
	`
}
const handleSubmit = () => {
	if (isDisabled.value) return uni.showToast({ title: `${timerNum.value}s后可同意`, icon: 'none' })
	closeModal()
}

const closeModal = () => {
	visible.value = false
	emits('change', false)
}
</script>

<style lang="scss" scoped>
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;

	.modal-content {
		padding: 70rpx;
		border-radius: 50rpx;
		position: relative;

		.modal-content-bg {
			position: absolute;
			width: 100%;
			height: auto;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.modal-content-box {
			position: relative;
			z-index: 1;

			.modal-content-box-title {
				font-size: 32rpx;
				padding-bottom: 20rpx;
				font-weight: 700;
				text-align: center;
				color: #333;
				position: relative;

				&-text {
					position: relative;
					z-index: 1;
				}

				&::after {
					content: '';
					position: absolute;
					z-index: 0;
					bottom: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 160rpx;
					height: 16rpx;
					border-radius: 8rpx;
					background-image: linear-gradient(90deg, #0871FF 0%, #00EEA8 100%);
				}
			}

			.modal-content-box-section {
				min-height: 180rpx;
				max-height: 340rpx;
				overflow-y: auto;
				word-wrap: break-word;
			}

			.modal-content-box-footer-btn {
				padding-top: 20rpx;
				text-align: center;
			}
		}
	}
}
</style>