GEKE_PHONE/pages/login/login.vue

<template>
 	<div style="background-color: #F6F6F6;">
 		<view class="zai-box">
 			<scroll-view scroll-y class="page">
 				<view style="text-align: center;">
 					<image src="/static/icon/gklog.jpeg" mode='aspectFit' class="zai-logo"></image>
 				</view>
 				<view class="zai-title"></view>
 				<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">

 					<view class="cu-form-group margin-top round shadow-blur">
 						<view class="title">账号:</view>
 						<input placeholder="请输入账号" name="input" v-model="userName"></input>
 					</view>
 					<view class="cu-form-group margin-top round">
 						<view class="title">密码:</view>
 						<input placeholder="请输入密码" name="input" type="password" v-model="password"></input>
 					</view>
 					<div style="height: 10px;"></div>
 					<view>
 						<checkbox-group @change="checkboxChange">
 							<ul>
 								<li>
 									<label>
 										<checkbox :value="checkbox[0].value" :class="checkbox[0].checked=='true'?'checked':''"
 											:checked="checkbox[0].checked=='true'?true:false" style="transform:scale(0.7)" />
 										记住密码
 									</label>
 								</li>
 								
 							</ul>
 						</checkbox-group>

 					</view>
 					<view class="padding  flex  flex-direction">
 						<button class="cu-btn bg-green shadow-blur round lg" :loading="loading" @tap="onLogin">
 							{{loading ? "登录中...":"登 录"}}
 						</button>
 					</view>

 				</view>

 			</scroll-view>

 			<!-- 登录加载弹窗 -->
 			<view class="cu-load load-modal" v-if="loading">
 				<image src="/static/login3.png" mode="aspectFit" style="top: 35px;"></image>
 				<view class="gray-text" style="margin-top: 35px;">登录中...</view>

 			</view>



 		</view>
 	</div>
 </template>


 <script>
 	import {
 		ACCESS_TOKEN,
 		USER_NAME,
 		USER_INFO
 	} from "@/common/util/constants"
 	import {
 		mapActions
 	} from "vuex"
 	import myImageUpload from "@/components/my-componets/my-image-upload.vue"
 	import mypage from "@/components/my-componets/my-page.vue"
 	import myselect from "@/components/my-componets/my-select.vue"
 	export default {
 		components: {
 			'my-image-upload': myImageUpload,
 			'my-select': myselect
 		},
 		data() {
 			return {
 				loading: false,
				exitloading:false,
 				userName: '',
 				value: 1,
 				password: '',
 				phoneNo: '',
 				smsCode: '',
 				showPassword: false, //是否显示明文
 				loginWay: 1, //1: 账密，2：验证码
 				smsCountDown: 0,
 				smsCountInterval: null,
 				toggleDelay: false,
 				version: '',
				timeoutid:null,
 				checkbox: [{
 					value: '1',
 					checked: 'false'
 				} ],
 			};
 		},
 		onLoad: function() {
 			// #ifdef APP-PLUS
 			var that = this
 			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
 				that.version = wgtinfo.version
 			});
 			// #endif

 			this.getCookie();
			this.loadingLogin();
			uni.getSystemInfo({
			    success: function (res) {
			        console.log(res.model);
			        console.log(res.pixelRatio);
			        console.log(res.windowWidth);
			        console.log(res.windowHeight);
			        console.log(res.language);
			        console.log(res.version);
			        console.log(res.system);
			    }
			});
			
 		},
 		methods: {
			loadingLogin(){
				if(this.checkbox[1].checked=='true'){
					this.onLogin();
				}
			},
 			//读取cookie
 			getCookie: function() {
 				if (document.cookie.length > 0) {
 					var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
 					for (var i = 0; i < arr.length; i++) {
 						var arr2 = arr[i].split('='); //再次切割
 						//判断查找相对应的值
 						if (arr2[0] == 'userName') {
 							this.userName = arr2[1]; //保存到保存数据的地方
 						} else if (arr2[0] == 'userPwd') {
 							this.password = arr2[1];
 						} else if (arr2[0] == 'pwdchecked') {
 							this.checkbox[0].checked = arr2[1];
 						}
 					}
					console.log(this.checkbox)
 				}
 			},
 			//清除cookie
 			
 			setCookie(c_name, c_pwd, exdays, pwdche) {
 				var exdate = new Date(); //获取时间
 				exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
 				//字符串拼接cookie
 				window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
 				window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
 				window.document.cookie = "pwdchecked" + "=" + pwdche + ";path=/;expires=" + exdate.toGMTString();
				
 			},
 			checkboxChange: function(e) {
 				var items = this.checkbox,
 					values = e.detail.value;
					
 				for (var i = 0, lenI = items.length; i < lenI; ++i) {
 					items[i].checked = 'false';
 					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
 						if (items[i].value == values[j]) {
								items[i].checked = 'true';
 							break
 						}
 					}
 				}
 			},
 			...mapActions(["mLogin", "PhoneLogin"]),

 			onLogin: function() {
 				if (!this.userName || this.userName.length == 0) {
 					this.$tip.toast('请填写用户名');
 					return;
 				}
 				if (!this.password || this.password.length == 0) {
 					this.$tip.toast('请填写密码');
 					return;
 				}
 				let loginParams = {
 					username: this.userName,
 					password: this.password
 				}
 				var pwd = this.checkbox;
				var uname="";
				var upwd="";
				var pwdCheked=false;
 					if (this.checkbox[0].checked == 'true') {
 						uname=this.userName;
						upwd=this.password;
						pwdCheked=true;
 					}
 				
				this.setCookie(uname,upwd,7,pwdCheked);
 				this.loading = true;
				this.timeoutid=setTimeout(() => {
 					if (this.loading == true) {
						this.exitloading = true;
 						this.mLogin(loginParams).then((res) => {
 							console.log("mLogin", res)
 							if (res.data.success) {
 								this.$tip.success('登录成功!')
 								this.$Router.replaceAll({
 									name: 'index'
 								})
 							} else {
 								this.$tip.alert(res.data.message);
 							}
 						}).catch((err) => {
 							let msg = err.data.message || "请求出现错误，请稍后再试"
 							this.$tip.alert(msg);
 						}).finally(() => {
							this.loading=false;
 						})
 					}
					
 				}, 3000);
				
				
 				/* this.$Router.push({name:'index'}) */

 			}
 		}
 	}
 </script>



 <style>
 	ul {
 		margin-left: -60px;
 	}

 	ul li {
 		list-style-type: none;
 		display: inline;
 		margin: 53px;

 	}

 	.map_container {
 		height: 300px;
 		width: 100%;
 	}

 	.map {
 		height: 100%;
 		width: 100%;
 	}

 	.login-paddingtop {
 		padding-top: 200 upx;
 	}

 	.zai-box {
 		padding: 0 20 upx;
 		padding-top: 100 upx;
 		position: relative;
 	}

 	.zai-logo {
 		width: 30%;

 	}

 	.zai-title {
 		font-size: 58upx;
 		color: #000000;
 		text-align: center;

 	}

 	.input-placeholder,
 	.zai-input {
 		color: #94afce;
 	}

 	.zai-label {
 		padding: 60 upx 0;
 		text-align: center;
 		font-size: 30 upx;
 		color: #a7b6d0;
 	}

 	.zai-btn {
 		background: #ff65a3;
 		color: #fff;
 		border: 0;
 		border-radius: 100 upx;
 		font-size: 36 upx;
 	}

 	.zai-btn:after {
 		border: 0;
 	}

 	/*按钮点击效果*/
 	.zai-btn.button-hover {
 		transform: translate(1 upx, 1 upx);
 	}

 	.divimg {
 		background-image: url(../../static/home/beij3.jpeg);
 		position: fixed;

 		top: 0;

 		left: 0;

 		width: 100%;

 		height: 100%;

 		min-width: 1000px;

 		z-index: -10;

 		zoom: 1;
 		background-repeat: no-repeat;

 		background-size: cover;

 		-webkit-background-size: cover;

 		-o-background-size: cover;

 		background-position: center0;
 	}
 </style>