支付宝的PC支付  分为两种  前置模式支付 和  跳转模式支付

前置模式和跳转模式，需要后台在支付宝的api中配置（无关前端）

1. 跳转模式。
2. 前置模式是将二维码前置到商户
3. 的订单确认页的模式。需要商户在
4. 自己的页面中以 iframe 方式请求
5. 支付宝页面。具体分为以下几种：
6. 0：订单码-简约前置模式，对应 iframe 宽度不能小于600px，高度不能小于300px；
7. 1：订单码-前置模式，对应iframe 宽度不能小于 300px，高度不能小于600px；
8. 3：订单码-迷你前置模式，对应 iframe 宽度不能小于 75px，高度不能小于75px；
9. 4：订单码-可定义宽度的嵌入式二维码，商户可根据需要设定二维码的大小。
10. 跳转模式下，用户的扫码界面是由支付宝生成的，不在商户的域名下。
11. 2：订单码-跳转模式

官方后台配置API：https://opendocs.alipay.com/apis/api_1/alipay.trade.page.pay/

也可参考博客：https://blog.csdn.net/qq_39296114/article/details/106061525

上面不需要前端进行操作，只需要后台进行配合即可，按照需求配置

以下才是前端的工作：

 

1.前置模式：

2.跳转模式：

支付宝后台返回前端的是一串from表单提交代码，我们需要拿到这串代码进行操作

第一种，前置模式，页面不跳转  展示二维码。

第一步：请求后台接口返回from代码

这是我们后台返回的支付宝的from代码

操作如下图：

可以看到打印出来的a  是一串from的字符串，这个时候定义一个qianHtml    然后创建一个iframe

<iframe :srcdoc="qianHtml"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        width="300"
        height="300"
        style="overflow:hidden;">
</iframe>

只要把from代码赋值到iframe里面就好了

效果图如下：

第二种，跳转页面到支付宝支付

环境如下：

 

   

点击确认支付后,走下面方法：

const div = document.createElement('div')
/* 下面的data.content就是后台返回接收到的数据 */
div.innerHTML = data.content

document.body.appendChild(div)

document.forms[0].submit()

就会直接跳到支付宝  进行支付宝支付

效果图如最上面的一张图。

以下代码，只需要看支付宝支付即可，（跳转支付）

async dq(order_id,pay_type,list){
  let payu = pay_type
  if(pay_type == '2') payu = 4
  if(this.zxxq) order_id = list.content.order_id
  const {errr,data} = await this.$service.home.diaoqi({
    order_id:order_id,
    pay_type:payu
  })
  console.log(data)
  console.log(pay_type)
  console.log('pay_type')
  this.$emit('watchChild')
  if(data.code == '200'){
   //3  是余额的支付  2 是支付宝的支付   1是微信的支付
  
    if(pay_type == '3'){

      if(this.pcxq) this.$router.push({path:"/playsucc",query:{id:this.$route.query.id}})

      if(this.zxxq) this.$toast('您已支付成功，请点击咨询')

    } else if(pay_type == '2'){

      const div = document.createElement('div')
      /* 下面的data.content就是后台返回接收到的数据 */
      div.innerHTML = data.content

      document.body.appendChild(div)

      document.forms[0].submit()

    }

  } else {
console.log('支付失败的原因‘)
    this.$toast(data.msg)

  }
},