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: 'http://www.ilab-x.com/register',
				resetURL: 'http://www.ilab-x.com/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() {
				// this.$emit("onLogin");
				// return;
				// console.log("账号密码", this.account, this.password);
				let url = this.$Api + "/user/loginin";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						// "IlabAccount": "student01",
						// "Password": "student01"
						// "IlabAccount": "13790516503",
						// "Password": "qwerty123..."
						"IlabAccount": this.account,
						"Password": this.password
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//登录成功
						if (data.Code == 100) {
							// console.log("登陆成功");
							if (data.Image != '') {
								mydata_userInfo.avatarSrc = data.Image;
							}
							mydata_userInfo.Name = data.Name;
							mydata_userInfo.UserID = data.UserID;
							mydata_userInfo.Position = data.Position;
							// console.log("登陆成功，个人信息", mydata_userInfo);
							if (mydata_userInfo.role == '老师') {
								userController.updateStudentList(null,null);
							} else {
								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)
					}
				});
			},
			// onLogin: function(type) {
			// 	this.$emit("onLogin", "onLogin")
			// },
			onForget() {
				// this.$emit("onForget", "onForget")
			}
			// test() {
			// 	this.$emit("pChangeType","哈哈哈")
			// 	let url = "http://121.4.59.141:1986/hello";
			// 	uni.request({
			// 		header: {
			// 			// 'Content-Type': 'application/x-www-form-urlencoded'
			// 			// 'Content-Type': 'application/json',
			// 			'Content-Type': 'application/json'
			// 		},
			// 		url: url,
			// 		method: 'POST',
			// 		data: {
			// 			// "IlabAccount": "teststudent01",
			// 			// "Password": "qgsTest002"
			// 			"name": "13790516503",
			// 			"message": "qwerty123..."
			// 			// "IlabAccount": this.account,
			// 			// "Password": this.password
			// 		},
			// 		dataType: 'json',
			// 		success: (res) => {
			// 			// var result = JSON.parse(res);
			// 			console.log("success+**+*", res)
			// 		},
			// 		fail: (res) => {
			// 			console.log("fail+**+*", res)
			// 		}
			// 	});
			// }
		}
	}
</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>