vant3框架写个移动端登录页面

<template>
	<div class="login_page">
		<img src="../assets/img/login.png" />
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="username" name="用户名" label="用户名" placeholder="工号" clearable
					:rules="[{ required: true, message: '请输入用户名' }]" />
				<van-field label-class="phone-input" v-model="password" :right-icon="!passwordStatus?'closed-eye':'eye'"
					:type="!passwordStatus?'password':'text'" name="密码" label="密码"
					@click-right-icon="passwordStatus=!passwordStatus" placeholder="请输入密码" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	// import Cookies from 'js-cookie'
	import {
		newLogin
	} from '../api/base.js'
	export default {
		data() {
			return {
				passwordStatus: false,
				username: '',
				password: '',
			}
		},
		methods: {
			keyDown(e) {
				//如果是回车则执行登录方法
				if (e.keyCode == 13) {
					this.onSubmit();
				}
			},
			onSubmit() {
				this.$toast.loading({
					duration: 0,
					message: "登录中..."
				});
				let obj = {
					employeeNo: this.username,
					password: this.password
				}
				newLogin(obj).then(res => {
					// this.$store.state.app.token = res.data.data.token 
					// this.$store.state.app.tokenTime = res.data.data.expires - new Date()
					if (res.data.state == 0) {
						let copy = Object.assign({}, res.data.data)
						// delete copy.token
						sessionStorage.setItem('user', JSON.stringify(copy));
						this.$router.push('/index');
					} else {
						this.$toast.loading('登录失败')
						this.$message.error(res.data.message);
					}
					this.$toast.clear(); // 关闭加载
				}).catch((err) => {
				})
			},
		},
		destroyed() {
			window.removeEventListener('keydown', this.keyDown, false);
		}
	}
</script>

<style scoped>
	.login_page img {
		margin: 1rem 0;
	}

	/* 整体背景 */
	.login_page {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #dbf3d6;
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background: url(../assets/img/login_bg.png); */
		/* background: url(../assets/img/1.jpg); */
		background-size: 100% 100%;
		background-position: center center;
		overflow: auto;
	}
</style>