新生报到移动端V1.0

pages/payreading/payreading.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="rading">
+		<view v-if="!canEnter">
+			<!-- 倒计时内容 -->
+			<p>
+				缴费须知：
+			</p>
+			<p>
+				1. 请确保您已阅读并理解本页面的服务条款和费用说明。<br>
+				2. 在开始支付之前，请确认您所输入的支付金额和相关信息准确无误。<br>
+				3. 支付成功后，请耐心等待系统处理您的支付请求，不要重复支付以避免重复扣款。<br>
+				4. 如遇到支付问题或有任何疑问，请及时联系客服获取帮助，避免造成不必要的损失或困扰。<br>
+
+				感谢您的配合与支持！<br><br>
+			</p>
+			<p style="color: red;margin-bottom: 15rpx;">请在倒计时结束后勾选已阅读</p>
+
+			<checkbox-group>
+				<checkbox :disabled="countdown > 0" v-model="checkboxValue" @change="checkboxChange">已阅读</checkbox>
+			</checkbox-group>
+			<button @click="markAsEntered" :disabled="countdown > 0"
+				class="togo">{{ countdown > 0 ? '倒计时 ' + countdown + ' 秒进入页面' : '点击进入' }}</button>
+		</view>
+		<view v-else>
+			<!-- 进入页面的内容 -->
+			<p>欢迎进入页面</p>
+			<button @click="topay" class="welcome">进入缴费</button>
+		</view>
+		<FloatBall />
+	</view>
+</template>
+
+<script>
+	import FloatBall from "@/pages/compoents/FloatBall.vue";
+	export default {
+		components: {
+			FloatBall
+		},
+		data() {
+			return {
+				countdown: 10,
+				checkboxValue: "false", // 字符串类型
+				canEnter: false,
+				timer: null,
+			};
+		},
+		created() {
+			this.startCountdown();
+		},
+		methods: {
+			startCountdown() {
+				this.timer = setInterval(() => {
+					if (this.countdown > 0) {
+						this.countdown--;
+					} else {
+						clearInterval(this.timer);
+					}
+				}, 1000);
+			},
+			markAsEntered() {
+				if (this.countdown === 0 && this.checkboxValue) {
+					this.canEnter = true;
+					uni.navigateTo({
+						url: "/pages/pay/index"
+					})
+				} else {
+					uni.showToast({
+						title: '请在倒计时结束后选择复选框',
+						icon: 'none'
+					});
+				}
+			
+			},
+			checkboxChange(value) {
+				this.checkboxValue = value;
+			},
+			topay() {
+				uni.navigateTo({
+					url: "/pages/pay/index"
+				})
+			}
+		},
+		destroyed() {
+			clearInterval(this.timer); // 每次离开页面时清除定时器
+		},
+	};
+</script>
+<style>
+	.rading {
+		padding: 0 40rpx;
+	}
+
+	.togo {
+		width: 80%;
+		margin-top: 40rpx;
+		background-color: skyblue;
+		color: white;
+	}
+
+	.welcome {
+		margin-top: 40rpx;
+		background-color: skyblue;
+		color: white;
+	}
+</style>