hh-k8-ampe-mini/pages/visitor_qrcode/visitor_qrcode.js

const { visitorQrCode } = require("/utils/api/auth_api")
const app = getApp()
import QRCode from "/utils/util/weapp-qrcode"

Page({
  data() {
    return {
      popupShow: false,
      // 0为待获取状态，1为获取二维码显示状态
      status: 0,
      qrcodeList: [],
      // 选中的索引
      selectIndex: -1,
      popupImagePath: null,
      popupTitle: null
    }
  },
  authClick() {
    const authPopup = this.$selectComponent('#authPopup')
    authPopup.open('芯易行通行管理系统')
  },
  // 授权获取三要素结果
  authResult(e) {
    if(e.detail && e.detail.code === 200) {
      const params = {
        userId: e.detail.data.userId,
        username: e.detail.data.username,
        idNumber: e.detail.data.idNumber,
        phone: e.detail.data.phone,
        avatar: e.detail.data.avatar || null,
        personPictures: e.detail.data.personPictures || null,
        photoBase64: e.detail.data.photoBase64 || null
      }
      this.getVistorQrcode(e.detail.data.idNumber, e.detail.data.username, e.detail.data.phone)
    } else {
      my.alert({
        title: '提示',
        content: '身份授权认证失败!'
      })
    }
  },
  // 创建二维码
  creatQrCode(id, text) {
    return new Promise((resolve, reject) => {
      if(!id || !text) {
        reject()
        return
      }
      new QRCode(id, {
        text: text,
        width: 176,
        //canvas 画布的宽
        height: 176,
        //canvas 画布的高
        padding: 0,
        // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L,
        // 二维码可辨识度
        callback: res => {
          resolve(res.path)
        }
      })
    })
  },
  async getVistorQrcode(idNumber, name, phone) {
    if(!idNumber || !name || !phone) {
      my.showToast({
        type: 'none',
        title: '授权获取信息补全，请重试'
      })
      return
    }
    const result = await visitorQrCode({idNumber, name, phone})
    this.setData({
      status: (result && result.data && result.data.length > 0) ? 1 : 0,
      selectIndex: (result && result.data && result.data.length > 0) ? 0 : -1,
      qrcodeList: result.data
    })
    if(!this.data.qrcodeList || this.data.qrcodeList.length <= 0) {
      my.showToast({
        type: 'none',
        content: '暂无访客二维码信息!'
      })
      return
    }
    if(this.data.selectIndex >= 0) {
      this.updateQrcode(this.data.selectIndex)
    }
  },
  updateQrcode(index) {
    const that = this
    setTimeout(async () => {
      const tempList = JSON.parse(JSON.stringify(this.data.qrcodeList))
      my.showLoading({
        content: '二维码加载中...'
      })
      for(let i = 0; i < tempList.length; i++) {
        if(index === i) {
          if(!tempList[i].ethQrcodePath && tempList[i].ethQrcode) {
            tempList[i].ethQrcodePath = await that.creatQrCode('qrcode1', tempList[i].ethQrcode)
          }
          if(!tempList[i].vguangQrcodePath && tempList[i].vguangQrcode) {
            tempList[i].vguangQrcodePath = await that.creatQrCode('qrcode2', tempList[i].vguangQrcode)
          }
        }
      }
      my.hideLoading()
      that.setData({
        qrcodeList: tempList
      })
    }, 500)
  },
  qrcodeSelectClick(e) {
    const type = Number(e.target.dataset.type)
    let popupImagePathTemp = null
    let popupTitleTemp = null
    if(type === 0) {
      popupImagePathTemp = this.data.qrcodeList[this.data.selectIndex].ethQrcodePath
      popupTitleTemp = '单机版二维码'
    } else if(type === 1) {
      popupImagePathTemp = this.data.qrcodeList[this.data.selectIndex].vguangQrcodePath
      popupTitleTemp = '微光互联二维码'
    }
    this.setData({
      popupShow: true,
      popupImagePath: popupImagePathTemp,
      popupTitle: popupTitleTemp
    })
  },
  onPopupClose() {
    this.setData({
      popupShow: false,
      popupImagePath: null,
      popupTitle: null
     })
  },
  onQrcodeSelectChange(event) {
    this.setData({
      selectIndex: event.detail.value
    })
    this.updateQrcode(this.data.selectIndex)
  }
})