登录注册加上loading

layout/components/authModal/login/index.vue

@@ -16,7 +16,7 @@
         <!-- 手机号快捷登录 -->
         <view v-if="current === 0">
           <button v-if="!protocol" class="send-button MiSans-Medium" @click="showProtocolToast">手机号快捷登录</button>
-          <button v-else class="send-button MiSans-Medium" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
+          <button v-else class="send-button MiSans-Medium" :loading="phoneNumberLoading" :disabled="phoneNumberLoading" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
         </view>
 
         <!-- 短信验证码登录 -->
@@ -65,7 +65,7 @@
           </uni-forms-item>
         </uni-forms>
 
-        <button v-if="current !== 0" class="send-button MiSans-Medium" @tap="handleLogin"> 登 录  </button>
+        <button v-if="current !== 0" class="send-button MiSans-Medium" :loading="smsLoginLoading" :disabled="smsLoginLoading" @tap="handleLogin"> 登 录  </button>
         <view class="agreement-box ss-flex ss-row-center">
           <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00B760' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
           <view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
@@ -122,7 +122,7 @@
       </uni-forms>
       <view class="register login color-primary ss-p-b-5 MiSans-Normal" style="text-align: end;" @tap="handleChangeLogin">已有账户？去登陆</view>
       <view>
-        <button class="send-button" :loading="loading" :disabled="loading" @tap="handleRegister"> 注 册 </button>
+        <button class="send-button" :loading="registerLoading" :disabled="registerLoading" @tap="handleRegister"> 注 册 </button>
       </view>
       <view class="color-999 ss-flex ss-col-center ss-row-center ss-m-l-8 font-size-13" style="margin-bottom: 30px;">
         <span class="MiSans-Normal">点击注册即代表您同意</span>
@@ -150,7 +150,9 @@ const current = ref(0)
 const accountLoginRef = ref()
 const smsLoginRef = ref()
 const registerForm = ref()
-const loading = ref(false)
+const phoneNumberLoading = ref(false)
+const smsLoginLoading = ref(false)
+const registerLoading = ref(false)
 const protocol = ref(false)
 const state = ref({
   isMobileEnd: false, // 手机号输入完毕
@@ -247,6 +249,8 @@ const getPhoneNumber = async (e) => {
     return
   }
   changeType.value = 'login'
+  phoneNumberLoading.value = true
+
   wx.login({
     success: async (result) => {
       const wxLoginCode = result?.code || ''
@@ -256,8 +260,12 @@ const getPhoneNumber = async (e) => {
         state: e.detail.encryptedData,
       }
       await useUserStore.handleSmsLogin(query, current.value)
+      phoneNumberLoading.value = false
     },
-    fail:(res)=> { console.log("获取登录凭证code失败！", res) }
+    fail:(res)=> { 
+      phoneNumberLoading.value = false
+      console.log("获取登录凭证code失败！", res)
+    }
   })
 }
 
@@ -265,11 +273,11 @@ async function handleRegister () {
   const validate = await unref(registerForm).validate()
   if (!validate) return
   try {
-    loading.value = true
+    registerLoading.value = true
     await useUserStore.handleRegister(state.value.register)
     changeType.value = 'login'
   } finally {
-    loading.value = false
+    registerLoading.value = false
   }
 }
 
@@ -278,12 +286,18 @@ const handleLogin = async () => {
   if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
   const validate = await unref(current.value === 1 ? smsLoginRef : accountLoginRef).validate()
   if (!validate) return
-  const query = current.value === 1 ? state.value.sms : state.value.account
-  Object.assign(query, {
-    account: query.phone
-  })
-  
-  await useUserStore.handleSmsLogin(query, current.value)
+
+  try {
+    smsLoginLoading.value = true
+    const query = current.value === 1 ? state.value.sms : state.value.account
+    Object.assign(query, {
+      account: query.phone
+    })
+    await useUserStore.handleSmsLogin(query, current.value)
+    
+  } finally {
+    smsLoginLoading.value = false
+  }
 }
 </script>