Storage-Android-master/pages/login/login.vue

<template>
	<view class="container-wrap my-fade-in" :style="{background: 'url(' + loginBg + ')'}">
		<uni-status-bar></uni-status-bar>
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="container my-flex">
			<!-- 登录表单 -->
			<view class="form-wrap flex-column-center">
				<view class="logo-wrap my-flex">
					<view class="logo">
						<image src="../../static/images/LOGO.png" mode=""></image>
					</view>
				</view>
				<view class="form">
					<u-form :model="form" ref="uForm">
						<u-form-item :border-bottom="false" prop="account">
							<u-input style="font-size: 30rpx;" :accountIcon="true" height="72" :border="true" placeholder="请输入账号" v-model="form.account" />
						</u-form-item>
						<u-form-item :border-bottom="false" style="position: relative;" prop="password">
							<u-input @confirm="handleSubmit" style="font-size: 30rpx;" type="password" :border="true" placeholder="请输入密码" height="72" v-model="form.password"/>
							<!-- <span class="forget my-fontsize-Small" @tap="toggleForget">忘记密码</span> -->
						</u-form-item>
						<!-- <u-form-item :border-bottom="false" v-if="isDev">
							<u-input style="font-size: 24rpx;" height="72" :border="true" placeholder="请输入IP" v-model="ip" />
						</u-form-item> -->
						<u-form-item :border-bottom="false">
							<u-button throttleTime="300" type="primary" style="width: 100%;margin-top: 30rpx;" @click="login">立即登录</u-button>
						</u-form-item>
						<u-form-item :border-bottom="false" style="margin-top: 70rpx;">
							<u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox v-model="remember">记住用户名</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
				</view>
				<view class="bottom-pic-wrap flex-column-center">
					<view class="bottom-pic">
						<image src="../../static/images/login-pic.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			<view class="version" v-if="$storage.getStorageSync('version')">
				v{{ $storage.getStorageSync('version') || plus.runtime.version }}
			</view>
		</view>
	</view>
</template>

<script>
import loginBg from '@/static/images/login-bg.png'
import { mapActions } from 'vuex'
import config from '@/libs/config/config.js'
	export default {
		data() {
			return {
				loginBg,
				ip: '',
				remember: true,
				form: {
					account: '',
					password: '',
					mobileId: '_mobileId'
				},
				rules: {
					account: [
						{ 
							required: true, 
							message: '账号不能为空', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['change']
						}
					],
					password: [
						{
							required: true, 
							message: '密码不能为空', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur']
						}
					]
				}
			};
		},
		methods: {
			...mapActions({
				setToken: 'user/setToken',
				setUserInfo: 'user/setUserInfo'
			}),
			handleSubmit() {
				this.login()
			},
			login() {
				this.$utils.formValidate(this.$refs.uForm).then(() => {
					this.$http.Login(this.form).then(res => {
						console.log(res)
						if(res.code === 0) {
							this.$storage.setStorageSync('token',res.result.token)
							this.saveUserInfo()
						}
					})
				})
			},
			// 获取并保存用户信息到本地
			saveUserInfo() {
				this.$http.GetUserInfo().then(res => {
					console.log(res)
					if(res.code == 0){
						this.setUserInfo(res.result)
						this.$storage.setStorageSync('userInfo', res.result)
						this.$utils.openNew('/pages/index/index')
					}
				})
			},
			checkboxGroupChange() {},
			toggleForget() {}
		},
		onLoad() {
			this.form.account = this.userInfo.account
			
			this.$utils.updateVersion()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			// 测试环境下显示ip输入
			isDev() {
				if(process.env.NODE_ENV === 'development') {
					return true
				}else {
					return false 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../../static/css/mycss.scss';
@import '../../static/css/animate.css';
/deep/ .u-select__body__picker-view__item {
	.u-line-1 {
		font-size: 46rpx;
	}
}
/deep/ .u-select__header__btn {
	font-size: 46rpx;
}
/deep/ .u-drawer-content {
	border-radius: 20rpx 20rpx 0 0;
}
.container-wrap {
	width: 750rpx;
	.container {
		height: calc(100vh - var(--status-bar-height));
		.form-wrap {
			position: relative;
			width: 620rpx;
			height: 85vh;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow:0 5px 10px #383838;
			.logo-wrap {
				flex: 1;
				width: 100%;
				.logo {
					width: 250rpx;
					min-width: 250rpx;
					height: 100rpx;
				}
			}
			.form {
				flex: 1;
				padding: 0 50rpx;
				width: 100%;
				.forget {
					position: absolute;
					bottom: -30rpx;
					right: 0;
					color: #666666;
				}
			}
			.bottom-pic-wrap {
				flex: 1;
				width: 100%;
				.bottom-pic {
					height: 80%;
					min-height: 250rpx;
					// width: 311rpx;
					// height: 315rpx;
				}
			}
		}
		.forget-wrap {
			position: relative;
			width: 580rpx;
			height: 620rpx;
			box-shadow:0 5px 10px #383838;
			border-radius: 20rpx;
			background: #fff;
			.close-icon-wrap {
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				.close-icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.gantanhao-wrap {
				padding-top: 120rpx;
				.gantanhao {
					width: 200rpx;
					height: 160rpx;
				}
			}
			.text {
				padding-top: 75rpx;
				text-align: center;
				color: #333;
				.phone {
					color: rgb(200, 60, 160);
					font-weight: bold;
				}
			}
		}
	}
	.version {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10rpx 0;
		text-align: center;
	}
}
</style>