136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<template>
|
||
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.5)" :safe-area="false">
|
||
<view class="pay-wrapper">
|
||
<view class="pay-header-wrapper">
|
||
<view class="pay-img">
|
||
<image src="/static/iconImg/icon-success.svg" mode="scaleToFill" />
|
||
<view class="pay-tips">支付成功</view>
|
||
</view>
|
||
<view class="pay-number">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
|
||
</view>
|
||
<view class="time-out flex-center">
|
||
<text>{{ vdata.subTime }}S</text> 后自动返回
|
||
</view>
|
||
<view class="list-footer">
|
||
<view class="button-wrapper" style="border: none; background-color: transparent; backdrop-filter: none;">
|
||
<Button @tap="close">确认</Button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||
import timer from '@/commons/utils/timer.js'
|
||
import cal from '@/commons/utils/cal.js'
|
||
|
||
const emit = defineEmits(['close'])
|
||
|
||
const vdata = reactive({
|
||
|
||
orderInfo: { }, // 订单信息
|
||
|
||
subTime: 5,
|
||
|
||
isClosed: false, // 是否已经明确关闭， 避免点击按钮与定时同时触发。
|
||
|
||
})
|
||
const popup = ref(null)
|
||
|
||
// 打开弹窗 val 收款金额
|
||
const open = (orderInfo) => {
|
||
|
||
// 订单信息
|
||
vdata.orderInfo = orderInfo
|
||
|
||
// 剩余时间重置
|
||
vdata.subTime = 5
|
||
|
||
vdata.isClosed = false
|
||
|
||
popup.value.open()
|
||
|
||
// nextTick 用作， 显示页面后再倒计时， 否则直接显示了 4s .
|
||
nextTick(() => {
|
||
|
||
// 执行递归函数 1秒 一次
|
||
timer.startTimeoutTask(1, 5, (subTime) => {
|
||
|
||
// 第一个判断是task任务结束， 第二个判断是 手动关闭的判断。
|
||
if (subTime <= 0 || vdata.subTime <= 0) {
|
||
close()
|
||
return false;
|
||
}
|
||
|
||
vdata.subTime = subTime
|
||
return true;
|
||
})
|
||
})
|
||
}
|
||
|
||
const close = () => {
|
||
|
||
if(vdata.isClosed){
|
||
return false;
|
||
}
|
||
emit('close') //回调函数 close
|
||
|
||
vdata.isClosed = true
|
||
|
||
popup.value.close()
|
||
vdata.subTime = 0 ; // 避免进入下一次task
|
||
}
|
||
|
||
defineExpose({ open, close })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pay-wrapper {
|
||
padding: 0.1rpx;
|
||
height: 100vh;
|
||
.pay-header-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
margin-top: 108rpx;
|
||
width: 670rpx;
|
||
height: 500rpx;
|
||
border-radius: $J-b-r32;
|
||
background-image: url('/static/bgImg/quik-bg-img.svg');
|
||
.pay-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.pay-tips {
|
||
margin-top: 10rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #1abb51;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.pay-number {
|
||
font-size: 50rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.time-out {
|
||
margin-top: 30rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 30rpx;
|
||
text {
|
||
margin-right: 15rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|