eta1.4 init

index.html

@@ -24,7 +24,18 @@
 	
 	<!-- dataTables -->
 	<link rel="stylesheet" type="text/css" href="./static/css/jquery.dataTables.css"/>
-
+    <!-- 隐藏Edge在密码输入框的icon -->
+    <style>
+        input[type="password"]::-ms-reveal{
+            display: none;
+        }
+        input[type="password"]::-ms-clear{
+            display: none;
+        }
+        input[type="password"]::-o-reveal{
+            display: none;
+        }
+    </style>
 	<script>
 		var _hmt = _hmt || [];
 		(function() {

src/main.js

@@ -137,7 +137,7 @@ router.beforeEach((to, from, next) => {
   }
 
   let auth = localStorage.getItem("auth") || false;
-  if (to.path != "/login" && to.path!='/temppage' && !auth) {
+  if (to.path != "/login" && to.path!='/temppage' &&to.path!='/fogetpassword' && !auth) {
     window.location.href =  window.location.origin + '/login';
     return false;
   }

src/routes/modules/oldRoutes.js

@@ -52,6 +52,12 @@ export default [
   	name:'AI问答',
   	hidden:false
   },
+  {
+    path:'/fogetpassword',
+    component:()=> import('@/views/login_manage/ForgetPassWord.vue'),
+    name:'忘记密码',
+    hidden:false
+  },
 
   // 主页
   {

src/views/Login.vue

@@ -1,10 +1,9 @@
 <template>
-  <div id="login">
+	<div id="login">
 		<div id="login_wrapper">
-      
 			<img class="login-bg" :src="$setting.login_bg" alt />
-      <img class="login-icon" :src="$setting.login_logo">
-			<el-form
+			<img class="login-icon" :src="$setting.login_logo">
+			<!-- <el-form
 				:model="ruleForm"
 				:rules="rules"
 				ref="ruleForm"
@@ -63,7 +62,32 @@
 						>登录</el-button
 					>
 				</el-form-item>
-			</el-form>
+			</el-form> -->
+			<div class="login-box" id="login-container">
+				<span class="login-title">ETA — 让投研领先市场半步</span>
+				<el-tabs v-model="activeModel" @tab-click="handleClick">
+					<el-tab-pane label="账号登录" name="ordinaryModel">
+						<OrdinaryModel ref="ordinaryModel"
+							:loginCheck="loginCheck"
+							:accountCheck="accountCheck"
+							@clearnHint="clearnHint"
+						/>
+					</el-tab-pane>
+					<el-tab-pane label="手机号登录" name="mobileModel">
+						<MobileModel ref="mobileModel"/>
+					</el-tab-pane>
+					<el-tab-pane label="邮箱登录" name="emailModel">
+						<EmailModel ref="emailModel"/>
+					</el-tab-pane>
+				</el-tabs>
+				<el-button
+					type="primary"
+					size="medium"
+					@click.native="handleLogin"
+					:loading="logining"
+					class="submit_btn"
+					>登录</el-button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -72,159 +96,187 @@
 import { userLogin, departInterence } from "@/api/api.js";
 import http from "@/api/http.js";
 import md5 from "@/utils/md5.js";
+import EmailModel from "./login_manage/EmailModel.vue";
+import MobileModel from "./login_manage/MobileModel.vue";
+import OrdinaryModel from "./login_manage/OrdinaryModel.vue";
 export default {
-  data() {
-    return {
-      b: new http.Base64(),
-      logining: false, //登录loadding
-      ruleForm: {
-        account: "",
-        checkPass: "",
-      },
-      rules: {
-        account: [
-          {
-            required: true,
-            message: "请输入用户名",
-            trigger: "blur",
-          },
-        ],
-        checkPass: [
-          {
-            required: true,
-            message: "请输入密码",
-            trigger: "blur",
-          },
-        ],
-      },
-      checked: false, //是否保持登录状态
-      visible: true, //密码输入类型
-    };
-  },
-  created() {
-    this.keyupSubmit(); //回车登录
-    let userAccount = localStorage.getItem("account") || null;
-    let userCheckPass = localStorage.getItem("checkPass") || null;
-    if (userAccount) {
-      this.ruleForm.account = this.b.decode(userAccount);
-      this.ruleForm.checkPass = this.b.decode(userCheckPass);
-      this.checked = true;
-    }
-  },
-  methods: {
-    keyupSubmit() {
-      //回车登录
-      document.onkeydown = (e) => {
-        let keyval = window.event.keyCode;
-        if (keyval === 13) {
-          this.handleSubmit2();
-        }
-      };
+    components: { OrdinaryModel, MobileModel, EmailModel },
+    data() {
+        return {
+            b: new http.Base64(),
+            logining: false,
+            ruleForm: {
+                account: "",
+                checkPass: "",
+            },
+            rules: {
+                account: [
+                    {
+                        required: true,
+                        message: "请输入用户名",
+                        trigger: "blur",
+                    },
+                ],
+                checkPass: [
+                    {
+                        required: true,
+                        message: "请输入密码",
+                        trigger: "blur",
+                    },
+                ],
+            },
+            checked: false,
+            visible: true,
+            
+            activeModel: 'ordinaryModel',
+            /* form check */
+            loginCheck:false, //账号或密码错误
+            accountCheck:false,//账号异常：多次输错密码、长时间未登录
+            accountForbidden:false,//账号被禁用
+            mobileCheck:false,//手机号未绑定
+            emailCheck:false,//邮箱未绑定
+        };
     },
-    handleSubmit2() {
-      //登录
-      let that = this;
-      this.$refs.ruleForm.validate((valid) => {
-        if (valid) {
-          that.logining = true;
-          var loginParams = {
-            Username: that.ruleForm.account,
-            Password: md5.hex_md5(that.ruleForm.checkPass),
-            IsRemember: this.checked,
-          };
-          userLogin(loginParams).then(async (res) => {
-            if (res.Ret === 200) {
-              localStorage.setItem("auth", res.Data.Authorization);
-              localStorage.setItem("userName", res.Data.RealName);
-              localStorage.setItem("Role", res.Data.RoleTypeCode);
-              localStorage.setItem("RoleIdentity", res.Data.SysRoleTypeCode);
-              localStorage.setItem("RoleType", res.Data.ProductName);
-              localStorage.setItem("ManageType", res.Data.Authority);
-              localStorage.setItem("AdminId", res.Data.AdminId);
-              localStorage.setItem("AdminName", res.Data.AdminName);
-              if (this.checked) {
-                localStorage.setItem(
-                  "account",
-                  this.b.encode(this.ruleForm.account)
-                );
-                localStorage.setItem(
-                  "checkPass",
-                  this.b.encode(this.ruleForm.checkPass)
-                );
-              } else {
-                localStorage.removeItem("account");
-                localStorage.removeItem("checkPass");
-              }
-
-              let path = "";
-              switch (res.Data.RoleTypeCode) {
-                case "rai_researcher":
-                case "ficc_researcher":
-                case "researcher":
-                  path = "/reportlist";
-                  break;
-                case "compliance": //合规
-                  path = "/contractapprovallist";
-                  break;
-                case "special_researcher": //特邀研究员
-                  path = "/dataList";
-                  break;
-                case "special_ficc_seller":
-                  path = "/meetingCalendar";
-                  break;
-                default:
-                  path = await this.getOtherRolePath("myCalendar");
-              }
-              this.$router.push({ path });
-            }
-            that.logining = false;
-          });
+    created() {
+        this.keyupSubmit(); //回车登录
+        let userAccount = localStorage.getItem("account") || null;
+        let userCheckPass = localStorage.getItem("checkPass") || null;
+        if (userAccount) {
+            this.ruleForm.account = this.b.decode(userAccount);
+            this.ruleForm.checkPass = this.b.decode(userCheckPass);
+            this.checked = true;
         }
-      });
     },
-    changePass(value) {
-      //密码输入格式切换
-      this.visible = !(value === "show");
-    },
-    getOtherRolePath(pathVal) {
-      return departInterence.getMenu().then((res) => {
-        let resolvePath = "";
-        if (res.Ret === 200) {
-          let menuList = res.Data.List || [];
-          if(!menuList.length){
-						this.$message.error('该账号没有任何菜单权限,请联系管理员')
-						return
-					}
-
-          // 是否已经拿到菜单信息
-          sessionStorage.setItem("hasGetMenu", "true");
-          sessionStorage.setItem("MenuList", JSON.stringify(menuList));
-          /* 是否有数据报表权限 */
-          this.$store.commit(
-            "SET_DATA_AUTH",
-            menuList.some((item) => item.name === "数据报表")
-          );
-
-          for (let i = 0; i < menuList.length; i++) {
-            const arr=menuList[i].children||[]
-						
-						if(arr.some(it => it.path == pathVal)){
-              resolvePath = "/" + pathVal;
-              break;
-            }
-          }
-          return resolvePath || "/" + menuList[0].children[0].path;
+    methods: {
+        keyupSubmit() {
+            //回车登录
+            document.onkeydown = (e) => {
+                let keyval = window.event.keyCode;
+                if (keyval === 13) {
+                    this.handleSubmit2();
+                }
+            };
+        },
+        handleSubmit2() {
+            //登录
+            let that = this;
+            this.$refs.ruleForm.validate((valid) => {
+                if (valid) {
+                    that.logining = true;
+                    var loginParams = {
+                        Username: that.ruleForm.account,
+                        Password: md5.hex_md5(that.ruleForm.checkPass),
+                        IsRemember: this.checked,
+                    };
+                    userLogin(loginParams).then(async (res) => {
+                        if (res.Ret === 200) {
+                            localStorage.setItem("auth", res.Data.Authorization);
+                            localStorage.setItem("userName", res.Data.RealName);
+                            localStorage.setItem("Role", res.Data.RoleTypeCode);
+                            localStorage.setItem("RoleIdentity", res.Data.SysRoleTypeCode);
+                            localStorage.setItem("RoleType", res.Data.ProductName);
+                            localStorage.setItem("ManageType", res.Data.Authority);
+                            localStorage.setItem("AdminId", res.Data.AdminId);
+                            localStorage.setItem("AdminName", res.Data.AdminName);
+                            if (this.checked) {
+                                localStorage.setItem("account", this.b.encode(this.ruleForm.account));
+                                localStorage.setItem("checkPass", this.b.encode(this.ruleForm.checkPass));
+                            }
+                            else {
+                                localStorage.removeItem("account");
+                                localStorage.removeItem("checkPass");
+                            }
+                            let path = "";
+                            switch (res.Data.RoleTypeCode) {
+                                case "rai_researcher":
+                                case "ficc_researcher":
+                                case "researcher":
+                                    path = "/reportlist";
+                                    break;
+                                case "compliance": //合规
+                                    path = "/contractapprovallist";
+                                    break;
+                                case "special_researcher": //特邀研究员
+                                    path = "/dataList";
+                                    break;
+                                case "special_ficc_seller":
+                                    path = "/meetingCalendar";
+                                    break;
+                                default:
+                                    path = await this.getOtherRolePath("myCalendar");
+                            }
+                            this.$router.push({ path });
+                        }
+                        that.logining = false;
+                    });
+                }
+            });
+        },
+        changePass(value) {
+            //密码输入格式切换
+            this.visible = !(value === "show");
+        },
+        getOtherRolePath(pathVal) {
+            return departInterence.getMenu().then((res) => {
+                let resolvePath = "";
+                if (res.Ret === 200) {
+                    let menuList = res.Data.List || [];
+                    if (!menuList.length) {
+                        this.$message.error('该账号没有任何菜单权限,请联系管理员');
+                        return;
+                    }
+                    // 是否已经拿到菜单信息
+                    sessionStorage.setItem("hasGetMenu", "true");
+                    sessionStorage.setItem("MenuList", JSON.stringify(menuList));
+                    /* 是否有数据报表权限 */
+                    this.$store.commit("SET_DATA_AUTH", menuList.some((item) => item.name === "数据报表"));
+                    for (let i = 0; i < menuList.length; i++) {
+                        const arr = menuList[i].children || [];
+                        if (arr.some(it => it.path == pathVal)) {
+                            resolvePath = "/" + pathVal;
+                            break;
+                        }
+                    }
+                    return resolvePath || "/" + menuList[0].children[0].path;
+                }
+                return "/" + pathVal;
+            });
+        },
+        handleClick(tab) {
+        },
+        handleLogin(){
+            //先进行判空的表单验证
+            this.$refs[this.activeModel].$refs.modelForm.validate((valid)=>{
+                if(valid){
+                    //根据activeName 调用不同的登陆接口
+                    //账号密码错误 将loginCheck置为true
+                    //账号异常 将accountCheck置为true
+                    this.loginCheck = !this.loginCheck
+                    //都Ok就进系统
+                }
+            })
+        },
+        clearnHint(){
+            this.loginCheck = false
+            this.accountCheck = false
         }
-        return "/" + pathVal;
-      });
     },
-  },
-  destroyed() {
-    document.onkeydown = null;
-  },
+    destroyed() {
+        document.onkeydown = null;
+    }
 };
 </script>
 
+<style lang="scss">
+#login{
+	.el-tabs__nav-wrap::after {
+		display: none;
+	}
+	.el-tabs__item{
+		font-size: 16px;
+	}
+}
+</style>
 <style lang="scss" scoped>
 #login {
 	width: 100%;
@@ -250,14 +302,14 @@ export default {
 
 		.login-icon {
 			position: absolute;
-      top: 40px;
+			top: 40px;
 			right: 40px;
 		}
 		.login-title {
 			color: #333;
 			font-size: 30px;
 			display: block;
-      text-align: center;
+			text-align: center;
 			margin-bottom: 30px;
 		}
 

src/views/login_manage/EmailModel.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="email-model-wrap model-wrap">
+        <el-form 
+            ref="modelForm" 
+            label-position="right" 
+            label-width="0px"
+            :model="form"
+            :rules="rules">
+            <el-form-item prop="mobile">
+                <el-input
+                    type="text"
+                    v-model="form.email"
+                    auto-complete="off"
+                    placeholder="请输入邮箱"
+                >
+                </el-input>
+                <span class="inline-message el-form-item__error" 
+                    v-show="(emailCheck||accountForbidden)&&form.email.length">
+                    {{hintMessage}}
+                </span>
+            </el-form-item>
+            <el-form-item prop="picCode">
+                <el-input
+                    class="input-with-slot"
+                    type="text"
+                    v-model="form.picCode"
+                    auto-complete="off"
+                    placeholder="请输入图形验证码"
+                >
+                    <div class="pic-box" slot="prepend">
+                        <img :src="picSrc" alt="图形验证码"/>
+                    </div>
+                </el-input>
+            </el-form-item>
+            <el-form-item prop="checkCode">
+                <el-input
+                    class="input-with-slot"
+                    type="text"
+                    v-model="form.checkCode"
+                    auto-complete="off"
+                    placeholder="请输入验证码"
+                >
+                    <span slot="append" class="code" :class="{'active':canRequest}">{{codeStr}}</span>
+                </el-input>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        emailCheck:{
+            type:Boolean,
+            default:false
+        },
+        accountForbidden:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            picSrc:'',
+            canRequest:false,
+            codeStr:'获取验证码',
+            form:{},
+            rules:{},
+            hintMessage:''
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss">
+@import "./css/formStyle.scss";
+</style>

src/views/login_manage/ForgetPassWord.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="forget-password-wrap">
+        <img class="login-icon" :src="$setting.login_logo">
+        <div class="account-box" v-if="!hasAccount">
+            请输入账号密码
+
+            <el-button @click="goSteps">下一步</el-button>
+        </div>
+        <div class="main-box" v-else>
+            <div class="step-hint">您正在找回账号 qychen@it 的密码</div>
+            <div class="step">
+                <el-steps :active="active">
+                    <el-step v-for="(step,index) in steps" :key="index"
+                        :title="`0${index+1}${step}`"></el-step>
+                </el-steps>
+            </div>
+            <div class="step-container" v-if="stepNumber===2&&active===0">
+                <VerificationBox v-if="accountHasMobile"
+                    verifies-type="mobile"
+                    info-text="12345678901"
+                    @goNext="chooseVerifiedWay"
+                />
+                <VerificationBox v-if="accountHasEmail"
+                    verifies-type="email"
+                    info-text="1234@qq.com"
+                    @goNext="chooseVerifiedWay"
+                />
+            </div>
+            <div class="step-container" v-if="(stepNumber===2&&active===1)||(stepNumber===1&&active===0)">
+                <VerificationBox 
+                    :verifies-type="verifiedWay"
+                    :info-text="verifiedWay==='mobile'?mobileText:emailText"
+                    btnText="获取验证码"
+                    @goNext="getCode"
+                />
+                <el-input placeholder="请输入验证码"></el-input>
+                <el-button v-if="stepNumber===2" @click="active = 0">上一步</el-button>
+                <el-button @click="goSetPassWord">下一步</el-button>
+            </div>
+            <div class="step-container" v-if="(stepNumber===2&&active===2)||(stepNumber===1&&active===1)">
+                <el-form>
+                    <el-form-item>
+                        <el-input placeholder="请输入新密码"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-input placeholder="请确认新密码"></el-input>
+                    </el-form-item>
+                </el-form>
+                <el-button @click="setNewPassWord">下一步</el-button>
+            </div>
+            <div class="finish-step" v-if="active===steps.length">
+                设置成功
+                <el-button>去登录页</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import VerificationBox from './components/VerificationBox.vue';
+
+export default {
+    components: { VerificationBox },
+    data() {
+        return {
+            hasAccount:false,
+            active: 0,
+            accountHasMobile: true,//该账号是否绑定了手机号
+            mobileText:'123456',
+            accountHasEmail: true,//该账号是否绑定了邮箱
+            emailText:'123@qq.com',
+            verifiedWay:'',
+            steps:['选择验证方式','进行安全验证','设置密码'],
+        };
+    },
+    computed:{
+        stepNumber(){
+            return this.accountHasMobile+this.accountHasEmail
+        }
+    },
+    watch:{
+        hasAccount(newVal){
+            if(newVal){
+                this.steps = this.stepNumber===2?this.steps:this.steps.slice(1)
+            }
+        }
+    },
+    methods: {
+        goSteps(){
+            //验证账号和图形验证码，通过后拿到用户的验证方式，手机或邮箱，或者两个都有
+            this.accountHasMobile = true
+            this.accountHasEmail = true
+            this.hasAccount = true
+        },
+        chooseVerifiedWay(way){
+            this.verifiedWay = way
+            if(way==='mobile'){
+                this.accountHasMobile = true
+                this.mobileText = '用户的手机号'
+            }else{
+                this.accountHasEmail = true
+                this.emailText = '用户的邮箱'
+            }
+            this.active = 1
+        },
+        //获取验证码
+        getCode(){
+            //发送成功后60秒倒计时
+        },
+        goSetPassWord(){
+            //接口验证 验证码是否正确
+            this.active++
+        },
+        setNewPassWord(){
+
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.forget-password-wrap{
+    .login-icon {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+    }
+    .main-box,.account-box{
+        margin-top:120px;
+        width:1200px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+</style>

src/views/login_manage/MobileModel.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="mobile-model-wrap model-wrap">
+        <el-form 
+            ref="modelForm" 
+            label-position="right" 
+            label-width="0px"
+            :model="form"
+            :rules="rules">
+            <el-form-item prop="mobile">
+                <el-input
+                    class="input-with-slot"
+                    type="text"
+                    v-model="form.mobile"
+                    auto-complete="off"
+                    placeholder="请输入手机号"
+                >
+                    <el-select v-model="areaCodeSelect" slot="prepend" placeholder="请选择">
+                        <el-option v-for="item in areaCode" :key="item.value"
+                            :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-input>
+                <span class="inline-message el-form-item__error" 
+                    v-show="(mobileCheck||accountForbidden)&&form.mobile.length">
+                    {{hintMessage}}
+                </span>
+            </el-form-item>
+            <el-form-item prop="picCode">
+                <el-input
+                    class="input-with-slot"
+                    type="text"
+                    v-model="form.picCode"
+                    auto-complete="off"
+                    placeholder="请输入图形验证码"
+                >
+                    <div class="pic-box" slot="prepend">
+                        <img :src="picSrc" alt="图形验证码"/>
+                    </div>
+                </el-input>
+            </el-form-item>
+            <el-form-item prop="checkCode">
+                <el-input
+                    class="input-with-slot"
+                    type="text"
+                    v-model="form.checkCode"
+                    auto-complete="off"
+                    placeholder="请输入验证码"
+                >
+                    <span slot="append" class="code" :class="{'active':canRequest}">{{codeStr}}</span>
+                </el-input>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        mobileCheck:{
+            type:Boolean,
+            default:false
+        },
+        accountForbidden:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            areaCode:[//手机区号
+                { value: '86', label: '+86' },
+                { value: '852', label: "+852" },
+                { value: '886', label: '+886' },
+                { value: '1', label: '+1' },
+                { value: '65', label: '+65' },
+                { value: '62', label: '+62' },
+                { value:'081',label: '+081' },
+                { value:'44',label: '+44' }
+            ],
+            areaCodeSelect:'86',
+            picSrc:'',
+            canRequest:false,
+            codeStr:'获取验证码',
+            form:{},
+            rules:{}
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss">
+@import "./css/formStyle.scss";
+</style>

src/views/login_manage/OrdinaryModel.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="ordinary-model-wrap model-wrap">
+        <el-form 
+            ref="modelForm" 
+            label-position="right" 
+            label-width="0px"
+            :model="form"
+            :rules="rules">
+            <el-form-item prop="account">
+                <el-input
+                    type="text"
+                    v-model="form.account"
+                    auto-complete="off"
+                    placeholder="请输入用户名"
+                />
+                <span class="inline-message el-form-item__error" 
+                    v-show="(loginCheck||accountCheck)&&form.account.length">
+                    {{hintMessage}}
+                </span>
+            </el-form-item>
+            <el-form-item prop="checkPass">
+                <el-input
+                    type="password"
+                    v-model="form.checkPass"
+                    auto-complete="off"
+                    placeholder="请输入密码"
+                />
+                <span class="inline-message el-form-item__error" 
+                    v-show="(loginCheck||accountCheck)&&form.checkPass.length">
+                    {{hintMessage}}</span>
+            </el-form-item>
+            <el-form-item class="remember-cont" prop="checked">
+                <el-checkbox v-model="checked" class="remember">
+                    记住账号密码
+                    <el-tooltip effect="dark" content="有效期60天" placement="top">
+                        <span class="hint-text">
+                            <i class="el-icon-question"></i>
+                        </span>
+                    </el-tooltip>
+                </el-checkbox>
+                <el-button type="text" @click="goPage">忘记密码</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        loginCheck:{
+            type:Boolean,
+            default:false
+        },
+        accountCheck:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        const validateClearn = (rule,value,callBack)=>{
+            if(this.loginCheck||this.accountCheck){
+                this.$emit('clearnHint')
+            }
+            callBack()
+        }
+        return {
+            form:{
+                account:'',
+                checkPass:'',
+                checked:false
+            },
+            rules:{
+                account:[
+                    {required: true,message: "请输入账号",trigger: "blur"},
+                    {validator:validateClearn,trigger:['change']}
+                ],
+                checkPass:[
+                    {required: true,message: "请输入密码",trigger: "blur"},
+                    {validator:validateClearn,trigger:['change']}
+                ]
+            },
+            hintMessage:''
+        };
+    },
+    watch:{
+        loginCheck(newVal){
+            //显示/隐藏inline-message
+            if(newVal){
+                this.hintMessage="账号或密码错误"
+            }else{
+                this.hintMessage=''
+            }
+        },
+        accountCheck(newVal){
+            if(newVal){
+                this.hintMessage="账号异常，请通过验证登录"
+            }else{
+                this.hintMessage=''
+            }
+        }
+    },
+    methods: {
+        goPage(){
+            this.$router.push('/fogetpassword')
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./css/formStyle.scss";
+</style>

src/views/login_manage/components/VerificationBox.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="verification-box-wrap">
+        <div class="icon">
+            <i :class="verifiesType==='mobile'?'el-icon-phone-outline':'el-icon-picture'"></i>
+        </div>
+        <div class="text">{{infoText}}</div>
+        <el-button @click="goNext" v-if="!hideBtn">{{btnText}}</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        verifiesType:{//安全验证 mobile or email
+            type:String,
+            default:'mobile'
+        },
+        infoText:{//手机号或邮箱
+            type:String,
+            default:'123456'
+        },
+        hideBtn:{
+            type:Boolean,
+            default:false
+        },
+        btnText:{
+            type:String,
+            default:'开始验证'
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+        goNext(){
+            this.$emit('goNext',this.verifiesType)
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/login_manage/css/formStyle.scss

@@ -0,0 +1,50 @@
+.model-wrap{
+    .remember-cont{
+        margin-bottom: 35px;
+        .hint-text{
+            color: #606266 !important;
+        }
+    }
+    .el-form-item.is-error{
+        .inline-message{
+            display: none;
+        }
+    }
+    .input-with-slot{
+        display: flex;
+        .el-input__inner{
+            flex: 1;
+            height: 40px !important;
+        }
+        .el-input-group__prepend,.el-input-group__append{
+            padding:0 !important;
+            background-color: #fff;
+            width:140px;
+            height: 40px;
+            box-sizing: border-box;
+            .el-input__inner{
+                padding:0;
+            }
+            .el-select{
+                margin:0;
+                width:140px;
+            }
+        }
+        .pic-box{
+            width:140px;
+            overflow: hidden;
+            padding:5px;
+            box-sizing: border-box;
+            img{
+                width: 100%;
+            }
+        }
+        .code{
+            display: inline-block;
+            width:100%;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+        }
+    }
+}