首先判断，是在微信中打开还是非微信打开，非微信打开，创建订单式，判断选择支付宝支付，还是微信支付
支付宝支付：请求后端给的api，传入订单号，或者你们自定义的参数，然后请求成功后返回的地址是后端直接配置的，支付成功后跳转相应的界面，
注意：判断有无支付宝app，是支付宝自己的界面
测试地址 ：https://wxh5.hyxhbao.com/home
//支付宝app支付
this.$api.order
.payWithAlipayH5({ order_number: res.order_number })
.then((res) => {
window.location.href = res.pay_url;
console.log(res.pay_url, "支付宝app支付");
})
图一
tu’s
图三
微信支付：
接入微信支付首先要接入微信api
/**
* 调起微信加入
* @param {Object} order_number 订单号
* @param {function} cb 成功回调
* @param {function} errCb 失败回调
*/
getWxApi(order_number) {
let _this = this
return new Promise((resolve,reject) => {
this.getWxType(["chooseWXPay"]).then(_ => {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// console.log('3、开始获取加入', order_number)
// 3、获取微信加入前需要的数据
_this.$api.purchase.payWithWxpayMini({
order_number: order_number
}).then(res => {
if (!res || !res.package) {
reject({
title:'3、payWithWxpayMini接口没有返回数据',err:res})
return
}
// 4、调用微信加入
wx.chooseWXPay({
timestamp: res.timestamp, // 加入签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的加入后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.nonce_str, // 加入签名随机串，不长于 32 位
package: res.package, // 统一加入接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: "MD5", // 签名方式，默认为'SHA1'，使用新版加入需传入'MD5'
paySign: res.sign, // 加入签名
success: function (res) {
// console.log('4、加入成功')
resolve(res)
},
fail: function(err) {
// console.log('4、加入失败')
reject(err)
},
cancel: function (err) {
// console.log('4、加入失败,用户取消')
reject({
err: '用户取消支付'})
},
})
}).catch(err => {
reject(err)
})
}).catch(err => reject(err))
})
},
微信支付调取后台接口
// 微信公众号支付
this.$api.order
.payWithWxpayH5({ order_number: res.order_number })
.then((res) => {
window.location.href = res.pay_url;
this.isdialog = true;
console.log(
window.location.href,
res.pay_url,
"微信公众号支付"
);
})
.catch((err) => {
this.$Toast(err.msg);
this.isdialog = true;
});
微信支付界面：
<template>
<div>
</div>
</template>
<script>
import wxType from "@/mixin/wxType.mixin";
export default {
name: 'wxPay',
mixins: [wxType],
data() {
return {
}
},
mounted() {
let order_number = this.$route.query.order_number
let toUrl = this.$route.query.toUrl
console.log('这是要跳转的地方：', toUrl)
this.getWxApi(order_number).then(res => {
this.$Toast({
message: '加入成功',
duration: 2000,
});
this.$router.replace({
name: "Success",
query: {
order_number: order_number
}
});
// if (this.$route.query.toUrl) {
// this.$router.replace({
// name: toUrl
// })
// } else {
// this.$router.go(-1)
// }
}).catch(err => {
console.log('err',err)
try {
let e = ''
if (err.err.errMsg) e = err.err.errMsg
else if (err.err) e = err.err
else if (err.msg) e = err.msg
this.$Toast({
message: '加入失败，' + e,
duration: 2000,
});
} catch (error) {
}
this.$router.replace({
name: "Orders",
query: {
order_number: order_number
}
});
// if (this.$route.query.toUrl) {
// this.$router.replace({
// name: toUrl,
// query: {
// order_number: order_number
// }
// })
// } else {
// this.$router.go(-1)
// }
})
}
}
</script>
选择微信支付，将唤起微信支付，然后在微信界面点击返回，微信自己则会判断是否放弃付款，因为微信没有字符没有自己的回调函数可实时返给前端，则需要自己写个弹窗由用户选择是否完成支付
支付成功界面也可自定义