parts_shop_ui_LT/pages/login/login.vue

<template>
	<view>
		<view class="login-view" style="">
			<image src="/static/images/logo/logo.png" class="logo" mode="widthFix"></image>
			<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.trim="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model.trim="pwd" />
					</view>
					<view style="display: flex;justify-content: space-between;">
						<u-checkbox-group v-model="checkedList" @change="change">
							<u-checkbox activeColor="#fd5003" :customStyle="{marginBottom: '8px'}" label="记住密码"
								name="记住密码">
							</u-checkbox>
						</u-checkbox-group>
						<view style="color: #FD5003;" @click="forgotPassword">忘记密码</view>
					</view>
					<u-button type="primary" class="custom-style" color="linear-gradient(0deg, #FD5003 0%, #FBA680 100%)" :ripple="true" @click="login">登 录
					</u-button>
				</form>
			</view>
		</view>
		<view style="position:absolute; bottom:20rpx;font-size: 20rpx;width: 100%;text-align: center;">
			<image src="/static/images/login/bottom.png" style="
				display: block;
				width: 60%;
				height: auto;
				margin: 0 auto 10rpx;" mode="widthFix"></image>
			青岛途宝软件开发有限公司提供技术支持
		</view>
	</view>
</template>
<script>
	import md5 from '@/utils/md5.js'
	export default {
		data() {
			return {
				phone: '', //手机号码
				pwd: '', //密码
				// phone: '13021669111', //手机号码18669858069
				// pwd: '123456', //密码
				checked: false,
				lifeData: {},
				checkedList: []
			}
		},
		onShow() {
			//清除本地缓存
			// uni.removeStorageSync('lifeData');
			
			
			
			this.phone = uni.getStorageSync('username')
			this.pwd = uni.getStorageSync('password')
			if (uni.getStorageSync('username')) {
				this.checked = true
				this.checkedList = ['记住密码']
			}
		},
		methods: {
			//忘记密码
			forgotPassword() {
				uni.$u.route('/pages/login/forgotPassword');
			},
			change(e) {
				this.checked = !this.checked
			},
			//当前登录按钮操作
			login() {
				// let tenant = '681169'
				// let tenant = '922648'
				// let tenant = '888390'
				// let tenant = '269129'
				// let tenant = '673511'
				// let tenant = '000000'
				// let phone = this.phone
				// if (this.phone.slice(0, 6) == '000000') {
				// 	tenant = '000000'
				// 	phone = this.phone.slice(6, this.phone.length)
				// }
				// if (this.phone.slice(0, 6) == '681169') {
				// 	tenant = '681169'
				// 	phone = this.phone.slice(6, this.phone.length)
				// }
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$u.api.token(
					// '096359',
					// '000000',
					// tenant,
					this.phone,
					md5(this.pwd)
				).then(data => {
					if (this.checked === true) {
						uni.setStorageSync('username', this.phone);
						uni.setStorageSync('password', this.pwd);
					}
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '登录成功',
						position: "bottom",
						mask: true
					})
					let _this = this
					setTimeout(function() {
						_this.$u.func.login(data)
					}, 1000);
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.custom-style {
		color: #3ab2f7;
		margin-top: 140rpx;
		box-shadow: 2px 5px 10px 1px rgba(43, 117, 250, 0.3);
	}

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

	.img-a {
		width: 100%;
		height: 400rpx;
	}

	.logo {
		display: block;
		width: 281rpx;
		height: auto;
		margin: 0 auto 120rpx;
	}

	.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%;
		padding-top: 200rpx;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		margin-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: #000;
		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>