pc端实现支付宝支付

pc端实现支付宝支付

一、效果图

二、实现步骤 ---- 思路

1.思路

1.点击购买时调取后端下单的接口 拿取订单信息 即里面也会包含二维码 的form数据
2.使用周期性定时器调用获取订单详情接口 每个1秒查询订单的状态 成功之后跳转相应的界面 或者进入相应的逻辑

2.代码实现

1.用iframe把form的数据展现出来

  <iframe
      :srcdoc="aliPayQrCode" 
      frameborder="none"
      border="0"
      marginwith="0"
      marginheight="0"
      scrolling="0"
      width="200"
      height="200"
      style="overflow:hidden;"
      >
   </iframe>   

2.倒计时的实现

 mounted() {
    this.countdown();
  },
methods:{
     countdown(){
       		const end = Date.parse(new Date(订单结束时间));
       		const now = Date.parse(new Date());
			const msec = end - now;
			if(msec < 0 ) return;

 			let day = parseInt(msec / 1000 /60 /60 /24);
 			let hr= parseInt((msec / 1000 /60 /60) % 24);
 			let min= parseInt((msec / 1000 /60) % 60);
 			let sec= parseInt((msec / 1000 ) % 60);
 			this.zeroize(hr);
 			this.zeroize(min)
 			this.zeroize(sec);
 			
 			if (min >= 0 && sec >= 0) {
               //倒计时结束关闭订单
              if (min == 0 && sec == 0) {
                 return;
              }
             setTimeout(() => {
               this.countdown();
              }, 1000);
          }
     }
	
	zeroize(index){
      if(index > 9){
  		return index;
		}else{
			return index = "0" + index;
		}
   }

}

📢没了，结束了，如有错误，欢迎留言.如有问题，不吝赐教。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~