humitureApp/pages/login/login.vue

<template>
	<view class="page_login">
		<!-- 头部logo -->
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg"><image style="width: 55px;height: 65px;" :src="imgInfo.head" class="head_logo" /></view>
			</view>
		</view>
		<!-- 登录form -->
		<view class="login_form">
			<view class="input">
				<view class="img"><image style="width:27px;height: 27px;" :src="imgInfo.icon_user" /></view>
				<input type="text" v-model="loginForm.username" placeholder="请输入用户账号" />
				<view class="img"><image @tap="delUser" class="img_del" :src="imgInfo.icon_del" /></view>
			</view>
			<view class="line" />
			<view class="input">
				<view class="img"><image style="width:20px;height: 25px;" :src="imgInfo.icon_pwd" /></view>
				<input :type="pwdType" :value="loginForm.password" @input="inputPwd" placeholder="请输入密码" />
				<view class="img" @tap="switchPwd"><image class="img_pwd_switch" :src="imgInfo.icon_pwd_switch" /></view>
			</view>
		</view>
		<!-- 登录提交 -->
		<button class="submit" type="primary" @tap="login">登录</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
			loginForm: {
				username: 'admin',
				password: 'admin'
			},
			pwdType: 'password',
			imgInfo: {
				head: '/static/head.png',
				icon_user: '/static/icon_user.png',
				icon_del: '/static/icon_del.png',
				icon_pwd: '/static/icon_pwd.png',
				icon_pwd_switch: '/static/icon_pwd_switch.png'
			}
		};
	},
	methods: {
		inputPwd(e) {
			this.loginForm.password = e.target.value;
		},
		delUser() {
			this.loginForm.username = '';
		},
		switchPwd() {
			this.pwdType = this.pwdType === 'text' ? 'password' : 'text';
		},
		login() {
			this.$store.dispatch('Login', this.loginForm).then(() => {
            uni.switchTab({url: '/pages/home/home'})
          }).catch(() => {
			 uni.showToast({title: '登录失败', duration:2000,icon:'none'});
          })
		}
	}
};
</script>
<style>
page {
	height: auto;
	min-height: 100%;
	background-color: #f5f6f8;
}
</style>
<style lang="scss" scoped>
$logo-padding: 60px;
$form-border-color: rgba(214, 214, 214, 1);
$text-color: #b6b6b6;

.page_login {
	padding: 10px;
}

.head {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: $logo-padding;
	padding-bottom: $logo-padding;

	.head_bg {
		border-radius: 50px;
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;

		.head_inner_bg {
			border-radius: 40px;
			width: 80px;
			height: 80px;
			display: flex;
			background-color: #0081ff;
			align-items: flex-end;
			justify-content: center;
			overflow: hidden;
		}
	}
}

.login_form {
	display: flex;
	margin: 20px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid $form-border-color;
	border-radius: 10px;

	.line {
		width: 100%;
		height: 1px;
		background-color: $form-border-color;
	}

	.input {
		width: 100%;
		max-height: 45px;
		display: flex;
		padding: 3px;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.img {
			min-width: 40px;
			min-height: 40px;
			margin: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.img_del {
			width: 21px;
			height: 21px;
		}

		.img_pwd_switch {
			width: 28px;
			height: 12px;
		}

		input {
			outline: none;
			height: 30px;
			width: 100%;

			&:focus {
				outline: none;
			}
		}
	}
}

.submit {
	margin-top: 30px;
	margin-left: 20px;
	margin-right: 20px;
	color: white;
	background-color: #0081ff;
	-webkit-tap-highlight-color: #0081ff;

	&:active {
		color: #b6b6b6;
		background-color: #0081ff;
	}
}
</style>