进出码优化

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);