yizhizan-h5/pages/public/loginV2.vue

<template>
	<view class="container" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
		<view class="main-container" v-if="!initing">
			<image src="/static/images/logo-long.png" class="logo"></image>
			<image src="/static/images/invite.png" class="main-img"></image>
			<view class="input-container">
				<view class="input-wrapper flex align-center">
					<text class="country-code">{{ countryCode }}</text>
					<u-icon name="arrow-down" color="rgba(216, 216, 216, 1)"></u-icon>
					<text class="border">|</text>
					<input v-model="phoneNum" class="input" type="number" placeholder="请输入手机号" maxlength="11" placeholder-class="placeholder" />
				</view>
				<view class="input-wrapper flex align-center justify-between">
					<input v-model="verifyCode" type="number" placeholder="请输入验证码" maxlength="6" placeholder-class="placeholder" />
					<view class="verify-code" @click="getVerifyCode">{{ disabled ? `${countdown}s` : '获取验证码' }}</view>
				</view>
			</view>
			<view class="agreement">
				<view class="check-box" @click="checked = !checked">
					<image src="@/static/images/jobApplicant/check.svg" v-if="checked" mode="scaleToFill" />
					<image src="@/static/images/jobApplicant/border.svg" v-else mode="scaleToFill" />
				</view>
				<view class="content">
					已阅读并同意<navigator url="/my/setting/xieyi">《亿职赞用户协议》</navigator>
					和<navigator url="/my/setting/mimi">《隐私协议》</navigator>，允许亿职赞统一管理本人账号信息					
				</view>
			</view>
			<view class="login-btn" @click="handleLogin">注册登录</view>
			<!-- #ifdef APP-PLUS -->
			<view class="other-login">
				<view class="other-type" @click="handleWxLogin">
					<image src="/static/wechat.png" class="icon"></image>
					<view class="text">微信登录</view>
				</view>
				<view class="other-type" @click="handlOneKeyLogin">
					<image src="/static/phone.png" class="icon"></image>
					<view class="text">一键登录</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- <view class="footer">
			<view class="link" v-for="item in infos" :key="item.type" @click="showPopup(item.type)">{{ item.name }}</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="popup-content">
				<view v-if="currentType == 1">企业套餐咨询</view>
				<view v-if="currentType == 2">投诉举报</view>
				<view v-if="currentType == 3">资质信息</view>				
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import { jVerificationLogin, closeVerifyView } from '@/utils/jVerificationLogin'
	export default {
		data() {
			return {
				initing: true, // 初始化中
				statusBarHeight: 0,
				checked: false,
				countryCode: '+86',
				phoneNum: '',
				verifyCode: '',
				countdown: 60,
				timer: null,
				disabled: false,
				loading: false,
				isFirst: false,
				// show: false,
				// currentType: 1,
				// infos: [
				// 	{
				// 		type: 1,
				// 		name: '企业套餐咨询',
				// 	},
				// 	{
				// 		type: 2,
				// 		name: '投诉举报',
				// 	},
				// 	{
				// 		type: 3,
				// 		name: '资质信息',
				// 	},
				// ],
			}
		},
		onLoad(options) {
			// #ifdef H5
			this.initing = false
			// #endif
			// #ifdef APP-PLUS
			this.checkLoginStatus()
			// #endif
			
			// 判断是否是第一次
			if (options.isFirst) {
				this.isFirst = true
			}
			
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		methods: {
			// 获取验证码
			getVerifyCode() {
				if (!this.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (this.disabled || this.loading) return
				uni.showLoading({
					title: '正在发送验证码'
				})
				this.loading = true
				this.$Request
					.getT('/app/Login/sendMsg/' + this.phoneNum + '/bind')
					.then((res) => {
						if (res.code === 0) {
							this.startCountdown()
						} else {
							uni.showModal({
								showCancel: false,
								title: '短信发送失败',
								content: res.msg ? res.msg : '请一分钟后再获取验证码',
							});
						}
					})
					.finally(() => {
						this.loading = false
						uni.hideLoading();
					})
			},
			startCountdown() {
				this.disabled = true
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
					    this.clearCountdownTimer()
					    this.countdown = 60
					    this.disabled = false
					}
				}, 1000)
			},
			clearCountdownTimer() {
			    if (this.timer) {
					clearInterval(this.timer)
					this.timer = null // 重置定时器实例
				}
			},
			// showPopup(type) {
			// 	this.currentType = type
			// 	this.show = true
			// },
			// 登录
			handleLogin() {
				if (!this.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!this.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return
				}
				
				// 避免出现多个loading
				uni.hideLoading()
				uni.showLoading({
					title: '登录中'
				})
				let platform = 'app'
				// #ifdef H5
					platform = 'h5'
				// #endif
				this.$Request
					.post('/app/Login/registerAndLogin', {
						phone: this.phoneNum,
						msg: this.verifyCode,
						platform
					})
					.then((res) => {
						this.loginFinished(res)
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			// 微信登录
			handleWxLogin() {
				uni.showLoading({
					title: '登录中'
				})
				uni.login({
					provider: 'weixin',
					success: (wxRes) => {
						this.$queue.setData('openId', wxRes.authResult.openid)
						this.$queue.setData('unionId', wxRes.authResult.unionId)
						let data = {
							wxOpenId: loginRes.authResult.openid,
							token: loginRes.authResult.access_token
						}
						this.$Request
							.postT('/app/Login/wxAppLogin', data)
							.then(res => {
								this.loginFinished(res)
							})
							.catch(() => {
								this.$queue.showToast('登录失败，请稍后重试或更换其他登录方式')
								uni.hideLoading()
							})
					},
					fail: () => {
						this.$queue.showToast('登录失败，请稍后重试或更换其他登录方式')
						uni.hideLoading()
					}
				})
			},
			// 一键登录
			handlOneKeyLogin() {
				jVerificationLogin((res) => {
					this.loginFinished(res)
				})
			},
			// 登录处理
			loginFinished(res) {
				if (res.code == 0) {
					this.$queue.setData("userId", res.user.userId)
					this.$queue.setData("token", res.token)
					this.$queue.setData("phone", res.user.phone)
					this.$queue.setData("userName", res.user.userName)
					this.$queue.setData("avatar", res.user.avatar)
					this.$queue.setData("invitationCode", res.user.invitationCode)
					this.$queue.setData("inviterCode", res.user.inviterCode)
					this.getIsVip()
					if (res.user.userType) {
						this.$queue.setData("userType", res.user.userType)
						uni.reLaunch({
							url: '/pages/my/index',
							success: closeVerifyView
						})
					} else if (this.isFirst) {
						// 首次登录，跳转至基本详情页
						uni.reLaunch({
							url: '/package/jobIntention/basicInfo',
							success: closeVerifyView
						})
					} else {
						uni.reLaunch({
							url: '/pages/my/jobApplicant/guidePage',
							success: closeVerifyView
						})
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 获取vip数据
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then((res) => {
					if (res.code == 0) {
						this.$queue.setData("isVip", res.data);
					}
				});
			},
			// 检查更新
			checkLoginStatus() {
				let firstUpload = uni.getStorageSync("firstUpload") || false;
				let token = this.$queue.getData('token')
				let userType = this.$queue.getData('userType')
				let companyStatus = this.$queue.getData('companyStatus')
				if (!firstUpload) {
					// 第一次登录
					// 跳转至引导页
					return
				}
				
				if (
					token &&
					(!userType || (userType == 2 && companyStatus != 2))
				) {
					// 有登录token，但是没有userType，跳转选择角色页面，强制用户选择
					// 有登录token，并且userType为2，但是公司状态没有通过
					// 跳转至选择角色页
					return
				}
				
				if (token && userType) {
					// 跳转至首页
					return
				}
				
				this.initing = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 70rpx;
		.logo {
			display: block;
			width: 204rpx;
			height: 56rpx;
			margin: 72rpx auto 92rpx;
		}
		.main-img {
			display: block;
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto 34rpx;
		}
		.input-container {
			.input-wrapper {
				margin-top: 28rpx;
				box-sizing: border-box;
				border: 1px solid rgba(242, 242, 242, 1);
				border-radius: 12rpx;
				background: rgba(250, 250, 250, 1);
				padding: 24rpx;
				.country-code {
					color: rgba(51, 51, 51, 1);
					margin-right: 24rpx;
				}
				.border {
					margin: 0 24rpx;
					color: rgba(234, 234, 234, 1);
				}
				.input {
					font-size: 28rpx;
				}
				.placeholder {
					color: rgba(153, 153, 153, 1);
				}
				.verify-code {
					color: rgba(1, 107, 246, 1);
					line-height: 36rpx;
				}
			}
		}
		.agreement {
			display: flex;
			align-items: flex-start;
			font-size: 24rpx;
			color: #605d67;
			margin: 52rpx auto 40rpx;
			.check-box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
				
				image {
					width: 24rpx;
					height: 24rpx;
					margin-top: 6rpx;
				}
			}
			.content {
				display: flex;
				flex-wrap: wrap;
				word-wrap: break-word;
				flex: 1;
			}
			navigator {
				color: #016bf6;
			}
		}
		.login-btn {
			width: 600rpx;
			height: 88rpx;
			border-radius: 100px;
			background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%);
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
		.other-login {
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.other-type {
				margin: 0 24rpx;
			}
			.icon {
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto 8rpx;
			}
			.text {
				text-align: center;
				font-size: 24rpx;
				line-height: 32rpx;
				color: rgb(153, 153, 153);
			}
		}
		// .footer {
		// 	display: flex;
		// 	justify-content: center;
		// 	margin-bottom: 40rpx;
		// 	.link {
		// 		font-size: 28rpx;
		// 		color: #999999;
		// 		margin: 0 14rpx;
		// 	}
		// }
		// .popup-content {
		// 	padding: 40rpx;
		// }
	}
</style>