yichael_zhongchuang_front_2/components/login/loginByPWD.vue

<template>
	<view class="df jcc fdc">
		<view class="login-righttitle">密码登录</view>
		<view class="fdc df jcc loginByPWD-listbox">
			<!-- 账号 -->
			<view class="df loginByPWD-inputbox aic">
				<view class="loginByPWD-inputbox-icon">
					<img class="df" src="../../assets/login/loginIcon2.png" />
				</view>
				<input @focus="inputFocus" class="loginByPWD-inputbox-input" type="text" placeholder="账号" @input="onAccountInput" />
			</view>
			<!-- 横线 -->
			<view class="loginByPWD-line"></view>
			<!-- 密码 -->
			<view class="df loginByPWD-inputbox aic">
				<view class="loginByPWD-inputbox-icon">
					<img class="df" src="../../assets/login/loginIcon1.png" />
				</view>
				<input @focus="inputFocus" class="loginByPWD-inputbox-input" type="password" placeholder="密码" @input="onPWDInput" />
			</view>
			<!-- 横线 -->
			<view class="loginByPWD-line"></view>
			<!-- 支持使用实验空间账号登录 -->
			<view class="df aic loginByPWD-tip1box">
				<view class="loginByPWD-tip1box-checkbox df aic">
					<img src="../../assets/login/loginIcon3.png" />
				</view>
				<view class="loginByPWD-tip1box-tip">支持使用实验空间账号登录</view>
			</view>
			<!-- 评审账号和密码 -->
			<view class="df loginByPWD-tip2box">
				<view class="loginByPWD-tip2box-account">评审账号：student01</view>
				<view class="loginByPWD-tip2box-pwd">密码：student01</view>
			</view>
			<!-- 登录按钮 -->
			<view class="loginByPWD-loginbtn df jcc aic btn-hover" @click="onLogin">登录</view>
			<!-- 注册账号忘记密码 -->
			<view class="df fdr loginByPWD-registerOrForgetBox">
				<a :href="regURL" class="loginByPWD-register">注册实验空间账号</a>
				<!-- <view class="loginByPWD-forget" @click="onForget">忘记密码</view> -->
				<a :href="resetURL" class="loginByPWD-forget">忘记密码</a>
			</view>
			<view :style="{'opacity': isShowTip}" class="loginByPWD-failTip df jcc">登录失败！请查看账号及密码是否正确！</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				regURL: mydata_api+'/register',
				resetURL: mydata_api+'/find/password',
				//是否显示登录失败的提示 1显示0隐藏（即：透明度归零）
				isShowTip: 0,
			}
		},
		methods: {
			onAccountInput: function(event) {
				this.account = event.target.value
			},
			onPWDInput: function(event) {
				this.password = event.target.value
			},
			inputFocus() {
				this.isShowTip = 0;
			},
			onLogin() {
				//测试直接登录用
				localStorage.setItem("account", this.account);
				localStorage.setItem("password", this.password);
				this.$emit("onLogin");
				return;
				
				console.log("IlabAccount=",this.account+";Password=", this.password)
				
				let url = mydata_api + "/user/loginin";
				
				console.log("url=",url)
				
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"IlabAccount": this.account.toString(),
						"Password": this.password.toString()
					},
					dataType: 'json',
					success: (res) => {
						
						localStorage.setItem("account", this.account);
						localStorage.setItem("password", this.password);
						
						let data = res.data;
						//登录成功
						if (data.Code == 100) {
							// console.log("登陆成功");
							if (data.Image != '') {
								mydata_userInfo.avatarSrc = data.Image;
							}
							console.log("login账户密码登陆成功data=", data);
					
							mydata_userInfo.Name = data.Name;
							mydata_userInfo.UserID = data.UserID;
							// mydata_userInfo.Position = data.Position;
							mydata_userInfo.role = data.Type;
							
							
							// console.log("登陆成功，个人信息", mydata_userInfo);
							if (mydata_userInfo.role == '老师') {
								userController.updateStudentList(null, null);
							}
							else{
								mydata_userInfo.role = '学生';
							}
							userController.updateScore();
							userController.updateUserInfo();
							// MyRequest.SetUserType(mydata_userInfo.role, null, null);

							this.$emit("onLogin");
						}
						//密码错误
						else {
							this.isShowTip = 1;
						}
						// console.log("success+++**+*", res.data.Code)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
			},
			onForget() {
				// this.$emit("onForget", "onForget")
			}
		}
	}
</script>

<style>
	.loginByPWD-listbox {
		margin-top: 2.vw;
	}

	.loginByPWD-inputbox {
		margin-top: 2.5vw;
	}

	.loginByPWD-inputbox-icon {
		margin-left: 0.46875vw;
	}

	.loginByPWD-inputbox-input {
		font-size: 1.04vw;
		border: none;
		margin-left: 1.25vw;
		flex-grow: 1;
	}

	.loginByPWD-line {
		margin-top: 0.729vw;
		width: 23.54vw;
		height: 0.104vw;
		background-color: #E6E6E6;
	}

	.loginByPWD-tip1box {
		margin-top: 1.354vw;
	}

	.loginByPWD-tip1box-checkbox {
		margin-left: 0.46875vw;
	}

	.loginByPWD-tip1box-tip {
		font-size: 0.781vw;
		margin-left: 1.146vw;
		color: #333333;
	}

	.loginByPWD-tip2box {
		font-size: 0.781vw;
		font-family: MicrosoftYaHei;
		color: #333333;
		line-height: 1.041vw;
		margin-top: 2.656vw;
	}

	.loginByPWD-tip2box-account {
		margin-left: 0.104vw;
	}

	.loginByPWD-tip2box-pwd {
		margin-left: 2.031vw;
	}

	.loginByPWD-loginbtn {
		height: 3.125vw;
		font-size: 0.989vw;
		font-family: MicrosoftYaHei;
		line-height: 1.302vw;
		margin-top: 2.083vw;
		border-radius: 8px;
	}

	.loginByPWD-registerOrForgetBox {
		margin-top: 1.562vw;
		font-size: 0.781vw;
		font-family: MicrosoftYaHei;
		color: #EA252C;
		line-height: 1.041vw;
	}

	.loginByPWD-register {
		margin-left: 0.104vw;
	}

	.loginByPWD-forget {
		margin-left: 13.906vw;
		color: #EA252C;
	}

	.loginByPWD-failTip {
		color: #EA252C;
		font-size: 0.989vw;
		margin-top: 1vw;
	}
</style>