yizhizan-h5/pages/public/phoneLoginOrRegister.vue

<template>
	<view class="login-container">
		<view>
			<view class="title-wrapper">
				<view class="title">手机号登录/注册</view>
				<view class="sub-title">未注册的手机号将自动完成账号注册</view>
			</view>
			
			<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="protocol-wrapper flex">
				<view class="protocol-icon" @click="checked = !checked">
					<image src="@/static/images/jobApplicant/check.svg" v-if="checked" mode="scaleToFill" class="icon" />
					<image src="@/static/images/jobApplicant/border.svg" v-else mode="scaleToFill" class="icon" />
				</view>
				<view class="protocol-content">
					已阅读并同意<navigator url="/my/setting/xieyi" class="link">《亿职赞用户协议》</navigator>
					和<navigator url="/my/setting/mimi" class="link">《隐私协议》</navigator>，允许亿职赞统一管理本人账号信息					
				</view>
			</view>
			
			<view class="button" :class="{ active: checked }" @click="handleSubmit">下一步</view>			
		</view>
		
		<view class="infos flex align-center justify-between">
			<view class="info-button" 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 } from '@/utils/jVerificationLogin'
	import { login } from '@/utils/login'
	
	export default {
		data() {
			return {
				countryCode: '+86',
				phoneNum: '',
				checked: false,
				show: false,
				infos: [
					{
						type: 1,
						name: '企业套餐咨询',
					},
					{
						type: 2,
						name: '投诉举报',
					},
					{
						type: 3,
						name: '资质信息',
					},
				],
				currentType: 1,
				loading: false
			};
		},
		onLoad(options) {
			if (options.init) {
				jVerificationLogin((res) => {
					login(res)
				})
			}
		},
		methods: {
			showPopup(type) {
				this.currentType = type
				this.show = true
			},
			handleSubmit() {
				if (!this.checked || this.loading) {
					return
				}
				if (!this.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				uni.showLoading({
					title: '正在发送验证码'
				})
				this.$Request
					.getT('/app/Login/sendMsg/' + this.phoneNum + '/bind')
					.then((res) => {
						if (res.code === 0) {
							uni.navigateTo({
								url: `/pages/public/verify?phoneNum=${this.phoneNum}&countryCode=${encodeURIComponent(this.countryCode)}`
							})
						} else {
							uni.showModal({
								showCancel: false,
								title: '短信发送失败',
								content: res.msg ? res.msg : '请一分钟后再获取验证码',
							});
						}
					})
					.finally(() => {
						this.loading = false
						uni.hideLoading();
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		padding: 0 40rpx;
		
		.title-wrapper {
			padding-top: 132rpx;
			.title {
				font-size: 40rpx;
				font-weight: 700;
				line-height: 52rpx;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 12rpx;
			}
			.sub-title {
				font-size: 28rpx;
				line-height: 36rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		
		.input-wrapper {
			margin-top: 120rpx;
			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);
			}
		}
		
		.protocol-wrapper {
			margin-top: 40rpx;
			.protocol-icon {
				width: 24rpx;
				margin-right: 16rpx;
				.icon {
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.protocol-content {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				line-height: 28rpx;
				color: rgba(96, 93, 103, 1);
				.link {
					color: #016BF6;
				}
			}
		}
		
		.button {
			width: 600rpx;
			height: 88rpx;
			text-align: center;
			color: #fff;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 100rpx;
			background: rgba(0, 0, 0, 0.08);
			margin: 40rpx auto;
			&.active {
				background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
			}
		}
		
		.infos {
			width: 400rpx;
			margin: 0 auto 100rpx;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			line-height: 28rpx;
		}
		
		.popup-content {
			padding: 40rpx;
		}
	}
</style>