From ae245872f47cfa7efc04c8e43289b6a55f14ad50 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Sat, 9 Aug 2025 12:32:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=8C=89=E9=92=AE=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Signin.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/Signin.vue b/src/components/Signin.vue
index aef51f6..02a791a 100644
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
 import { getMyDevicesAPI, loginAPI, getHomeData } from "@/apis";
@@ -15,6 +16,7 @@ const props = defineProps({
 const agree = ref(false);
 const avatarUrl = ref("");
 const nickName = ref("");
+const loading = ref(false);
 const handleAgree = () => {
   agree.value = !agree.value;
 };
@@ -28,6 +30,7 @@ function onNicknameChange(e) {
 }
 
 const handleLogin = () => {
+  if (loading.value) return;
   if (!avatarUrl.value) {
     return uni.showToast({
       title: "请选择头像",
@@ -46,6 +49,7 @@ const handleLogin = () => {
       icon: "none",
     });
   }
+  loading.value = true;
   uni.login({
     provider: "weixin",
     success: async (loginRes) => {
@@ -66,6 +70,7 @@ const handleLogin = () => {
       props.onClose();
     },
     fail: (err) => {
+      loading.value = false;
       uni.showToast({
         title: "登录失败",
         icon: "none",
@@ -74,6 +79,9 @@ const handleLogin = () => {
     },
   });
 };
+onShow(() => {
+  loading.value = false;
+});
 </script>
 
 <template>
@@ -101,12 +109,21 @@ const handleLogin = () => {
       />
     </view>
     <SButton :rounded="20" width="80vw" :onClick="handleLogin">
-      <image
-        src="../static/wechat-icon.png"
-        mode="widthFix"
-        class="wechat-icon"
-      />
-      <text :style="{ color: '#000' }">登录/注册</text>
+      <block v-if="!loading">
+        <image
+          src="../static/wechat-icon.png"
+          mode="widthFix"
+          class="wechat-icon"
+        />
+        <text :style="{ color: '#000' }">登录/注册</text>
+      </block>
+      <block v-else>
+        <image
+          src="../static/btn-loading.png"
+          mode="widthFix"
+          class="loading"
+        />
+      </block>
     </SButton>
     <view class="protocol" @click="handleAgree">
       <view v-if="!agree" />
@@ -188,4 +205,10 @@ const handleLogin = () => {
   width: 80%;
   display: flex;
 }
+.loading {
+  width: 25px;
+  height: 25px;
+  background-blend-mode: darken;
+  animation: rotate 1s linear infinite;
+}
 </style>