支付步骤：创建订单，向后端获取支付参数，再跳往后端指定的页面，进行支付

①支付宝支付：

页面中要有个dom盒子，用来进行支付宝支付跳转

<div id="alipay"></div>

// 支付完毕要返回的页面
const returnUrl = `${window.location.origin}/vue-vite/home?`
request({url: URLS.FAST_CREATE_TF_ORDER,params: { returnUrl，// 后端需要的创建订单的参数...},method: 'post',
}).then(res => {const div = document.getElementById('alipay')// url里面是一个form表单，里面包含支付要跳转的页面信息及支付参数div.innerHTML = res?.payUrl// 页面跳转div.getElementsByTagName('form')[0].submit()
}）.catch(err => {}).finally(() => {})

②微信支付，比较复杂，分为两种情况：

情况1: H5支付，H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付

情况2：JSAPI支付，JSAPI支付是指商户通过调用微信支付提供的JSAPI接口，商户的支付场景是在微信内置浏览器打开调起支付完成收款。

const wxJsapiPay = obj => {const onBridgeReady = (params, cb) => {WeixinJSBridge.invoke('getBrandWCPayRequest', {appId: params.appId, // 公众号ID，由商户传入timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数nonceStr: params.nonceStr, // 随机串package: params.package,signType: params.signType, // 微信签名方式：paySign: params.paySign, // 微信签名},res => {if (res.err_msg === 'get_brand_wcpay_request:ok') {// 使用以上方式判断前端返回,微信团队郑重提示：// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。cb()}},)}if (typeof WeixinJSBridge === 'undefined') {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady)document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)}} else {const { params, cb } = objonBridgeReady(params, cb)}
}
request({url: URLS.FAST_CREATE_TF_ORDER,params: {appid: 'appid',returnUrl,// 后端创建订单需要的参数...},method: 'post',
}).then(data => {if (data.tradeType === 'JSAPI') {// 情况1wxJsapiPay({params: data,cb: () => {// 查询当前订单支付信息},})} else if (data.tradeType === 'MWEB') {// 情况2非微信环境h5端支付// 设置支付成功回跳页面const redirect_url = `${window.location.origin}/vue-vite/home`const url = `${data.payUrl}&redirect_url=${redirect_url}`window.location.replace(url)}
}).catch(err => {}).finally(() => {})