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;text-align: center;" v-if="counting">
			<text>充值中,请稍后...</text><br>
			<text>（可返回充值记录重新查询）</text><br/>
			<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 { 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-支付关闭
    };
  },
  
  onShow() {
	  // this.$forceUpdate()
	  console.log(uni.getStorageSync('accTradeId'))
	  if(uni.getStorageSync('accTradeId')!=''){
		this.accTradeId = uni.getStorageSync('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)
	    }
	  }, 2000)
	
  },
  onUnload() {
  	clearInterval(this.timer)
  	clearInterval(this.timer2)
  	this.timer = null;
  	this.timer2 = null;
	uni.removeStorageSync('accTradeId')
	// 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(){ 
		  if(this.accTradeId!=""){
			  let param = {
			  	"accTradeId": this.accTradeId,
			  }
			  const res = await getRechargeQueryResultApi(param)
			  if(res.code==200){
			  				this.payState = Number(res.data.payState)
			  } 
		  }
	  		  
	  },
	  async getResult(){
		  if(this.accTradeId!=""){
			  let param = {
				"accTradeId": this.accTradeId,
			  }
			  const res = await getRechargeResultApi(param)
			  if(res.code==200){ 
					this.payState = Number(res.data.payState)  
					if(this.payState>=3){
						clearInterval(this.timer)
						clearInterval(this.timer2)
					}
			  }
		  }
	  },
	  jumpPay(){
		  if(uni.getStorageSync('Form')){
			  const Form = uni.getStorageSync('Form');   //获取你本地存储的form表单渲染成页面
			  uni.removeStorageSync('Form')
			  this.formUrl = Form
			  const div = document.createElement('formdiv');
			  div.innerHTML = this.formUrl;
			  document.body.appendChild(div);
			  this.$nextTick(() => {	
				  document.forms['0'].setAttribute('target', '_self');
				  document.forms['0'].submit();
				  div.remove();
			  }); 
		  }
	  }
  }
};
</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>