登录页面新加大写绑定，修改密码可查看小眼睛

components/LoginBar.vue

@@ -6,239 +6,315 @@ import { setToken } from '~/utils/cookie';
 
 export default {
   data() {
-    const regPhone = /^1[3456789]\d{9}$/
-    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
+    const regPhone = /^1[3456789]\d{9}$/;
+    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     return {
-      form: {
-        username:'',
-        password:''
-      },
-      forgetForm: {
-        account:'',
-        code: '',
-        key:''
-      },
-      resetForm: {
-        newPassword: '',
-        confirm_newPassword: '',
-        verifyCode: '',
-        type: '1'
-      },
-      receiver:'',
-      checked:true,
-      logging:false,
-      interfaceStatus: 'login',
-      forgetPswErrTip: '',
-      codeImg:'',
-      sending: false,
-      clock: 60,
-      resetPswTip:'',
-      regEmail,
-      regPhone,
-      loginError: false
+        form: {
+            username: "",
+            password: ""
+        },
+        forgetForm: {
+            account: "",
+            code: "",
+            key: ""
+        },
+        resetForm: {
+            newPassword: "",
+            confirm_newPassword: "",
+            verifyCode: "",
+            type: "1"
+        },
+        receiver: "",
+        checked: true,
+        logging: false,
+        interfaceStatus: "login",
+        forgetPswErrTip: "",
+        codeImg: "",
+        sending: false,
+        clock: 60,
+        resetPswTip: "",
+        regEmail,
+        regPhone,
+        loginError: false,
+        //大写提示
+        bigChar: false,
+        //登录页面小眼睛
+        loginEyeShow: false,
+        //登录页面小眼睛是否打开
+        loginEyeOpen: false
     }
   },
   computed: {
-    loginBtnDisabled() {
-      return !(this.form.username && this.form.password && this.form.password.length >= 6)
-    },
-    forgetDisabled() {
-      return !(this.forgetForm.account && this.forgetForm.code)
-    }
+      loginBtnDisabled() {
+          return !(this.form.username && this.form.password && this.form.password.length >= 6);
+      },
+      forgetDisabled() {
+          return !(this.forgetForm.account && this.forgetForm.code);
+      }
   },
   mounted() {
-    if(localStorage.getItem('username')) {
-      this.form.username = localStorage.getItem('username')
-      this.form.password = localStorage.getItem('password')
-    }
-    // this.forgetForm.account = this.form.username
+      if (localStorage.getItem("username")) {
+          this.form.username = localStorage.getItem("username");
+          this.form.password = localStorage.getItem("password");
+      }
+      // this.forgetForm.account = this.form.username
   },
   methods: {
-    ...mapActions(['login']),
-    handlerLogin() {
-      this.logging = true
-      this.loginError = false
-      this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
-        if(res.code === 200) {
-            this.$store.dispatch('login',res.result).then((token)=> {
-            this.$axios.setToken(token, 'Bearer')
-            localStorage.setItem('token',token)
-            if(this.checked) {
-              localStorage.setItem('username',this.form.username)
-              localStorage.setItem('password',this.form.password)
-            }else {
-              localStorage.removeItem('username',this.form.username)
-              localStorage.removeItem('password',this.form.password)
-              this.form.username = ''
-              this.form.password = ''
-            }
-            this.handlerClose()
-            this.getUserInfo()
+      ...mapActions(["login"]),
+      handlerLogin() {
+          this.logging = true;
+          this.loginError = false;
+          this.$axios.post("login", qs.stringify(this.form)).then((res) => {
+              if (res.code === 200) {
+                  this.$store.dispatch("login", res.result).then((token) => {
+                      this.$axios.setToken(token, "Bearer");
+                      localStorage.setItem("token", token);
+                      if (this.checked) {
+                          localStorage.setItem("username", this.form.username);
+                          localStorage.setItem("password", this.form.password);
+                      }
+                      else {
+                          localStorage.removeItem("username", this.form.username);
+                          localStorage.removeItem("password", this.form.password);
+                          this.form.username = "";
+                          this.form.password = "";
+                      }
+                      this.handlerClose();
+                      this.getUserInfo();
+                  });
+              }
+              else {
+                  this.loginError = true;
+              }
           })
-        } else {
-          this.loginError = true
-        }
-      })
-      .finally(()=> {this.logging = false})
-    },
-    getUserInfo()  {
-      this.$axios.get('members/getMemberInfo').then((res)=> {
-        if(res.code === 200) {
-          this.$store.commit('setUser',res.result.memberInfo)
-          setToken('vuex',JSON.stringify(res.result.memberInfo))
-          this.logging = false
-          this.$emit('loginSucess')
-        }
-      })
-    },
-    handlerForgetPsw() {
-      this.interfaceStatus = 'forgetPsw'
-      this.handleGetVcodeImage()
-      this.forgetForm.account = this.form.username
-    },
-    // 手机号码发送验证码
-    handlePostCode() {
-      if(this.sending) return
-      const params = {
-        action: '1', // 找回密码
-        receiver: this.forgetForm.account
-      }
-      if(this.regPhone.test(this.forgetForm.account)) params.type = '1'
-      if(this.regEmail.test(this.forgetForm.account)) params.type = '0'
-      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
-        if(res.code === 200) {
-          this.sending = true
-          let interval = setInterval(() => {
-            this.clock--
-            if(this.clock === 0) {
-              clearInterval(interval)
-              interval = null
-              this.clock = 60
-              this.sending = false
-            }
-          }, 1000);
-        }
-      })
-    },
-    // 获取二维码图片
-    handleGetVcodeImage() {
-      const params = {
-        width: '140',
-        height: '46',
-        codeCount: '6',
-        lineCount: '1',
-        type: 'forget_password'
-      }
-      this.$axios.get('/auth/getImageCode',{params,responseType: 'arraybuffer'}).then((res)=> {
-        this.codeImg = 'data:image/png;base64,' + btoa(
-          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
-        )
-        this.forgetForm.key = res.headers['x-auth-token']
-      })   
-    },
-    resetInterfaceStatus() {
-      this.forgetForm.account = ''
-      this.forgetForm.code = ''
-      this.forgetPswErrTip = ''
-      this.resetPswTip = ''
-      this.resetForm.newPassword = ''
-      this.resetForm.confirm_newPassword = ''
-      this.resetForm.verifyCode = ''
-      this.resetForm.forgetPswErrTip = ''
-      setTimeout(() => {
-        this.interfaceStatus = 'login'
-      }, 500);
-    },
-    // 切换注册页面
-    handlerRegister() {
-      this.$emit('register','register')
-    },
-    // 重置密码验证
-    handlerResetPsw() {
-      if(!this.regPhone.test(this.forgetForm.account) && !this.regEmail.test(this.forgetForm.account)) {
-        this.forgetPswErrTip = '请输入正确的邮箱或手机号码'
-        this.handleGetVcodeImage()
-        return
-      }
-      this.logging = true
-      this.$axios.post('auth/checkExist',qs.stringify(this.forgetForm)).then((res)=> {
-        if(res.code === 200) {
-          if(this.regPhone.test(this.forgetForm.account)) {
-            this.interfaceStatus = 'resetPhonePsw'
+              .finally(() => { this.logging = false; });
+      },
+      getUserInfo() {
+          this.$axios.get("members/getMemberInfo").then((res) => {
+              if (res.code === 200) {
+                  this.$store.commit("setUser", res.result.memberInfo);
+                  setToken("vuex", JSON.stringify(res.result.memberInfo));
+                  this.logging = false;
+                  this.$emit("loginSucess");
+              }
+          });
+      },
+      handlerForgetPsw() {
+          this.interfaceStatus = "forgetPsw";
+          this.handleGetVcodeImage();
+          this.forgetForm.account = this.form.username;
+      },
+      // 手机号码发送验证码
+      handlePostCode() {
+          if (this.sending)
+              return;
+          const params = {
+              action: "1",
+              receiver: this.forgetForm.account
+          };
+          if (this.regPhone.test(this.forgetForm.account))
+              params.type = "1";
+          if (this.regEmail.test(this.forgetForm.account))
+              params.type = "0";
+          this.$axios.get("auth/getVerifyCode", { params }).then((res) => {
+              if (res.code === 200) {
+                  this.sending = true;
+                  let interval = setInterval(() => {
+                      this.clock--;
+                      if (this.clock === 0) {
+                          clearInterval(interval);
+                          interval = null;
+                          this.clock = 60;
+                          this.sending = false;
+                      }
+                  }, 1000);
+              }
+          });
+      },
+      // 获取二维码图片
+      handleGetVcodeImage() {
+          const params = {
+              width: "140",
+              height: "46",
+              codeCount: "6",
+              lineCount: "1",
+              type: "forget_password"
+          };
+          this.$axios.get("/auth/getImageCode", { params, responseType: "arraybuffer" }).then((res) => {
+              this.codeImg = "data:image/png;base64," + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
+              this.forgetForm.key = res.headers["x-auth-token"];
+          });
+      },
+      resetInterfaceStatus() {
+          this.forgetForm.account = "";
+          this.forgetForm.code = "";
+          this.forgetPswErrTip = "";
+          this.resetPswTip = "";
+          this.resetForm.newPassword = "";
+          this.resetForm.confirm_newPassword = "";
+          this.resetForm.verifyCode = "";
+          this.resetForm.forgetPswErrTip = "";
+          setTimeout(() => {
+              this.interfaceStatus = "login";
+          }, 500);
+      },
+      // 切换注册页面
+      handlerRegister() {
+          this.$emit("register", "register");
+      },
+      // 重置密码验证
+      handlerResetPsw() {
+          if (!this.regPhone.test(this.forgetForm.account) && !this.regEmail.test(this.forgetForm.account)) {
+              this.forgetPswErrTip = "请输入正确的邮箱或手机号码";
+              this.handleGetVcodeImage();
+              return;
           }
-          if(this.regEmail.test(this.forgetForm.account)) {
-            this.postEmail()
+          this.logging = true;
+          this.$axios.post("auth/checkExist", qs.stringify(this.forgetForm)).then((res) => {
+              if (res.code === 200) {
+                  if (this.regPhone.test(this.forgetForm.account)) {
+                      this.interfaceStatus = "resetPhonePsw";
+                  }
+                  if (this.regEmail.test(this.forgetForm.account)) {
+                      this.postEmail();
+                  }
+              }
+              else if (res.data && res?.data?.code !== 200) {
+                  this.forgetPswErrTip = res.data.msg;
+                  this.handleGetVcodeImage();
+              }
+              else {
+                  this.forgetPswErrTip = res.msg;
+                  this.handleGetVcodeImage();
+              }
+          }).finally(() => {
+              this.logging = false;
+          });
+      },
+      // 邮箱找回密码，发送邮箱
+      postEmail() {
+          const params = {
+              action: "1",
+              type: "0",
+              receiver: this.forgetForm.account
+          };
+          this.$axios.get("auth/getVerifyCode", { params }).then((res) => {
+              if (res.code === 200) {
+                  this.interfaceStatus = "resetEmailPsw";
+              }
+          });
+      },
+      handlerConfirmReset() {
+          if (this.resetForm.newPassword !== this.resetForm.confirm_newPassword) {
+              this.resetPswTip = "两次输入的密码不一致";
           }
-        }else if(res.data && res?.data?.code !== 200){
-          this.forgetPswErrTip = res.data.msg 
-          this.handleGetVcodeImage()
-        } else {
-          this.forgetPswErrTip = res.msg
-          this.handleGetVcodeImage()
-        }
-      }).finally(()=> {
-        this.logging = false
-      })
-    },
-    // 邮箱找回密码，发送邮箱
-    postEmail() {
-      const params = {
-        action: '1',
-        type: '0',
-        receiver: this.forgetForm.account
-      }
-      this.$axios.get('auth/getVerifyCode', {params}).then((res) => {
-        if(res.code === 200 ) {
-          this.interfaceStatus = 'resetEmailPsw'
+          else if (this.resetForm.newPassword.length < 6) {
+              this.resetPswTip = "密码位数不能少于6位";
+          }
+          else if (this.resetForm.newPassword.charCodeAtlength > 16) {
+              this.resetPswTip = "密码位数不能大于16位";
+          }
+          else {
+              this.resetPswTip = "";
+              this.submitReset();
+          }
+      },
+      submitReset() {
+          this.resetForm.account = this.forgetForm.account;
+          this.$axios.post("members/resetPassword", this.resetForm).then((res) => {
+              if (res.code === 200) {
+                  this.$message.success("修改成功");
+                  this.handlerClose();
+              }
+              if (res.data && res?.data?.code !== 200) {
+                  this.resetPswTip = res.data.msg;
+              }
+          });
+      },
+      handlerClose() {
+          this.$emit("close");
+      },
+      // 忘记密码错误提示
+      changeForgetPswErrTip() {
+          this.forgetPswErrTip = "";
+      },
+      //登录错误提示
+      changeLoginTip() {
+          this.loginError = false;
+          // this.loginEyeShow = true
+      },
+      //不允许输入空格
+      keydown(event) {
+          if (event.keyCode == 32) {
+              event.returnValue = false;
+              this.resetPswTip = "请勿输入空格";
+          }
+      },
+      changeErr() {
+          this.resetPswTip = "";
+      },
+      //判断大写状态开启
+      loginKeyDown(event) {
+          //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
+          let e = event || window.event;
+          let keyvalue = e.keyCode ? e.keyCode : e.which;
+          let shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false;
+          if (typeof this.form.password === "undefined") {
+              return;
+          }
+          let strlen = this.form.password.length;
+          let password = this.form.password;
+          if (strlen) {
+              let uniCode = password.charCodeAt(strlen - 1);
+              if (keyvalue >= 65 && keyvalue <= 90) {
+                  if ((uniCode >= 65 && uniCode <= 90 && !shifKey) ||
+                      (uniCode >= 97 && uniCode <= 122 && shifKey)) {
+                      this.bigChar = true;
+                  }
+                  else {
+                      this.bigChar = false;
+                  }
+              }
+          }
+      },
+      //展示登录页面小眼睛
+      showLoginEye(type){
+        if(type === 'focus'){
+          setTimeout(() => {
+            this.loginEyeShow = true
+          }, 150);
+          this.loginEyeOpen = false
+        }else{
+          setTimeout(() => {
+            this.loginEyeShow = false
+          }, 200);
+          const loginInput = this.$refs.loginInput
+          loginInput.type = 'password'
         }
-      })
-    },
-    handlerConfirmReset() {
-     if(this.resetForm.newPassword !== this.resetForm.confirm_newPassword) {
-        this.resetPswTip = '两次输入的密码不一致'
-      }else if(this.resetForm.newPassword.length < 6) {
-        this.resetPswTip = '密码位数不能少于6位'
-      }else if(this.resetForm.newPassword.charCodeAtlength> 16){
-        this.resetPswTip = '密码位数不能大于16位'
-      }else {
-        this.resetPswTip = ''
-        this.submitReset()
+      },
+      //展示登录页面小眼睛打开
+      showLoginEyeOpen(){
+        const loginInput = this.$refs.loginInput
+        const len = loginInput.value.length
+        loginInput.focus()
+        setTimeout(() => {
+          loginInput.setSelectionRange(len,len)
+        }, 0);
+        loginInput.type = 'password'
+        this.loginEyeOpen = false
+      },
+      //展示登录页面小眼睛关闭
+      showLoginEyeClose(){
+        const loginInput = this.$refs.loginInput
+        const len = loginInput.value.length
+        loginInput.focus()
+        setTimeout(() => {
+          loginInput.setSelectionRange(len,len)
+        }, 0);
+        loginInput.type = 'text'
+        this.loginEyeOpen = true
       }
-    },
-    submitReset() {
-      this.resetForm.account = this.forgetForm.account
-      this.$axios.post('members/resetPassword', this.resetForm).then((res)=> {
-        if(res.code === 200) {
-          this.$message.success('修改成功')
-          this.handlerClose()
-        }
-        if(res.data && res?.data?.code !== 200){
-          this.resetPswTip = res.data.msg
-        }
-      })
-    },
-    handlerClose() {
-      this.$emit('close')
-    },
-    // 忘记密码错误提示
-    changeForgetPswErrTip(){
-      this.forgetPswErrTip = ''
-    },
-    //登录错误提示
-    changeLoginTip(){
-      this.loginError = false
-    },
-    //不允许输入空格
-    keydown(event){
-	    if(event.keyCode == 32){
-		    event.returnValue = false
-        this.resetPswTip = '请勿输入空格'
-        }
-    },
-    changeErr(){
-      this.resetPswTip = ''
-    },
-  }
+  },
 }
 
 </script>
@@ -255,7 +331,10 @@ export default {
           <input id="account" v-model="form.username" class="login_input_user account" type="text" placeholder="邮箱/手机号" @input = "changeLoginTip">
           <br /> 
           <div class="login_input_password_span w-20px h-20px absolute top-90px left-34px"></div>
-          <input id="pwd" v-model="form.password" class="login_input_password pwd" type="password" placeholder="密码" @input = "changeLoginTip">
+          <input id="pwd" ref="loginInput" v-model="form.password" class="login_input_password pwd" type="password" placeholder="密码" @input = "changeLoginTip" @keyup="loginKeyDown" @blur="showLoginEye('blue')" @focus="showLoginEye('focus')">
+          <div class="login_input_password_bigChar w-20px h-20px absolute top-90px" v-if="bigChar"></div>
+          <div class="login_input_password_show_open w-20px h-20px absolute top-90px cursor-pointer" v-show="loginEyeShow && loginEyeOpen" @click="showLoginEyeOpen"></div>
+          <div class="login_input_password_show_close w-20px h-20px absolute top-90px cursor-pointer" v-show="loginEyeShow && !loginEyeOpen" @click="showLoginEyeClose"></div>
           <br />
           <div class="forget-password">
             <span class="pwd-container">
@@ -436,6 +515,18 @@ export default {
     .login_input_password_span{
       background:url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat
     }
+    .login_input_password_bigChar{
+      right: 60px;
+      background:url(@/assets/images/password/password.png) no-repeat
+    }
+    .login_input_password_show_open{
+      right: 35px;
+      background: url(@/assets/images/password/passwordopen.png) no-repeat;
+    }
+    .login_input_password_show_close{
+      right: 35px;
+      background: url(@/assets/images/password/Union.png) no-repeat;
+    }
     .login_input_password:-webkit-autofill {
       box-shadow: 0 0 0px 1000px white inset;
     }
@@ -911,4 +1002,14 @@ export default {
       }
     }
 }
+input[type="password"]::-ms-reveal{
+			display: none;
+		}
+input[type="password"]::-ms-clear{
+			display: none;
+		}
+input[type="password"]::-o-clear{
+			display: none;
+		}
+
 </style>