CRM 移动端登录页兼容 - 暂存

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

@@ -105,10 +105,52 @@
 			<div class="login-box" v-else>
 				<ForgetPassModel 
 					ref="forgetPassModel"
-					:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
+					:autoAccount="$refs[ordinaryModelForm]?$refs[ordinaryModelForm].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>
+				</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>
+		</div>
+
 		<!-- 验证弹窗 -->
 		<el-dialog
 			class="check-dialog"
@@ -175,7 +217,7 @@ export default {
 			checked: false, //是否保持登录状态
 			visible: true, //密码输入类型
 
-			activeModel: 'ordinaryModel',
+			activeModel: 'emailModel',
 			/* form check 错误提示标识*/
 			loginCheck:false, //账号或密码错误
 			accountCheck:false,//账号异常：多次输错密码、长时间未登录
@@ -185,7 +227,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 +270,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 +409,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 +441,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 +478,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 +489,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 +508,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 +592,7 @@ export default {
 	background: #fff;
 	position: relative;
 	overflow: hidden;
+	overflow-y: auto;
 	#login_wrapper {
 		width: 100%;
 		height: 100%;
@@ -609,20 +687,71 @@ 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;
+	#login_wrapper_mobile{
+		display: none;
+	}
+	@media screen and (max-width:650px) {
+		#login_wrapper{
+			display: none;
+		}
+		#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/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/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;
+        }
+    }
 }