kunpeng/pages/public/login.vue

<template>
	<view class="container">
		<view class="loginTitle">Welcome鲲鹏云矿</view>
		<view class="loginText">请使用您的账号登录</view>
		<view class="login-box">
			<view class="username">账号</view>
			<input class="input-box" type="number" v-model="phone" placeholder="请输入账号" />
		</view>
		<view class="login-box">
			<view class="username">密码</view>
			<input class="input-box" type="password" v-model="password" placeholder="请输入密码" />
		</view>

		<view class="forget flex">
			<view class="mui-checkbox ">
				<!-- <input id="chkRem" type="checkbox" checked="checked" class="RememberCheck"  @change="checkboxChange" /> -->
				<checkbox-group @change="checkboxChange">
					<checkbox id="chkRem" type="checkbox" :checked="rememberPsw" @tap="rememberPsw = !rememberPsw" style="transform:scale(0.8)" >记住密码</checkbox>
				</checkbox-group>
			</view>
			<text @click="navTo('/pages/public/forget')">忘记密码</text>
		</view>
		<view class="login" @click="toLogin">登录</view>
		<view class="login-tip">
			还没有账号？
			<text class="register" @click="navTo('/pages/public/register')">立即注册</text>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login } from '@/api/login.js';
import { getUserInfo } from '@/api/user.js';
export default {
	data() {
		return {
			phone: '',
			password: '',
			rememberPsw: true
		};
	},
	onLoad() {},
	mounted() {
		let that = this;
		//缓存的密码
		const HCuname = uni.getStorageSync('HCuname');
		//缓存的密码
		const HCpassw = uni.getStorageSync('HCpassw');
		//有缓存就赋值给文本没有就清空
		if (HCuname && HCpassw) {
			that.phone = HCuname;
			that.password = HCpassw;
		} else {
			that.phone = '';
			that.password = '';
		}
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'login']),
		//登录
		async toLogin() {
			let obj = this;
			obj.logining = true;
			if (obj.phone == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (obj.password == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			login({
				account: obj.phone,
				password: obj.password
			})
				.then(function(e) {
					if (obj.rememberPsw) {
						uni.setStorageSync('HCuname', obj.phone);
						uni.setStorageSync('HCpassw', obj.password);
					} else {
						uni.removeStorageSync('HCuname');
						uni.removeStorageSync('HCpassw');
						obj.phone = '';
						obj.password = '';
					}
					uni.setStorageSync('token', e.data.token);
					getUserInfo({}).then(e => {
						obj.login();
						// 保存返回用户数据
						obj.setUserInfo(e.data);

						uni.switchTab({
							url: '/pages/index/index'
						});
					});
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 后退
		navBack() {
			uni.navigateBack();
		},
		checkboxChange: function(e) {
			console.log(e.detail.value.length);
			if (e.detail.value.length == 1) {
				//获取缓存的账号
				uni.getStorageSync('HCuname', this.phone);
				uni.getStorageSync('HCpassw', this.password);
			} else {
				uni.removeStorageSync('HCuname');
				uni.removeStorageSync('HCpassw');
			}
		},
		rember(){
			this.rememberPsw = ! this.rememberPsw
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 30% 60rpx;
	}
}
.loginTitle {
	font-weight: bold;
	color: #333333;
	font-size: 58rpx;
	padding-bottom: 34rpx;
}
.loginText {
	font-weight: 500;
	color: #333333;
	font-size: 34rpx;
	padding-bottom: 34rpx;
}
.login-box {
	padding-top: 90rpx;
	.username {
		padding-bottom: 30rpx;
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
	}
}
.forget {
	text-align: right;
	margin: 70rpx 0rpx;
	font-weight: 500;
	color: #333333;
	font-size: 28rpx;
	.mui-checkbox{
		font-weight: 500;
		color: #333333;
		font-size: 35rpx;
	}
}
.login {
	background-color: #5771df;
	margin-top: 20rpx;
	color: #ffffff;
	text-align: center;
	padding: 26rpx 0rpx;
	border-radius: 50rpx;
}
.login-tip {
	padding: 60rpx 0rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 28rpx;
	.register {
		color: #5771df;
	}
}
// /* input 样式 */
// .input-placeholder {
// 	color: #ffffff;
// }

// .placeholder {
// 	color: #ffffff;
// }
</style>