fb/fb-app/pages/login.vue

<template>
	<view class="wrap">
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<u-navbar :is-back="false" title="登录" :border-bottom="false">
		</u-navbar>
		<view class="content">
			<view class="title">云食堂</view>
			<u-field
				v-model="username"
				label="账号"
				placeholder="请填写账号"
				:error-message="username?'':isClick ? '请填入账号':''"
				required
				trim
			>
			</u-field>
			<u-field
				v-model="password"
				:password="!isShow"
				label="密码"
				placeholder="请填写密码"
				:error-message="password?'':isClick ? '请填入密码':''"
				:right-icon="isShow?'eye-off':'eye-fill'"
				@right-icon-click="isShow = !isShow"
				required
				trim
			>
			</u-field>
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">登陆</button>
		</view>
		<view class="buttom">
			<view class="hint">
				登录代表同意
				<text class="link">云食堂用户协议、隐私政策，</text>
				并授权使用您的云食堂账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow: false,
			title: '',
			tel: '',
			username: '',
			password: '',
			// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			errorMessage: undefined,
			isClick: false,
		}
	},
	onLoad(option){
		console.log('option',option);
		if(option.code == 401){
			this.title = '您的登录状态已失效，请先登录后再操作！'
		}else if(option.code == 403){
			this.title = '暂无登录，请先登录后再操作！'
		}
	},
	onReady() {
		let {username,password} = this.vuex_user
		this.username = username;
		this.password = password;
	},
	computed: {
		inputStyle() {
			let style = {};
			if(this.username && this.password.length > 5) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		},
		
	},
	methods: {
		submit() {
			this.$u.vuex('vuex_token','');
			if(this.username && this.password){
				if(this.password.length <6){
					this.$refs.uToast.show({
						title: '密码必须大于5位数',
						type: 'warning',
					})
					return
				}
				this.$u.api.login({
					username: this.username,
					password: this.password,
				}).then((res) => {
					if(res.code == 200){
						let user = {username:this.username,password:this.password};
						this.$u.vuex('vuex_user',user);
						this.$u.vuex('vuex_token','Bearer '+res.token);
						this.getInfo();
						this.$refs.uTips.show({
							title: '登陆成功，跳转中...',
							type: 'success',
							duration: '1000'
						})
						if(this.title==''){
							setTimeout(()=>{
							this.$u.route({type:'switchTab',url:'/pages/home/index'})},1000)
						}else{
							setTimeout(()=>{
							   this.$u.route({
								type:'navigateBack',
							   });
							 },1000)
						}
						
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})
			}else{
				this.isClick = true
				this.$refs.uToast.show({title:'请填写账号及密码'})
			}	
		},
		//获取用户信息
		getInfo(){
			this.$u.api.getInfo().then((res) => {
				this.$u.vuex('vuex_userInfo',res.data);
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			margin-top: 40rpx;
			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}
		
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			
			.link {
				color: $u-type-warning;
			}
		}
	}
}
</style>