Browse Source

:space_invader:feat: pending过程显示发送中

Ritchie 1 năm trước cách đây
mục cha
commit
028e815ddc
3 tập tin đã thay đổi với 30 bổ sung43 xóa
  1. 1 0
      src/assets/language/en.json
  2. 1 0
      src/assets/language/zh.json
  3. 28 43
      src/views/register.vue

+ 1 - 0
src/assets/language/en.json

@@ -1207,6 +1207,7 @@
     "phonePlaceholder": "Please enter your mobile number",
     "phoneRequired": "Please enter the correct mobile number",
     "seedVerCode": "Send verification code",
+    "sending": "Sending...",
     "codeLabel": "verification code",
     "codePlaceholder": "Please enter SMS verification code",
     "codeRequired": "Please enter SMS verification code",

+ 1 - 0
src/assets/language/zh.json

@@ -1221,6 +1221,7 @@
     "emailWordSpan": "输入注册海外账户邮箱",
     "emailWordSpanChina": "输入注册时的国内邮箱",
     "seedVerCode": "发送验证码",
+    "sending": "发送中",
     "codeLabel": "短信验证码",
     "codePlaceholder": "请输入短信验证码",
     "codeRequired": "请输入短信验证码",

+ 28 - 43
src/views/register.vue

@@ -52,7 +52,8 @@
             :rules="[{ required: true, message: $t('register.codeRequired') }]">
             <template #button v-if="ifForeign === '0' && logonMode === '10'">
               <van-button size="small" type="primary" @click="seedVerCode()"
-                :disabled="time !== 0 || phone.length === 0">{{
+                :disabled="time !== 0 || phone.length === 0"
+                :loading=reqApi :loading-text="$t('register.sending')">{{
                   time === 0 ?
                   $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
                 }}
@@ -73,7 +74,8 @@
             :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
             <template #button v-if="ifForeign === '0' && logonMode === '11'">
               <van-button size="small" type="primary" @click="seedVerCode()"
-                :disabled="time !== 0 || email.length === 0">{{
+                :disabled="time !== 0 || email.length === 0"
+                :loading=reqApi :loading-text="$t('register.sending')">{{
                   time === 0 ?
                   $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
                 }}
@@ -93,8 +95,8 @@
             :placeholder="$t('register.emailCodePlaceholder')"
             :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
             <template #button v-if="ifForeign === '1'">
-              <van-button size="small" type="primary" @click="seedVerCode()"
-                :disabled="time !== 0 || email.length === 0">{{
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || email.length === 0"
+                :loading=reqApi :loading-text="$t('register.sending')">{{
                   time === 0 ?
                   $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
                 }}
@@ -147,6 +149,7 @@ export default {
     let phoneOrEmailStr = ref('');
 
     const router = useRouter();
+    const reqApi = ref(false);
 
     // 注册点击
     const registerSubmit = async () => {
@@ -178,6 +181,9 @@ export default {
 
     // 发送验证码
     const seedVerCode = async () => {
+
+      reqApi.value = true;
+
       if (ifForeign.value === '1') {
         phoneOrEmailStr = email.value;
       } else if (ifForeign.value === '0' && logonMode.value === '10') {
@@ -186,35 +192,24 @@ export default {
         phoneOrEmailStr = email.value;
       }
 
-      // 先获取上次发送验证码的时间
-      // const { data } = await getLastSendTime({
-      //   phoneOrEmail: phoneOrEmailStr,
-      // });
-      // if (data.code === '00000') {
-      //   lastSendTime.value = data.data;
-      // }
-      // const currentTime = new Date().getTime();
-      // console.log("是否符合发送验证码的条件:", currentTime - lastSendTime.value > 1000 * 60 * 10 || lastSendTime.value === '');
-      // if (currentTime - lastSendTime.value > 1000 * 60 * 10 || lastSendTime.value === '') {
-      const { data } = await sentRegisterCode({
-        ifForeign: ifForeign.value,
-        phoneOrEmail: phoneOrEmailStr,
-        hostName: 'Sunzee',
-      });
-      // console.log('seedVerCodeSuccess', data);
-      if (data.code === '00000') {
-        Toast(data.data);
-        // 记录本次发送验证码的时间
-        // setLocal('lastSendTime', currentTime);
-        verCodeTime.time = 1 * 60; // 1分钟定时器,60s后可以更换验证方式
-        verCodeTimeInterval();
-      } else {
-        Toast.fail(data.message);
+      try {
+        const { data } = await sentRegisterCode({
+          ifForeign: ifForeign.value,
+          phoneOrEmail: phoneOrEmailStr,
+          hostName: 'Sunzee',
+        });
+        if (data.code === '00000') {
+          reqApi.value = false;
+          Toast(data.data);
+          verCodeTime.time = 1 * 60; // 1分钟定时器,60s后可以更换验证方式
+          verCodeTimeInterval();
+        } else {
+          reqApi.value = false;
+          Toast.fail(data.message);
+        }
+      } catch (error) {
+        reqApi.value = false;
       }
-      // } else {
-      // Toast('请勿频繁发送验证码,10分钟后再试');
-      // return;
-      // }
     }
     // 验证码发送成功开始1分钟倒计时
     const verCodeTimeInterval = () => {
@@ -226,17 +221,6 @@ export default {
         }
       }, 1000);
     }
-    // 验证码发送成功开始3分钟倒计时
-    // const verCodeTimeInterval = () => {
-    //   verCodeTime.time--;
-    //   setLocal('registerVerCodeTime', verCodeTime.time)
-    //   if (verCodeTime.time !== 0) {
-    //     setTimeout(() => {
-    //       verCodeTimeInterval();
-    //     }, 1000);
-    //   }
-    // }
-
     // 初始化页面获取验证码倒计时
     onMounted(async () => {
       // 加载样式
@@ -295,6 +279,7 @@ export default {
       active,
       logonMode,
       // lastSendTime,
+      reqApi
     }
   },
   components: { sHeader }