登录注册页面优化登录按钮

pages/start/Registration/Registration.vue

@@ -146,7 +146,14 @@
     </view>
 
     <!-- 注册按钮 -->
-    <button class="register-btn" @click="register">注册</button>
+    <button class="register-btn" @click="register">
+      <text v-if="!isLoading">注册</text>
+      <image
+        v-else
+        class="icons-rotation"
+        src="../../../static/icons/loading.png"
+      ></image>
+    </button>
 
     <!-- 或者 -->
     <text class="or-text" @click="goToLogin"
@@ -204,6 +211,7 @@ const isCodeBtnDisabled = ref(false); // 添加验证码按钮禁用状态
 const checkboxUrl = ref("../../../static/icons/Check-one-false.png");
 const verifyCode = ref("");
 const account = ref("");
+const isLoading = ref(false);
 
 // 使用从list.js导入的完整国家列表数据
 const countries = ref(
@@ -261,6 +269,7 @@ async function register() {
 
   const account = changeAccount();
   const registerType = changeLoginType();
+  isLoading.value = true;
 
   const res = await registerApi({
     registerType: registerType,
@@ -269,6 +278,8 @@ async function register() {
     agree: agreed.value,
   });
 
+  isLoading.value = false;
+
   const message = res.message;
   if (res.code === 200) {
     // 登录成功
@@ -515,7 +526,6 @@ async function sendCode() {
     }
   }
 
-
   // 设置按钮为禁用状态
   isCodeBtnDisabled.value = true;
   codeBtnText.value = "重新发送";
@@ -656,6 +666,23 @@ function handleCancel() {
   /* margin-right: 10rpx; */
 }
 
+.icons-rotation {
+  margin: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  /* margin-right: 10rpx; */
+  animation: rotation 2s linear infinite;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .back-btn,
 .headphone-btn {
   font-size: 36rpx;

pages/start/login/login.vue

@@ -191,7 +191,14 @@
     </view>
 
     <!-- 注册按钮 -->
-    <button class="register-btn" @click="Login">登录</button>
+    <button class="register-btn" @click="Login">
+      <text v-if="!isLoading">登录</text>
+      <image
+        v-else
+        class="icons-rotation"
+        src="../../../static/icons/loading.png"
+      ></image>
+    </button>
 
     <!-- 或者 -->
     <text class="or-text" @click="goToRegistration"
@@ -274,6 +281,7 @@ const isCodeBtnDisabled = ref(false); // 添加验证码按钮禁用状态
 const checkboxUrl = ref("../../../static/icons/Check-one-false.png");
 const verifyCode = ref("");
 const account = ref("");
+const isLoading = ref(false);
 
 // 使用从list.js导入的完整国家列表数据
 const countries = ref(
@@ -341,7 +349,7 @@ async function Login() {
 
   const account = changeAccount();
   const loginType = changeLoginType();
-
+  isLoading.value = true;
   const res = await LoginApi({
     loginType: loginType,
     account: account,
@@ -350,6 +358,7 @@ async function Login() {
     useCode: verifyCode.value ? true : false,
     idToken: "",
   });
+  isLoading.value = false;
 
   const message = res.message;
   if (res.code === 200) {
@@ -789,6 +798,24 @@ function validatePhoneNumber(countryCode, phoneNumber) {
   /* margin-right: 10rpx; */
 }
 
+.icons-rotation {
+  margin: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  /* margin-right: 10rpx; */
+  animation: rotation 2s linear infinite;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
 .back-btn,
 .headphone-btn {
   font-size: 36rpx;