登录增加验证码验证

 import http from './http.js'
 // let baseUrl = '/cloud-user-center/user'
 let baseUrl = '/cloud-kako-user-center/user'
-let baseCode = '/cloud-kako-user-center/randCode'
-export const getUserList = params => { return http.get(`${baseUrl}/list`,  params); };
 
-export const getRandCode = params => { return http.get(`${baseCode}`,  params); };
+export const getUserList = params => { return http.get(`${baseUrl}/list`,  params); };
 
 export const getUserListPage = params => { return http.get(`/user/list`,params) };
 
@@ -21,3 +19,6 @@ export const addUser = params => { return http.post(`${baseUrl}/add`,params)};
 export const setUserRole = params => { return http.put(`${baseUrl}/roleset`,params)};
 
 export const resetToken = params => { return http.put(`${baseUrl}/resetToken`,params)};
+
+export const getRandCode = params => { return http.post('/cloud-kako-user-center/anonymous/randCode',  params); };
+

@@ -6,7 +6,17 @@
         <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
       </el-form-item>
       <el-form-item prop="checkPass">
-        <el-input type="password" v-model="ruleForm2.checkPass"  placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
+        <el-input type="password" v-model="ruleForm2.checkPass"  placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item prop="verify">
+        <el-input type="text" v-model="ruleForm2.verify"  placeholder="请输入下方图片显示的验证码" @keyup.enter.native="handleSubmit2"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <img
+                style="width: 125px; height: 60px"
+                :src="verifyImg"
+                @click="getVerifyCode"
+        >
       </el-form-item>
 <!--      <el-form-item prop="checkPass">-->
 <!--        <el-input type="password" v-model="ruleForm2.checkPass"  placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>-->
@@ -42,26 +52,31 @@
   export default {
     data() {
       return {
-          vedioCanPlay: true,
-          fixStyle: '',
-          logining: false,
-          ruleForm2: {
+        verifyImg: "",
+        vedioCanPlay: true,
+        fixStyle: '',
+        logining: false,
+        ruleForm2: {
           account: '',
-          checkPass: ''
-          // checkPass: 'vmvnv1v2VV'
-          },
-          rules2: {
-          account: [
-            { required: true, message: '请输入账号', trigger: 'blur' },
-            //{ validator: validaePass }
-          ],
-          checkPass: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            //{ validator: validaePass2 }
-          ]
+          checkPass: '',
+          verify: '',
+          verifyToken: ''
+        },
+        rules2: {
+            account: [
+              { required: true, message: '请输入账号', trigger: 'blur' },
+              //{ validator: validaePass }
+            ],
+            checkPass: [
+              { required: true, message: '请输入密码', trigger: 'blur' },
+              //{ validator: validaePass2 }
+            ],
+            checkVerify: [
+              { required: true, message: '请输入验证码', trigger: 'blur' }
+            ]
           },
-          checked: true,
-          userMenus: []
+        checked: true,
+        userMenus: []
       };
     },
     methods: {
@@ -71,7 +86,7 @@
       handleReset2() {
         this.$refs.ruleForm2.resetFields();
       },
-        handleMenuList : function (router,menu) {
+      handleMenuList : function (router,menu) {
             var _this = this;
             var routerName = "";
             var routerTemp = router.concat();
@@ -101,21 +116,24 @@
 //            本地存储用户目录 ，防刷新目录丢失用
             sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
         },
-        randCode: function(){
-          getRandCode().then((res) =>{
 
-          }).catch({
+      getVerifyCode: function(){
+        getRandCode().then((res) =>{
+          let status = res.status;
+          this.ruleForm2.verifyToken  = res.data.jwtToken;
+          this.verifyImg =   res.data.data.verifyImg;
+        }).catch({
 
-          });
-        },
-        handleSubmit2: function (ev) {
+        });
+      },
+      handleSubmit2: function (ev) {
             var _this = this;
             this.$refs.ruleForm2.validate((valid) => {
                 if (valid) {
                     //_this.$router.replace('/table');
                     this.logining = true;
                     //NProgress.start();
-                    var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
+                    var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass, verify: this.ruleForm2.verify,verifyToken:this.ruleForm2.verifyToken};
                     http.login(loginParams).then(res => {
                         this.logining = false;
                         //NProgress.done();
@@ -163,8 +181,8 @@
             });
         }
     },
-      mounted:function () {
-          window.onresize = () => {
+    mounted:function () {
+        window.onresize = () => {
               const windowWidth = document.body.clientWidth
               const windowHeight = document.body.clientHeight
               const windowAspectRatio = windowHeight / windowWidth
@@ -189,10 +207,13 @@
                       'margin-bottom': 'initial'
                   }
               }
-          }
-          window.onresize();
-          // this.randCode();
-      }
+          },
+        window.onresize();
+        // this.randCode();
+    },
+    created(){
+      this.getVerifyCode()
+    }
   }
 
 </script>