jje_spread_uniapp/pages/login/login.vue

<template>
	<view class="page" :style="{height:height}">
		<view class="logTitle">
			<view class="welcome flex-row justify-center">
				<text>欢迎登录娇骄儿生活圈</text>
			</view>
			<view class="flex-row justify-center">
				<image src="../../static/logo.png" class="log"></image>
			</view>
		</view>

		<view class="form">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<view class="formItem">
					<u-form-item label="账号" prop="username" borderBottom ref="item1">
						<u--input v-model="form.username" placeholder="请输入账号" border="none" type="number"></u--input>
					</u-form-item>
				</view>

				<view class="formItem">
					<u-form-item label="密码" prop="password" borderBottom ref="item1">
						<u--input v-model="form.password" placeholder="请输入密码" border="none" type="password"></u--input>
					</u-form-item>
				</view>

				<view class="forgetPassword flex-row justify-between ">
					<view>
						<checkbox-group @change="checkboxChange">
							<checkbox :checked="savePassword"  color="#FFCC33" :style="{'transform':'scale(0.8)'}"/>
							<text>记住账号密码</text>
						</checkbox-group>
					</view>
					<view>
						<text @click="forgetPassword">忘记密码?</text>
					</view>
				</view>

				<view class="loginButton" @click="debounce(login,500)">
					<text>登录</text>
				</view>

			</u-form>

		</view>
<!--		<view class="flex-row justify-center  register">-->
<!--			<text>无账号？</text>-->
<!--			<text @click="goRegister" :style="{color:'#FFE05C'}">切换注册</text>-->
<!--		</view>-->
	</view>
</template>

<script>

	export default {
		data() {
			return {
				timer: null, //定时任务
				requestStatus:false,
				height:'',
				savePassword:true,
				form: {
					username: '',
					password: ''
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						min: 11,
						max: 11,
						pattern:this.$phonePattern,
						message: '请输入正确的电话号码',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						min: 6,
						max: 18,
						message: '请输入6-18位密码',
						trigger: ['blur', 'change']
					}
				}

			}
		},
		onShow(){
			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.windowHeight + 'px'

			this.form.username = uni.getStorageSync('username')
			this.form.password = uni.getStorageSync('password')

			let isLogOut = uni.getStorageSync('isLogOut')

			if (uni.getStorageSync('savePassword')){
				this.savePassword = uni.getStorageSync('savePassword')
			}
			if (this.form.username && this.form.password && isLogOut !== true){
				setTimeout(()=>{
					this.login()
				},100)
			}

		},
		onLoad(e){

			console.log('重定向获取到的参数',e)
			console.log('重定向的url',location.href)
			let code = this.getUrlCode('code')
			if (code){
				uni.showToast({
					icon: 'success',
					duration: 5000,
					title: '获取到的code：'+code
				});
			}

		},
		//
		// onPullDownRefresh() {
		// 	console.log('refresh');
		// 	setTimeout(()=>{
		// 		location.reload()
		// 	},1000)
		// },
		methods: {
			getUrlCode(name) {
		     	return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
			},

			goRegister(){
				uni.redirectTo({
					url:'/pages/register/register'
				})
			},

			forgetPassword(){
				uni.navigateTo({
					url:'/pages/forgetPassword/forgetPassword'
				})
			},
			checkboxChange(e){
				this.savePassword = !this.savePassword
				console.log(this.savePassword)
			},

			login() {
				uni.removeStorageSync('isLogOut');
				console.log('savePassword', this.savePassword)

				if (this.requestStatus){
					return
				}
				this.requestStatus=true
				this.$refs.uForm.validate().then(res => {
					console.log('savePassword', this.savePassword)
					if (this.savePassword){
						uni.setStorageSync('savePassword', this.savePassword)
						uni.setStorageSync('username', this.form.username)
						uni.setStorageSync('password', this.form.password)
					}else {
						uni.setStorageSync('savePassword', this.savePassword)
						uni.removeStorageSync('username');
						uni.removeStorageSync('password');
					}

					uni.showLoading({
						title: '登录中...'
					});

					this.$api.login.expandLogin(this.form).then(res => {
						uni.hideLoading();
						uni.setStorageSync('accessToken', res.data.data.access_token)
						this.$api.user.getUserInfo().then(res=>{
							console.log('获取到的用户信息：',res.data.data,'获取到的用户头像',res.data.data.img)
							this.userInfo = res.data.data
							uni.setStorageSync('spreadUserInfo', this.userInfo)
							uni.showToast({
								icon: 'success',
								duration: 1000,
								title: '登陆成功'
							});
							setTimeout(()=>{
								this.requestStatus=false
								uni.switchTab({
									url: "/pages/index/index"
								})
							},1000)
						})
					}).catch(err=>{
						this.requestStatus=false
					})
				}).catch(err=>{
					this.requestStatus=false
				})
			},

			debounce(fn, delay) {
				console.log(delay)
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					fn.apply();
				}, delay);
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>