yichael_zhongchuan_manager/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/loginIcon5.png" />
				</view>
				<view class="loginByPWD-tip1box-tip">支持使用实验空间账号登录</view>
			</view>
			<!-- 评审账号和密码 -->
			<view class="df loginByPWD-tip2box">
				<view class="loginByPWD-tip2box-account">评审账号：teststudent01</view>
				<view class="loginByPWD-tip2box-pwd">密码：qgsTest002</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>
			</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',
				//是否显示登录失败的提示 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() {
				console.log("账号密码", this.account, this.password);
				let url = "http://39.105.166.141:8085/user/loginin";
				// let url = "http://39.105.166.141:8085/user/getallstudent";
				uni.request({
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						// "IlabAccount": "teststudent01",
						// "Password": "qgsTest002"
						// "IlabAccount": "13790516503",
						// "Password": "qwerty123..."
						"IlabAccount": this.account,
						"Password": this.password
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//登录成功
						if (data.Code == 100) {
							console.log("登陆成功");
							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;
	}

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