feat：添加loading

src/view/Auth/Login/Login.vue

@@ -84,6 +84,7 @@
             <LoginButton
               text="注册"
               :disabled="getRegisterDisableStatus"
+              :loading="loading"
               @click="handleClickRegister"
             ></LoginButton>
           </div>
@@ -91,6 +92,7 @@
             <LoginButton
               text="登录"
               :disabled="getLoginBtnDisableStatus"
+              :loading="loading"
               @click="handleClickLogin"
             ></LoginButton>
             <div v-if="loginByPwdFunc">
@@ -206,9 +208,9 @@ export default Vue.extend({
       pwd: "",
       overlayShow: false,
       rememberPwdChecked: false,
-      btnLoading: false,
       slideConfirmed: false,
       randomNum: Math.random(),
+      loading: false,
     };
   },
   methods: {
@@ -240,16 +242,15 @@ export default Vue.extend({
       if (this.getRegisterDisableStatus) return;
       const { phone, code } = this;
       // 调用注册接口
-      this.btnLoading = true;
+      this.loading = true;
       try {
         const regResult = await this.registerFunc(phone, code);
       } catch (err) {}
-      this.btnLoading = false;
+      this.loading = false;
     },
     async handleClickLogin() {
-      if (this.getLoginBtnDisableStatus) return;
       const { phone, code, pwd } = this;
-      this.btnLoading = true;
+      this.loading = true;
       try {
         if (this.loginWay === eLoginWay.PWD) {
           // 调用登录接口
@@ -266,7 +267,7 @@ export default Vue.extend({
           await this.loginByCodeFunc(phone, code);
         }
       } catch (err) {}
-      this.btnLoading = false;
+      this.loading = false;
       this.randomNum = Math.random();
       this.slideConfirmed = false;
     },
@@ -327,22 +328,17 @@ export default Vue.extend({
       return pwdConfig.validate(this.pwd);
     },
     getRegisterDisableStatus(): boolean {
-      return (
-        !(this.codeValid && this.checkStatusValid && this.phoneValid) ||
-        this.btnLoading
-      );
+      return !(this.codeValid && this.checkStatusValid && this.phoneValid);
     },
     getLoginBtnDisableStatus(): boolean {
       if (this.loginWay === eLoginWay.CODE) {
         return (
           !(this.codeValid && this.phoneValid && this.checkStatusValid) ||
-          this.btnLoading ||
           !this.slideConfirmed
         );
       } else if (this.loginWay === eLoginWay.PWD) {
         return (
           !(this.pwdValid && this.phoneValid && this.checkStatusValid) ||
-          this.btnLoading ||
           !this.slideConfirmed
         );
       }

src/view/Auth/Login/components/LoginButton/index.vue

@@ -9,21 +9,29 @@
       :class="[
         disabled ? 'darkBtn' : 'bg-font-blue',
         disabled ? 'darkBtn' : ' text-white ',
+        loading ? 'opacity-75': '',
       ]"
     >
       <template #icon-right>
-        <img
-          v-if="!disabled"
-          class="ml-2"
-          src="@/assets/icons/arrow-right.png"
-          alt="arrow-right"
-        />
-        <img
-          v-else
-          class="ml-2"
-          src="@/assets/icons/arrow-right-dark.png"
-          alt="arrow-right"
-        />
+        <div>
+          <div v-if="!loading">
+            <img
+              v-if="!disabled"
+              class="ml-2"
+              src="@/assets/icons/arrow-right.png"
+              alt="arrow-right"
+            />
+            <img
+              v-else
+              class="ml-2"
+              src="@/assets/icons/arrow-right-dark.png"
+              alt="arrow-right"
+            />
+          </div>
+          <div v-else>
+            <Loading class="w-4 ml-2" />
+          </div>
+        </div>
       </template>
     </Button>
   </transition>
@@ -31,18 +39,25 @@
 
 <script lang="ts">
 import Button from "@/components/common/Btn.vue";
+import { Loading } from "vant";
 import Vue from "vue";
 export default Vue.extend({
   components: {
     Button,
+    Loading,
   },
   props: {
     text: String,
     disabled: Boolean,
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     handleCliCkBtn(e: MouseEvent) {
       if (this.disabled) return;
+      if (this.loading) return;
       this.$emit("click", e);
     },
   },

src/view/Auth/PwdFind/PwdFind.vue

@@ -37,6 +37,7 @@
       text="确定"
       :disabled="getConfirmDisabled"
       @click="handleClickConfirm"
+      :loading="loading"
     ></LoginButton>
   </div>
 </template>
@@ -80,6 +81,7 @@ export default Vue.extend({
       phone: "",
       code: "",
       pwd: "",
+      loading: false,
     };
   },
   methods: {

src/view/Auth/PwdModify/PwdModify.vue

@@ -38,6 +38,7 @@
       class="mt-20"
       text="确定"
       :disabled="getConfirmDisabled"
+      :loading="loading"
       @click="handleClickConfirm"
     ></LoginButton>
     <div class="mt-5 text-center text-font-blue text-sm">

src/view/Auth/PwdSetting/PwdSetting.vue

@@ -27,6 +27,7 @@
     <LoginButton
       class="mt-20"
       text="确定"
+      :loading="loading"
       :disabled="getConfirmDisabled"
       @click="handleClickConfirm"
     ></LoginButton>
@@ -67,6 +68,7 @@ export default Vue.extend({
       pwdConfig,
       code: "",
       pwd: "",
+      loading: false,
     };
   },
   computed: {
@@ -81,9 +83,13 @@ export default Vue.extend({
     },
   },
   methods: {
-    handleClickConfirm() {
+    async handleClickConfirm() {
       const { phone, code, pwd } = this;
-      this.setPwdFunc(phone, code, pwd);
+      this.loading = true;
+      try {
+        await this.setPwdFunc(phone, code, pwd);
+      } catch (err) {}
+      this.loading = false;
     },
     handleCodeChange(v: string) {
       this.code = v;