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="loginByPWD-loginbtn df jcc aic btn-hover" @click="onLogin">登录</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);
				
				uni.request({
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api+"/user/loginin",
					method: 'POST',
					data: {
						"IlabAccount": this.account,
						"Password": this.password
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//登录成功
						if (data.Code == 100) {
							console.log("登陆成功",this.account,data);
							mydata_userInfo.account = this.account;
							mydata_userInfo.userID=data.UserID;
							// console.log("登陆以后的用户信息",mydata_userInfo);
							this.$emit("onLogin");
						}
						//密码错误
						else {
							this.isShowTip = 1;
						}
					},
					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;
	}

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