vue-網頁支付 --支付寶和微信支付

1.微信支付

　　網頁的微信支付返回的是一串鏈接，使用qrcode把鏈接生成二維碼 讓客戶掃描

import QRCode from 'qrcode'
QRCode.toDataURL(res.content)
            .then(url=>{
             　console.log(url,'生成的為base64的二維碼圖片')
            })
            .catch(()=>{
              this.$message.error('微信二維碼生成失敗，請稍后重試')
            })

 

 

2.支付寶

　　網頁支付寶支付，接口返回的一段form表單代碼，然后提交后會轉向支付寶支付頁面

　　1.打開支付頁面

window.open('/order/alipay?orderId='+this.orderId,'_blank')

　　2.在支付頁面調取接口

<div class="form" v-html="content"></div>

data(){
    return{
      orderId:this.$route.query.orderId,
      content:'',
      loading:true
    }
  },

mounted(){
    this.paySubmit()
  },

paySubmit(){
      postPayInfo({
        orderId:this.orderId,
        orderName:'Vue高仿小米商城',
        amount:0.01,//單位元
        payType:1 //1支付寶，2微信
      }).then(res=>{
        this.content = res.content;
        setTimeout(()=>{
          document.forms[0].submit();
        },100)
      })
    }

在vue中有v-html 來渲染代碼，在react中也有

import React from 'react';

export default class dangderouslySet extends React.Component {
  constructor() {
    super()
    this.state = {
      Html1: '<div className="dx">這是直接嵌套的html代碼</div>'
    }
  }
  render() {
    return (
      <div dangerouslySetInnerHTML={{__html:this.state.Html1}}></div>
    )
  }
}