refactor: 重构二维码弹窗组件为命令式调用

components/qrcode-modal/qrcode-modal.js

@@ -1,39 +1,22 @@
 const drawQrcode = require('../../utils/weapp.qrcode.esm.js').default
 
 Component({
-  properties: {
-    visible: {
-      type: Boolean,
-      value: false
-    },
-    qrcodeId: {
-      type: String,
-      value: ''
-    }
-  },
-
   data: {
+    visible: false,
+    qrcodeId: '',
     loading: true
   },
 
-  observers: {
-    'visible'(val) {
-      if (val && this.data.qrcodeId) {
-        this.setData({ loading: true })
-        this.draw()
-      }
-    }
-  },
-
   methods: {
-    draw() {
+    show(id) {
+      this.setData({ visible: true, qrcodeId: id, loading: true })
       wx.nextTick(() => {
         drawQrcode({
           width: 200,
           height: 200,
           canvasId: 'qrcodeCanvas',
           _this: this,
-          text: this.data.qrcodeId,
+          text: id,
           callback: () => {
             this.setData({ loading: false })
           }
@@ -42,7 +25,7 @@ Component({
     },
 
     onClose() {
-      this.triggerEvent('close')
+      this.setData({ visible: false, qrcodeId: '' })
     }
   }
 })

pages/index/index.js

@@ -6,9 +6,7 @@ Page({
   data: {
     isLoggedIn: false,
     loginFailed: false,
-    latestRecord: null,
+    latestRecord: null
-    qrcodeVisible: false,
-    qrcodeId: ''
   },
 
   onLoad() {
@@ -82,11 +80,6 @@ Page({
   },
 
   showQrcode(e) {
-    const id = e.currentTarget.dataset.id
+    this.selectComponent('#qrcodeModal').show(e.currentTarget.dataset.id)
-    this.setData({ qrcodeVisible: true, qrcodeId: id })
-  },
-
-  hideQrcode() {
-    this.setData({ qrcodeVisible: false, qrcodeId: '' })
   }
 })

pages/index/index.wxml

@@ -83,5 +83,5 @@
   </view>
 
   <!-- 二维码弹窗 -->
-  <qrcode-modal visible="{{qrcodeVisible}}" qrcode-id="{{qrcodeId}}" bind:close="hideQrcode" />
+  <qrcode-modal id="qrcodeModal" />
 </view>

pages/records/records.js

@@ -7,9 +7,7 @@ Page({
     records: [],
     filteredRecords: [],
     currentTab: 'all',
-    loading: true,
+    loading: true
-    qrcodeVisible: false,
-    qrcodeId: ''
   },
 
   onLoad() {
@@ -86,11 +84,6 @@ Page({
   },
 
   showQrcode(e) {
-    const id = e.currentTarget.dataset.id
+    this.selectComponent('#qrcodeModal').show(e.currentTarget.dataset.id)
-    this.setData({ qrcodeVisible: true, qrcodeId: id })
-  },
-
-  hideQrcode() {
-    this.setData({ qrcodeVisible: false, qrcodeId: '' })
   }
 })

pages/records/records.wxml

@@ -78,5 +78,5 @@
   </view>
 
   <!-- 二维码弹窗 -->
-  <qrcode-modal visible="{{qrcodeVisible}}" qrcode-id="{{qrcodeId}}" bind:close="hideQrcode" />
+  <qrcode-modal id="qrcodeModal" />
 </view>