71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<view class="pay-main">
|
||
<view class="pay-title">支付成功</view>
|
||
<view class="pay-amount">支付金额：{{ vdata.amount }}元</view>
|
||
</view>
|
||
<view class="but-box">
|
||
<JButton @tap="toIndexPage(true)">返回首页（{{ vdata.num }}）</JButton>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||
onLoad((options) => {
|
||
console.log('支付成功页', options)
|
||
vdata.amount = options.amount
|
||
vdata.num = 10
|
||
toIndexPage()
|
||
})
|
||
const vdata = reactive({
|
||
num: 10,
|
||
})
|
||
let timeOut = undefined
|
||
function toIndexPage(flag) {
|
||
if (flag || vdata.num <= 0) {
|
||
clearTimeout(timeOut)
|
||
return uni.redirectTo({
|
||
url: '/pages/index/index',
|
||
})
|
||
}
|
||
timeOut = setTimeout(() => {
|
||
vdata.num -= 1
|
||
toIndexPage()
|
||
}, 1000)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
padding: 0.1rpx;
|
||
min-height: calc(100vh - 2rpx);
|
||
}
|
||
.pay-main {
|
||
padding: 0.1rpx;
|
||
margin: 180rpx auto;
|
||
width: 80%;
|
||
|
||
background: linear-gradient(135deg, rgba(86, 222, 114, 1) 0%, rgba(58, 233, 174, 1) 100%);
|
||
color: #fff;
|
||
border-radius: 14rpx;
|
||
.pay-title {
|
||
margin: 30rpx 0;
|
||
text-align: center;
|
||
font-size: 42rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
.pay-amount {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
.but-box {
|
||
transform: translateY(200rpx);
|
||
}
|
||
</style>
|