Merge branch 'CRM_mobile_loginPage'

src/styles/vars.scss

@@ -46,7 +46,9 @@ a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysi
 @charset "utf-8";
 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td { margin:0; padding:0; }
 body{ font-size:12px; font-style:normal; font-family:"\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif,; }
-html{ overflow:auto; min-width:1000px; }
+html{ overflow:auto; 
+  // min-width:1000px;
+ }
 small{ font-size:12px; }
 h1{ font-size:18px; }
 h2{ font-size:16px; }

src/views/Home.vue

@@ -998,6 +998,7 @@ export default {
   }
 }
 #containercon {
+  min-width: 1000px;
   width: 100%;
   position: absolute;
   top: 0px;

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
@@ -109,6 +109,58 @@
 					@changeModel="changeModel('ordinaryModel')"/>
 			</div>
 		</div>
+
+		<!-- 移动端的登录页面跟移动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-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>
+
 		<!-- 验证弹窗 -->
 		<el-dialog
 			class="check-dialog"
@@ -185,7 +237,34 @@ export default {
 			areaCode:[],
 
 			isCheckDialogShow:false,
-			checkActiveModel:'checkMobileModel'
+			checkActiveModel:'checkMobileModel',
+			isMobile:false
+		}
+	},
+	computed:{
+		activeModelForm(){
+			return this.isMobile?this.activeModel+'Mobile':this.activeModel
+		},
+		ordinaryModelForm(){
+			return this.isMobile?'ordinaryModelMobile':'ordinaryModel'
+		},
+		mobileModelForm(){
+			return this.isMobile?'mobileModelMobile':'mobileModel'
+		},
+		emailModelForm(){
+			return this.isMobile?'emailModelMobile':'emailModel'
+		}
+	},
+	watch:{
+		isMobile(value){
+			// 移动端变PC或相反的情况监听
+			// 重新获取验证码
+			this.$nextTick(()=>{
+				// console.log(this.activeModelForm);
+				if((this.activeModel=="mobileModel" || this.activeModel=="emailModel")&&
+				(!this.$refs[this.activeModelForm].picSrc))
+				this.$refs[this.activeModelForm].getCodePic()
+			})
 		}
 	},
 	created() {
@@ -201,8 +280,16 @@ export default {
 	},
 	mounted(){
 		this.getRememberedInfo()
+		this.isMobile=!(window.innerWidth>650)
+		window.addEventListener('resize',this.setIsMobile)
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize',this.setIsMobile)
 	},
 	methods: {
+		setIsMobile(){
+			this.isMobile=!(window.innerWidth>650)
+		},
 		keyupSubmit() {
 			//回车登录
 			document.onkeydown = e => {
@@ -332,7 +419,7 @@ export default {
 		},
 		handleLogin(){
 			//先进行判空的表单验证
-			this.$refs[this.activeModel].$refs.modelForm.validate((valid)=>{
+			this.$refs[this.activeModelForm].$refs.modelForm.validate((valid)=>{
 				if(valid){
 					this.logining = true
 					//根据activeName 调用不同的登陆接口
@@ -364,7 +451,7 @@ export default {
 			})
 		},
 		ordinaryModelLogin(){
-			const {account,checkPass,checked} = this.$refs.ordinaryModel.form
+			const {account,checkPass,checked} = this.$refs[this.ordinaryModelForm].form
 			departInterence.userLogin({
 				LoginType:1,
 				Username:account,
@@ -401,7 +488,7 @@ export default {
 				this.loginSys(res)
 			})
 		},
-		mobileModelLogin(model='mobileModel'){
+		mobileModelLogin(model=this.mobileModelForm){
 			const {mobile,checkCode} = this.$refs[model].form
 			departInterence.userLogin({
 				LoginType:2,
@@ -412,15 +499,15 @@ export default {
 					//刷新图形验证码
 					this.$refs[model].getCodePic()
 					this.$refs[model].form.picCode = ''
-					model==='mobileModel'&&(this.logining = false)
-					model!=='mobileModel'&&(this.checkLogining = false)
+					model===this.mobileModelForm&&(this.logining = false)
+					model!==this.mobileModelForm&&(this.checkLogining = false)
 					return
 				}
 				this.setLoginInfo(res)
 				this.loginSys(res)
 			})
 		},
-		emailModelLogin(model='emailModel'){
+		emailModelLogin(model=this.emailModelForm){
 			const {email,checkCode} = this.$refs[model].form
 			departInterence.userLogin({
 				LoginType:3,
@@ -431,8 +518,8 @@ export default {
 					//刷新图形验证码
 					this.$refs[model].getCodePic()
 					this.$refs[model].form.picCode = ''
-					model==='emailModel'&&(this.logining = false)
-					model!=='emailModel'&&(this.checkLogining = false)
+					model===this.emailModelForm&&(this.logining = false)
+					model!==this.emailModelForm&&(this.checkLogining = false)
 					return
 				}
 				this.setLoginInfo(res)
@@ -515,6 +602,7 @@ export default {
 	background: #fff;
 	position: relative;
 	overflow: hidden;
+	overflow-y: auto;
 	#login_wrapper {
 		width: 100%;
 		height: 100%;
@@ -609,20 +697,65 @@ export default {
 			}
 		}
 	}
-	.remember-cont {
-		position: relative;
-		margin-bottom: 20px;
-		.warn-check-tip {
-			position: absolute;
-			min-width: 300px;
-			left: 130px;
-			top: 0;
-			padding: 2px 10px;
-			border: 1px solid #D1433A;
-			background: #FFEAE9;
-			color: #B72E18;
-			font-size: 14px;
+	@media screen and (max-width:650px) {
+		#login_wrapper_mobile{
+			// display: block;
+			padding: 15% 40px 20px;
+			.login-logo{
+				margin-bottom: 30px;
+				img{
+					width: 250px;
+				}
+			}
+			.login-title{
+				font-size: 14px;
+				color: #999999;
+			}
+			.submit_btn_mobile{
+				height: 44px;
+				width: 100%;
+				border-radius: 44px;
+			}
+			.login-type-box{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 54%;
+				margin: 0 auto;
+				.login-type-item{
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					margin-top: 50px;
+					img{
+						height: 40px;
+						width: 40px;
+						margin-bottom: 4px;
+					}
+					span{
+						font-size: 12px;
+						color: #666666;
+					}
+				}
+			}
 		}
 	}
+	// .remember-cont {
+	// 	position: relative;
+	// 	margin-bottom: 20px;
+	// 	.warn-check-tip {
+	// 		position: absolute;
+	// 		min-width: 300px;
+	// 		left: 130px;
+	// 		top: 0;
+	// 		padding: 2px 10px;
+	// 		border: 1px solid #D1433A;
+	// 		background: #FFEAE9;
+	// 		color: #B72E18;
+	// 		font-size: 14px;
+	// 	}
+	// }
 }
 </style>
+

src/views/login_manage/EmailModel.vue

@@ -63,7 +63,11 @@ export default {
         Source:{//请求验证码来源：1登陆
             type:Number,
             default:1
-        }
+        },
+        isMobile:{
+            type:Boolean,
+            default:false
+        },
     },
     data() {
         return {

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/MobileModel.vue

@@ -72,7 +72,11 @@ export default {
         Source:{//请求验证码来源：1登陆
             type:Number,
             default:1
-        }
+        },
+        isMobile:{
+            type:Boolean,
+            default:false
+        },
     },
     data() {
         return {

src/views/login_manage/OrdinaryModel.vue

@@ -20,14 +20,16 @@
             </el-form-item>
             <el-form-item prop="checkPass">
                 <el-input
-                    type="password" show-password
+                    type="password" :show-password="isMobile?false:true"
                     v-model="form.checkPass"
                     auto-complete="off"
                     placeholder="请输入密码"
                     @copy.native.capture.prevent="()=>{return false}"
                     @cut.native.capture.prevent="()=>{return false}"
                     @paste.native.capture.prevent="()=>{return false}"
-                />
+                >
+                    <span slot="append" @click="changeModel" v-if="isMobile">忘记密码？</span>
+                </el-input>
                 <span class="inline-message el-form-item__error" 
                     v-show="(loginCheck||accountCheck)&&form.checkPass.length">
                     {{hintMessage}}</span>
@@ -59,7 +61,11 @@ export default {
         accountCheck:{
             type:Boolean,
             default:false
-        }
+        },
+        isMobile:{
+            type:Boolean,
+            default:false
+        },
     },
     data() {
         const validateClearn = (rule,value,callBack)=>{

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>

src/views/login_manage/css/formStyle.scss

@@ -108,4 +108,48 @@
             font-size: 16px;
         }
     }
+}
+
+@media screen and (max-width:650px) {
+    .model-wrap{
+        margin-top: 60px;
+        .el-form-item{
+            margin-bottom: 40px;
+            .el-input{
+                .el-input-group__prepend{
+                    border: none;
+                    border-radius: 0;
+                    border-bottom:solid 1px #DCDFE6;
+                    width: 70px;
+                    .el-input--suffix{
+                        width: 40px;
+                        .el-input__suffix{
+                            display: none;
+                        }
+                    }
+                }
+                .el-input__inner{
+                    border-radius: 0;
+                    border: none;
+                    border-bottom:solid 1px #DCDFE6;
+                    padding-left: 0;
+                }
+                .el-input-group__append{
+                    background-color: transparent;
+                    border: none;
+                    border-radius: 0;
+                    border-bottom:solid 1px #DCDFE6;
+                    padding: 0;
+                    span{
+                        color:#257EFF ;
+                        font-size: 14px;
+                    }
+                }
+            }
+
+        }
+        .remember-cont{
+            display: none;
+        }
+    }
 }