测试

src/views/login/index.vue

@@ -1,14 +1,41 @@
 <template>
+    <div class="site-wrapper site-page--login">
+        <div class="site-content__wrapper" >
+          <div class="site-content">
+            <div class="brand-info">
+              <h2 class="brand-info__text">智慧后勤服务平台1</h2>
+              <p class="brand-info__intro"></p>
+            </div>
+            <div class="login-main" :element-loading-text="loadingMsg" v-loading="loading">
+              <h3 class="login-title">登录</h3>
+              <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
+                <el-form-item prop="userName">
+                  <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                  <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+                </el-form-item>
+                <el-form-item prop="verCode">
+                  <el-input style="width:60%!important;float:left" v-model="dataForm.verCode" placeholder="验证码"></el-input>
+                  <img @click="getVerCode()"  :src="codeImg" width="100" height="40" class="head_pic" style="float:right" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+        </div>
+      </div>
+  </template>
   
-</template>
+  <script>
-
+  import { userLogin,getVerCode } from "@/api/getdata";
-<script>
+  import { setToken } from '@/utils/auth'
-import { userLogin, getVerCode } from "@/api/getdata";
+  import CryptoJS from 'crypto-js'
-import { setToken } from '@/utils/auth'
+  var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
-import CryptoJS from 'crypto-js'
+  var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
-var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
+  export default {
-var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
-export default {
     data() {
       return {
         dataForm: {
@@ -16,8 +43,8 @@ export default {
           password: '',
           uuid: '',
           captcha: '',
-        verCode: "",
+          verCode:"",
-        codeId: ""
+          codeId:""
         },
         dataRule: {
           userName: [
@@ -33,25 +60,92 @@ export default {
         captchaPath: '',
         loading: false, //初始化loading
         loadingMsg: "",
-      codeImg: "",
+        codeImg:"",
-      codeId: ""
+        codeId:""
       }
     },
-  created() {
+    created(){
       this.getVerCode();
     },
     methods: {
-    getVerCode() {
+      createLoad() {
-      let logUrl = "http://10.224.64.4:27000/greenH5/greenWebmodul/dist/index.html?#/ywgllogin";
+        this.loading = true;
-      let isc_login = "http://iscsso.cc.sgcc.com.cn:17011/isc_sso/login?service=";
+        this.loadingMsg = "登录中...";
-      window.location.href = isc_login + logUrl;
       },
+      clearLoad() {
+        this.loading = false;
+        this.loadingMsg = "";
+      },
+      getVerCode(){
+        getVerCode({})
+        .then(res => {
+          if (res.returnCode == "1") {
+            this.clearLoad();
+            console.log(res);
+            this.codeImg ="data:image/jpeg;base64,"+ res.returnData.imgBase64;
+            this.dataForm.codeId = res.returnData.imgUUID
+          } else {
+            setTimeout(() => {
+              this.clearLoad();
+            }, 300);
           }
-}
+        })
-</script>
+        .catch(err => {
+          console.log(err);
+          setTimeout(() => {
+            this.clearLoad();
+          }, 300);
+        });
+      },
   
-<style lang="scss">
+      // 提交表单
-.site-wrapper.site-page--login {
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.createLoad();
+            var userPossword = CryptoJS.AES.encrypt(this.dataForm.password, KEY, {
+              iv: IV, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding
+            }).toString();
+  
+            let Content = {
+              'loginName': this.dataForm.userName,
+              'userPossword': userPossword,
+              'verCode' :this.dataForm.verCode,
+              'codeId' :this.dataForm.codeId
+  
+            };
+            userLogin(Content)
+            .then(res => {
+              if (res.returnCode == "1") {
+                this.clearLoad();
+                setToken(res.returnData.token);
+                this.$router.replace({ name: 'home' })
+              } else {
+                this.getVerCode();
+                this.$message({
+                  message: res.returnMsg,
+                  type: "warning"
+                });
+                setTimeout(() => {
+                  this.clearLoad();
+                }, 300);
+              }
+            })
+            .catch(err => {
+              console.log(err);
+              setTimeout(() => {
+                this.clearLoad();
+              }, 300);
+            });
+          }
+        })
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss">
+    .site-wrapper.site-page--login {
       position: absolute;
       top: 0;
       right: 0;
@@ -59,7 +153,6 @@ export default {
       left: 0;
       background-color: rgba(38, 50, 56, .6);
       overflow: hidden;
-
       &:before {
         position: fixed;
         top: 0;
@@ -71,7 +164,6 @@ export default {
         background-image: url(~@/assets/images/login_bg.jpg);
         background-size: cover;
       }
-
       .site-content__wrapper {
         position: absolute;
         top: 0;
@@ -84,31 +176,26 @@ export default {
         overflow-y: auto;
         background-color: transparent;
       }
-
       .site-content {
         min-height: 100%;
         padding: 30px 500px 30px 30px;
       }
-
       .brand-info {
         margin: 220px 100px 0 90px;
         color: #fff;
       }
-
       .brand-info__text {
         margin:  0 0 22px 0;
         font-size: 48px;
         font-weight: 400;
         /*text-transform : uppercase;*/
       }
-
       .brand-info__intro {
         margin: 10px 0;
         font-size: 16px;
         line-height: 1.58;
         opacity: .6;
       }
-
       .login-main {
         position: absolute;
         top: 0;
@@ -118,27 +205,23 @@ export default {
         min-height: 100%;
         background-color: #fff;
       }
-
       .login-title {
         font-size: 16px;
       }
-
       .login-captcha {
         overflow: hidden;
-
+        > img {
-    >img {
           width: 100%;
           cursor: pointer;
         }
       }
-
       .login-btn-submit {
         width: 100%;
         margin-top: 38px;
       }
-
       .el-input {
         width: 100% !important;
       }
-}
+    }
-</style>
+  </style>
+