emergencyManagement/pages/login/index.vue

<template>
	<div class="body">	
		<view class="head"> 铜川市印台区综合应急管理平台</view>
		<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
			<uni-forms-item label="账号" name="username" clearable>
				<uni-easyinput v-model="form.username" placeholder="请输入账号" trim></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput v-model="form.password" type="password" placeholder="请输入密码" trim></uni-easyinput>
			</uni-forms-item>
		</uni-forms>	
		<button class="login-BT" type="default" @click="submit">登录</button>
	</div>
</template>

<script>
	import { login } from '@/api/system';
	import { setToken } from '@/libs/auth';	
	export default {
		data() {
			return {
				rules:{
					username:{
						rules:[
							{
								required: true,
								errorMessage: '请填写账号'
							}					
						],
						validateTrigger:'submit'
					},
					password:{
						rules:[
							{
								required: true,
								errorMessage: '请填写密码',
							}
						],
						validateTrigger:'submit'
					}					
				},
				form:{
					username:"",
					password:""
				}
			}
		},
		methods: {
			submit(){
				this.$refs.form.validate().then(res=>{
					login(this.form).then((res) => {
						let token = res.data.accessToken;
						setToken(token);
						uni.setStorageSync('accountInfo', res.data.user);
						uni.reLaunch({
							url: '/pages/index/index'
						})		
					})
				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	padding:160upx 90upx 0;
	.head{
		text-align: center;
		line-height: 1;
		font-size: 36rpx;
		font-weight: 600;
		color: #000000;
		padding: 40rpx 0;
	}
	.login-BT{
		margin-top:110upx;
		// background: #8DA6FF;
		background-color: #409eff;
		border-radius: 6px;
		color: #fff;
	}
}
</style>