优化 登录注册与密码修改

src/constants/api/login/forget-pass-mgt.ts

@@ -21,7 +21,7 @@ const prefix = process.env.VUE_APP_MS_GATEWAY_API + "/ms-system/api/v1/cust-logi
 
 const forgetPassAPI = { 
   ForgetPass: {
-    url: prefix + "/changePassword",
+    url: prefix + "/forgetPassword",
     method: MethodType.POST.code,
     header: HeaderType.AUTH.code,
   },

src/views/authentication/LoginView.vue

@@ -77,7 +77,7 @@
 
               </van-field>
             </van-col>
-            <van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a style="  color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
+            <van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a :class="smsCss" style="  color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
           </van-row>
               
         </div>
@@ -120,6 +120,8 @@ import { log } from "mathjs";
   [VanImage.name]: VanImage,
 })
 export default class LoginView extends Vue {
+  smsCss=""
+
   getCmstotal = "获取验证码";
   tatleName = "用户登录";
   loginNo: string = "";//登录账号
@@ -135,8 +137,20 @@ export default class LoginView extends Vue {
   //方法
 
   created(){
+    //获取保存的登录账号
     if(localStorage.getItem("loginNo")!=null)
     this.loginNo = String(localStorage.getItem("loginNo"));
+    //获取验证码剩余时间，并启动倒计时 ,禁用超链接
+    if(localStorage.getItem("smsTime")!=null){
+
+       this.time =Number(localStorage.getItem("smsTime"));
+       this.changeCmstotal();
+       this.smsCss="smsCss"
+       this.noChange(this.loginNo);
+       
+    }
+   
+    
   }
 
   noChange(s:string){
@@ -173,38 +187,57 @@ export default class LoginView extends Vue {
       }
     });
   }
-  //计时器
+  //计时器TODO 多次点击
+
   changeCmstotal() {
+    localStorage.setItem("smsTime",String(this.time))
     this.getCmstotal = this.time + "s重发验证码";
        this.timer = setInterval(() => {
+         
       this.time--;
+      //倒计时存入localStorage 防止刷新页面 丢失
+      localStorage.setItem("smsTime",String(this.time))
       this.getCmstotal = this.time + "s重发验证码";
       if (this.time < 0) {
-        clearInterval(this.time)
-        this.getCmstotal = "获取短信验证码";
+        localStorage.removeItem("smsTime");
+        this.smsCss=""
+        clearInterval(this.timer)
+        this.getCmstotal = "获取验证码";
       }
     }, 1000)
 
+    
+   
+
   }
   //获取短信验证码
   getPhonePost() {
     let param = {
       phoneCode: this.loginNo
     }
+    //禁用 超链接并设置倒计时时间
+    this.smsCss="smsCss"
+    this.time=60;
     apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
 
       if (response.code == Code.SUCCESS.code) {
+
         Toast('短信发送成功，5分钟有效');
+        //开始倒计时
         this.changeCmstotal()
       } else {
         Toast('短信发送失败,请重试');
+         //取消不可点击
+        this.smsCss=""
+        //删除缓存
+        localStorage.removeItem("smsTime")
+        //删除定时任务
+       clearInterval(this.timer)
       }
     })
   }
   loginSystem() {
-    //TODO
-    //登录失败刷新
-    //验证码失败刷新
+
     //this._updatePicCode();
     let param = {
       loginNo: this.loginNo,
@@ -231,10 +264,10 @@ export default class LoginView extends Vue {
           }
         })
         //登录成功后保存账号
-         localStorage.setItem('loginNo', this.loginNo);
+        //  localStorage.setItem('loginNo', this.loginNo);
       } else {
         // this._updatePicCode();
-        Toast(response.msg + "");
+        // Toast(response.msg + "");
       }
     });
   }
@@ -330,6 +363,10 @@ export default class LoginView extends Vue {
     background-color: #fff;
  
 }
+::v-deep .smsCss{
+      cursor: pointer;
+    pointer-events: none;
+}
 // .login{
 //   margin-top: 20%;
 // }

src/views/login/ForgetPassView.vue

@@ -130,6 +130,7 @@ import forgetPassAPI from "@/constants/api/login/forget-pass-mgt";
   [VanImage.name]: VanImage,
 })
 export default class ForgetPassView extends Vue {
+  smsCss=""
   password = "password";
   passwordType="password"
   passwordTypeNext="password"
@@ -173,20 +174,33 @@ export default class ForgetPassView extends Vue {
   }
   //计时器
   changeCmstotal() {
+    localStorage.setItem("smsTime",String(this.time))
     this.getCmstotal = this.time + "s重发验证码";
        this.timer = setInterval(() => {
+         
       this.time--;
+      //倒计时存入localStorage 防止刷新页面 丢失
+      localStorage.setItem("smsTime",String(this.time))
       this.getCmstotal = this.time + "s重发验证码";
       if (this.time < 0) {
-        clearInterval(this.time);
+        localStorage.removeItem("smsTime");
+        this.smsCss=""
+        clearInterval(this.timer)
         this.getCmstotal = "获取验证码";
       }
-    }, 1000);
+    }, 1000)
+
+    
+   
+
   }
   getPhonePost() {
     let param = {
       phoneCode: this.loginNo,
     };
+         //禁用 超链接并设置倒计时时间
+    this.smsCss="smsCss"
+    this.time=60;
     apiService
       .general(commonApi.getPicCode, param, undefined, undefined)
       .then((response: RestfulResponse) => {
@@ -194,23 +208,30 @@ export default class ForgetPassView extends Vue {
           Toast("短信发送成功，5分钟有效");
           this.changeCmstotal();
         } else {
-          Toast("短信发送失败,请重试");
+          Toast(String(response.msg));
+          this.getCmstotal = "获取验证码";
+         //取消不可点击
+        this.smsCss=""
+        //删除缓存
+        localStorage.removeItem("smsTime")
+        //删除定时任务
+       clearInterval(this.timer)
         }
       });
   }
   onSubmit(values: any) {
       let param = {
-       loginNo:this.loginNo ,
+       phone:this.loginNo ,
        newPassword: this.newpassword,
        phoneVerifyCode:this.sms ,
        requirePassword:this.restpassword 
       };
       apiService
-     .general(forgetPassAPI.ForgetPass, param, undefined, undefined)
+     .general(forgetPassAPI.ForgetPass, undefined, param, undefined)
       .then((response: RestfulResponse) => {
            if (response.code == Code.SUCCESS.code) {
-          this.$router.push({
-            name: `Mianview`,
+          this.$router.replace({
+            path: `/login`,
             params: {
               data: response.data
             }
@@ -220,6 +241,14 @@ export default class ForgetPassView extends Vue {
   }
   created() {
     this.$nextTick(() => this._updatePicCode());
+      //获取验证码剩余时间，并启动倒计时 ,禁用超链接
+    if(localStorage.getItem("smsTime")!=null){
+
+       this.time =Number(localStorage.getItem("smsTime"));
+       this.changeCmstotal();
+      this.smsCss="smsCss"
+       
+    }
   }
 }
 </script>

src/views/login/Register.vue

@@ -60,7 +60,7 @@
 
               </van-field>
             </van-col>
-            <van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a style="  color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
+            <van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a :class="smsCss" style="  color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
           </van-row>
           <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
         </div>
@@ -122,6 +122,7 @@ import { Toast } from "vant";
   name: "ForgetPassView",
 })
 export default class ForgetPassView extends Vue {
+   smsCss=""
   tatleName = "用户注册"
   idCard = ""
   phone: string = "" //电话
@@ -139,6 +140,8 @@ export default class ForgetPassView extends Vue {
   showCode = false;
   //方法
 
+   
+
     noChange(s:string){
     if(this.verifyPhone(s)){
       this.showCode=true;
@@ -177,7 +180,7 @@ export default class ForgetPassView extends Vue {
         console.log(response);
         if (response.code == Code.SUCCESS.code) {
           this.$router.push({
-            name: `Mianview`,
+            path: `/login`,
             params: {
               data: response.data
             }
@@ -187,31 +190,49 @@ export default class ForgetPassView extends Vue {
       });
     }
   }
-
   //计时器
   changeCmstotal() {
+    localStorage.setItem("smsTime",String(this.time))
     this.getCmstotal = this.time + "s重发验证码";
        this.timer = setInterval(() => {
+         
       this.time--;
+      //倒计时存入localStorage 防止刷新页面 丢失
+      localStorage.setItem("smsTime",String(this.time))
       this.getCmstotal = this.time + "s重发验证码";
       if (this.time < 0) {
-        clearInterval(this.time)
+        localStorage.removeItem("smsTime");
+        this.smsCss=""
+        clearInterval(this.timer)
         this.getCmstotal = "获取验证码";
       }
     }, 1000)
 
+    
+   
+
   }
   getPhonePost() {
     let param = {
       phoneCode: this.phone
     }
+     //禁用 超链接并设置倒计时时间
+    this.smsCss="smsCss"
+    this.time=60;
     apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
 
       if (response.code == Code.SUCCESS.code) {
         Toast('短信发送成功，5分钟有效');
+        //开始倒计时
         this.changeCmstotal()
       } else {
          Toast('短信发送失败,请重试');
+         //取消不可点击
+        this.smsCss=""
+        //删除缓存
+        localStorage.removeItem("smsTime")
+        //删除定时任务
+       clearInterval(this.timer)
       }
     })
 
@@ -220,6 +241,14 @@ export default class ForgetPassView extends Vue {
 
 
   created() {
+    //获取验证码剩余时间，并启动倒计时 ,禁用超链接
+    if(localStorage.getItem("smsTime")!=null){
+
+       this.time =Number(localStorage.getItem("smsTime"));
+       this.changeCmstotal();
+      this.smsCss="smsCss"
+       
+    }
 
   }
   returen() {
@@ -289,6 +318,10 @@ export default class ForgetPassView extends Vue {
     background-color: #fff;
  
 }
+::v-deep .smsCss{
+      cursor: pointer;
+    pointer-events: none;
+}
 
 // .login{
 //   margin-top: 20%;