jje_spread_uniapp/pages/login/login.vue

<template>
	<view class="page">
		<uni-nav-bar  :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true"  title="登录" />
		<view class="logTitle">
<!--			<view class="welcome">-->
<!--				<text>HI，您好！</text>-->
<!--			</view>-->
			<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"></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="login">
					<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 {
				savePassword:false,
				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(){
			this.form.username = uni.getStorageSync('username')
			this.form.password = uni.getStorageSync('password')
			this.savePassword = uni.getStorageSync('savePassword')
		},
		methods: {

			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() {
				this.$refs.uForm.validate().then(res => {
					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');
					}

					this.$api.login.expandLogin(this.form).then(res => {
						uni.setStorageSync('accessToken', res.data.data.access_token)
						this.$api.user.getUserInfo().then(res=>{
							this.userInfo = res.data.data
							uni.setStorageSync('spreadUserInfo', this.userInfo)
							uni.showToast({
								icon: 'success',
								duration: 1000,
								title: '登陆成功'
							});
							setTimeout(()=>{
								uni.switchTab({
									url: "/pages/index/index"
								})
							},1000)
						})

					})
				})
			}
		}
	}
</script>

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