135 lines
4.1 KiB
Vue
135 lines
4.1 KiB
Vue
<template>
|
||
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
||
<view>
|
||
<div class="body"></div>
|
||
<view style="width: 100%;height: 50vh;display: flex;flex-direction: column;align-items: center;">
|
||
<view style="margin-top: 20vh;margin-bottom: 40rpx;font-size: 30rpx;" v-if="counting">
|
||
<text>充值中，请稍后...</text>
|
||
<text>{{counter}}s</text>
|
||
</view>
|
||
<u-loading-icon color="#ff6633" size="36" v-if="counting"></u-loading-icon >
|
||
|
||
|
||
<view style="margin-top: 20vh;display: flex;flex-direction: column;align-items: center;width: 100%;" v-if="!counting&&payState==3">
|
||
<u-icon name="checkmark-circle-fill" size="64" color="#00aa00"></u-icon>
|
||
<view style="color: 00aa00;font-size: 36rpx;margin-top: 40rpx;">充值成功</view>
|
||
<view class="back-btn" @click="goBack">取消</view>
|
||
</view>
|
||
|
||
<view style="margin-top: 20vh;display: flex;flex-direction: column;align-items: center;width: 100%;" v-if="!counting&&payState>3">
|
||
<u-icon name="error-circle-fill" size="64" color="#ff007f"></u-icon>
|
||
<view style="color: 00aa00;font-size: 36rpx;margin-top: 40rpx;">充值超时</view>
|
||
<view style="width: 80%;display: flex; justify-content: space-between;margin: 20rpx auto;">
|
||
<view class="search-btn" @click="queryResult">再次查询</view>
|
||
<view class="back-btn" @click="goBack">取消</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getRechargeResultApi,getRechargeQueryResultApi } from '../../api/index/index'
|
||
export default {
|
||
data() {
|
||
return {
|
||
fontValue:uni.getStorageSync('fontSize') || 8,
|
||
accTradeId:"",
|
||
formUrl: '', // 用于展示form表单的URL
|
||
counting:false,
|
||
counter:30,
|
||
payState:1, //支付状态 1-待支付 2-支付中 3-支付成功 4-支付失败 5-支付关闭
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.accTradeId = option.accTradeId
|
||
this.jumpPay()
|
||
|
||
|
||
//定时器功能
|
||
this.counting = true
|
||
this.counter = 30
|
||
const timer = setInterval(() => {
|
||
if (this.counter > 0) {
|
||
this.counter--
|
||
} else {
|
||
this.counting = false;
|
||
clearInterval(timer)
|
||
}
|
||
}, 1000)
|
||
const timer2 = setInterval(() => {
|
||
if (this.counter > 0) {
|
||
this.getResult()
|
||
} else {
|
||
clearInterval(timer2)
|
||
}
|
||
}, 5000)
|
||
|
||
},
|
||
onUnload() {
|
||
clearInterval(this.timer)
|
||
clearInterval(this.timer2)
|
||
this.timer = null;
|
||
this.timer2 = null;
|
||
this.$router.push({ path: '/pages/index' })
|
||
// uni.navigateBack()
|
||
},
|
||
methods:{
|
||
goBack(){
|
||
this.$router.push({ path: '/pages/remainingSum/index' })
|
||
// uni.switchTab({
|
||
// url: '/pages/index'
|
||
// })
|
||
},
|
||
async queryResult(){
|
||
console.log("result")
|
||
let param = {
|
||
"accTradeId": this.accTradeId,
|
||
}
|
||
const res = await getRechargeQueryResultApi(param)
|
||
if(res.code==200){
|
||
this.payState = Number(res.data.payState)
|
||
}
|
||
},
|
||
async getResult(){
|
||
console.log("result")
|
||
let param = {
|
||
"accTradeId": this.accTradeId,
|
||
}
|
||
const res = await getRechargeResultApi(param)
|
||
if(res.code==200){
|
||
this.payState = Number(res.data.payState)
|
||
}
|
||
},
|
||
jumpPay(){
|
||
if(uni.getStorageSync('Form')){
|
||
const Form = uni.getStorageSync('Form'); //获取你本地存储的form表单渲染成页面
|
||
uni.removeStorageSync('Form')
|
||
this.formUrl = Form
|
||
//将接口返回的Form表单显示到页面
|
||
document.querySelector('body').innerHTML = this.formUrl; // body对应上面的class
|
||
this.$nextTick(() => {
|
||
console.log(document.forms,"form"); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则，可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
|
||
document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search-btn{
|
||
width: 40%;background: #fff;
|
||
height: 40px;line-height: 40px;
|
||
text-align: center;color: #000;
|
||
border-radius: 10rpx;margin-top: 40rpx;
|
||
border: 1px solid #ccc;
|
||
}
|
||
.back-btn{
|
||
width: 40%;background: #ff6633;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 10rpx;margin-top: 40rpx;
|
||
}
|
||
|
||
</style> |