支付宝的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)
 
  }
},

———————————————— 原文链接：https://blog.csdn.net/qq_33026699/article/details/106069905

一、跳转新页面展示支付二维码

前端调取支付宝支付接口（后台进行封装，没有直接调取支付宝接口），调用返回的数据中，将会有一串的form表单数据返回，我们需要将此表单在当前调用页面submit下，以跳转到支付扫码页；

支付宝返回的form 数据：

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=GBK&method=alipay.trade.page.pay&sign=tXR6yxB9Uowu7tfbXVPHBoQXeyOqP2JXvo%2Fzmz%2BIA08aWin63h1%2FF7gHNN7I2K%2FnTV3ZYtvPkILu%2FS8uPmzpsAv1SJev0UNN2AbLDIGvbd%2BWn5neyIUqKcu5ySP1S8Bt4fbnvkMgnlijR25obVi5aFbj99JBZDrpeJ5cB9uq7Ccx7nX54%2F7coNv26PFD%2FPirlIKVVr2avD2w%3D%3D&return_url=http%3A%2F%2Fwww.shanshiwangluo.com%2F%23%2FpayNotify&notify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2&timestamp=2018-12-15+17%3A13%3A32&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
<input type="hidden" name="biz_content" value="{    "out_trade_no":"1812141933252566",    "product_code":"FAST_INSTANT_TRADE_PAY",    "total_amount":0.02,    "subject":" 订单：1812141933252566",    "extend_params":{    "sys_service_provider_id":"2018062211454921"    }  }">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

实例代码:

//支付宝支付
        async aliPay(orderCode,phone,price){
               var resp=await aliPay(orderCode,phone,price);
               if(resp.msg=="SUCCESS"){
                   const div=document.createElement('divform');
                   div.innerHTML=resp.data;
                   document.body.appendChild(div);
                   document.forms[0].acceptCharset='GBK';
                   //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地，重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
                   document.forms[0].submit();
               }else{
                   this.$alert("错误："+resp.data,"提示",{
                       confirmButtonText:'确定'
                   });
               }
           },

温馨提示：在form submit 前，必须设置 acceptCharset='GBK' ，此处不一定是要GBK ,可以是UTF-8 ,前提是支付宝返回的action 必须是UTF-8 ,需保持一致

第一次接触支付宝电脑端扫描支付，在这个编码格式上花了我几个小时的时间，找到问题后，真的觉得非常无语。。。。