wszhyWx/pages/login/login.vue

<template>
	<view class="login">
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="账号登录"
			title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="navbar">
			<image src="https://cdn.lihe-control.com/static/login.png" mode=""></image>
		</view>

		<view class="content">
			<view class="log_in">
				<view class="title">
					欢迎登录
				</view>
				<view class="userInfo">
					<u-form :model="form" ref="uForm">
						<view class="input">
							<image src="../../static/userName.png" mode=""
								style="width: 33rpx;height: 35rpx;margin-right: 29rpx;">
							</image>
							<u-form-item label="姓名" prop="name"><u-input v-model="form.name" :clearable='false'
									placeholder='请输入用户名' /></u-form-item>
						</view>
						<view class="input">
							<image src="../../static/passWord.png" mode=""
								style="width: 29rpx;height: 36rpx;margin-right: 31rpx;">
							</image>
							<u-form-item class="no-cross" label="密码" prop="password"><u-input v-model="form.password"
									:clearable='false' type="password" placeholder='请输入密码' /></u-form-item>
						</view>
					</u-form>
					<u-button @click="submit">登录</u-button>
				</view>
			</view>

			<view class="agreement">
				<u-checkbox v-model="checked" :disabled="false" active-color="#28B485"></u-checkbox>
				登录即同意
				<text>《温室智慧云用户协议》</text>
				及
				<text>《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: 'transparent',
				},

				form: {
					name: '',
					password: ''
				},

				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}, ]
				},

				checked: false,
				token:''
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			let that = this
			uni.removeStorage({
				key:'token',
				success: (res) => {
					// console.log(res,'removeStorage');
				}
			});
			
			let HBusername = uni.getStorageSync('HBusername');
			let HBpassword = uni.getStorageSync('HBpassword');
			if (HBusername && HBpassword) {
				this.form.name = HBusername;
				this.form.password = HBpassword;
				this.checked = true
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.checked == true) {
							this.$http({
								url: this.api.user_login,
								data: {
									username: this.form.name,
									password: this.form.password
								}
							}).then(res => {
								// console.log(res, '00000000000');
								uni.setStorage({
									key: 'token',
									data: res.data.token
								});
								uni.setStorage({
									key: 'userid',
									data: res.data.userid
								});
								uni.setStorage({
									key: 'HBusername',
									data: this.form.name
								});
								uni.setStorage({
									key: 'HBpassword',
									data: this.form.password
								});
								uni.showToast({
									icon: 'success',
									title: '登录成功!',
									duration: 2000
								})
								uni.switchTab({
									url: '/pages/timeEnvironment/timeEnvironment'
								})
							})

						} else {
							uni.showToast({
								icon: 'error',
								title: '请同意协议!',
								duration: 2000
							})
						}
					} else {
						console.log('验证失败');
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F6FA;
		position: relative;
		overflow: auto;

		.navbar {
			width: 100%;
			height: 100%;

			>image {
				width: 750rpx;
				height: 608rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.content {
			position: absolute;
			z-index: 2;
			box-sizing: border-box;
			padding: 356rpx 30rpx 55rpx;

			.log_in {
				width: 690rpx;
				height: 800rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-top: 60rpx;

				.title {
					width: 100%;
					height: 78rpx;
					font-size: 44rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-align: center;
					position: relative;

					&:before {
						content: " ";
						width: 50rpx;
						height: 6rpx;
						background: #28B485;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}

				.userInfo {
					width: 100%;
					box-sizing: border-box;
					padding: 0 81rpx;
					margin-top: 109rpx;

					/deep/.u-form-item {
						position: relative;

						.u-form-item__message {
							position: absolute;
							top: 70rpx;
						}
					}

					.input {
						display: flex;
						align-items: center;
					}

					/deep/button {
						width: 540rpx;
						height: 100rpx;
						background: #28B485;
						box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(40, 180, 133, 0.4);
						border-radius: 20rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #E5EBFC;
						text-align: center;
						line-height: 100rpx;
						margin-top: 150rpx;
					}


				}
			}

			.agreement {
				width: 100%;
				margin-top: 55rpx;
				font-size: 20rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;

				>text {
					font-size: 20rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>