11.21前端

fuintAdmin/src/views/login.vue

@@ -11,9 +11,13 @@
       </div>
       <div class="box-right">
         <div class="box-title">
-          登录
+          <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>
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
+        <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>-->
@@ -76,6 +80,61 @@
             </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="handleLogin"
+            >
+              <span v-if="!loading">立即登录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
       </div>
     </div>
 
@@ -109,6 +168,14 @@ export default {
   components: {BalanceRecharge},
   data() {
     return {
+      show: true,
+      count: '',
+      timer: null,
+      dlyzm:[
+        {text:'登录',type:'0'},
+        {text: "验证码",type:'1'}
+      ],
+      actindex:0,
       codeUrl: "",
       systemName : process.env.VUE_APP_TITLE,
       loginForm: {
@@ -144,11 +211,27 @@ 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
@@ -221,6 +304,12 @@ export default {
     display: flex;
 
   }
+  .gangs{
+    width: 100%;
+    height: 5px;
+    background: #00aaff;
+    border-radius: 50px;
+  }
   .box-left{
     width: 50%;
     height: 100%;
@@ -237,7 +326,9 @@ export default {
   }
   .box-title{
     width: 100%;
-    text-align: center;
+    //text-align: center;
+    display: flex;
+    align-items: center;
     margin-bottom: 20px;
   }
   .bai-size{

fuintCashierWeb/src/views/login/index.vue

@@ -11,14 +11,14 @@
       </div>
       <div class="box-right">
         <div class="box-title">
-          登录
+          <div>
+            登录
+          </div>
+          <div>
+            验证码
+          </div>
         </div>
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
-          <!--          <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"
@@ -238,7 +238,9 @@ $light_gray: #eee;
 }
 .box-title{
   width: 100%;
-  text-align: center;
+  //text-align: center;
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
 }
 .bai-size{