进出码优化

2022-11-27 16:26:35 +08:00 · 2022-11-27 16:26:35 +08:00 · d70e7a9cc4
commit d70e7a9cc4
parent 286b244457
4 changed files with 150 additions and 134 deletions
--- a/miniprogram/src/pages/index/index.config.js
+++ b/miniprogram/src/pages/index/index.config.js
@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  "navigationStyle": "custom"
 })
--- a/miniprogram/src/pages/index/index.vue
+++ b/miniprogram/src/pages/index/index.vue
@ -1,6 +1,6 @@
 <template>
  <view>
-    <image src="../../image/home.jpg?t=1" style="width: 100vw; height: 41.5vw;"></image>
+    <image src="../../image/home.jpg" style="width: 100vw; height: 41.5vw;"></image>
    <view style="display: block; padding-left: 30px; padding-top: 12px;">
      <text>欢迎你，{{ displayUsername }}！</text>
    </view>
--- a/miniprogram/src/pages/residents/code.vue
+++ b/miniprogram/src/pages/residents/code.vue
@ -10,6 +10,7 @@

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

@ -31,9 +32,7 @@ export default {

  onShow() {
    console.log('onShow')
-    setTimeout(() => {
-      Taro.startPullDownRefresh();
-    }, 100)
+    setTimeout(this.refershData, 100)
  },

  onHide() {
@ -45,80 +44,112 @@ export default {

  onPullDownRefresh() {
    console.log('onPullDownRefresh')
-    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/getCodeInfo`,
-      method: "POST",
-      header: {
-        "Content-Type": "application/x-www-form-urlencoded" //用于post
-      },
-      data: {
-        id: this.userInfo.id,
-      },
-      success: function (d) {
-        Taro.hideLoading()
-        let result = d.data;
-        if (result.success) {
-          console.log(result.data);
-          that.userText = `${that.userInfo.id} | ${that.userInfo.realname}`
-          that.showText = result.data.infoText
-          that.showTextColor = result.data.infoTextColor
-          that.drawCode(`https://epp.cxyxiaomo.com/access/validCode?id=${result.data.id}&t=${Date.now()}`, result.data.qrcodeColor)
-        } else {
+    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/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: result.msg,
+            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")
        }
-        that.isShow = ''
-      },
-      fail: function () {
-        Taro.hideLoading()
-        Taro.showToast({
-          title: "请求失败",
-          icon: 'error',
-          duration: 2000
-        })
-      },
-      complete: function () {
-        Taro.stopPullDownRefresh();
-        Taro.hideNavigationBarLoading();
-      }
-    })
-  },
-  methods: {
+      })
+    },
    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((res) => {
+        .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生成二维码
-          drawQrcode(Taro, {
+          await drawQrcode(Taro, {
            canvas: canvas,
            canvasId: 'myQrcode',
-            width: 260,
+            width: 150,
            padding: 0,
            background: '#ffffff',
            foreground: foreground,
            text: text,
          })
+          that.debugMode && console.log("end drawQrcode")

          this.updateTime();
          this.timeInterval = setInterval(this.updateTime, 1000);
--- a/miniprogram/src/utils/qrcode/index.js
+++ b/miniprogram/src/utils/qrcode/index.js
@ -25,16 +25,15 @@ function utf16to8(str) {
  return out
 }

-function drawQrcode(Taro, options, debug) {
+function drawQrcode(Taro, options) {
  options = options || {}
  options = extend(true, {
    canvasId: 'myQrcode',
-    // canvas: canvas,
+    canvas: null,
    text: '爱一个人就要勇敢说出来',
    width: 260,
-    height: 260,
    padding: 20,
-    // paddingColor: '#ffffff', // 默认与background一致
+    paddingColor: null, // 默认与background一致
    typeNumber: -1,
    correctLevel: QRErrorCorrectLevel.H,
    background: '#ffffff',
@ -54,88 +53,73 @@ function drawQrcode(Taro, options, debug) {

  if (!options.paddingColor) options.paddingColor = options.background

-  if (debug) {
-    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
-    qrcode.addData(utf16to8(options.text))
-    qrcode.make()
+  // createCanvas
+  // create the qrcode itself
+  var qrcode = new QRCode(options.typeNumber, options.correctLevel)
+  qrcode.addData(utf16to8(options.text))
+  qrcode.make()

-    return new Promise(function (resolve, reject) {
-      resolve(qrcode);
-    })
+  const dpr = Taro.getSystemInfoSync().pixelRatio
+  var canvas = options.canvas
+  const ctx = canvas.getContext('2d')
+  canvas.width = options.width * dpr
+  canvas.height = options.width * dpr
+  const width = canvas.width
+  console.log(`canvas, ctx, width, dpr, qrcode, options`, canvas, ctx, width, dpr, qrcode, options)

-  } else {
+  // 填充背景色
+  ctx.fillStyle = options.paddingColor
+  // ctx.clearRect(0, 0, width + options.padding * 2, width + options.padding * 2) // 绘制前清空画布
+  ctx.fillRect(0, 0, width + options.padding * 2, width + options.padding * 2);

-    return new Promise(function (resolve, reject) {
-      return resolve(createCanvas(Taro));
-    })
+  var tileW = (width - options.padding * 2) / qrcode.getModuleCount()
+  var tileH = (width - options.padding * 2) / qrcode.getModuleCount()

+  // 绘制二维码
+  for (var row = 0; row < qrcode.getModuleCount(); row++) {
+    for (var col = 0; col < qrcode.getModuleCount(); col++) {
+      ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background
+      var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW))
+      var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW))
+      ctx.fillRect(Math.round(col * tileW) + options.padding, Math.round(row * tileH) + options.padding, w, h);
+    }
  }

-  function createCanvas(Taro) {
-    // create the qrcode itself
-    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
-    qrcode.addData(utf16to8(options.text))
-    qrcode.make()
+  // 绘制中心图标
+  if (options.image.imageResource) {
+    const imgW = options.image.width * dpr
+    const imgH = options.image.height * dpr
+    const dx = (width - imgW) / 2
+    const dy = (width - imgH) / 2
+    if (options.image.round) {
+      // Logo边框
+      const imgW2 = options.image.width * dpr + 30
+      const dx2 = (width - imgW2) / 2
+      const r2 = imgW2 / 2
+      const cx2 = dx2 + r2;
+      ctx.beginPath();
+      ctx.arc(cx2, cx2, r2, 0, 2 * Math.PI);
+      ctx.fillStyle = '#ffffff'
+      ctx.fill();
+      ctx.restore();

-    const dpr = Taro.getSystemInfoSync().pixelRatio
-    var canvas = options.canvas
-    const ctx = canvas.getContext('2d')
-    canvas.width = options.width * dpr
-    canvas.height = options.width * dpr
-    const width = canvas.width
+      // 画Logo
+      const r = imgW / 2
+      const cx = dx + r;
+      const cy = dy + r;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+      ctx.clip();

-    // 背景色
-    ctx.fillStyle = options.paddingColor
-    ctx.fillRect(0, 0, width + options.padding * 2, width + options.padding * 2);
-
-    var tileW = (width - options.padding * 2) / qrcode.getModuleCount()
-    var tileH = (width - options.padding * 2) / qrcode.getModuleCount()
-
-    // 开始画二维码
-    for (var row = 0; row < qrcode.getModuleCount(); row++) {
-      for (var col = 0; col < qrcode.getModuleCount(); col++) {
-        ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background
-        var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW))
-        var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW))
-        ctx.fillRect(Math.round(col * tileW) + options.padding, Math.round(row * tileH) + options.padding, w, h);
-      }
+      ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgW);
+      ctx.restore();
+    } else {
+      ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgH)
+      ctx.restore();
    }
-
-    if (options.image.imageResource) {
-      const imgW = options.image.width * dpr
-      const imgH = options.image.height * dpr
-      const dx = (width - imgW) / 2
-      const dy = (width - imgH) / 2
-      if (options.image.round) {
-        // Logo边框
-        const imgW2 = options.image.width * dpr + 30
-        const dx2 = (width - imgW2) / 2
-        const r2 = imgW2 / 2
-        const cx2 = dx2 + r2;
-        ctx.beginPath();
-        ctx.arc(cx2, cx2, r2, 0, 2 * Math.PI);
-        ctx.fillStyle = '#ffffff'
-        ctx.fill();
-        ctx.restore();
-
-        // 画Logo
-        const r = imgW / 2
-        const cx = dx + r;
-        const cy = dy + r;
-        ctx.beginPath();
-        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
-        ctx.clip();
-
-        ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgW);
-        ctx.restore();
-      } else {
-        ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgH)
-        ctx.restore();
-      }
-    }
-
-    return ctx
  }
+
+  return ctx
 }

 export default drawQrcode