refactor(profile): qrcode

src/views/platform/profile/index.vue

@@ -71,10 +71,10 @@
           <i class="o-wechat" />
           <div
             class="has-padding u-pointer"
-            :class="appletcolor"
-            @click="onClickAccounts"
+            :class="appletColor"
+            @click="onClickApplet"
           >
-            {{ applettip }}
+            {{ appletTip }}
           </div>
         </div>
       </div>
@@ -91,38 +91,14 @@
           <span class="c-sibling-item u-color--black u-bold">请使用微信扫一扫</span>
         </div>
         <div
-          v-loading="loadingQr"
+          v-loading="qrOptions.loading"
           class="c-wechat__wrapper"
-          :class="{ retry }"
+          :class="{ retry: qrOptions.retry }"
           @click="getQr"
         >
           <img
             class="c-wechat__qr"
-            :src="qr"
-          >
-        </div>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :visible.sync="qrcodeshow"
-      custom-class="c-preview"
-      width="0"
-      @close="onCloseQr"
-    >
-      <div class="c-wechat has-padding">
-        <div class="l-flex--row center has-bottom-padding">
-          <i class="c-sibling-item o-wechat" />
-          <span class="c-sibling-item u-color--black u-bold">请使用微信扫一扫</span>
-        </div>
-        <div
-          v-loading="loadingQr"
-          class="c-wechat__wrapper"
-          :class="{ retry }"
-          @click="getQrcode"
-        >
-          <img
-            class="c-wechat__qr"
-            :src="qrcodeSrc"
+            :src="qrOptions.qr"
           >
         </div>
       </div>
@@ -154,13 +130,19 @@ export default {
       phone: '',
       email: '',
       wechat: '',
+      applet: '',
       showQr: false,
-      qr: null,
-      loadingQr: false,
-      retry: false,
-      qrcodeSrc: null,
-      qrcodeshow: false,
-      applet: ''
+      qrType: 'wechatOptions',
+      wechatOptions: {
+        loading: false,
+        retry: false,
+        qr: null
+      },
+      appletOptions: {
+        loading: false,
+        retry: false,
+        qr: null
+      }
     }
   },
   computed: {
@@ -172,16 +154,19 @@ export default {
       } : null
     },
     tip () {
-      return this.wechat ? '解除绑定' : '绑定微信'
+      return this.wechat ? '解除公众号绑定' : '绑定公众号'
     },
     color () {
       return this.wechat ? 'u-color--error' : 'u-color--primary'
     },
-    applettip () {
+    appletTip () {
       return this.applet ? '解除小程序绑定' : '绑定小程序'
     },
-    appletcolor () {
+    appletColor () {
       return this.applet ? 'u-color--error' : 'u-color--primary'
+    },
+    qrOptions () {
+      return this[this.qrType]
     }
   },
   created () {
@@ -190,56 +175,10 @@ export default {
     this.getUserInfo()
   },
   beforeDestroy () {
-    this.onCloseQr()
+    clearTimeout(this.$timer)
     clearInterval(this.$checkTimer)
   },
   methods: {
-    onClickAccounts () {
-      if (this.applet) {
-        this.$confirm(
-          '解除绑定后将无法访问小程序',
-          '确定解绑小程序？',
-          { type: 'warning' }
-        ).then(
-          () => {
-            this.changeAttribute('wechat-applet-openid', this.applet = '', '解绑小程序')
-          }
-        )
-      } else {
-        this.qrcodeshow = true
-        this.getQrcode()
-        this.checkappletBind()
-      }
-    },
-    getQrcode () {
-      getQrcode({
-        page: 'pages/otp/otp'
-      }).then((res) => {
-        var url = 'data:image/png;base64,' + res.data
-        this.qrcodeSrc = url
-      })
-    },
-    checkappletBind () {
-      if (!this.applet && !this.$checkappletTimer) {
-        this.$checkappletTimer = setInterval(this.checkapplet, 2000)
-      }
-    },
-    checkapplet () {
-      userinfo(true).then(data => {
-        const applet = data.attributes['wechat-applet-openid']?.[0]
-        if (applet) {
-          this.$message({
-            type: 'success',
-            message: '绑定小程序成功'
-          })
-          this.setUserInfo(data)
-          this.onCloseQr()
-          clearInterval(this.$checkappletTimer)
-          this.$checkappletTimer = null
-          this.qrcodeSrc = ''
-        }
-      })
-    },
     onAvatarClick () {
       this.$refs.upload.click()
     },
@@ -363,80 +302,150 @@ export default {
           '解绑微信',
           { type: 'warning' }
         ).then(() => {
-          this.changeAttribute('wechat', this.wechat = '', '解绑微信')
+          this.changeAttribute('wechat', this.wechat = '', '解绑公众号')
         })
       } else {
+        this.qrType = 'wechatOptions'
+        this.showQr = true
+        this.getQr()
+      }
+    },
+    onClickApplet () {
+      if (this.applet) {
+        this.$confirm(
+          '解除绑定后将无法使用小程序的功能',
+          '解绑小程序',
+          { type: 'warning' }
+        ).then(
+          () => {
+            this.changeAttribute('wechat-applet-openid', this.applet = '', '解绑小程序')
+          }
+        )
+      } else {
+        this.qrType = 'appletOptions'
         this.showQr = true
         this.getQr()
       }
     },
     onCloseQr () {
-      this.qrcodeshow = false
       this.showQr = false
-      clearTimeout(this.$timer)
     },
     getQr () {
-      if (this.loadingQr || this.qr && !this.retry) {
+      const options = this.qrOptions
+      if (options.loading || options.qr && !options.retry) {
         return
       }
-      this.fetchQr()
-    },
-    resetQr () {
-      clearInterval(this.$checkTimer)
-      this.$checkTimer = null
-      this.qr = ''
-      this.retry = false
+      switch (this.qrType) {
+        case 'wechatOptions':
+          this.getWechatQr()
+          break
+        case 'appletOptions':
+          this.getAppletQr()
+          break
+        default:
+          break
+      }
     },
-    fetchQr () {
-      if (!this.showQr) {
-        this.qr = ''
+    getWechatQr () {
+      const options = this.wechatOptions
+      if (!this.showQr || this.qrType !== 'wechatOptions') {
+        options.qr = null
         return
       }
-      if (!this.qr || this.retry) {
-        this.loadingQr = true
-      }
-      this.retry = false
+      options.loading = true
+      options.retry = false
       clearTimeout(this.$timer)
       getTicket(this.user.id).then(
         ({ data }) => {
           if (!this.wechat) {
             try {
               const { expire_seconds, ticket } = JSON.parse(data)
-              this.qr = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket}`
+              options.checking = true
+              options.qr = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket}`
               // 提前10秒重新获取
-              this.$timer = setTimeout(this.fetchQr, (expire_seconds > 10 ? expire_seconds - 10 : expire_seconds) * 1000)
+              this.$timer = setTimeout(this.getWechatQr, (expire_seconds > 10 ? expire_seconds - 10 : expire_seconds) * 1000)
               this.checkBind()
             } catch (e) {
               console.warn(e)
-              this.retry = true
+              options.retry = true
             }
           }
         },
         () => {
           if (!this.wechat) {
-            this.retry = true
+            options.retry = true
           }
         }
       ).finally(() => {
-        this.loadingQr = false
+        options.loading = false
+      })
+    },
+    getAppletQr () {
+      const options = this.appletOptions
+      options.loading = true
+      options.retry = false
+      getQrcode({ page: 'pages/otp/otp' }).then(
+        ({ data }) => {
+          options.checking = true
+          options.qr = `data:image/png;base64,${data}`
+          this.checkBind()
+        },
+        () => {
+          options.retry = true
+        }
+      ).finally(() => {
+        options.loading = false
       })
     },
     checkBind () {
-      if (!this.wechat && !this.$checkTimer) {
+      if (!this.$checkTimer) {
         this.$checkTimer = setInterval(this.check, 2000)
       }
     },
     check () {
       userinfo(true).then(data => {
-        const wechat = data.attributes.wechat?.[0]
-        if (wechat) {
-          this.$message({
-            type: 'success',
-            message: '绑定微信成功'
-          })
+        let bound = false
+        let needCheck = false
+        if (this.wechatOptions.checking) {
+          const wechat = data.attributes.wechat?.[0]
+          if (wechat) {
+            bound = true
+            this.wechatOptions.checking = false
+            this.$message({
+              type: 'success',
+              message: '绑定公众号成功'
+            })
+            clearTimeout(this.$timer)
+            this.wechatOptions.qr = null
+            if (this.qrType === 'wechatOptions') {
+              this.onCloseQr()
+            }
+          } else {
+            needCheck = true
+          }
+        }
+        if (this.appletOptions.checking) {
+          const applet = data.attributes['wechat-applet-openid']?.[0]
+          if (applet) {
+            bound = true
+            this.appletOptions.checking = false
+            this.$message({
+              type: 'success',
+              message: '绑定小程序成功'
+            })
+            if (this.qrType === 'appletOptions') {
+              this.onCloseQr()
+            }
+          } else {
+            needCheck = true
+          }
+        }
+        if (bound) {
           this.setUserInfo(data)
-          this.onCloseQr()
-          this.resetQr()
+        }
+        if (!needCheck) {
+          clearInterval(this.$checkTimer)
+          this.$checkTimer = null
         }
       })
     }