materialAppletApp/pages/Login/Login.vue

<template>
	<view class="content">
		<image class="logo" src="/static/icons/logo.png"></image>
		<view class="title">
			管理后台
		</view>
		<form @submit="loginSubmit">
			<view class="section">
				<input class="input-account" name="username" placeholder="请输入用户名" />
			</view>
			<view class="section">
				<input class="input-pwd" password name="password" placeholder="请输入密码" />
			</view>
			<view class="btn-area">
				<button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['isLoading']),
			loginBtnLabel() {
				return this.isLoading ? '' : '登录';
			}
		},
		methods: {
			loginSubmit(event) {
				uni.hideKeyboard();
				const { value: loginForm } = event.detail;
				this.$store.dispatch('login', loginForm)
					.then(_ => {
						// uni.redirectTo({
						// 	url: '/pages/Charts/column',
						// });
						uni.reLaunch({
						    url: '/pages/Charts/mainStatistics',
						});
					});
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 200upx 0 0 0;
		background-image: url('~@/static/backgrounds/login_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.content {
			padding: 0 20upx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			.logo {
				width: 250upx;
				height: 100upx;
				text-align: center;
				margin: 50upx;
			}
			form {
				width: calc(100% - 100upx);
				padding: 50upx;
				.section {
					margin: 50upx 0;
				}
				.btn-area {
					margin-top: 100upx;
					button {
						background-color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>