fix: 登录后展示个人信息弹窗

components/LoginBar.vue

@@ -38,7 +38,7 @@ export default {
   },
   computed: {
     loginBtnDisabled() {
-      return !(this.form.username && this.form.password)
+      return !(this.form.username && this.form.password && this.form.password.length >= 6)
     },
     forgetDisabled() {
       return !(this.forgetForm.account && this.forgetForm.code)
@@ -81,6 +81,7 @@ export default {
           this.$store.commit('setUser',res.result)
           localStorage.setItem('userInfo',JSON.stringify(res.result))
           this.logging = false
+          this.$emit('loginSucess')
         }
       })
     },

components/RegisterBar.vue

@@ -62,10 +62,8 @@ export default {
           let interval = setInterval(() => {
             this.clock--
             if(this.clock === 0) {
-              this.$once('hook:beforeDestroy',()=> {
-                clearInterval(interval)
-                interval = null
-              })
+              clearInterval(interval)
+              interval = null
               this.clock = 60
               this.sending = false
             }
@@ -87,6 +85,7 @@ export default {
         if(res.code === 200) {
           this.$store.commit('setUser',res.result)
           localStorage.setItem('userInfo',JSON.stringify(res.result))
+          this.$emit('loginSucess')
         }
       })
     },

layouts/components/NavBar.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:11
- * @LastEditTime: 2022-11-11 17:47:39
+ * @LastEditTime: 2022-11-14 19:15:50
 -->
 <template>
   <div class="h-80px flex relative z-3 justify-between px-[10%] border-b-1 border-b-[#f0f0f0] border-b-solid">
@@ -22,6 +22,8 @@
       <div v-if="!!token">
         <client-only>
           <el-popover
+            ref="popover"
+            v-model="popover"
             placement="bottom"
             trigger="hover"
             :close-delay="800"
@@ -30,7 +32,7 @@
               <div class="px-24px pt-24px min-w-300px">
                 <div class="flex pb-22px cursor-pointer" style="border-bottom: 1px solid #f0f0f0;">
                   <a href="/members/me/expenses">
-                    <img v-if="userInfo?.memberInfo.subscriberType === 1" class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+                    <img v-if="userInfo?.memberInfo?.subscriberType === 1" class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
                     <img v-else class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
                   </a>
                   <div class="pl-20px">
@@ -40,13 +42,13 @@
                 </div>
                 <div class="flex py-14px mt-20px justify-between">
                   <div>
-                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-18px text-[#333] leading-24px">17会员</p>
+                    <p v-if="userInfo?.memberInfo?.subscriberType === 1" class="text-18px text-[#333] leading-24px">17会员</p>
                     <p v-else class="text-18px text-[#333] leading-24px">免费用户</p>
-                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+                    <p v-if="userInfo?.memberInfo?.subscriberType === 1" class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
                     <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
                   </div>
                   <button class="btn-renew" @click="$router.push('/pricing')">
-                    {{userInfo?.memberInfo.subscriberType === 1 ? '续费' : '订阅会员'}}
+                    {{userInfo?.memberInfo?.subscriberType === 1 ? '续费' : '订阅会员'}}
                   </button>
                 </div>
                 <div class="flex py-14px my-8px justify-between" style="border-bottom: 1px solid #f0f0f0;">
@@ -64,7 +66,7 @@
                 </div>
               </div>
             </div>
-            <img v-if="!!token" slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.memberInfo.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
+            <img slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.memberInfo?.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
           </el-popover>
         </client-only>
       </div>
@@ -84,8 +86,8 @@
         :custom-class="interface === 'manage' ? 'manage-dialog': 'login-dialog'"
         @close="handlerCloseDialog"
       >
-        <login v-show="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog"></login>
-        <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog"></register>
+        <login v-show="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog" @loginSucess="handleLoginSucess"></login>
+        <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog" @loginSucess="handleLoginSucess"></register>
         <UserManage v-show="interface === 'manage'" ref="manageRef" @close="handlerCloseDialog"></UserManage>
         <BuyVip v-if="interface === 'vip'" ref="vipRef" @close="handlerCloseDialog"></BuyVip>
         <BuyTicket v-if="interface === 'ticket'" ref="ticketRef" @close="handlerCloseDialog"></BuyTicket>
@@ -114,6 +116,7 @@ export default {
   data() {
     return {
       dialogVisiable: false,
+      popover: false,
     }
   },
   computed: {
@@ -146,6 +149,14 @@ export default {
     }
   },
   methods: {
+    handleLoginSucess() {
+      this.$nextTick(()=> {
+        this.popover = true
+      })
+      setTimeout(() => {
+        this.popover = false
+      }, 2000);
+    },
     handlerOpenLogin(type) {
       this.dialogVisiable = true
       this.$store.commit('SET_INTERFACE', type)