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>
		<u-toast ref="uToast"></u-toast>
	</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
					const form = {
						...this.form
					}
					uni.$u.api.loginApi({
						telephone: form.phoneNumber,
						loginPwd: form.password
					}).then(res => {
						if (res.code === 200) {
							uni.$u.vuex('vuex_token', res.data.token);
							this.$u.vuex('vuex_user', res.data);
							this.$u.vuex('vuex_isLogin', true);
							this.$refs.uToast.show({
								loading: true,
								message: '登录成功!',
								type: 'success',
								complete() {
									uni.$u.route({
										url: 'pages/index/index',
										type: 'redirect'
									})
								}
							})
						} else {
							this.$refs.uToast.show({
								loading: true,
								message: res.msg || '登录失败',
								type: 'error'
							})
						}
					}).catch(err => {
						this.loading = false
					})
				}).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>