great_distribution/pages/login/login.vue

<template>
	<view class="body" :style="{height:screenHeight}">
		<view class="header">
			<view class="circle circle1"></view>
			<view class="circle circle2"></view>
			<view class="circle circle3"></view>
			<view class="text">
				<view class="en-text">hello</view>
				<view class="cn-text">欢迎登录！</view>
			</view>
		</view>
		<view class="login-box">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" >
				<u-form-item label="" prop="account" ref="account" >
					<u--input
						v-model="form.account"
						border="surround"
						placeholder="输入账号"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="" prop="password" ref="password" >
					<u--input
						v-model="form.password"
						border="surround"
						:password="true"
						placeholder="输入密码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
			</u--form>
			<u-button 
				@click="submit"
				text="登录" 
				type="primary" 
				shape="circle" 
				:customStyle="{'margin-top':'60rpx',height:'98rpx','box-sizing':'border-box'}"
				color="linear-gradient(90deg, #00D17D 0%, #00A447 100%)">
			</u-button>
		</view>
		<view class="tip">
			提示：初始账号和密码由管理员设置，请与管理人员联系
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bname:'旭烁集团',
				//屏幕高度
				screenHeight: "",
				backUrl:null,
				form:{
					account:'',
					password:''
				},
				rules: {
					account: {
						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':'30rpx',
					'box-sizing':'border-box',
				}
			};
		},
		onLoad() {
			// 测试环境填充用户名密码
			if(process.env.NODE_ENV=='development'){
				this.form.account = 'dls1234';
				this.form.password = '654321';
			}
			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.reLaunch({url: this.backUrl});
					}).catch(err=>{
						console.log('login',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写表单')
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.body {
	background-color: #fff;
	box-sizing: border-box;
}
.header{
	position: relative;
	height: 368rpx;
	overflow: hidden;
	background: linear-gradient(325deg, #FCFFFD 0%, #ECFFF4 100%);
	.circle{
		position: absolute;
		border-radius: 50%;
		&.circle1{
			width: 201rpx;
			height: 149rpx;
			background: linear-gradient(230deg, #E5FFEC 0%, #C0FFD7 100%);
			left:-20rpx;
			bottom: -50rpx;
		}
		&.circle2{
			width: 148rpx;
			height: 148rpx;
			background: linear-gradient(215deg, #E7FFEE 0%, #BFFFDB 100%);
			opacity: 0.6;
			right:158rpx;
			top: 80rpx;
		}
		&.circle3{
			width: 232rpx;
			height: 237rpx;
			background: linear-gradient(215deg, #F1FFF8 0%, #C3FFD3 100%);
			right:-32rpx;
			top: -65rpx;
		}
	}
	.text{
		position: absolute;
		left: 40rpx;
		bottom: 80rpx;
		.en-text{
			position: relative;
			text-transform: uppercase;
			font-size: 58rpx;
			font-family: AlibabaPuHuiTi_2_115_Black;
			color: #333333;
			line-height: 81rpx;
			font-weight: bold;
			width: fit-content;
			z-index: 5;
			&::before{
				content: '';
				display: block;
				width: 104%;
				height: 10rpx;
				background-color: #FFB100;
				position: absolute;
				left: -2%;
				bottom: 10rpx;
				z-index: -1;
			}
		}
		.cn-text{
			font-size: 50rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 70rpx;
		}
	}
}
.login-box{
	position: relative;
	top: -24rpx;
	padding: 60rpx 40rpx;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	background-color: #fff;
	// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,28,12,0.06);
}
.tip{
	position: fixed;
	bottom: 108rpx;
	width: 100vw;
	box-sizing: border-box;
	text-align: center;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
}
</style>