美文网首页
PC端 使用qrcode generator动态显示二维码

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

作者: 逸笛 | 来源:发表于2021-02-01 17:44 被阅读0次

    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
                })
              }
            }
          )
        },
    

    相关文章

      网友评论

          本文标题:PC端 使用qrcode generator动态显示二维码

          本文链接:https://www.haomeiwen.com/subject/yghstltx.html