sports_wap/vue_sports/.svn/pristine/af/afe039c09661618b33e782258baef4605898fb57.svn-base

<template>
	<div>
		<yd-popup   v-model="isshow" position="center" width="90%">
			<div class="Loginbox">
				<div class="Loginbox-top">
					<div class="loginbox-close"><img :src="img.url1" @click="LoginEsc()"/></div>
					<div class="loginbox-logo"><span><i style="color:#F76649">HX</i>699</span></div>
				</div>
				<!-- 账号输入框 -->
				<div class="Loginbox-main">
					<div class="account-box">
						<div class="account-box-img"><img :src="img.url3" /></div>
						<!-- 账号输入 -->
						<div class="account-box-input">
							<input
								@focus="clearacc('acc')"
								:style="account=='用户名不存在'?'color:red;':''"
								v-model="account"
								type="text"
								placeholder="账户名"
								onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
							/>
						</div>
						<div style="width:.8rem"></div>
					</div>
					<!-- 密码输入框 -->
					<div class="password-box">
						<div class="password-box-img"><img :src="img.url4" /></div>
						<!-- 密码输入 -->
						<div class="password-box-input">
							<input
								@focus="clearacc('pwd')"
								v-model="password"
								:style="password=='密码错误'?'color:red;':''"
								:type="lockactive == true ? 'text' : 'password'"
								placeholder="密码"
								onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
							/>
						</div>
						<!-- 查看密码，密码可见 -->
						<div class="password-box-look">
							<img
								@click="lookclick(lockactive)"
								:src="lockactive == true ? img.url6 : img.url5"
							/>
						</div>
					</div>
					<div class="infomation">{{info}}</div>
					<div class="instrument-box">
						<div class="remember-acc" @click="instrumentclick()">
							<img :src="rememberacc == true ? img.url8 : img.url7" />
							&nbsp;
							<span style="color: #AAAAAA;">记住账号</span>
						</div>
						<div class="forget-pwd" @click="forgetpwd(account)">
							<span style="color: #F76649;">忘记密码</span>
						</div>
					</div>
					<div class="login-btn" @click="login()">登录</div>
					<div class="login-footer">
						<p style="width: 100%;color: #AAAAAA;font-size: .22rem;text-align: center;">
							没有HX699账户？
							<br />
							<span style="color: #F76649;font-size: .23rem;" @click="register()">注册</span>
						</p>
					</div>
				</div>
			</div>
		</yd-popup>
	</div>
</template>

<script>
export default {
	name:'Login',
	data() {
		return {
			// 账号密码
			account: '',
			password: '',
			// 是否密码可见
			lockactive: false,
			// 是否记住账号
			rememberacc: false,
			// 是否退出登录界面
			isshow:this.$store.state.isShow,
			info:'',
			// 提示数据
			data:"",
			img: {
				url1: require('@/assets/st-imges/guanbi.png'),
				url2: require('@/assets/st-imges/loginlogo.png'),
				url3: require('@/assets/st-imges/zhanghao.png'),
				url4: require('@/assets/st-imges/mima.png'),
				url5: require('@/assets/st-imges/kan.png'),
				url6: require('@/assets/st-imges/kanactive.png'),
				url7: require('@/assets/st-imges/xuanzhong.png'),
				url8: require('@/assets/st-imges/xuanzhongactive.png')
			}
		};
	},
	methods: {
		// 错误刷新
		clearacc(val){
			if(val=='acc')
			this.account=''
			else if(val=='pwd')
			this.password=''
		},
		// 点击密码可见
		lookclick(istrue) {
			this.lockactive = !istrue;
		},
		// 点击确认是否记住账号
		instrumentclick() {
		
			this.rememberacc = !this.rememberacc;
				console.log('123',this.rememberacc)
			if(this.rememberacc == true){
				if(localStorage.getItem('token')){
					localStorage.setItem('status',true)
				}
			}else{
				localStorage.setItem('status',false)
			}
		},
		// 点击忘记密码？
		forgetpwd(acc) {
			console.log('这是忘记密码');
		},
		login() {
			if (this.account.length > 0 && this.password.length>0) {
				console.log(this.account.length);
					// 请在此处发送登录请求
					this.$http.post(this.$ports.login.login,{account:this.account,password:this.password}).then(res=>{
						if(res.data.status == 1){
							this.info = '';
							console.log('res',res)
							localStorage.setItem('token',res.data.data[0].token)
							localStorage.setItem('name',res.data.data[0].name)
								this.$store.dispatch('GET_ISSHOW',false)
						}else{
							console.log('resstatus',res)
							this.info = res.data.msg;
						}
					})
					// 是否记住账号，记住账号是在登录成功后使用
				if (this.rememberacc == true) {
					localStorage.setItem('value',this.account)
				}
				
			}else{
				this.info = '账号或密码有误'
			}
		},
		// 关闭登录组件
		LoginEsc(){
			// 关闭登录
			this.isshow=false;
			this.$store.dispatch('GET_ISSHOW',this.isshow)
		},
		register(){
			this.$store.dispatch('GET_ISSHOW',false);
			this.$store.dispatch('GETRGSHOW', true);
		}
	},
	computed: {
		Isshow:function(){
				this.$store.dispatch('GET_ISSHOW',this.isshow)
			return {
				isshow_code:this.$store.state.isShow
			}
		}
	},
	watch: {
		Isshow(obj){
		}
	},
	mounted(){
		console.log('status',localStorage.getItem('status'))
		if(localStorage.getItem('status')){
			this.account = localStorage.getItem('value');
			this.rememberacc = true;
		}else{
			this.account = '';
			this.rememberacc = false;
		}
	}
};
</script>
<style scoped>
.Loginbox {
	background: #f8f8f8;
	border-radius: 0.52rem;
}
.loginbox-close {
	height: 1.2rem;
	position: relative;
}
.loginbox-close img {
	width: 0.26rem;
	height: 0.26rem;
	position: absolute;
	top: 0.92rem;
	right: 0.93rem;
}
.loginbox-logo {
	height: 1.5rem;
	display: flex;
	justify-content: center;
	font-size: .6rem;
	color: #ccc;
	align-items: center;
}
.Loginbox-main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.Loginbox-main .account-box,
.password-box {
	height: 0.9rem;
	width: 5rem;
	border-bottom: 1px solid #e4e4e4;
	display: flex;
	align-items: center;
	justify-content: space-around;

}
.password-box-img img {
	width: 0.53rem;
	height: 0.53rem;
}
.account-box-img img {
	width: 0.33rem;
	height: 0.32rem;
}
.password-box-look img {
	width: 0.4rem;
	height: 0.4rem;
}
.account-box-img {
	width: 0.8rem !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.password-box-img {
	width: 0.8rem !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.password-box-look {
	width: 0.8rem !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
input {
	border: none;
	width: 100%;
	height: .9rem;
	font-size: 0.26rem;
	color: #aaaaaa;
}
.instrument-box {
	height: 0.9rem;
	width: 5rem;
	display: flex;
	justify-content: space-between;
	padding: 0 0.5rem;
	align-items: center;
}
.remember-acc {
	display: flex;
	justify-content: flex-start;
}
.remember-acc img {
	width: 0.33rem;
	height: 0.33rem;
}
.login-btn {
	width: 5rem;
	height: 0.88rem;
	background: #F76649;
	color: #f8f8f8;
	display: flex;
	border-radius: .08rem;
	justify-content: center;
	align-items: center;
}
.login-footer {
	height: 1.96rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}
.infomation{
	width: 100%;
	margin-left: 20%;
	margin-top: 0.2rem;
	color: #F76649;
}
</style>