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>
|