From 5b1c1a2db8d9e4a26c63115269250afcb7d2ab0d Mon Sep 17 00:00:00 2001
From: ywk <317226901@qq.com>
Date: Tue, 8 Apr 2025 09:12:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E6=B3=A8=E9=87=8A=E7=9F=AD?=
 =?UTF-8?q?=E4=BF=A1=E9=AA=8C=E8=AF=81=E7=A0=81=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue | 167 +++++++++++++++++++-------------------
 1 file changed, 84 insertions(+), 83 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8e94439..cabccae 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -12,7 +12,7 @@
              alt="">
     </div> -->
     <div class="contain">
-      <dv-border-box-7 :color="['#0f2e66', '#139efa']"></dv-border-box-7>
+      <dv-border-box-7 :color="['#0f2e66', '#139efa']" />
     </div>
     <div class="login_contain">
       <el-form
@@ -35,15 +35,15 @@
             <svg-icon icon-class="user" />
           </span>
           <el-input
-            clearable
             ref="username"
             v-model="loginForm.username"
-            @blur="getCheck"
+            clearable
             placeholder="Username"
             name="username"
             type="text"
             tabindex="1"
             auto-complete="on"
+            @blur="getCheck"
           />
         </el-form-item>
 
@@ -52,10 +52,10 @@
             <svg-icon icon-class="password" />
           </span>
           <el-input
-            clearable
             :key="passwordType"
             ref="password"
             v-model="loginForm.password"
+            clearable
             :type="passwordType"
             placeholder="Password"
             name="password"
@@ -75,27 +75,27 @@
               <svg-icon icon-class="password" />
             </span>
             <el-input
+              v-model.trim="loginForm.code"
               clearable
               placeholder="请输入验证码"
-              v-model.trim="loginForm.code"
               @keyup.enter.native="handleLogin"
-            ></el-input>
+            />
           </el-form-item>
           <div class="img">
-            <img :src="codeUrl" @click="getVerifyCode" />
+            <img :src="codeUrl" @click="getVerifyCode">
           </div>
         </div>
-        <div class="yzm" v-if="ismsgCode">
+        <div v-if="ismsgCode" class="yzm">
           <el-form-item prop="smsCode" style="flex: 1">
             <span class="svg-container">
               <svg-icon icon-class="password" />
             </span>
             <el-input
+              v-model.trim="loginForm.smsCode"
               clearable
               placeholder="请输入短信验证码"
-              v-model.trim="loginForm.smsCode"
               @keyup.enter.native="handleLogin"
-            ></el-input>
+            />
           </el-form-item>
           <div class="img">
             <div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="submitForm">{{ getCode }}</div>
@@ -106,8 +106,7 @@
           type="primary"
           class="toLogin"
           @click.native.prevent="handleLogin"
-          >登录</el-button
-        >
+        >登录</el-button>
 
         <!-- <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -119,75 +118,75 @@
 </template>
 
 <script>
-import { validUsername } from "@/utils/validate";
-import { getCodeImg, userCheck,userSend } from "@/api/user";
+import { validUsername } from '@/utils/validate'
+import { getCodeImg, userCheck, userSend } from '@/api/user'
 export default {
-  name: "Login",
+  name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error("Please enter the correct user name"));
+        callback(new Error('Please enter the correct user name'))
       } else {
-        callback();
+        callback()
       }
-    };
+    }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error("The password can not be less than 6 digits"));
+        callback(new Error('The password can not be less than 6 digits'))
       } else {
-        callback();
+        callback()
       }
-    };
+    }
     return {
       loginForm: {
         // username: 'admin',
         // password: 'admin123',
-        username: "",
-        password: "",
+        username: '',
+        password: ''
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入用户名" },
+          { required: true, trigger: 'blur', message: '请输入用户名' }
         ],
         password: [
-          { required: true, trigger: "blur", message: '请输入密码' },
+          { required: true, trigger: 'blur', message: '请输入密码' }
         ],
         code: [
-          { required: true, trigger: "blur", message:"请输入验证码" },
+          { required: true, trigger: 'blur', message: '请输入验证码' }
         ],
         smsCode: [
-          { required: true, trigger: "blur", message:"请输入短信验证码" },
-        ],
+          { required: true, trigger: 'blur', message: '请输入短信验证码' }
+        ]
       },
       loading: false,
-      passwordType: "password",
+      passwordType: 'password',
       redirect: undefined,
-      codeUrl: "",
-      ismsgCode:false,
+      codeUrl: '',
+      ismsgCode: false,
       isSend: false,
       beginTime: 60,
       getCode: '获取验证码',
-      timer: '',
-    };
+      timer: ''
+    }
   },
   watch: {
     $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect;
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   created() {
     // 获取验证码
-    this.getVerifyCode();
+    this.getVerifyCode()
   },
   methods: {
     startTime() {
       if (this.isSend) return
       this.isSend = true
       this.getCode = this.beginTime + 's后重新发送'
-      let that = this
+      const that = this
       this.timer = setInterval(() => {
         this.beginTime--
         this.getCode = this.beginTime + 's后重新发送'
@@ -199,71 +198,73 @@ export default {
         }
       }, 1000)
     },
-    submitForm(){
-      if(!this.isSend){
-        userSend({ 
-        userName: this.loginForm.username
-      }).then(res=>{
-        this.startTime()
-       if(res.code == 200){
-        this.$message({
-          message: res.msg,
-          type: "success",
-        });
-       }
-      })
+    submitForm() {
+      if (!this.isSend) {
+        userSend({
+          userName: this.loginForm.username
+        }).then(res => {
+          this.startTime()
+          if (res.code === 200) {
+            this.$message({
+              message: res.msg,
+              type: 'success'
+            })
+          }
+        })
       }
     },
     getCheck() {
-      userCheck({ 
-        userName: this.loginForm.username
-      }).then(res=>{
-        if(res.data == 0){
-          this.ismsgCode = true
-        }else{
-          this.ismsgCode = false
-        }
-      });
+      return
+      // 短信验证码暂时注释
+      // userCheck({
+      //   userName: this.loginForm.username
+      // }).then(res => {
+      //   if (res.data === 0) {
+      //     this.ismsgCode = true
+      //   } else {
+      //     this.ismsgCode = false
+      //   }
+      // })
     },
     getVerifyCode() {
       getCodeImg().then((res) => {
-        this.codeUrl = "data:image/gif;base64," + res.img;
-        this.loginForm.uuid = res.uuid;
-      });
+        this.codeUrl = 'data:image/gif;base64,' + res.img
+        this.loginForm.uuid = res.uuid
+      })
     },
     showPwd() {
-      if (this.passwordType === "password") {
-        this.passwordType = "";
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
       } else {
-        this.passwordType = "password";
+        this.passwordType = 'password'
       }
       this.$nextTick(() => {
-        this.$refs.password.focus();
-      });
+        this.$refs.password.focus()
+      })
     },
     handleLogin() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.loading = true
           this.$store
-            .dispatch("user/login", this.loginForm)
+            .dispatch('user/login', this.loginForm)
             .then(() => {
-              this.$router.push({ path: this.redirect || "/" });
-              this.loading = false;
+              this.$router.push({ path: this.redirect || '/' })
+              this.loading = false
             })
             .catch(() => {
-              this.getVerifyCode();
-              this.loginForm.code = "";
-              this.loading = false;
-            });
+              this.getVerifyCode()
+              this.loginForm.code = ''
+              this.loading = false
+            })
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss">