jinganhandle/pages/index/login.vue

<template>
	<view class="container">
		<!-- <view id="login_form"> -->
			<image class="logo" src="/static/top_login.png"></image>
			<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
				class="demo-ruleForm">
				<el-form-item prop="uname" class='uname'>
					<input ref="zhanghao" placeholder="请输入账号" maxlength="16" v-model="ruleForm.uname"
						prefix-icon="el-icon-login-user"></input>
				</el-form-item>
				<el-form-item prop="upass" class='upass'>
					<input ref="mima" placeholder="请输入密码" maxlength="16" type="password"
						v-model="ruleForm.upass" prefix-icon="el-icon-login-pass"
						@keyup.enter.native="submitForm('ruleForm')">
					</input>
				</el-form-item>
				<el-form-item class='denglv'>
					<button type="primary" @click="submitForm('ruleForm')">登 录</button>
				</el-form-item>
			</el-form>
		<!-- </view> -->
	</view>
</template>



<script>
	export default {
		data() {
			var checkName = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (!value) {
					return callback(new Error('请输入账号'));
				}
				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('账号长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			var validatePass = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (value === '') {
					callback(new Error('请输入密码'));
				}
				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('密码长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			return {
				ruleForm: {
					uname: '',
					upass: ''
				},
				rules: {
					uname: [{
						validator: checkName,
						trigger: 'blur'
					}],
					upass: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			};
		},
		mounted() {
			this.$refs['zhanghao'].focus()
		},
		methods: {
			submitForm(formName) {
				let _this = this;
				let params = {}
				var username = String(_this.ruleForm.uname).trim()
				var userpass = String(_this.ruleForm.upass).trim()

				if (username && userpass) {
					params.userName = username
					params.password = userpass
				} else {
					_this.$message.warning('请输入账号和密码！')
					if (!username)
						_this.$refs['zhanghao'].focus()
					else
						_this.$refs['mima'].focus()
					return
				}

				_this.$refs[formName].validate((valid) => {
					_this.$axios({
							method: "post",
							url: "/diseaseRight/adminInfo/login?userName=" + username + '&password=' +
								userpass,
							headers: {
								'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
							}
						})
						.then(res => {
							// console.log(res.data);
							if (res.data.success) {
								_this.$message.success(res.data.message);
								sessionStorage.setItem('uname', username)
								sessionStorage.setItem('userType', res.data.data.userType)
								sessionStorage.setItem('token', res.data.data.token)
								// if (typeof(res.data.name) == 'undefined') {
								// 	sessionStorage.setItem('unic', '未设置昵称')
								// } else {
								// 	sessionStorage.setItem('unic', res.data.name)
								// }
								uni.showToast({
									title: '成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									uni.navigateTo({
										url: "./index",
									});
								}, 600);
								// _this.$router.replace('./index'); //跳转到首页
								// alert('成功')
							} else {
								_this.$message({
									showClose: true,
									message: "登陆异常：" + res.data.message,
									type: 'error'
								});
							}
						})
						.catch(err => {
							console.log(err);
							_this.$message.error('捕捉异常：' + err)
						})
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.logo {
		height: 212px;
		width: 375px;
		margin-top: 0rpx;
		margin-left: 10px;
		margin-right: auto;
	}
	/* >>>.el-input el-input--prefix{
		height: 30px;
		margin-left: 80px;
		margin-top: 10px;
	}
	>>>.el-form-item__content{
		margin-left: 80px;
	} */
	.uname{
		margin-left: 131rpx;
		margin-top: 22rpx;
		width: 468rpx;
		height: 75rpx;
		border: #555555 1px solid;
	}
	.upass{
		margin-left: 131rpx;
		margin-top: 60rpx;
		width: 468rpx;
		height: 75rpx;
		border: #555555 1px solid;
	}
	.denglv{
		margin-left: 163rpx;
		margin-top: 48rpx;
		width: 468rpx;
		width: 400rpx;
		height: 105rpx;
		border-radius: 10rpx;
	}
</style>