dccloud/uni-app-front/pages/login/login.vue

<template>
	<view class="login-container">
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" >
				<view class="uni-form-item uni-column" style="background-color: #fff;">
					<image style="width:61px;height: 61px;margin: 5px auto;" :src="src" ></image>
				</view>
				 
				<org-input-text left-text="账号"  placeholder="请输入账号"  :check-info="{msg:'账号至少2位',reg:'^.{1,}$',required:true}" v-model="username"  >
					<!-- 使用插槽，自定义左侧文本 -->
					<view slot="left" >
						<uni-icons type="person" size="30" color="#6666" style="padding-left: 10rpx;"></uni-icons>
					</view>
				</org-input-text>
				<org-input-text left-text="密码" :is-password="true" placeholder="请输入密码"   :check-info="{msg:'账号至少4位',reg:'^.{1,}$',required:true}"  v-model="password"  >
					<!-- 使用插槽，自定义左侧文本 -->
					<view slot="left" style="padding-left: 10rpx;">
						<uni-icons type="eye" size="30" color="#6666"></uni-icons>
					</view>
				</org-input-text>
				<view class="uni-btn-v uni-column">
					<button type="primary" form-type="submit" style="border-radius: 15px;" >登录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getInfo,
		logout
	} from "@/common/api/loginApi.js";
	var graceChecker = require("../../common/graceChecker.js");
	import {
		setToken,getToken
	} from "@/common/auth.js"
    //import store from '@/store/index.js'
	var duration = 2000;
	export default {
		data() {
			return {
				username:'',
				password:'',
				src: '/static/haode.png'
			}
		},
		methods: {		
			onInput1:function(){
				console.info("oninput1");
				console.info(this.username);
				
				
				//console.log(this.username);
			},
			onInput2:function(){
				console.info("oninput2");
				console.info(this.password);				
				//console.log(this.password);
			},
			formSubmit: function(e) {
				//console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "string",
						checkRule: "2,22",
						errorMsg: "账号应为2-22个字符"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "4,",
						errorMsg: "密码必须大于4位"
					}
				];
				//console.info(this.username);
				//console.info(this.password);
				let formData={username:this.username,password:this.password};
				//进行表单检查
				//var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				//console.info(formData);
                //return;
				if (checkRes) {
					//uni.showToast({title:"验证通过!", icon:"none"});
					this.loading = true;

					//this.$store.dispatch('user/login', this.formData)
					login(formData)
						.then((res) => {
							console.info(res);
							if (!res.isSuccess) //失败，显示错误
							{
								uni.showToast({
									title: res.errMsg,
									icon: 'none'
								});
								return;
							}
							
							//设置状态中的各种值
							this.$store.commit('setIsLogin',true);
							this.$store.commit('setToken',res.tnToken);
							this.$store.commit('setAvatar',res.data.avatar);
							this.$store.commit('setName',res.data.name);
							this.$store.commit('setIntroduction',res.data.introduction);
							this.$store.commit('setRoles',res.data.roles);
							this.$store.commit('setUser',res.data.user);
							this.$store.commit('setStationName',res.data.stationName);
							this.$store.commit('setStationCode',res.data.stationCode);
							this.$store.commit('setDepartmentName',res.data.departmentName);
							this.$store.commit('setDepartmentCode',res.data.departmentCode);
														
                            console.info("登录页面state:",this.$store.state);
						
							uni.setStorage({
								key:'storage_state',
								data:this.$store.state,
								success:function(){
									console.info("setStorage状态缓存成功");
									console.info('storage_state',uni.getStorageSync('storage_state'));
								},
								fail: () => {
									console.error("setStorage状态缓存失败");
								}
							});
							this.loading = false;
							if(this.$store.state.projectCode==="")
							{
								uni.navigateTo({
									url: "/pages/SelectProject/SelectProject"
								});
								return;
							}
							
							//导向到首页
							uni.navigateTo({
								url: "/pages/index/index"
							});
						})
						.catch((error) => {
							console.log(error);
							this.loading = false;
						})


				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped>
	.login-container {		
		display: flex;
		width: 400px;
		margin: 50px auto;
	}


	

	
</style>