PC端 使用qrcode generator动态显示二维码

https://www.npmjs.com/package/qrcode-generator

图片.png

一、使用
1.引入 JS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.min.js"></script>

2.产生容器

 <div id="qrcode"></div>

3.调用函数,绘制二维码

html:

    <!-- 微信支付弹窗 start  -tab1-->
    <div class="actionModel" v-show="wxPayFlag">
      <div class="wxPayModel" v-loading="loading">
        <span @click="wxClose()" class="el-icon-close closeBtn"></span>
        <div class="content" :class="{on:payStep===2}">
          <div class="codeBox">
            <div class="wxBg payBg" :class="{zfbBg:selectPay==='alipay'}">
              <div id="qrcode"></div>
            </div>
            <p class="payTips">扫码支付完成后，我们将在10秒内处理好订单，支付后请不要关闭本窗口，耐心等待完成提示</p>
          </div>
        </div>
        <!-- 支付成功 -->
        <div class="content" :class="{on:payStep===3}">
          <div class="paySuccess">
            <img :src="$utils.getPng('pay_success')" />
            <span>购买成功</span>
          </div>
        </div>
      </div>
    </div>

css：

    //使用微信支付弹窗
    .wxPayModel {
      position: relative;
      background: #fff;
      width: 420px;
      height: auto;
      border-radius: 8px;
      overflow: hidden;
      color: #999;
      font-size: 16px;
      .closeBtn {
        font-size: 20px;
        cursor: pointer;
        position: absolute;
        top: 22px;
        right: 25px;
        color: #333;
        z-index: 9;
      }
      //code 内容
      .content {
        position: relative;
        display: none;
      }
      .on {
        display: block;
      }
      .codeBox {
        text-align: center;
        padding-top: 70px;
        .payBg {
          height: 380px;
          width: 240px;
          display: inline-block;
          #qrcode {
            text-align: center;
            display: inline-block;
            padding: 6px;
            border: 1px solid #e5e9ef;
            border-radius: 4px;
            padding-bottom: 0;
            margin-top: 115px;
            width: 154px;
            height: 154px;
            img {
              width: 140px;
              height: 140px;
              vertical-align: middle;
            }
          }
        }
        .wxBg {
          @include background(wx_pay_bg);
          background-size: contain;
        }
        .zfbBg {
          @include background(zfb_pay_bg);
          background-size: contain;
        }
        .payTips {
          color: #ff5b4c;
          margin-top: 30px;
          padding: 0 40px 30px;
        }
      }
      //成功
      .paySuccess {
        margin: 90px auto;
        @include rowDouleCenter;
        img {
          width: 56px;
          margin-right: 20px;
        }
        span {
          font-size: 22px;
          color: #666;
        }
      }
    }

js完整代码：

 // 微信支付
    wxPay () {
      this.loading = true
      this.$api.post(
        '/svip/wxpay',
        {
          svipid: this.SVIPID,
          cid: this.couponID,
          coupon: this.coupon
        },
        (res) => {
          if (res.status) {
            this.loading = false
            this.payStep = 2
            // 1.创建二维码对象。qrcode(二维码类型（1~40，输入 0 以自动检测）,容错级别（L、M、Q、H）)
            var qr = qrcode(0, 'L')
            // 2.添加二维码信息。
            qr.addData(res.msg)
            // 3.生成二维码对象（并不显示）。
            qr.make()
            // createImgTag(cellSize, margin, alt); cellSize 像素宽度,margin补白像素宽度
            document.getElementById('qrcode').innerHTML = qr.createImgTag(5, 0)
            if (this.wxPayTimer) {
              clearInterval(this.wxPayTimer)
            }
            this.wxPayTimer = setInterval(() => {
              this.$api.post(
                '/svip/checkpaystatus',
                { order: res.data.order, cate: 'wxpay' },
                (res) => {
                  if (res.status) {
                    clearInterval(this.wxPayTimer)
                    this.payStep = 3
                  }
                }
              )
            }, 3000)
          } else {
            this.$notify.warning({
              title: '提示',
              message: res.msg
            })
          }
        }
      )
    },