yizhizan-h5/pages/public/loginphone.vue

<template>
	<view class="container">
		<view class="wrapper">
			<nav-bar title="注册登录" color="#000"></nav-bar>

			<!-- <view style="text-align: center;">
				<image src="../../static/logo.png" style="border-radius: 64upx;"></image>
			</view>
 -->
			<view class="input-content">
				<view class="item-label">手机号码</view>
				<view class="cu-form-group">
					<view class="input-box">
						<input type="number" :value="phone" placeholder="请输入登录的手机号码" maxlength="11" data-key="phone"
							@input="inputChange" />
					</view>
				</view>
				<view class="item-label">{{type == 1?'登录密码':'验证码'}}</view>
				<view class="cu-form-group" v-if="type == 1">
					<input placeholder="请输入密码" maxlength="20" :value="password" :password="showPassword"
						data-key="password" @input="inputChange" @confirm="toLogin" />
					<u-icon @click="changePassword" class="eye" :class="{ 'eye-active': !showPassword }"
						name="eye-fill"></u-icon>
				</view>
				<view class="cu-form-group" v-if="type == 2">
					<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
						@input="inputChange" @confirm="toLogin" />
					<text class="send-msg" @click="sendMsg" :disabled="sending">
						{{ sendTime }}
					</text>
				</view>

				<view class="forgot-password" v-if="type ==1">
					<view @click="forget">忘记密码</view>
				</view>
				<button class="confirm-btn" @click="toLogin">下一步</button>

				<!-- view style="margin-top: 32rpx; text-align: center">
					<view>
						<text class="register-section" @click="register()">注册</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				code: "",
				phone: "",
				password: "",
				showPassword: true,
				banners: [],
				invitation: "",
				loginName: "",
				sending: false,
				sendTime: "获取验证码",
				count: 60,
				type: 0,
				scene: 0, // 0 默认，1 H5邀请
				inviteCode: '', // 邀请码
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			console.log(options);
			this.type = options.type;
			if (options.scene) {
				this.scene = options.scene
			}
			if (options.inviteCode) {
				this.inviteCode = options.inviteCode
			}
		},
		methods: {
			forget() {
				uni.navigateTo({
					url: "/pages/public/forgetPwd",
				});
			},
			// register() {
			// 	uni.navigateTo({
			// 		url: "/pages/public/register",
			// 	});
			// },
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			sendMsg() {
				const {
					phone
				} = this;
				if (!phone) {
					this.$queue.showToast("请输入手机号");
				} else if (phone.length !== 11) {
					this.$queue.showToast("请输入正确的手机号");
				} else if(this.sendTime != '获取验证码'){
					return;
				}else {
					this.$queue.showLoading("正在发送验证码...");
					this.$Request.getT("/app/Login/sendMsg/" + phone + "/bind").then((res) => {
						if (res.code === 0) {
							this.sending = true;
							this.$queue.showToast("验证码发送成功请注意查收");
							this.countDown();
							uni.hideLoading();
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: "短信发送失败",
								content: res.msg ? res.msg : "请一分钟后再获取验证码",
							});
						}
					});
				}
			},
			countDown() {
				  const { count } = this;
				  if (count === 1) {
				    this.count = 60;
				    this.sending = false;
				    this.sendTime = "获取验证码";
				  } else {
				    this.count = count - 1;
				    this.sending = true;
				    this.sendTime = count - 1 + "秒后重新获取";
				    setTimeout(this.countDown.bind(this), 1000);
				  }
			},
			toLogin() {
				this.$queue.loginClear();
				const {
					phone,
					password,
					code
				} = this;
				if (!password && this.type == 1) {
					this.$queue.showToast("请输入密码");
					return;
				}
				if (!code && this.type == 2) {
					this.$queue.showToast("请输入验证码");
					return;
				}
				if (!phone) {
					this.$queue.showToast("请输入手机号");
				} else if (phone.length != 11) {
					this.$queue.showToast("请输入正确的手机号");
				} else {
					this.$queue.showLoading("正在登录中...");
					let params = {
						phone: phone,
						wxOpenId: this.$queue.getData("openId") || '',
					}
					let url = ''
					if (this.type == 1) {
						params = {
							...params,
							password: password,
						}
						url = '/app/Login/loginApp'
					}
					if (this.type == 2) {
						params = {
							...params,
							msg: code,
							inviterCode: this.inviteCode
						}
						// url = '/app/Login/registerCode'
						url = '/app/Login/registerAndLogin'
					}
					// #ifdef H5
						params.platform = 'H5'
					// #endif
					this.$Request
						.post(url, params)
						.then((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();
								uni.hideLoading();
								this.$queue.setData("userType", res.user.userType);
								this.$queue.connectSocket()
								
								// 手机验证码&H5邀请
								if (this.type == 2 && this.scene == 1) {
									// 跳转至基本信息页面
									uni.redirectTo({
										url: `/package/jobIntention/basicInfo?scene=${this.scene}`
									});
								} else {
									//判断是否开启身份选择 是/否
									this.$Request.get("/app/common/type/339").then((rest) => {
										if (rest.code == 0) {
											if (rest.data.value == "是") {
												// 这里是跳转到选择职场身份的界面
												uni.reLaunch({
													url: "/pages/public/selectIdentity/selectIdentity",
												});
											} else {
												if (res.user.userType == 2) { //企业
													// 原有的。判断第一次根据userType  ==null
													uni.reLaunch({
														url: "/pages/my/index",
													});
													// 这里判断一下看是否是第一次登录如果是就跳到引导页，如果不是就正常跳
													// let firstLogin = uni.getStorageSync("firstLogin") || false;
													// if (!firstLogin) {
													//   uni.navigateTo({
													//     url: "/pages/my/jobApplicant/guidePage",
													//   });
													// } else {
													//   uni.reLaunch({
													//     url: "/pages/my/index",
													//   });
													// }
												} else if (res.user.userType == 1) {
													uni.reLaunch({
														url: "/pages/my/index",
													});
													// 这里判断一下看是否是第一次登录如果是就跳到引导页，如果不是就正常跳
													// let firstLogin = uni.getStorageSync("firstLogin") || false;
													// if (!firstLogin) {
													//   uni.navigateTo({
													//     url: "/pages/my/jobApplicant/guidePage",
													//   });
													// } else {
													//   uni.reLaunch({
													//     url: "/pages/my/index",
													//   });
													// }
												} else {
													uni.navigateTo({
														url: "/package/jobIntention/basicInfo",
													});
												}
											}
										} else {

											if (res.user.userType == 2) { //企业
												// 原有的。判断第一次根据userType  ==null
												uni.reLaunch({
													url: "/pages/my/index",
												});

											} else if (res.user.userType == 1) {
												uni.reLaunch({
													url: "/pages/my/index",
												});

											} else {
												//表示是第一次进来，走引导页
												uni.navigateTo({
													url: "/pages/my/jobApplicant/guidePage",
												});
											}
										}
									});

									// uni.switchTab({
									// 	url: '/pages/my/index'
									// })
								}
							} else {
								uni.hideLoading();
								this.$queue.showToast(res.msg);
							}
						}).catch((err) => {
							uni.hideLoading();
							console.log('错误信息',err)
							console.error("微信登录接口异常：", err);
						});
				}
			},
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then((res) => {
					if (res.code == 0) {
						// this.isVip = res.data
						console.log(res.data);
						this.$queue.setData("isVip", res.data);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .input-placeholder {
		color: #9ea1a8;
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
	}


	page {
		height: 100%;
		background: #fff;
	}


	.send-msg {
		color: rgba(1, 107, 246, 1);
		font-size: 28rpx;
		font-weight: 400;
	}


	.forgot-password {
		text-align: left;
		margin-top: 8rpx;
		color: rgba(102, 112, 133, 1);
		font-family: Inter;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.item-label {
		color: rgba(18, 26, 44, 1);
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 51.2rpx;
		letter-spacing: 0px;
		text-align: left;
		padding-bottom: 8rpx;
		margin-top: 32rpx;
	}

	.cu-form-group {
		position: relative;
		box-sizing: border-box;
		border: 2rpx solid rgba(158, 161, 168, 1);
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		padding: 8rpx 24rpx !important;
		height: 96rpx;
	}

	.eye {
		position: absolute;
		top: 50%;
		right: 24rpx;
		font-size: 48rpx;
		transform: translateY(-50%);
	}

	.eye-active {
		color: #016bf6;
	}

	.bg {
		background-color: #ffffff;
	}

	// .send-msg {
	// 	border-radius: 30px;
	// 	color: black;
	// 	background: white;
	// 	height: 30px;
	// 	font-size: 14px;
	// 	line-height: 30px;
	// }

	.container {
		top: 0;
		padding-top: 32upx;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff !important;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #ffffff;
		padding-bottom: 32upx;
	}

	.input-content {
		padding: 32rpx;
		box-sizing: border-box;
	}

	.confirm-btn {
		border-radius: 60rpx;
		margin-top: 32rpx;
		background: #016bf6;
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;

		&:after {
			border-radius: 60px;
		}
	}

	.register-section {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #016bf6;
		font-family: Inter;
		font-size: 12px;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0%;
		text-align: right;
		text-decoration-line: underline;
	}
	.input-box{
		width: 100%;
	}
</style>