feat: add bind applet

src/api/user.js

@@ -8,7 +8,7 @@ import {
   messageSend
 } from './base'
 
-// 微信二维码
+// 公众号二维码
 export function getTicket (id) {
   return request({
     url: `keycloak/query/ticket/${id}`,
@@ -16,6 +16,15 @@ export function getTicket (id) {
   })
 }
 
+// 小程序二维码
+export function getQrcode (data) {
+  return request({
+    url: `wxapplet/qrcode`,
+    method: 'GET',
+    params: data
+  })
+}
+
 export function userinfo (silence) {
   const config = {
     // url: `${baseUrl}/realms/${realm}/account`,

src/views/platform/profile/index.vue

@@ -66,6 +66,17 @@
             {{ tip }}
           </div>
         </div>
+        <div class="c-grid-form__label" />
+        <div class="l-flex--row">
+          <i class="o-wechat" />
+          <div
+            class="has-padding u-pointer"
+            :class="appletcolor"
+            @click="onClickAccounts"
+          >
+            {{ applettip }}
+          </div>
+        </div>
       </div>
     </div>
     <el-dialog
@@ -92,6 +103,30 @@
         </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"
+          >
+        </div>
+      </div>
+    </el-dialog>
   </wrapper>
 </template>
 
@@ -100,7 +135,8 @@ import { mapState } from 'vuex'
 import {
   userinfo,
   updateUser,
-  getTicket
+  getTicket,
+  getQrcode
 } from '@/api/user'
 import {
   validPhone,
@@ -121,7 +157,10 @@ export default {
       showQr: false,
       qr: null,
       loadingQr: false,
-      retry: false
+      retry: false,
+      qrcodeSrc: null,
+      qrcodeshow: false,
+      applet: ''
     }
   },
   computed: {
@@ -137,6 +176,12 @@ export default {
     },
     color () {
       return this.wechat ? 'u-color--error' : 'u-color--primary'
+    },
+    applettip () {
+      return this.applet ? '解除小程序绑定' : '绑定小程序'
+    },
+    appletcolor () {
+      return this.applet ? 'u-color--error' : 'u-color--primary'
     }
   },
   created () {
@@ -149,6 +194,52 @@ export default {
     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()
     },
@@ -186,6 +277,7 @@ export default {
       this.email = data.email ?? ''
       this.wechat = this.getOrCreateAttribute(data, 'wechat', '')
       this.user = data
+      this.applet = this.getOrCreateAttribute(data, 'wechat-applet-openid', '')
     },
     getOrCreateAttribute (user, key, defaults = '') {
       if (!user.attributes[key]) {
@@ -279,6 +371,7 @@ export default {
       }
     },
     onCloseQr () {
+      this.qrcodeshow = false
       this.showQr = false
       clearTimeout(this.$timer)
     },