实现支付功能并生成二维码

最新推荐文章于 2024-05-31 09:17:20 发布

Banana_link

最新推荐文章于 2024-05-31 09:17:20 发布

阅读量925

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/banana_link/article/details/129404000

版权

最近做了一个需求，需要根据返回的url生成二维码，实现支付功能。对于第一次接触这个需求的我还是比较期待的，因为又能学到新的知识啦！话不多说，进入正题。

第一步

正常情况下支付订单的话都会有规定的时间，超过规定时间的话二维码就会失效或者是取消订单，我先来说一下倒计时功能如何实现。

我们首先要在data中把需要的数据定义好：(我这里设置的是30分钟)

data() {
  return {
    interval: null, // 定时器
    downTime: '30分00秒', // 页面显示时间，可以定义一个初始值
    downMin: 1800 // 倒计时总秒数
  }
}

接下来开始实现倒计时:

// 定义方法
countdownHandle() {
 // 判断当倒计时为0时清空定时器
 if (this.downMin < 0) {
  // 过期后 看个人逻辑 一般都是让二维码显示已过期
  window.clearInterval(this.interval) // 关闭定时器
 } else {
  const time1 = Math.floor(this.downMin / 60)
  // 获取分钟数
  const minutes = time1 < 10 ? '0' + time1 : time1
  const time2 = this.downMin - time1 * 60
  // 获取秒数
  const seconds = time2 < 10 ? '0' + time2 : time2
  this.downMin--
  // 给downTime赋入倒计时
  this.downTime = minutes + '分' + seconds + '秒'
 }
}

最后在生命周期created或者是mounted中调用我们的计时器：

this.interval = setInterval(this.countdownHandle, 1000)

最终的实现效果如下：

第二步

根据url生成支付二维码

(这些当然是我在网上查询得到的，哈哈哈··· 不过我整理了一下)

我生成二维码的插件用的是qrcodejs2，它在vue项目和nuxt项目中的用法是不一样的，先说vue

在vue中，使用npm i qrcodejs2 --save --qrcodejs2 安装即可；

在nuxt中：

下载QRCode.js: http://code.ciaoca.com/javascript/qrcode/version/qrcodejs.zip
解压下载的压缩包并将qrcode.min.js文件放到项目的static目录下（因为static目录下的文件不会被编译）

在nuxt.config.js配置文件里配置head里的script对象

head:{
  script:
    [
      {
        // 比如你的服务器地址是https://www.aaa.com,最终打包到服务器上时，          
        // https://www.aaa.com/qrcode.min.js就是你刚才下载的qrcode.min.js
        // 但是如果你想在本地测试的话就把https://www.aaa.com换成你本地的服务器地址
        // 因为我当时没换就报错辽
        src: 'https://www.aaa.com/qrcode.min.js'
      }
    ]
}

tip:关于qcode用法如果还是不明确的话可以去官网👉点我👈看看

然后就是在项目中的使用，我觉得用法的话vue和nuxt差不多就一块说了，有问题的话可以视情况修改：

<div id="qrcode" class="qrcode" ref="qrcodeRef"></div>

data() {
    return {
        qrcodeObj: {} 
    }
},
mounted() {
    this.getQrCode()
},
methods: {
    getQrCode() {
        this.qrcodeObj = new QRCode('qrcode', {
            width: 242, // 宽度
            height: 242, // 高度
            text: '', // 用来放置url
            render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        })
        // 去掉鼠标放在二维码上出现的title
        this.qrcodeObj._el.title = ''
    }
}

可以看到这里我用qrcodeObj来接收定义的new QRCode，因为不接收的话，我这里会报这个错误：Do not use 'new' for side effects