CRM 移动端登录页兼容

src/views/Login.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="login">
-		<div id="login_wrapper">
+		<div id="login_wrapper" v-if="!isMobile">
 			<img class="login-bg" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_bg.png" alt />
 			<img class="login-icon" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" alt />
 			<!-- <el-form
@@ -105,49 +105,59 @@
 			<div class="login-box" v-else>
 				<ForgetPassModel 
 					ref="forgetPassModel"
-					:autoAccount="$refs[ordinaryModelForm]?$refs[ordinaryModelForm].form.account:''"
+					:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
 					@changeModel="changeModel('ordinaryModel')"/>
 			</div>
 		</div>
 
-		<!-- 移动端的登录页面 单独整一份 -->
-		<div id="login_wrapper_mobile" >
-			<div class="login-logo">
-				<img src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" >
-			</div>
-			<div class="login-title">sign in to continue</div>
-			<OrdinaryModel ref="ordinaryModelMobile"
-				:loginCheck="loginCheck"
-				:accountCheck="accountCheck"
-				:isMobile="isMobile"
-				@clearnHint="clearnHint"
-				@changeModel="changeModel('forgetPassModel')"
-				v-show="activeModel=='ordinaryModel'"
-			/>
-			<MobileModel ref="mobileModelMobile"
-				:areaCode="areaCode" :isMobile="isMobile" 
-				v-show="activeModel=='mobileModel'"
-			/>
-			<EmailModel ref="emailModelMobile" :isMobile="isMobile" v-show="activeModel=='emailModel'" />
-
-			<el-button type="primary" @click.native="handleLogin" 
-			:loading="logining" class="submit_btn_mobile">登录</el-button>
-			<div class="login-type-box">
-				<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
-				v-show="activeModel!=='ordinaryModel'">
-					<img src="~@/assets/img/icons/account-login-type.png">
-					<span>账号密码登录</span>
-				</div>
-				<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
-				v-show="activeModel!=='mobileModel'">
-					<img src="~@/assets/img/icons/phone-login-type.png">
-					<span>手机号登录</span>
+		<!-- 移动端的登录页面跟移动ETA的一模一样 单独整一份 -->
+		<div id="login_wrapper_mobile" v-else>
+			<template v-if="activeModel!=='forgetPassModel'">
+				<div class="login-logo">
+					<img src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" >
 				</div>
-				<div class="login-type-item" v-show="activeModel!=='emailModel'" 
-				@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
-					<img src="~@/assets/img/icons/email-login-type.png">
-					<span>邮箱登录</span>
+				<div class="login-title">sign in to continue</div>
+				<OrdinaryModel ref="ordinaryModelMobile"
+					:loginCheck="loginCheck"
+					:accountCheck="accountCheck"
+					:isMobile="isMobile"
+					@clearnHint="clearnHint"
+					@changeModel="changeModel('forgetPassModel')"
+					v-show="activeModel=='ordinaryModel'"
+				/>
+				<MobileModel ref="mobileModelMobile"
+					:areaCode="areaCode" :isMobile="isMobile" 
+					v-show="activeModel=='mobileModel'"
+				/>
+				<EmailModel ref="emailModelMobile" :isMobile="isMobile" v-show="activeModel=='emailModel'" />
+
+				<el-button type="primary" @click.native="handleLogin" 
+				:loading="logining" class="submit_btn_mobile">登录</el-button>
+				<div class="login-type-box">
+					<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
+					v-show="activeModel!=='ordinaryModel'">
+						<img src="~@/assets/img/icons/account-login-type.png">
+						<span>账号密码登录</span>
+					</div>
+					<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
+					v-show="activeModel!=='mobileModel'">
+						<img src="~@/assets/img/icons/phone-login-type.png">
+						<span>手机号登录</span>
+					</div>
+					<div class="login-type-item" v-show="activeModel!=='emailModel'" 
+					@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
+						<img src="~@/assets/img/icons/email-login-type.png">
+						<span>邮箱登录</span>
+					</div>
 				</div>
+			</template>
+			<div class="login-box" v-else>
+				<!-- 忘记密码就不重新搞了，太麻烦了，就写一起吧 -->
+				<ForgetPassModel 
+					ref="forgetPassModelMobile"
+					:isMobile="isMobile" 
+					:autoAccount="$refs.ordinaryModelMobile?$refs.ordinaryModelMobile.form.account:''"
+					@changeModel="changeModel('ordinaryModel')"/>
 			</div>
 		</div>
 
@@ -217,7 +227,7 @@ export default {
 			checked: false, //是否保持登录状态
 			visible: true, //密码输入类型
 
-			activeModel: 'emailModel',
+			activeModel: 'ordinaryModel',
 			/* form check 错误提示标识*/
 			loginCheck:false, //账号或密码错误
 			accountCheck:false,//账号异常：多次输错密码、长时间未登录
@@ -687,15 +697,9 @@ export default {
 			}
 		}
 	}
-	#login_wrapper_mobile{
-		display: none;
-	}
 	@media screen and (max-width:650px) {
-		#login_wrapper{
-			display: none;
-		}
 		#login_wrapper_mobile{
-			display: block;
+			// display: block;
 			padding: 15% 40px 20px;
 			.login-logo{
 				margin-bottom: 30px;

src/views/login_manage/ForgetPassModel.vue

@@ -2,7 +2,8 @@
     <div class="forget-pass-model">
         <div class="header-nav" @click="changeModel">
             <span><i class="el-icon-back"></i></span>
-            <span>忘记密码</span>
+            <span v-if="!isMobile">忘记密码</span>
+            <span v-else>{{ forgetPassTextMobile }}</span>
         </div>
         <div class="step-container model-wrap" v-show="currentStep===0">
             <el-form 
@@ -40,7 +41,7 @@
                 <p>您正在找回账号{{form.account}}的密码</p>
                 <ModelSteps :active-step="currentStep"/>
             </div>
-            <div class="container-inner model-wrap" v-show="currentStep===1">
+            <div class="container-inner model-wrap" v-show="currentStep===1 && (!isMobile)">
                 <VerificationBox
                     verifies-type="mobile"
                     :info-text="userMobile||'暂未绑定'"
@@ -54,6 +55,24 @@
                     @goNext="getCode"
                 />
             </div>
+            <div v-show="currentStep===1 && isMobile">
+                <div class="verification-item" 
+                    :class="{'active':choosedWay==='mobile','disabled':!userMobile.length}" @click="choosedWay = 'mobile'">
+                    <!-- <div class="icon"> -->
+                        <img src="~@/assets/img/icons/phone-login-type.png" />
+                    <!-- </div> -->
+                    <div class="text">{{userMobile||'暂未绑定'}}</div>
+                </div>
+                <div class="verification-item"
+                    :class="{'active':choosedWay==='email','disabled':!userEmail.length}" @click="choosedWay = 'email'">
+                    <!-- <div class="icon"> -->
+                        <img src="~@/assets/img/icons/email-login-type.png" />
+                    <!-- </div> -->
+                    <div class="text">{{userEmail||'暂未绑定'}}</div>
+                </div>
+                <el-button class="verification-button" type="primary" round @click="getCode(choosedWay)"
+                v-show="userMobile.length || userEmail.length">获取验证码</el-button>
+            </div>
             <div class="container-inner" v-show="currentStep===2">
                 <CaptchaInput 
                     ref="captInput"
@@ -62,7 +81,6 @@
                     <el-button type="primary" plain @click="changeModel">上一步</el-button>
                     <el-button type="primary" @click="checkInput">下一步</el-button>
                 </div>
-                
             </div>
             <div class="container-inner model-wrap" v-show="currentStep===3">
                 <el-form 
@@ -114,6 +132,10 @@ export default {
         autoAccount:{//自动填写的账号,如果有,作为form.accout的初始值
             type:String,
             default:''
+        },
+        isMobile:{
+            type:Boolean,
+            default:false
         }
     },
     components: { VerificationBox, ModelSteps, CaptchaInput },
@@ -171,8 +193,25 @@ export default {
             checkPassStr:'确定',//重置密码按钮
             countDownNum:5,
             resetPassTimer:0,
+            choosedWay:'mobile',
         };
     },
+    computed:{
+        forgetPassTextMobile(){
+            switch (this.currentStep) {
+                case 0:
+                    return "忘记密码"
+                case 1:
+                    return "安全验证"
+                case 2:
+                    return "请输入验证码"
+                case 3:
+                    return "设置密码"
+                default:
+                    break;
+            }
+        }
+    },
     created(){
         this.getCodePic()
     },
@@ -335,5 +374,57 @@ export default {
             }
         }
     }
+    .verification-item{
+        display: flex;
+        align-items: center;
+        width:100%;
+        box-sizing: border-box;
+        padding:10px 15px;
+        margin-bottom: 30px;
+        border: 1px solid #DCDFE6;
+        border-radius: 8px;
+        background-color: #fff;
+        &.active{
+            border: 1px solid #0052D9;
+            background-color: #F2F3FF;
+        }
+        &.disabled{
+            user-select: none;
+            pointer-events: none;
+        }
+        img{
+            width: 40px;
+            margin-right: 10px;
+        }
+    }
+    .verification-button{
+        width: 100%;
+        margin-top: 20px;
+    }
+    @media screen and (max-width:650px) {
+        .header-nav{
+            font-size: 24px;
+        }
+        .submit_btn{
+            border-radius: 50px;
+        }
+        .step-container{
+            .container-header{
+                display: none;
+            }
+            .container-inner{
+                .btn-wrap{
+                    .el-button{
+                        width:100%;
+                        margin-left: 0;
+                        border-radius: 42px;
+                        &:first-child{
+                            margin-bottom: 30px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 </style>

src/views/login_manage/components/CaptchaInput.vue

@@ -105,4 +105,13 @@ export default {
 .active {
     border: 1px solid #3654C1 !important;
 }
+
+@media screen and (max-width:650px) {
+  .row-center {
+    gap:10px;
+  }
+  .captcha_input_box{
+    box-sizing: border-box;
+  }
+}
 </style>