security_study_h5/pages/login/login.vue

<template>
	<view class="body" :style="{height:screenHeight}">
		<view class="header">
			<view class="text1">安全生产<br />宣传教育<br />平台</view>
			<view class="text2 u-flex"><view class="line"></view>员工学习</view>
		</view>
		<view class="login-box">
			<view class="title">账号密码登录</view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" >
				<u-form-item label="" prop="mobile" ref="mobile" borderBottom >
					<u--input
						v-model="form.mobile"
						border="none"
						placeholder="请输入手机号码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="" prop="password" ref="password" borderBottom >
					<u--input
						v-model="form.password"
						border="none"
						:password="true"
						placeholder="输入密码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
			</u--form>
			<u-button 
				@click="submit"
				text="登录" 
				type="primary" 
				:customStyle="{'margin-top':'60rpx',height:'98rpx','box-sizing':'border-box'}"
				>
			</u-button>
		</view>
		<view class="tip">
			贵州省公路建设养护集团有限公司贵阳分公司
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bname:'',
				//屏幕高度
				screenHeight: "",
				backUrl:null,
				form:{
					mobile:'',
					password:''
				},
				rules: {
					mobile: {
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				inputCustomStyle:{
					height:'98rpx',
					'border-color':'#eee',
					'padding-left':'0',
					'box-sizing':'border-box',
				}
			};
		},
		onLoad() {
			// 测试环境填充用户名密码
			if(process.env.NODE_ENV=='development'){
				this.form.mobile = '15285955523';
				this.form.password = '000000';
			}
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.windowHeight + "px"
				}
			});
			uni.getStorage({
				key: 'backUrl',
				success: function (res) {
					// console.log('getStorage',res);
				},
				complete(res) {
					if(res.data){
						that.backUrl = '/'+res.data;
					}else{
						that.backUrl = '/pages/index/index';
					}
					// console.log('backUrl',that.backUrl);
				}
			});
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
		},
		methods: {
			submit(){
				// console.log('form',this.form);
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.$u.api.login(this.form).then(res=>{
						// console.log('res',res.data);
						this.$u.vuex('vuex_user_info', res.data);
						uni.removeStorage({
							key:'backUrl'
						})
						uni.reLaunch({url: this.backUrl});
					}).catch(err=>{
						console.log('login',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写账号和密码')
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.body {
	background-color: #fff;
	padding: 45rpx;
	box-sizing: border-box;
}
.header{
	color: $uni-color-primary;
	.text1{
		font-size: 72rpx;
		font-family: AlibabaPuHuiTi_2_105_Heavy;
		line-height: 88rpx;
		margin-bottom: 40rpx;
		font-weight: bold;
	}
	.text2{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-bottom: 100rpx;
		.line{
			width: 116rpx;
			height: 2rpx;
			background-color:  $uni-color-primary;
			margin-right: 24rpx;
		}
	}
}
.login-box{
	position: relative;
	background-color: #fff;
	.title{
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}
}
.tip{
	margin-top: 100rpx;
	// position: fixed;
	// bottom: 108rpx;
	width: calc( 100vw - 90rpx );
	box-sizing: border-box;
	text-align: center;
	font-size: 24rpx;
	font-weight: 400;
	color: #999;
}
</style>