109 lines
1.9 KiB
Vue
109 lines
1.9 KiB
Vue
<template>
|
||
<div class="container">
|
||
|
||
<view class="white-content">
|
||
<image class="white-img" src="https://www.focusnu.com/media/directive/index/account/success.png" />
|
||
<view class="white-font">
|
||
缴费成功
|
||
</view>
|
||
<view class="bottom-font">
|
||
<text style="color: #068DFF;">{{ seconds }}秒后</text>自动跳转到长者端 ...
|
||
</view>
|
||
</view>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from 'vue'
|
||
import {
|
||
onLoad,
|
||
onUnload
|
||
} from '@dcloudio/uni-app';
|
||
|
||
const seconds = ref(6)
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
let timer = null
|
||
|
||
onLoad(() => {
|
||
// 保证每次进页面都从 6 开始
|
||
seconds.value = 6
|
||
|
||
// 每 1 秒减 1，减到 0 清理计时器（不做其他动作）
|
||
timer = setInterval(() => {
|
||
if (seconds.value > 0) {
|
||
seconds.value -= 1
|
||
} else {
|
||
clearInterval(timer)
|
||
timer = null;
|
||
goToBack()
|
||
}
|
||
}, 1000)
|
||
})
|
||
|
||
// 页面卸载时清理（防止内存泄漏）
|
||
onUnload(() => {
|
||
if (timer) {
|
||
clearInterval(timer)
|
||
timer = null
|
||
}
|
||
})
|
||
const goToBack = () => {
|
||
uni.reLaunch({
|
||
url: '/pages/oldmanindex/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
background-color: #F7F7F7;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.white-content {
|
||
width: 70%;
|
||
height: 600rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: -50rpx;
|
||
position: relative;
|
||
|
||
.white-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.white-font {
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.bottom-font {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style> |