127 lines
3.9 KiB
Vue
127 lines
3.9 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)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
goBack(){
|
|||
|
|
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>
|