jianKongXiTong/pages/user/login.vue

<template>
	<view class="body2">
		<u-navbar title="湖里区不可移动文物数字化监管平台" bgColor="#071d4f" :leftIconSize="0" titleStyle=" font-weight:bold;color:#25d7f2"></u-navbar>
		<block>
			<!--  #ifndef  MP-WEIXIN	 -->
			<view class="login-bg">
				<view class="login-card">
					<view class="login-head">
						<image class="logoimg" src="@/static/img/safe.png" mode="widthFix"></image>
					</view>
					<view class="login-input login-margin-b">
						<input v-model="username" placeholder="请输入手机号" />
					</view>
					<view class="login-input">
						<!-- <input :password="true" v-model="password" placeholder="请输入密码(6-16位)" /> -->

						<input v-model="password" placeholder="请输入密码(6-16位)" :password="showPassword" />
						<u-icon style="position: absolute; right: 40rpx; top: 40rpx" name="eye" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></u-icon>
					</view>
					<view class="cu-bar btn-group gui-margin-top-large">
						<button class="loginBtn bg-orange shadow-blur round" :loading="loading" @tap="login">{{ loading ? '登录中...' : '登 录' }}</button>
					</view>
					<!-- <view class="flex justify-center">
						<view class="text-gray text-sm margin-top-xl" @tap="register">注册新账户</view>
					</view> -->
				</view>
			</view>
			<!--  #endif -->

			<!--  #ifdef  MP-WEIXIN	 -->
		</block>
	</view>
</template>

<script>
var _this;

export default {
	data() {
		return {
			showPassword: true,
			loading: false,
			user: [],
			username: '',
			password: '',
			class_id: '',
			ismobile: false,
			group_id: 1,
			code: '',
			redirect: '',
			userAgent: navigator.userAgent
		};
	},
	mounted() {
		_this = this;
	},
	onLoad(e) {
		console.log(e);
		if (e.redirect) {
			this.redirect = e.redirect;
		}
	},
	onShow() {
		this.user = this.$common.userInfo();
		console.log('this.user: ', this.user);
		if (typeof this.user == 'undefined' || this.user == '' || this.user == null) {
		} else {
			this.$common.navigateTo('index');
		}
		// #ifdef MP-WEIXIN
		this.wxLogin();
		// #endif
	},

	methods: {
		changePassword: function () {
			this.showPassword = !this.showPassword;
		},
		wxLogin() {
			wx.login({
				success: (res) => {
					this.code = res.code;
				},
				fail: function (error) {
					console.log('login failed ' + error);
				}
			});
		},

		register() {
			this.$common.navigateTo('register');
		},
		login() {
			_this.loading = true;
			// if (_this.username == '' || _this.username.length < 11) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请输入正确的手机号'
			// 	});
			// 	_this.loading = false;
			// 	return;
			// }
			if (_this.password == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入密码'
				});
				_this.loading = false;
				return;
			}
			_this.$api.login(
				{
					account: _this.username,
					password: _this.password
				},
				(data) => {
					console.log(data);
					if (data.code == 1) {
						_this.loading = false;
						console.log(data, 11);
						_this.$common.successToShow(data.msg, function () {
							_this.$common.navigateTo('index');
							uni.switchTab({
								url: '/pages/index/index'
							});

							// if (_this.userAgent.match(/Windows/i)) {
							// 	console.log('用户使用的是Windows操作系统');
							// 	uni.navigateTo({
							// 		url: '/pages/index/index2'
							// 	});
							// } else if (_this.userAgent.match(/Linux/i)) {
							// 	console.log('用户使用的是Linux操作系统');
							// 	uni.switchTab({
							// 		url: '/pages/index/index'
							// 	});
							// }
						});
						try {
							_this.$db.set('upload', 1);
							_this.$db.set('login', 1);
							_this.$db.set('token', data.data.userinfo.token);
							_this.$db.set('user', data.data.userinfo);
							_this.$db.set('auth', data.data.userinfo);
							_this.$store.commit('setAccessToken', data.data.userinfo.token);
							_this.$store.commit('setActivityId', 0);
						} catch (e) {}
					} else {
						_this.loading = false;
						uni.showToast({
							duration: 1500,
							icon: 'none',
							title: data.msg
						});
					}
				}
			);
		}
	}
};
</script>

<style>
/deep/.u-line-1 {
	width: 800rpx !important;
}
.body2 {
	width: 100%;
	height: 1939rpx;
	font-size: 28upx;
	color: #ffffff;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	background: url('@/static/img/MainBack.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
}
.logView {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	/* 垂直居中 */
	width: 100%;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.logbt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	/* 垂直居中 */
	width: 100%;
	background: none;
	border: none !important;
}

.logbt:after {
	border: none !important;
}

.logbt .logoimg {
	width: 200rpx;
	height: 200rpx;
	display: block;
}

.loginBtn {
	width: 800rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	background: #123469;
	border-radius: 10rpx;
	border: none;
}

image {
	width: 100rpx;
	height: 100rpx;
}

.login-btn {
	padding: 10rpx 20rpx;
	margin-top: 60rpx;
}

.login-register {
	color: #666;
	float: right;
	font-size: 26rpx;
}

.login-input input {
	background: #c2c4c5;
	font-size: 28rpx;
	padding: 10rpx 25rpx;
	height: 80rpx !important;
	line-height: 80rpx;
	border-radius: 40rpx;
}

.login-margin-b {
	margin-bottom: 25rpx;
}

.login-input {
	padding: 10rpx 20rpx;
	position: relative;
}

.login-head {
	font-size: 34rpx;
	text-align: center;
	padding: 25rpx 10rpx 55rpx 10rpx;
}

.login-head image {
	width: 200rpx;
}

.login-card {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 12rpx;
	padding: 10rpx 25rpx;
	position: relative;
	margin-top: 120rpx;
	width: 500px;
}

.login-bg {
	margin: 0 auto;
	height: 500px;
	padding: 25rpx;
	width: 600px;
	display: flex;
	justify-content: center;
}
</style>