一、支付方式

（一）支付宝

1、打开一个新窗口，并传递订单号（-- @/views/PaymentOrder/index.vue）

作用： 让支付宝二维码页面在新页面打开，而不是在当前窗口

zhiFuBaoPay() { // 支付包支付
  window.open(`/#/zhiFuBaoPay?id=${this.$route.query.id}`, '_blank')
}

2、发送请求，服务端响应一个 html 表单结构（-- @/components/ZhiFuBaoPay.vue）

zhiFuBaoPay() {
  this.axios
    .post('/pay', {
      orderId: this.orderNo, // 订单号
      orderName: '小米商城', // 订单名称
      amount: 0.06, // 支付金额
      payType: 1 // 1支付宝，2微信
    })
    .then(res => {
      this.content = res.content
    })
}

3、将响应的 html 结构渲染到页面上（-- 同上）

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

4、提交表单（-- 同上）

zhiFuBaoPay() {
  this.axios
    .post('/pay', {
      orderId, // 订单号
      orderName: '小米商城', // 扫码支付时订单名称
      amount: 0.06, // 支付金额
      payType: 1 // 1支付宝，2微信
    })
    .then(res => {
      this.content = res.content

      -- 增
      setTimeout(() => { // 获取 v-html 解析标签需要时间，如果立即调用，this.content 的值为 undefined
        document.forms[0].submit()
      }, 100)
      --

    })
}

（二）微信

1、导入微信支付款框 结构、样式（-- components/新建 WeiXinPay.vue）

<template>
  <div class="wei-xin-pay-container">
    <div class="main">
      <div class="hd row">
        <span>微信支付</span>
        <div class="icon" @click="$emit('cancel')">X</div>
      </div>
      <div class="bd column">
        <img :src="qrCodeImg" alt="" />
        <span>请使用微信扫一扫</span>
        <span>二维码完成支付</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'WeiXinPay',
  props: ['qrCodeImg']
}
</script>
<style lang="scss" scoped>
.wei-xin-pay-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .main {
    width: 370px;
    height: 440px;
    background-color: #fff;
    .hd {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f5f5f5;
      font-size: 20px;
      padding: 0 20px;
      span {
      }
      .icon {
        cursor: pointer;
      }
    }
    .bd {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 380px;
      img {
        width: 237px;
        height: 240px;
        margin-bottom: 10px;
      }
      span {
        margin-bottom: 8px;
      }
    }
  }
}
</style>

2、导入、注册、使用 WeiXinPay.vue 组件（-- @/views/PaymentOrder/index.vue）

import WeiXinPay from '@/components/WeiXinPay.vue'

component: {
  WeiXinPay
}

<WeiXinPay v-if="weiXinPay" :qr-code-img="qrCodeImg" @cancel="cancel"></WeiXinPay>

3、配置 data（-- 同上）

weiXinPay: false, // 微信支付框
qrCodeImg: '', // base64 二维码

4、配置 method（-- 同上）

cancel() { // 取消
  this.weiXinPay = false
},

5、发送请求，服务端响应一个字符串（-- 同上）

showWeiXinPay() { // 显示微信支付框
  this.axios
    .post('/pay', {
      orderId: this.orderNo, // 订单号
      orderName: '小米商城', // 订单名称
      amount: 0.06, // 支付金额
      payType: 2 // 1支付宝，2微信
    })
}

6、将字符串转换成 base64 的二维码（-- 同上）

下载包： npm i qrcode@1.4.4 --save

import QRCode from 'qrcode'

async showWeiXinPay() { // 显示微信支付框
  const result = await payMethod({
    orderId: this.$route.query.id,
    orderName: '郑郑日上商城',
    amount: this.lumpSum,
    payType: 2, // 1支付宝、2微信
    jsonSwitch: true
  })

  -- 增
  // 将字符串转换为 base64 的二维码
  QRCode.toDataURL(result.content)
    .then(url => {
      this.weiXinPay = true
      this.qrCodeImg = url
    })
    .catch(() => {
      this.$message.error('微信二维码生成失败，请稍后重试')
    })
--

}

7、将 base64 的二维码放到 img 的 src 属性上，src 会转换成图片

<img :src="qrCodeImg" alt="" />