1、HTML代码:
<div class="paymentss">
<div>
<img src="../../static/img/wx.png" />
<div>
<img src="../../static/img/zfb.png" />
</div>
</div>
<div class="radius">
<mt-radio align="right" v-model="value" :options="options"></mt-radio>
</div>
</div>
<mt-button
style="width:30%;background:#E3B104;color:#fff"
@click="submint()"
>立即支付</mt-button>
2、方法
<script>
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
import md5 from "js-md5";
export default {
data() {
return {
options: [
{ label: "微信支付", value: "1" },
{ label: "支付宝支付", value: "2" }
],
orderCode: ""
};
},
methods: {
submint() {
var token = this.$getItoInterfaceInfo({
orderCode: this.orderCode
});
if (this.value == "2") {
axios.post("/alipay/order/invokeAlipay", {
dataDigest: token
})
.then((res)=>{
//主要代码
const div = document.createElement("div");
// data就是接口返回的form表单,提交自动调起支付宝支付
div.innerHTML = res.data;
document.body.appendChild(div);
document.forms[0].submit();
});
} else {
this.$post("/sjzz/pay/wechat_pay", {
dataDigest: token
})
.then((res) {
if (res.code == 200) {
//这里是后端返回的URL直接进行跳转即可完成微信外支付
window.location.href = res.data;
}
});
}
},
},
};
</script>
<style>
.paymentss img {
height: 0.22rem;
width: 0.22rem;
margin: 0.15rem 0 0 0.1rem;
}
.paymentss {
display: flex;
flex-direction: row;
height: 0.9rem;
background: #f8f8f8;
margin: 0.3rem 0.1rem;
border-radius: 0.1rem;
padding: 0.1rem;}
.paymentss >>> .mint-cell-wrapper {
font-size: 0.13rem;
background: #f8f8f8;
}
</style>