qrcode插件生成二维码

最新推荐文章于 2024-04-18 19:32:14 发布

阿程_88

最新推荐文章于 2024-04-18 19:32:14 发布

阅读量150

点赞数

分类专栏：功能点文章标签：前端

本文链接：https://blog.csdn.net/weixin_46957744/article/details/126874341

版权

功能点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客介绍了如何在前端项目中利用qrcode库动态生成二维码。首先，通过npm安装依赖，然后在组件中引入qrcode模块。在watch监听器中，当接收到二维码消息时，获取canvas元素并将数据绘制到上面。调用getPayUrl方法获取二维码链接，根据不同的服务器响应码展示相应的错误信息。整个过程涉及到了前端与后端接口交互、二维码生成及错误处理。

摘要由CSDN通过智能技术生成

一、安装依赖

npm install qrcode -S

二、引入（在组件中引入）

import QRCode from 'qrcode'

watch: {
    QRCodeMsg(val) {
      // 获取页面的 canvas
      const msg = document.getElementById('QRCode')
      // 将获取到的数据画到 canvas 上
      QRCode.toCanvas(msg, val, error => {
        if (error) {
          // console.log('error--', error)
        }
      })
    }
},
  
// 获取二维码链接
getPayUrl() {
    const params = {
	    orderNum: this.payDetail.orderNum, // 订单编号
        amount: this.payDetail.totalPrice, // 总价格
        paymentAccountId: this.payAccountId, // 支付账号id
        description: '新疆培训项目'
    }
    getPayUrl(params).then(res => {
	    if (res.resultCode === 1) {
          this.QRCodeMsg = res.data.payUrl // 生成二维码链接
          this.billNum = res.data.billNum // 账单编号
          this.clearTimer()
        } else if (res.resultCode === -3) {
          this.$message.error({ message: '服务器内部错误', duration: 1500 })
        } else if (res.resultCode === -4) {
          this.$message.error({ message: '支付账号ID不正确', duration: 1500 })
        } else if (res.resultCode === -5) {
          this.$message.error({ message: '三方支付平台返回错误', duration: 1500 })
        } else if (res.resultCode === -6) {
          this.$message.error({ message: '不支持的三方支付平台', duration: 1500 })
        }
    })
},