登录

package.json

@@ -19,6 +19,7 @@
     "element-ui": "2.13.2",
     "js-base64": "^3.6.1",
     "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
@@ -61,4 +62,4 @@
     "npm": ">= 3.0.0"
   },
   "license": "MIT"
-}
+}

src/components/login/login.vue

@@ -92,6 +92,19 @@
             alt=""
           />
         </div>
+        <div class="verificationCode-box">
+              <input
+                type="text"
+                :class="'input'"
+                :placeholder="$t('Key36')"
+                v-model="verificationCode"
+                @input="ChangeVericationCode"
+                maxlength="20"
+              />
+            <div class="verificationCode-img">
+                <img v-if="verificationCodeimg" :src="verificationCodeimg" :alt="$t('Key36')" @click="getVerificationCodeimg"/>
+            </div>
+          </div>
       </template>
       <!-- 验证码登录   v-show="loginType == '验证码'"
        -->
@@ -174,10 +187,11 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import { getLogin, getContent } from "@/api/api";
+import { getLogin, getStaticContent } from "@/api/api";
 import { setToken } from "@/utils/auth";
 import { mapGetters } from "vuex";
 import UserAgreement from "./UserAgreement.vue" // 用户协议
+import md5 from 'js-md5'
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {UserAgreement},
@@ -199,6 +213,11 @@ export default {
       email_phone: "",
       password: "",
       showUseragreement: false, // 是否显示用户协议
+      verificationCode: "",
+      verificationCodeimg: '', // 图形验证码
+      verificationCodeimgID: '', // 图形验证码ID
+      verificationCodeLoading: true, // 图形验证码的flag
+
     };
   },
   //计算属性 类似于data概念
@@ -225,6 +244,9 @@ export default {
     ChangePassword() {
       this.password = this.password.trim();
     },
+    ChangeVericationCode(){
+        this.verificationCode = this.verificationCode.trim()
+    },
     //选择密码登录和验证码登录
     selectLoginType(type) {
       if (this.loginType != type) {
@@ -248,13 +270,18 @@ export default {
     gotoLogin() {
       let flag = true;
       if (this.loginType == "密码") {
-        if (!this.email_phone && !this.password) {
+        if (!this.email_phone || !this.password) {
           // this.$message.warning("账号密码不能为空");
           this.$message.warning(this.$t("Key653"));
 
           flag = false;
           return;
         }
+        if(!this.verificationCode){
+            this.$message.warning(this.$t("Key37"))
+            flag = false;
+            return;
+        }
         if (!this.ageeemnt) {
           this.$message.warning(this.$t("Key543"));
           flag = false;
@@ -269,7 +296,10 @@ export default {
       let data = {
         user_type: this.TorS.toUpperCase(),
         user_name: this.email_phone,
-        password: this.password,
+        is_password_md5: "true",
+        password: md5(this.password).toUpperCase(),
+        verification_code_image_text: this.verificationCode,
+        verification_code_image_id: this.verificationCodeimgID
       };
       if (this.rememberMe) {
       } else {
@@ -300,6 +330,7 @@ export default {
         })
         .catch((err) => {
           this.isLogin = false;
+          this.getVerificationCodeimg()
         });
     },
     // 回车登录
@@ -318,10 +349,29 @@ export default {
     changeAgreement(flag){
         this.ageeemnt = flag
         this.showUseragreement = false
-    }
+    },
+    // 图形验证码
+    getVerificationCodeimg(){
+        if(!this.verificationCodeLoading) return
+        this.verificationCodeLoading = false
+        let MethodName = "login_control-GetVerificationCodeImage";
+        let data = {};
+        getStaticContent(MethodName, data).then((res) => {
+            if(res){
+                this.verificationCodeLoading = true
+                this.verificationCodeimgID = res.image_id
+                this.verificationCodeimg = 'data:image/jpeg;base64,'+res.image_content_base64
+            }else{
+                this.verificationCodeLoading = true;
+            }
+        }).catch(() => {
+            this.verificationCodeLoading = true;
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    this.getVerificationCodeimg()
     let user_name = JSON.parse(localStorage.getItem("user_name"));
     if (user_name) {
       this.email_phone = user_name.email_phone;
@@ -396,7 +446,7 @@ export default {
   }
   .main {
     > div {
-      margin: 30px auto;
+      margin: 24px auto;
       width: 334px;
       position: relative;
       .input {
@@ -473,6 +523,28 @@ export default {
           background: #f6f6f6;
         }
       }
+      &.verificationCode-box{
+          display: flex;
+          >.input{
+            width: 164px;
+            flex: 1;
+            padding-left: 10px;
+          }
+          >div{
+            &.verificationCode-img{
+                width: 128px;
+                height: 48px;
+                margin-left: 5px;
+                background: #C5C5C5;
+                border-radius: 4px;             
+                overflow: hidden;
+                >img{
+                    height: 48px;
+                    cursor: pointer;
+                }
+            }
+        }
+      }
     }
     .Verification {
       button {

src/views/login/index.vue

@@ -605,15 +605,17 @@ export default {
   }
   .bottom {
     position: absolute;
-    bottom: -154px;
+    bottom: -104px;
     width: 100%;
     background: #2c2c2c;
-    height: 154px;
-    padding-top: 40px;
+    height: 104px;
+    padding-top: 24px;
     > div {
       text-align: center;
-      font-size: 20px;
+      font-size: 12px;
+      line-height: 20px;
       color: rgb(180, 179, 179);
+      margin-bottom: 16px;
       > span {
         margin-left: 40px;
       }
@@ -621,7 +623,6 @@ export default {
     > :first-child {
       // height: 80px;
       // line-height: 80px;
-      margin-bottom: 24px;
       > :first-child {
         color: white;
       }