11.22前端

fuintAdmin/src/views/login.vue

@@ -18,10 +18,7 @@
 
         </div>
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 0" >
-<!--          <div class="title">-->
+
-<!--            <img class="logo" src="@/assets/logo/logo.png"/>-->
-<!--            <span class="name">{{ systemName }}</span>-->
-<!--          </div>-->
 
           <el-form-item prop="username">
             <el-input
@@ -128,7 +125,7 @@
               size="medium"
               type="primary"
               style="width:100%;line-height: 24px;font-size: 16px;"
-              @click.native.prevent="handleLogin"
+              @click.native.prevent=""
             >
               <span v-if="!loading">立即登录</span>
               <span v-else>登 录 中...</span>

fuintCashierWeb/src/views/login/index.vue

@@ -11,14 +11,15 @@
       </div>
       <div class="box-right">
         <div class="box-title">
-          <div>
+          <div style="margin-right: 15px;cursor: pointer " v-for="(item,index) in dlyzm" :key="index" @click="actindex = item.type " >
-            登录
+            <div>{{item.text}}</div>
+            <div class="gangs" v-if="item.type == actindex " ></div>
           </div>
-          <div>
+
-            验证码
         </div>
-        </div>
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 0" >
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
+
+
           <el-form-item prop="username">
             <el-input
               v-model="loginForm.username"
@@ -76,6 +77,63 @@
             </el-button>
           </el-form-item>
         </el-form>
+        <!--        验证码-->
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 1" >
+          <!--          <div class="title">-->
+          <!--            <img class="logo" src="@/assets/logo/logo.png"/>-->
+          <!--            <span class="name">{{ systemName }}</span>-->
+          <!--          </div>-->
+
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              auto-complete="off"
+              clearable
+              placeholder="账号"
+            >
+              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+            </el-input>
+          </el-form-item>
+
+          <el-form-item prop="captchaCode" v-if="captchaOnOff">
+            <div style="display: flex;align-items: center">
+
+              <div>
+                <el-input
+                  v-model="loginForm.captchaCode"
+                  auto-complete="off"
+                  placeholder="请输入验证码"
+                  style="width: 90%"
+                  clearable
+                  @keyup.enter.native="handleLogin"
+                >
+                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                </el-input>
+              </div>
+              <div>
+                <span class="anniulan" v-show="show" @click="getCode" >获取验证码</span>
+                <span v-show="!show" class="count">{{count}}s后重新获取</span>
+              </div>
+
+            </div>
+          </el-form-item>
+          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+          <el-form-item style="width:100%;">
+            <el-button
+              :loading="loading"
+              size="medium"
+              type="primary"
+              style="width:100%;line-height: 24px;font-size: 16px;"
+              @click.native.prevent=""
+            >
+              <span v-if="!loading">立即登录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+
       </div>
     </div>
 
@@ -90,6 +148,14 @@ export default {
   name: "Login",
   data() {
     return {
+      show: true,
+      count: '',
+      timer: null,
+      dlyzm:[
+        {text:'登录',type:'0'},
+        {text: "验证码",type:'1'}
+      ],
+      actindex:0,
       codeUrl: "",
       pwdType: 'password',
       systemName : process.env.VUE_APP_TITLE,
@@ -126,17 +192,40 @@ export default {
     }
   },
   created() {
-    this.getCode();
+    this.getCodeimg();
     this.getCookie();
   },
   methods: {
     getCode() {
+      const TIME_COUNT = 60;
+      if (!this.timer) {
+        this.count = TIME_COUNT;
+        this.show = false;
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.count--;
+          } else {
+            this.show = true;
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000)
+      }
+    },
+    getCodeimg() {
       const app = this
       getCodeImg().then(response => {
-        app.codeUrl = response.data.captcha;
+        app.codeUrl = response.data.captcha
-        app.loginForm.uuid = response.data.uuid;
+        app.loginForm.uuid = response.data.uuid
       })
     },
+    // getCode() {
+    //   const app = this
+    //   getCodeImg().then(response => {
+    //     app.codeUrl = response.data.captcha;
+    //     app.loginForm.uuid = response.data.uuid;
+    //   })
+    // },
     showPwd() {
       if (this.pwdType === "password") {
         this.pwdType = "";
@@ -222,6 +311,12 @@ $light_gray: #eee;
   display: flex;
 
 }
+.gangs{
+  width: 100%;
+  height: 5px;
+  background: #00aaff;
+  border-radius: 50px;
+}
 .box-left{
   width: 50%;
   height: 100%;