epp/weixin-miniprogram/pages/residents/code.js

// pages/residents/code.js
import SparkMD5 from '../../utils/lib/spark-md5.min'
import utils from '../../utils/util'
// import drawQrcode from '../../utils/qrcode/index'
import drawQrcode from '../../utils/lib/weapp.qrcode.esm.js'
import scanQRCode from '../../utils/scanQRCode'
const toggleCustomTabBar = require('../../custom-tab-bar/toggleCustomTabBar')

const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    timeInterval: null,
    isShow: 'none',
    userText: '',
    showText: '',
    showTextColor: '',
    time: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    toggleCustomTabBar.toggle(this)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    toggleCustomTabBar.toggle(this)
    console.log('onShow')
    // setTimeout(this.refershData, 100)
    this.refershData()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('onHide')
    clearInterval(this.data.timeInterval);
    this.setData({
      isShow: 'none',
      time: ''
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('onUnload')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
    this.refershData(() => {
      wx.stopPullDownRefresh();
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },


  refershData(callback) {
    console.log('this.refershData()')
    wx.showNavigationBarLoading();
    clearInterval(this.data.timeInterval);
    this.setData({
      isShow: 'none',
      time: '',
      userInfo: wx.getStorageSync("userInfo"),
    })
    if (!this.data.userInfo) {
      wx.redirectTo({
        url: '/pages/index/login'
      })
    }
    wx.showLoading({
      title: '加载中'
    })
    var that = this;
    wx.request({
      url: `${app.globalData.baseUrl}/access/code/getCodeInfo`,
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded" //用于post
      },
      data: {
        id: this.data.userInfo.id,
      },
      success: function (d) {
        console.log("begin success")
        wx.hideLoading()
        let result = d.data;
        if (result.success) {
          console.log("result.data", result.data);
          that.setData({
            userText: `${that.data.userInfo.id} | ${that.data.userInfo.realname}`,
            showText: result.data.infoText,
            showTextColor: result.data.infoTextColor
          })

          let t = Date.now();
          let chksum = SparkMD5.hash(JSON.stringify({
            id: that.data.userInfo.id,
            t: t
          }));
          console.log("chksum", chksum)
          that.drawCode(`${app.globalData.baseUrl}/access/validCode?id=${that.data.userInfo.id}&t=${t}&chksum=${chksum}`, result.data.qrcodeColor)
        } else {
          wx.showToast({
            title: result.msg,
            icon: 'error',
            duration: 2000
          })
        }
        that.setData({
          isShow: ''
        })
        console.log("end success")
      },
      fail: function () {
        console.log("begin fail")
        wx.hideLoading()
        wx.showToast({
          title: "请求失败",
          icon: 'error',
          duration: 2000
        })
        console.log("end fail")
      },
      complete: function () {
        console.log("begin complete")
        if (typeof (callback) === "function")
          callback();
        wx.hideNavigationBarLoading();
        console.log("end complete")
      }
    })
  },
  drawCode(text = 'https://www.baidu.com/', foreground = 'red') {
    console.log("drawCode was called.")
    var that = this;
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        console.log("before drawQrcode")
        var canvas = res[0].node
        if (!canvas) {
          wx.showToast({
            title: "canvas获取失败",
            icon: 'error',
            duration: 2000
          })
          return
        }
        console.log("canvas:", canvas, "res:", res)
        // 调用方法drawQrcode生成二维码
        const query = wx.createSelectorQuery()
        query.select('#myQrcode')
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            var canvas = res[0].node

            // 调用方法drawQrcode生成二维码
            drawQrcode({
              canvas: canvas,
              canvasId: 'myQrcode',
              width: 150,
              padding: 0,
              background: '#ffffff',
              foreground: foreground,
              text: text,
            })
          })
        console.log("end drawQrcode")

        this.updateTime();
        this.setData({
          timeInterval: setInterval(this.updateTime, 1000)
        })
      })
  },
  updateTime() {
    this.setData({
      time: utils.formatTime(new Date())
    })
    console.log("刷新时间")
  },
  scan() {
    scanQRCode(wx)
  }
})