gpc-ui 0.1.17 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gpc-ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "二小UI",
   "private": false,
   "main": "lib/gpc-ui.umd.min.js",

package/src/components/gpc-login/index.vue

@@ -44,7 +44,7 @@
             <TabPane label="验证码登录" name="2">
               <div>
                 <div class="input-box">
-                  <input type="text" placeholder="手机号" v-model="verifyFrom.username">
+                  <input type="text" placeholder="手机号" v-model="verifyFrom.phoneNum">
                 </div>
                 <div class="input-box">
                   <drag-verify ref="dragVerifyLogin" :width="300" :isPassing.sync="isPassingLogin" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
@@ -54,12 +54,12 @@
                 </div>
                 <div class="input-box">
                   <div class="drag-verify-box">
-                    <input type="text" placeholder="验证码" v-model="verifyFrom.authCode">
+                    <input type="text" placeholder="验证码" v-model="verifyFrom.smsCode">
                     <el-button style="border-color: #028037; color: #028037;" plain size="small" @click="getLoginVerifyCode" :disabled="isDisabledLogin">{{buttonLoginText}}</el-button>
                   </div>
                 </div>
                 <div class="buttons clearfix">
-                  <button type="button" class="btn-login fr button" @click="getVerifyCodeLogin">登录</button>
+                  <el-button class="btn-login fr button" :loading="loadingVerify" @click="getVerifyCodeLogin">登录</el-button>
                 </div>
               </div>
             </TabPane>
@@ -69,7 +69,7 @@
           <div>
             <h3>重置密码</h3>
             <div class="input-box">
-              <input type="text" placeholder="手机号" v-model="verifyFrom.username">
+              <input type="text" placeholder="手机号" v-model="resetFrom.phoneNum">
             </div>
             <div class="input-box">
               <drag-verify ref="dragVerifyRest" :width="320" :isPassing.sync="isPassingRest" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
@@ -79,12 +79,12 @@
             </div>
             <div class="input-box">
               <div class="drag-verify-box">
-                <input type="text" placeholder="验证码" v-model="verifyFrom.authCode">
+                <input type="text" placeholder="验证码" v-model="resetFrom.smsCode">
                 <el-button style="border-color: #028037; color: #028037;" plain size="small" @click="getRestVerifyCode" :disabled="isDisabledRest">{{buttonRestText}}</el-button>
               </div>
             </div>
             <div class="buttons clearfix">
-              <button type="button" class="btn-register fr button" @click="getRegisterPw">重置</button>
+              <el-button class="btn-login fr button" :loading="loadingRest" @click="getRegisterPw">重置</el-button>
             </div>
           </div>
         </div>
@@ -147,7 +147,15 @@ export default {
     loading: {
       type: Boolean,
       default: false
-    }
+    },
+    loadingVerify: {
+      type: Boolean,
+      default: false
+    },
+    loadingRest: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -167,8 +175,9 @@ export default {
       isPassingAccount: false,
       // 验证码登录
       verifyFrom:{
-        username: "",
+        phoneNum: "",
         authCode: "",
+        smsCode: "",
       },
       // 滑块验证 - 验证码登录
       isPassingLogin: false,
@@ -176,8 +185,9 @@ export default {
       isDisabledLogin: false,
       // 重置密码
       resetFrom:{
-        username: "",
+        phoneNum: "",
         authCode: "",
+        smsCode: "",
       },
       // 滑块验证 - 验证码登录
       isPassingRest: false,
@@ -199,7 +209,7 @@ export default {
       console.log('getCodeRequest', type, authCode)
       if(type === 'account'){
         this.accountFrom.authCode = authCode
-      } else if(type === 'login'){
+      } else if(type === 'smsCode'){
         this.verifyFrom.authCode = authCode
       } else if(type === 'rest'){
         this.resetFrom.authCode = authCode
@@ -224,13 +234,64 @@ export default {
       console.log('passCallAccountBack \'验证通过\'', this.isPassingAccount);
       this.$emit('getCodeRequest', 'account');
     },
-    // 验证码登录
+    // 验证码登录-提取公共校验逻辑
+    validateVerifyForm() {
+      if (!this.verifyFrom || typeof this.verifyFrom !== 'object') {
+        this.$notify.error({ message: '表单数据未正确初始化，请刷新页面重试。' });
+        return false;
+      }
+      if (!this.verifyFrom.phoneNum) {
+        this.$notify.error({ message: '请输入手机号' });
+        return false;
+      }
+      if (!this.isPassingLogin) {
+        this.$notify.error({ message: '请先进行滑块验证' });
+        return false;
+      }
+      if (!this.verifyFrom.authCode) {
+        this.$notify.error({ message: '验证滑块码获取失败，请刷新页面，重新获取1。' });
+        return false;
+      }
+      return true;
+    },
+    // 验证码登录-登录
     getVerifyCodeLogin(){
-
+      try {
+        // 校验公共逻辑
+        if (!this.validateVerifyForm()) return false;
+        // 校验短信验证码
+        if (!this.verifyFrom.smsCode) {
+          this.$notify.error({ message: '请输入短信验证码' });
+          return false;
+        }
+        // 触发事件
+        this.$emit('getVerifyCodeLoginRequest', this.verifyFrom);
+        return true;
+      } catch (error) {
+        console.error('重置密码过程中发生错误:', error);
+        this.$notify.error({ message: '系统异常，请稍后再试。' });
+        return false;
+      }
     },
-    // 获取验证码（登录）
+    // 验证码登录-获取验证码（登录）
     getLoginVerifyCode(){
+      try {
+        // 校验公共逻辑
+        if (!this.validateVerifyForm()) return false;
+
+        // 调用验证码设置方法
+        this.setLoginVerifyCodeBack();
+        return true;
+      } catch (error) {
+        console.error('获取验证码过程中发生错误:', error);
+        this.$notify.error({ message: '系统异常，请稍后再试。' });
+        return false;
+      }
+    },
+    // 验证码登录-获取验证码（重置）- 回调
+    setLoginVerifyCodeBack() {
       if(this.isPassingLogin){
+        this.$emit('applySMSCodeRequest', this.verifyFrom);
         this.isDisabledLogin = true
         this.countdownLogin = 3
         const interval = setInterval(()=>{
@@ -243,22 +304,74 @@ export default {
         },1000)
       }
     },
+    // 验证码登录- 发送获取authCode
     passCallLoginBack() {
-      console.log('passCallLoginBack \'验证通过\'');
-      this.$emit('getCodeRequest', 'code');
-      // this.isPassingLogin = false
+      this.$emit('getCodeRequest', 'smsCode');
     },
     resetLogin() {
       this.isPassingLogin = false;
       this.$refs.dragVerifyLogin.reset()
     },
+    // 提取公共校验逻辑 -  重置密码
+    validateResetForm() {
+      if (!this.resetFrom || typeof this.resetFrom !== 'object') {
+        this.$notify.error({ message: '表单数据未正确初始化，请刷新页面重试。' });
+        return false;
+      }
+      if (!this.resetFrom.phoneNum) {
+        this.$notify.error({ message: '请输入手机号' });
+        return false;
+      }
+      if (!this.isPassingRest) {
+        this.$notify.error({ message: '请先进行滑块验证' });
+        return false;
+      }
+      if (!this.resetFrom.authCode) {
+        this.$notify.error({ message: '验证滑块码获取失败，请刷新页面，重新获取。' });
+        return false;
+      }
+      return true;
+    },
     // 重置密码
     getRegisterPw(){
-
+      try {
+        // 校验公共逻辑
+        if (!this.validateResetForm()) return false;
+
+        // 校验短信验证码
+        if (!this.resetFrom.smsCode) {
+          this.$notify.error({ message: '请输入短信验证码' });
+          return false;
+        }
+
+        // 触发事件
+        this.$emit('getRegisterPwRequest', this.resetFrom);
+        return true;
+      } catch (error) {
+        console.error('重置密码过程中发生错误:', error);
+        this.$notify.error({ message: '系统异常，请稍后再试。' });
+        return false;
+      }
     },
     // 获取验证码（重置）
     getRestVerifyCode(){
+      try {
+        // 校验公共逻辑
+        if (!this.validateResetForm()) return false;
+
+        // 调用验证码设置方法
+        this.setRestVerifyCodeBack();
+        return true;
+      } catch (error) {
+        console.error('获取验证码过程中发生错误:', error);
+        this.$notify.error({ message: '系统异常，请稍后再试。' });
+        return false;
+      }
+    },
+    // 获取验证码（重置）- 回调
+    setRestVerifyCodeBack() {
       if(this.isPassingRest){
+        this.$emit('applySMSCodeRequest', this.resetFrom);
         this.isDisabledRest = true
         this.countdownRest = 3
         const interval = setInterval(()=>{
@@ -272,8 +385,6 @@ export default {
       }
     },
     passCallRestBack() {
-      console.log('passCallRestBack \'验证通过\'');
-      // this.isPassingRest = false
       this.$emit('getCodeRequest', 'rest');
     },
     resetPw() {