需求描述:支付功能,支付方式为公司网银支付、个人网银支付、支付宝支付,根据选择的支付方式不同,跳转不同的页面,前端确认支付后,调用接口返回的是html,根据html跳转不同的页面进行支付。
实现步骤:
1.首先开发一个新页面,页面中只放一个dom节点,在确认支付页面调用支付接口,把返回的html通过路由query传参传入,
let routeData = this.$router.resolve({ path: '/新页面的路由', query: { htmls: res.data}});
//打卡一个新页面
window.open(routeData.href, '_blank');
2.在新页面里进行操作
data(){
return {
htmls:'',
payToken:'',
};
},
watch:{
$route: {
handler(val) {
console.log(val)
this.htmls = this.$route.query && this.$route.query.htmls;
this.payToken = this.$route.query && this.$route.query.payToken;
},
// 深度观察监听
deep: true,
immediate: true,
},
},
props:{
},
created(){
},
mounted(){
this.open()
},
methods:{
open(){
let div = document.getElementById('way');
console.log(div)
div.innerHTML = this.htmls;
document.body.appendChild(div);
//根据返回的form进行跳转,跳转到登录页面
document.forms[0].submit();
}
},