parking_operation/pages/login/login.vue

<template>
	<view class="login">
		<view class="login-box">
			<view class="login-box-title">
				<view>智慧停车</view>
				<view>运营数据系统</view>
			</view>
			<view class="login-box-form">
				<view class="login-box-form-box">
					<u--form :model="form" :rules="rules" ref="uForm">
						<u-form-item label="" prop="phoneNumber">
							<u--input v-model="form.phoneNumber"
								:prefixIcon="require('@/static/icons/job-number-icon.svg')" placeholder="请输入工号"
								:maxlength="11" type="number" border="none" class="custom-input"
								:prefixIconStyle="{ marginRight: '10px' }" fontSize="14px" color="#ffffff" placeholderStyle="color: #fff"/>
						</u-form-item>
						<u-form-item label="" prop="password">
							<u--input v-model="form.password" :prefixIcon="require('@/static/icons/password-icon.svg')"
								placeholder="请输入密码" :password="true" border="none" class="custom-input"
								:prefixIconStyle="{ marginRight: '10px' }" fontSize="14px" color="#ffffff" placeholderStyle="color: #fff"/>
						</u-form-item>
					</u--form>
				</view>
				<view class="login-box-form-btn">
					<u-button class="login-btn" type="primary" text="登录" :loading="loading" @click="submitLogin">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phoneNumber: '',
					password: ''
				},
				loading: false,
				rules: {
					phoneNumber: {
						required: true,
						message: '请输入工号',
						trigger: ['change', 'blur']
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur']
					}
				}
			}
		},
		methods: {
			/**
			 * 登录提交
			 */
			submitLogin() {
				this.$refs.uForm.validate().then(res => {
					this.loading = true
					// uni.$u.api.loginApi(this.form).then(res => {
					// 	console.log(res)
					// 	uni.$u.route({
					// 		url: 'pages/index/index'
					// 	})
					// }).catch(err => {
					// 	this.loading = false
					// })
					uni.$u.route({
						url: 'pages/index/index'
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message || '必填项不能为空!')
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background: linear-gradient(183deg, #2D82FB 0%, #1558F8 100%);
	}
</style>

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