支付功能后端返回html,前端如何显示及跳转

404 阅读1分钟

需求描述:支付功能,支付方式为公司网银支付、个人网银支付、支付宝支付,根据选择的支付方式不同,跳转不同的页面,前端确认支付后,调用接口返回的是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();
  }
},