使用 QR code实现微信扫码支付 实测有效

 

　　直接给代码自己理解

html部分：

 <el-button type="primary"
                                   @click="recibo(scope.row)">确认收货</el-button>



 <div>
        <el-dialog title="付款码"
                   :visible.sync="moneyShow"
                   width="400px"
                   v-if="moneyShow"
                   :close-on-click-modal=true
                   :destroy-on-close=true
                   :show-close=true
                   :modal="true">
          <!-- <div class="moneyShowBox"> -->
          <canvas id="QRCode_header"
                  style="width: 280px; height: 280px;margin: 0 0 0 40px;"></canvas>
          <!-- </div> -->
        </el-dialog>
      </div>

js部分：

 data () {
    return {
      qrUrl: "",
      tabId: 0,
      shopid: 0,
      moneyShow: false,
      orderno: '',
      paymentDtoPay: {},
    };
  },  


  // 确认付款
    pagamento (row) {
      console.log(row, '付款信息');
      this.moneyShow = true
      this.selectOrder()
      let paymentDto = {
        shopId: row.shop.shopId,
        addressId: row.orderId,
        number: row.orderNum
      }
      this.paymentDtoPay = paymentDto
　　　　　　//扫码时的接口 传递商品参数
      paymentWx(paymentDto).then(res => {
        this.orderno = res.orderNo
        let opts = {
          errorCorrectionLevel: "H", //容错级别
          type: "png", //生成的二维码类型
          quality: 0.3, //二维码质量
          margin: 0, //二维码留白边距
          width: 280, //宽
          height: 280, //高
          text: res.codeUrl, //二维码内容
          color: {
            dark: "#333333", //前景色
            light: "#fff", //背景色
          },
        };

        let msg = document.getElementById("QRCode_header");
        // 将获取到的数据(val)画到msg(canvas)
        QRCode.toCanvas(msg, res.codeUrl, opts, function (error) {
          console.log(msg, 'msg');
          console.log(opts, 'opts');
          if (error) {
            console.log("二维码加载失败", error);
          } else {
            console.log('二维码加载成功');
          }
        })
      })
    },
    // 监听是否支付
    selectOrder () {
      this.timer = setInterval(async () => {
　　　　　　//参数
        let paymentDto = {
          orderNo: this.orderno,
          shopId: this.paymentDtoPay.shopId,
          addressId: this.paymentDtoPay.addressId,
          number: this.paymentDtoPay.number
        }
　　　　　　　　//查询订单是否支付 两秒调一次
        payQuery(paymentDto).then((res) => {
          console.log(res);
          if (res.orderStatus === '支付成功') {
            this.dialogVisible = false;
　　　　　　　　//消除定时器
            this.closeMaskzhifu();
            this.$message.success('支付成功!')
            location.reload();

          }
        })
      }, 2000);
    },
　　//清除定时器函数
    closeMaskzhifu () {
      this.moneyShow = false;
      clearInterval(this.timer);
    },

 CSS部分就不展示了自己改吧