1.微信支付
网页的微信支付返回的是一串链接,使用qrcode把链接生成二维码 让客户扫描
import QRCode from 'qrcode'
QRCode.toDataURL(res.content) .then(url=>{ console.log(url,'生成的为base64的二维码图片') }) .catch(()=>{ this.$message.error('微信二维码生成失败,请稍后重试') })
2.支付宝
网页支付宝支付,接口返回的一段form表单代码,然后提交后会转向支付宝支付页面
1.打开支付页面
window.open('/order/alipay?orderId='+this.orderId,'_blank')
2.在支付页面调取接口
<div class="form" v-html="content"></div> data(){ return{ orderId:this.$route.query.orderId, content:'', loading:true } }, mounted(){ this.paySubmit() }, paySubmit(){ postPayInfo({ orderId:this.orderId, orderName:'Vue高仿小米商城', amount:0.01,//单位元 payType:1 //1支付宝,2微信 }).then(res=>{ this.content = res.content; setTimeout(()=>{ document.forms[0].submit(); },100) }) }
在vue中有v-html 来渲染代码,在react中也有
import React from 'react'; export default class dangderouslySet extends React.Component { constructor() { super() this.state = { Html1: '<div className="dx">这是直接嵌套的html代码</div>' } } render() { return ( <div dangerouslySetInnerHTML={{__html:this.state.Html1}}></div> ) } }