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

发布时间 2023-06-08 17:51:40作者: 前端_实习生

 

  直接给代码自己理解

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部分就不展示了自己改吧