hire-wx-houxuanren/pagesA/tel-login.vue

<template>
	<view class="tel-login">
		<view class="tel-title">
			欢迎登录内核招聘
		</view>
		<view class="input-box u-flex u-row-between">
			<input type="number" class="u-flex-1" placeholder="输入手机号码(新号码自动注册)" v-model="tel">
		</view>
		<view class="input-box u-flex u-row-between">
			<input type="number" class="u-flex-1" placeholder="输入验证码" v-model="code">
			<text class="send" @click="getCode" v-if="!timeEnd && !verificationTime ">获取验证码</text>
			<text class="send" v-else-if="verificationTime">{{verificationTime}}s</text>
			<text class="send" @click="getCode" v-else-if="timeEnd">重新获取验证码</text>
		</view>
		<view class="xieyi-box u-flex u-row-center">
			<u-checkbox-group v-model="xieyi">
				<u-checkbox shape="circle" active-color="#0C66C2"></u-checkbox>
			</u-checkbox-group>
			<view class="u-flex">
				<text class="text1">登录代表您已同意</text>
				<text class="text2" @click.stop="toxieyi(1)">《用户协议》</text>
				<text class="text1">、</text>
				<text class="text2" @click.stop="toxieyi(2)">《隐私协议》</text>
			</view>
		</view>
		<view class="login-btn" @click="toyaoqing">
			登录
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		mobileLogin,
		third_mobile
	} from "../units/inquire.js"
	export default {
		data() {
			return {
				xieyi: false,
				tips: '',
				seconds: 10,
				tel: '',
				code: '',
				verificationTime: '',
				timeEnd: false,
				// getcode:true
				openid: '',
			}
		},
		onLoad(options) {
			if (options.openid) {
				this.openid = options.openid
			}
		},
		methods: {
			toxieyi(type) {
				uni.navigateTo({
					url: "/pagesA/xieyi?type=" + type
				})
			},
			getCode() {
				if (!this.xieyi) {
					this.$u.toast("请勾选协议")
					return
				}
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				//获取验证码接口
				getCode({
					mobile: this.tel,
					event: 'login'
				}).then(res => {
					// this.getcode = false
					if (res.code == 1) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						// this.$refs.uCode.start();
						this.verificationTime = 30
						this.verificationDown()
					} else {
						this.$u.toast(res.msg)
					}
				})
				if (true) {
					// 模拟向后端请求验证码
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//验证码倒计时
			verificationDown() {
				// 设置定时器
				this.timer = setInterval(() => {
					this.verificationTime = this.verificationTime - 1
					if (this.verificationTime < 10) this.verificationTime = '0' + this.verificationTime
					if (this.verificationTime <= 0) {
						// 清除定时器
						clearInterval(this.timer)
						this.timeEnd = true
						this.verificationTime = false
					}
				}, 1000)
			},
			toyaoqing() {
				if (!this.xieyi) {
					this.$u.toast("请勾选协议")
					return
				}
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				if (!this.code) {
					this.$u.toast("请输入验证码")
					return
				}
				uni.showLoading({
					title: '请稍后',
					mask: true
				})
				if (this.openid) {
					third_mobile({
						mobile: this.tel,
						captcha: this.code,
						openid: this.openid
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.$u.toast("登录成功")
							uni.setStorageSync("token", res.data.userinfo.token)
							uni.setStorageSync("user_id", res.data.userinfo.id)
							uni.setStorageSync("is_profile", res.data.userinfo.group_info.is_profile)
							if (res.data.userinfo.group_info.is_profile == 0) {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pagesA/yaoqing"
									})
								}, 800)
							} else {
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/index/index"
									})
								}, 800)
							}
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					mobileLogin({
						mobile: this.tel,
						captcha: this.code,
						is_auth: 1,
						is_agree: 1
					}).then(res => {
						if (res.code == 1) {
							this.$u.toast("登录成功")
							uni.setStorageSync("token", res.data.userinfo.token)
							uni.setStorageSync("user_id", res.data.userinfo.id)
							uni.setStorageSync("is_profile", res.data.userinfo.group_info.is_resume)
							if (res.data.userinfo.group_info.is_resume == 0) {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pagesA/yaoqing"
									})
								}, 800)
							} else {
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/index/index"
									})
								}, 800)
							}
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tel-login {
		padding: 0 52rpx;

		.login-btn {
			line-height: 96rpx;
			background: #0C66C2;
			border-radius: 16rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.xieyi-box {
			padding: 34rpx 0;
			margin-bottom: 84rpx;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #141414;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
			}
		}

		.input-box {
			height: 126rpx;
			border-bottom: 1rpx solid rgba(244, 244, 244, 1);

			input {
				font-size: 32rpx;
			}

			.send {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
			}
		}

		.tel-title {
			padding: 82rpx 0 56rpx 0;
			font-size: 44rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}
	}
</style>