epp/miniprogram/src/pages/residents/code.vue

<template>
  <view id="codeView" :style="{ display: isShow }">
    <view id="user-text"><text>{{ userText }}</text></view>
    <view id="time-text"><text>{{ time }}</text></view>
    <canvas type="2d" style="width: 250px; height: 250px;" id="myQrcode"></canvas>
    <view id="show-text"><text :style="{ color: showTextColor }">{{ showText }}</text></view>
    <view id="small-text"><text>下拉可刷新</text></view>

    <button id="scan-btn" size="mini" @tap="scan">扫门禁码</button>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import md5 from 'blueimp-md5'
import drawQrcode from '../../utils/qrcode/index'
import scanQRCode from '../../utils/scanQRCode'
import utils from '../../utils/utils'

import './code.css'

export default {
  data() {
    return {
      ...Taro.getApp().globalData,
      userInfo: null,
      timeInterval: null,
      isShow: 'none',
      userText: '',
      showText: '',
      showTextColor: '',
      time: '',
    }
  },

  onShow() {
    console.log('onShow')
    setTimeout(this.refershData, 100)
  },

  onHide() {
    console.log('onHide')
    clearInterval(this.timeInterval);
    this.isShow = 'none'
    this.time = ''
  },

  onPullDownRefresh() {
    console.log('onPullDownRefresh')
    this.$nextTick(() => {
      this.refershData(() => {
        Taro.stopPullDownRefresh();
      });
    });
  },

  methods: {
    refershData(callback) {
      this.debugMode && console.log('this.refershData()')
      Taro.showNavigationBarLoading();
      clearInterval(this.timeInterval);
      this.isShow = 'none'
      this.time = ''
      this.userInfo = Taro.getStorageSync("userInfo");
      if (!this.userInfo) {
        Taro.redirectTo({
          url: '/pages/index/login'
        })
      }
      Taro.showLoading({ title: '加载中' })
      var that = this;
      Taro.request({
        url: `${this.baseUrl}/access/code/getCodeInfo`,
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded" //用于post
        },
        data: {
          id: this.userInfo.id,
        },
        success: function (d) {
          that.debugMode && console.log("begin success")
          Taro.hideLoading()
          let result = d.data;
          if (result.success) {
            console.log("result.data", result.data);
            that.userText = `${that.userInfo.id} | ${that.userInfo.realname}`
            that.showText = result.data.infoText
            that.showTextColor = result.data.infoTextColor
            that.$nextTick(() => {
              let t = Date.now();
              let chksum = md5(JSON.stringify({ id: that.userInfo.id, t: t }));
              that.drawCode(`https://epp.cxyxiaomo.com/access/validCode?id=${that.userInfo.id}&t=${t}&chksum=${chksum}`, result.data.qrcodeColor)
            });
          } else {
            Taro.showToast({
              title: result.msg,
              icon: 'error',
              duration: 2000
            })
          }
          that.isShow = ''
          that.debugMode && console.log("end success")
        },
        fail: function () {
          that.debugMode && console.log("begin fail")
          Taro.hideLoading()
          Taro.showToast({
            title: "请求失败",
            icon: 'error',
            duration: 2000
          })
          that.debugMode && console.log("end fail")
        },
        complete: function () {
          that.debugMode && console.log("begin complete")
          if (typeof (callback) === "function")
            callback();
          Taro.hideNavigationBarLoading();
          that.debugMode && console.log("end complete")
        }
      })
    },
    drawCode(text = 'https://www.baidu.com/', foreground = 'red') {
      this.debugMode && console.log("drawCode was called.")
      var that = this;
      const query = Taro.createSelectorQuery()
      query.select('#myQrcode')
        .fields({
          node: true,
          size: true
        })
        .exec(async (res) => {
          that.debugMode && console.log("before drawQrcode")
          var canvas = res[0].node
          if (!canvas) {
            Taro.showToast({
              title: "canvas获取失败",
              icon: 'error',
              duration: 2000
            })
            return
          }
          that.debugMode && console.log("canvas:", canvas, "res:", res)
          // 调用方法drawQrcode生成二维码
          await drawQrcode(Taro, {
            canvas: canvas,
            canvasId: 'myQrcode',
            width: 150,
            padding: 0,
            background: '#ffffff',
            foreground: foreground,
            text: text,
          })
          that.debugMode && console.log("end drawQrcode")

          this.updateTime();
          this.timeInterval = setInterval(this.updateTime, 1000);
        })
    },
    updateTime() {
      this.time = utils.formatTime(new Date())
      console.log("刷新时间")
    },
    scan() {
      scanQRCode(Taro)
    }
  }
}
</script>