uniapp-supplychain/canteen/pages/login/index.vue

<template>
	<view>
		<view class="head">
			<view class="nav">
				<view>登录</view>
			</view>
			<image src="../../static/images/login_bg.png"></image>
		</view>
		<view class="content">
			<view>
				<!-- 账号 -->
				<view class="lf-flex lf-m-b-10">
					<u-icon name="account-fill"></u-icon>
					<text class="lf-m-l-10 lf-font-28 lf-color-333">登录账号</text>
				</view>
				<input class="input" 
					maxlength="11"
					v-model="user_key" 
					:adjust-position="false" 
					:auto-blur="true" 
					placeholder="请输入账号" 
					@focus="inputFocus(190)" 
					@blur="inputBlur" />
				<!-- 密码 -->
				<view class="lf-flex lf-m-b-10 lf-m-t-60">
					<u-icon name="lock-fill"></u-icon>
					<text class="lf-m-l-10 lf-font-28 lf-color-333">登录密码</text>
				</view>
				<input class="input" 
					maxlength="20"
					v-model="user_pw" 
					:adjust-position="false" 
					:auto-blur="true" 
					placeholder="请输入密码" 
					:password="true" 
					@focus="inputFocus(230)" 
					@blur="inputBlur"
					@confirm="login" />
			</view>
			<view>
				<!-- 登录按钮 -->
				<button class="button" :class="{'lf-btn-disabled': button_click}" @click="login">登录</button>
			</view>
		</view>
		<view :style="is_focus ? 'height: 540rpx' : 'height: 40rpx'"></view>
	</view>
</template>

<script>
	let time = null;
	
	export default {
		data(){
			return {
				is_focus: false,
				user_key: '',
				user_pw: '',
				button_click: false
			}
		},
		onLoad(options){
			// todo 优化：input输入后有clear按钮
		},
		methods: {
			inputFocus(scrollTop){
				time = setTimeout(() => {
					this.is_focus = true;
				}, 0); // 给blur事件留出时间
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 100
					})
				}, 200);
			},
			inputBlur(){
				time = setTimeout(() => {
					this.is_focus = false;
				}, 0); // 给click事件留出时间
			},
			login(){
				if(this.button_click) return;
				if(!this.user_key){
					this.$msg('账号不能为空');
				}else if(!this.user_pw){
					this.$msg('密码不能为空');
				}else{
					this.button_click = true;
					this.$http(this.API.API_CANTEEN_LOGIN, {
						username: this.user_key,
						password: this.user_pw
					}).then(res => {
						console.log("login", res);
						uni.setStorageSync('canteen_token', res.data.token);
						this.button_click = false;
						this.$url('/pages/index/index', {tyep: 'redirect'});
					}).catch(err => this.button_click = false);
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lf-m-t-60{
		margin-top: 60rpx;
	}
	.head{
		height: 750rpx;
		width: 750rpx;
		background-color: #11D189;
		position: relative;
		image{
			width: 626.5rpx;
			height: 582rpx;
			position: absolute;
			top: calc(50% - 240rpx);
			left: calc(50% - 313rpx);
			z-index: 0;
		}
		.nav{
			text-align: center;
			padding-top: 70rpx;
			padding-bottom: 34rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.content{
		width: 686rpx;
		height: 622rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 10rpx 5rpx rgba(17, 209, 137, 0.1);
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: -100rpx;
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		z-index: 2;
		.input{
			// padding: 20rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			font-size: 48rpx;
			/* #ifdef MP */
			height: 90rpx;
			line-height: 90rpx;
			/* #endif */
		}
		.button{
			background-color: #11D189;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}
	/deep/.input-placeholder{
		color: #999999;
		font-size: 28rpx;
	}
	/deep/.button-hover{
		opacity: .5;
		animation: all .3s;
	}
</style>