支付宝的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：opendocs.alipay.com/apis/api_1/…
也可参考博客：blog.csdn.net/qq_39296114…
上面不需要前端进行操作，只需要后台进行配合即可，按照需求配置
以下才是前端的工作：
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)
}
},
———————————————— 原文链接：blog.csdn.net/qq_33026699…
一、跳转新页面展示支付二维码
前端调取支付宝支付接口（后台进行封装，没有直接调取支付宝接口），调用返回的数据中，将会有一串的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¬ify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2×tamp=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 ,需保持一致
第一次接触支付宝电脑端扫描支付，在这个编码格式上花了我几个小时的时间，找到问题后，真的觉得非常无语。。。。
