【NuxtJs】支付宝PC支付跳转支付页面处理方案

一：支付宝支付基础结构页面构建

1.选择支付宝选项
2.点击下面立即支付按钮

 <button  @click="handlePay">立即支付</button>

二：支付宝官方页面唤起操作

支付宝支付一般是请求接口后收到一组form表单代码，在PC中，可以直接像下面这样直接使用

async handlePay() {
      this.QRcodeVisible = true
      const div = document.createElement('divform');
        div.innerHTML = alipayForm
        document.body.appendChild(div);
        document.forms[0].acceptCharset = 'GBK';
        document.forms[0].submit();
    },

问题：没有在新的页面打开啊？那我项目呢

方案一：请求完成以后使用window.open打开新的窗口，但是不行，浏览器会自动拦截，会被认为不安全。

好的,下面来优化。

三：优化，从新的页面打开

• 最终找到一个相对完美的方法，先打开一个空白页，待异步成功之后再赋予链接地址：

• 下单按钮页面

async handlePay() {
      this.QRcodeVisible = true
        const params = {
          order_id: 6,
          price: this.price,
        }
        try {
          let newOpenWindow = window.open('about:blank');
          const res = await pcPay(params)
          localStorage.setItem('aliPayForm', res)
          newOpenWindow.location = '/aliPay'
        } catch (error) {
          console.log(error);
        }
    },

• 新的alipay.vue跳转过渡页面
  

<template>
  <div class="container" style="text-align: center;;height: 500px;margin-top: 100px;">
    <div>
      <img src="https://img.cdn.heshecasa.com/upload/20220113/e4d2f28d3bffa5a7dca571fed96a25ea.jpg" alt="" style="text-align: center;">
      <div class="noDataTip" style="margin-top: 20px;font-size: 20px;">即将跳转到支付宝...</div>
    </div>
  </div>
</template>


<script>
export default {
  created() {
    if (process.client) {
      let alipayForm = localStorage.getItem('aliPayForm')
      if (alipayForm) {
        const div = document.createElement('divform');
        div.innerHTML = alipayForm
        document.body.appendChild(div);
        localStorage.removeItem('aliPayForm')
        document.forms[0].acceptCharset = 'GBK';
        document.forms[0].submit();
      }
    }
  },
}
</script>