intelligent-factory-front-pad/pages/login/login.vue

<template>
	<view class="content">
		<view class="login-head d-flex a-center j-end">
			<view class="circle yellow"></view>
			<view class="circle blue"></view>
			<view class="circle green"></view>
		</view>
		<view class="login-body d-flex a-center j-center">
			<view class="login-content d-flex flex-column">
				<view class="d-flex j-sb">
					<image src="../../static/biguser.png" style="width:166rpx;height:166rpx" mode=""></image>
					<view>
						<u-input class="login-input" :border-color="borderColor" :clearable="false" height="52" v-model="userData.username"
						 border placeholder="请输入账号" placeholder-style="font-size:23rpx;font-family: Segoe UI;" trim />
						<u-input class="login-input u-m-t-16" type="password" :password-icon="false" :clearable="false" :border-color="borderColor"
						 height="52" v-model="userData.password" border placeholder="请输入密码" placeholder-style="font-size:23rpx;font-family: Segoe UI;"
						 trim />
						<u-checkbox class="login-check u-m-t-10" v-model="checked">记住密码</u-checkbox>
					</view>
				</view>
				<view class="login-button u-m-t-20" @click="loginY">登录</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	import {
		loginApp
	} from "@/common/api.js"
	export default {
		data() {
			return {
				userData: {
					username: '',
					password: '',
					client: 'APP'
				},
				borderColor: 'transparent',
				checked: false
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			...mapMutations(['login']),
			init() {
				// 是否记住密码
				let status = uni.getStorageSync('checked')
				if(status) {
					this.userData.username = uni.getStorageSync("userinfo").username
					this.userData.password = uni.getStorageSync("userinfo").password
					this.checked = status
				}
			},
			loginY() {
				if (!this.userData.username) {
					this.$refs.uToast.show({
						title: '请输入账号',
						type: 'error'
					})
					return
				}
				if (!this.userData.password) {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error'
					})
					return
				}
				loginApp(this.userData).then(res => {
					if (res.status === '20000') {
						res.data.username = this.userData.username
						res.data.password = this.userData.password
						// 存储用户信息
						if (this.checked) {
							uni.setStorageSync('checked', this.checked);
							this.login(res.data)
						} else {
							this.userData.username = ''
							this.userData.password = ''
						}
						// 存储token
						uni.setStorageSync('token', res.data.token);
						// uni.setStorageSync('token', res.data.token);
						// 跳转
						uni.navigateTo({
							url: '/pages/index/index'
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: $uni-color-blue;

		.login-head {
			height: 42rpx;
			background-color: $uni-color-deep-blue;
			padding-right: 14rpx;

			.circle {
				width: 19rpx;
				height: 19rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.yellow {
				background-color: #FADB50;
			}

			.blue {
				background-color: #1A6CD6;
			}

			.green {
				background-color: #7AE376;
			}
		}

		.login-body {
			height: calc(100vh - 42rpx);

			.login-content {
				width: 64.8%;
				height: 50%;

				.login-button {
					width: 100%;
					height: 52rpx;
					background-color: $uni-color-deep-blue;
					color: #fff;
					font-size: 23rpx;
					text-align: center;
					line-height: 52rpx;
				}

				.login-input {
					width: 307rpx;
					background-color: #fff;
				}
			}
		}
	}

	/deep/ .u-checkbox__label {
		color: #FFF;
		font-size: 23rpx;
	}
</style>