105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<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> |