gpc-ui 0.1.16 → 0.1.18

package/package.json

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

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

@@ -4,7 +4,7 @@
       <div style="color: #018a46;  font-size: 40px; font-style: unset; text-align: right;">
         {{systemTitle}}
       </div>
-      <div style="color: #018a46;  font-size: 32px; font-style: unset; text-align: right;">●{{subtitle}}</div>
+      <div style="color: #018a46;  font-size: 32px; font-style: unset; text-align: right;">·{{subtitle}}</div>
     </div>
     <div class="wrap-box">
       <div class="box-content">
@@ -28,15 +28,15 @@
                   <input type="text" placeholder="用户名/手机号" v-model="accountFrom.username">
                 </div>
                 <div class="input-box">
-                  <input type="password" placeholder="密码" v-model="accountFrom.password">
-                  <i class="el-icon-edit"></i>
+                  <input :type="inputType" placeholder="密码" v-model="accountFrom.password">
+                  <i class="el-icon-view" :class="{ icon: Color }" @click="Show" ></i>
                 </div>
                 <drag-verify ref="dragVerifyLogin" :width="300" :isPassing.sync="isPassingAccount" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
                              handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
                              @passcallback="passCallAccountBack">
                 </drag-verify>
                 <div class="buttons clearfix">
-                  <button type="button" class="btn-login fr button" @click="getAccountLogin">登录</button>
+                  <el-button class="btn-login fr button" :loading="loading" @click="getAccountLogin">登录</el-button>
                   <el-button type="text" style="color: #028037;" size="small" @click="getRegister">重置密码</el-button>
                 </div>
               </div>
@@ -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.username">
             </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>
@@ -144,10 +144,24 @@ export default {
       type: String,
       default: ''
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingVerify: {
+      type: Boolean,
+      default: false
+    },
+    loadingRest: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
       isLogin: true,
+      inputType: "password",
+      Color: false,
       // 当前选中的标签
       curTab: "1",
 
@@ -163,6 +177,7 @@ export default {
       verifyFrom:{
         username: "",
         authCode: "",
+        smsCode: "",
       },
       // 滑块验证 - 验证码登录
       isPassingLogin: false,
@@ -172,6 +187,7 @@ export default {
       resetFrom:{
         username: "",
         authCode: "",
+        smsCode: "",
       },
       // 滑块验证 - 验证码登录
       isPassingRest: false,
@@ -193,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
@@ -218,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.username) {
+        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(()=>{
@@ -237,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.username) {
+        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(()=>{
@@ -266,8 +385,6 @@ export default {
       }
     },
     passCallRestBack() {
-      console.log('passCallRestBack \'验证通过\'');
-      // this.isPassingRest = false
       this.$emit('getCodeRequest', 'rest');
     },
     resetPw() {
@@ -297,7 +414,12 @@ export default {
         console.warn(`Element  with selector ${selector} not found.`);
       }
     },
-
+    // 密码的可见和不可见
+    Show() {
+      // 点击改变input框的展示方式
+      this.inputType = this.inputType === "password" ? "text" : "password";
+      this.Color = !this.Color;
+    },
   },
   mounted() {
     // 确保在组件挂载后执行 DOM 操作
@@ -585,7 +707,7 @@ a {
   background-color: #00b85c;
   transition: all .36s;
   right: 20px;
-  color: #ccc;
+  //color: #ccc;
 }
 
 .input-box input {
@@ -679,4 +801,8 @@ a {
   flex-direction: row;
   justify-content: space-evenly;
 }
+
+.icon {
+  color: #028037;
+}
 </style>