parking_inspection/pages/login/login.vue

<!-- 登录 -->
<template>
	<view class="login">
		<view class="login-title">智慧停车<br />设备巡检系统</view>
		<view class="login-form">
			<view class="login-form-title">账号密码登录</view>
			<view class="login-form-box">
				<u--form
					:model="loginForm"
					:rules="loginRules"
					ref="loginForm">
					<u-form-item prop="phoneNumber">
						<u--input
							v-model="loginForm.phoneNumber"
							border="surround"
							placeholder="请输入手机号码"
							shape="square"
							fontSize="30rpx"
							maxlength="11"
							type="number"
							color="#B7B7B7"></u--input>
					</u-form-item>
					<u-form-item prop="password">
						<u--input
							v-model="loginForm.password"
							border="surround"
							:password="true"
							placeholder="请输入密码"
							shape="square"
							fontSize="30rpx"
							color="#B7B7B7">
						</u--input>
					</u-form-item>
					<u-form-item>
						<u-button
							class="login-form-box-button"
							type="primary"
							text="登录"
							@click="handleLogin"></u-button>
					</u-form-item>
					<u-form-item>
						<view class="login-form-box-forget">忘记密码？</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					phoneNumber: '18084288856',
					password: '123456'
				},
				loginRules: {
					phoneNumber: [
						{
							required: true, 
							message: '请输入手机号码',
							trigger: ['blur']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur']
						}
					],
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}
				}
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate().then(res => {
					uni.$u.route({
						url: 'pages/index/index',
						type: 'switchTab'
					})
				}).catch(error => {
					this.$refs.uNotify.show({
						top: -1,
						type: 'warning',
						message: '请输入手机号/密码',
						duration: 1000 * 3,
						fontSize: 20
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './login.scss';
</style>