TuBaoSoft-AP/pages/login/login.vue

<!-- 蓝色登录页面2 -->
<view>11111</view>
<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎使用途宝智能云仓
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">账户名</text>
						<input type="text" name="phone" placeholder="请输入您的账户名" maxlength="20" v-model="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" />
					</view>
					<view>
						<u-checkbox-group>
							<u-checkbox v-model="checked" active-color="#2796f2" @change="change">记住密码</u-checkbox>
						</u-checkbox-group>
					</view>
					<u-button type="primary" class="custom-style" :ripple="true" @click="login">登 录</u-button>
				</form>
			</view>
		</view>
		<view style="position:absolute; bottom:20rpx;font-size: 20rpx;width: 100%;text-align: center;">
			青岛途宝软件开发有限公司提供技术支持</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone: '', //手机号码
				pwd: '', //密码
				checked: false,
				lifeData:{}
			}
		},
		onShow() {
			//清除本地缓存
			// uni.clearStorageSync();
			uni.removeStorageSync('lifeData');
			this.$u.vuex('vuex_token', '');
			console.log(uni.getStorageSync('lifeData'))
			this.phone = uni.getStorageSync('username')
			this.pwd = uni.getStorageSync('password')
			if (uni.getStorageSync('username')) {
				this.checked = true
			}
		},
		methods: {
			change(e) {
				console.log(e)
			},
			//当前登录按钮操作
			login() {
				let this_ = this
				this_.$u.post('/login', {
					username: this_.phone,
					password: this_.pwd
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						if (this_.checked === true) {
							uni.setStorageSync('username', this_.phone);
							uni.setStorageSync('password', this_.pwd);
						}
						this_.lifeData = {
							vuex_token:res.token,
							vuex_user:this_.phone
						}
						uni.setStorage({
							key: 'lifeData',
							data: this_.lifeData,
							success(res) {
								uni.showToast({
									icon: 'none',
									title: '登录成功',
									position: "bottom"
								})
								this_.cacheData()
							}
						})
						// console.log(uni.getStorageSync('lifeData'))
					}
				})
			},
			cacheData(){
				this.$u.vuex('vuex_token', this.lifeData.vuex_token);
				// console.log(this.vuex_token)
				//跳转页面为tabBar页面
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	};
</script>
<style scoped>
	.custom-style {
		color: #3ab2f7;
		margin-top: 140rpx;
	}

	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 450rpx;
		background-image: url(../../static/head.png);
		background-size: 100%;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>