su_nan-mobile_h5/src/pages/login-app.vue

<template>
	<div class="login">
		<div class="login-form">
			<div class="title">密码登录</div>

			<div class="form-input">
				<van-field
				 class="input-item"
				 readonly
				 clickable
				 input-align="right"
				 name="datetimePicker"
				 v-model="userTypeName"
				 label="用户类型"
				 placeholder="请选择用户类型"
				 @click="showPicker = true"
				/>
				<van-popup v-model="showPicker" position="bottom">
					<van-picker
					 confirm-button-text="确认"
					 cancel-button-text="取消"
					 title="用户类型"
					 show-toolbar
					 default-index="100"
					 :columns="userTypes"
					 @confirm="(value) => onConfirm(value)"
					 @cancel="showPicker = false"
					/>
				</van-popup>
			</div>
			<div v-if="userType == '1'">
				<div class="form-input">
					<input type="text" placeholder="请输入用户名" v-model="account"/>
				</div>
				<div class="form-input">
					<input type="password" placeholder="请输入密码" v-model="password"/>
					<p class="right" @click="bizPass">忘记密码</p>
				</div>
			</div>
			<div v-if="userType == '2'">
				<div class="form-input">
					<p class="left">
						<span> +86 </span>
						<span>
              <i class="iconfont icon-zuo"></i>
            </span>
					</p>
					<input type="text" placeholder="请输入手机号" v-model="account"/>
				</div>
				<div class="form-input">
					<input type="password" placeholder="请输入密码" v-model="password"/>
					<p class="right" @click="$router.push({path:'/forgetPassword',query:{type:'1'}})">忘记密码</p>
				</div>
			</div>
		</div>

		<div class="login-button">
			<p>
				<button class="but-type1" type="info" @click="loginMain">登录</button>
			</p>
			<p v-if="userType == '2'">
				<button class="but-type2" @click="userRegister()">去注册</button>
			</p>
		</div>

		<div class="foot-pact" v-show="isOriginHei">
			<div class="check">
				<van-checkbox
				 checked-color="#2A3980"
				 v-model="checked"
				></van-checkbox>
			</div>
			<div class="text1">已阅读并同意</div>
			<div class="text2" @click="$router.push('/term')">《服务协议条款及隐私条款》</div>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex'
import { login } from '../service/api_user.js'
import { Toast } from 'vant'
import auth from '@/service/auth'

export default {
	data() {
		return {
			checked: false,
			showPicker: false,
			userType: '2',
			userTypeName: '个人用户',
			userTypes: [
				{
					text: '企业用户',
					value: '1'
				},
				{
					text: '个人用户',
					value: '2'
				}
			],
			account: '',
			password: '',
			isOriginHei: true,
			screenHeight: document.documentElement.clientHeight, // 此处也可能是其他获取方法
			originHeight: document.documentElement.clientHeight
		}
	},
	mounted() {
		console.log('_this.$router_:', this.$router)
		const self = this
		window.onresize = function() {
			return (function() {
				self.screenHeight = document.documentElement.clientHeight
			})()
		}
		if (window.history && window.history.pushState && window.history.state.url != document.URL) {
			var state = { title: 'title', url: document.URL }
			window.history.pushState(state, 'title', '#')

			// history.pushState(null, null, document.URL)
			// window.addEventListener('popstate', this.goBack, false)
		}
	},
	destroyed() {
		// window.removeEventListener('popstate', this.goBack, false)
	},
	watch: {
		screenHeight(val) {
			if (this.originHeight > val + 100) {
				// 加100为了兼容华为的返回键
				this.isOriginHei = false
			} else {
				if (this.userType == '1') {
					this.isOriginHei = false
				} else {
					this.isOriginHei = true
				}
			}
		}
	},
	methods: {
		...mapActions({ login: 'user/login' }),
		loginMain() {
			const _this = this
			if (!this.account || !this.password) {
				Toast('请填写账号和密码')
				return false
			}
			if (this.userType == '2' && this.checked === false) {
				Toast('请阅读并同意服务协议条款及隐私条款')
				return false
			}

			this.$auth.setUserType(this.$auth.TYPE_USER)

			login({
				userType: this.userType,
				userName: this.account,
				password: this.password,
				code: '',
				type: this.$auth.TYPE_USER
			}).then((res) => {
				if (res.errno === 0 && res.data) {
					_this.login(res.data)
					_this.$router.push({ path: '/home-app' })
					if (window.history && window.history.length > 1) {
						// window.history.back()
						// window.history.back()
					} else {
						// _this.$router.push({ path: '/home' })
					}
				} else {
					Toast(res.errmsg)
				}
			})
		},
		goBack() {
			// console.log("点击了浏览器的返回按钮");
			// history.pushState(null, null, document.URL)
		},
		userRegister() {
			// wx.miniProgram.navigateTo({ url: '/pages/userInfo/user' })
			this.$router.replace('/register')
		},
		onConfirm(value) {
			this.userType = value.value
			this.userTypeName = value.text
			this.showPicker = false
			if (this.userType == '1') {
				this.isOriginHei = false
			} else {
				this.isOriginHei = true
			}
		},
		bizPass() {
			Toast('请联系园区管理员')
		}
	}
}
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100vh;
	background: #fff;
	overflow: hidden;
	background-size: 100% 100%;
	padding: 150px 40px 40px;
	box-sizing: border-box;

	.login-form {
		.title {
			font-size: 32px;
			color: $text1;
			font-weight: 700;
			margin-bottom: 120px;
		}

		.form-input {
			margin-top: 20px;
			border-bottom: 1px solid #f2f2f2;
			padding: 0 30px;
			@include fj;

			.left {
				@include fj;
				width: 140px;
				font-size: 28px;
				color: $text3;
				align-items: center;

				span {
					flex: 1;
					text-align: center;

					i {
						font-size: 28px;
						color: $color1;
					}
				}
			}

			.right {
				padding-left: 40px;
				font-size: 24px;
				color: $text1;
				line-height: 80px;
			}

			input {
				flex: 1;
				font-size: 24px;
				color: $text1;
				line-height: 80px;
			}

			input::-webkit-input-placeholder {
				color: $text2;
			}
		}
	}

	.login-button {
		margin-top: 230px;
		width: 100%;

		p {
			margin: 20px 0;
		}
	}

	.foot-pact {
		position: absolute;
		bottom: 30px;
		padding: 0 85px;
		@include fj;

		.check {
			margin-right: 10px;

			/deep/ .van-icon {
				font-size: 30px;
			}
		}

		.text1 {
			font-size: 20px;
			color: $text3;
			line-height: 45px;
		}

		.text2 {
			font-size: 20px;
			color: $main;
			line-height: 45px;
		}
	}
}
</style>