Dining_Hall/pages/remainingSum/payLoding.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||payState==2)">
			<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 Cookies from "js-cookie";
import { getRechargeResultApi,getRechargeQueryResultApi } from '../../api/index/index'
export default {
  data() {
    return {
		fontValue:Cookies.get('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/remainingSum/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(Cookies.get('Form')){
			  const Form = Cookies.get('Form');   //获取你本地存储的form表单渲染成页面
			  Cookies.remove('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>