登录按钮添加loading

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>