phone-login.nvue

<template>
	<view class="flex flex-column flex-1 w-750 bg-white">
		<view class="flex-1 flex flex-column justify-start align-center">
			<view class="w-630 flex flex-column">
				<!-- 顶部文字 -->
				<text class="font-32 font-blod pt-5">登陆后即可展示自己</text>
				<login-ikonw class="lgnin-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>

				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
				<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
					<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
						<text class="px-2 font-30">{{currenPhoneArea}}</text>
					</picker>
					<input type="number" class="flex-1 phone-input px-2 font-30" placeholder="请输入手机号"
						v-model="phoneNumber" />
				</view>

				<!-- tip -->
				<text class="text-sub font-26 tip-text">未注册的手机号验证通过后蒋自动注册</text>

				<!-- 发送按钮 -->
				<view class="send-btn-box flex w-630 justify-center align-center round" hover-class="hover"
					@click="sendShortMsg" :class="canGetShortMsg?'send-btn-active':''">
					<text class="text-white">获取短信验证码</text>
				</view>

				<!-- 其他登录方式 -->
				<view class="w-630 flex flex-row align-center justify-between">
					<text class="font-26 login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
					<text class="font-26 login-text" hover-class="hover" @click="openLoginList">其他登录方式</text>
				</view>
			</view>
		</view>
		<!-- 登录按钮弹窗 -->
		<login-action-sheet ref="loginActionSheet"></login-action-sheet>
		<uni-quick-login></uni-quick-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				link: [{
					text: '用户协议',
					to: '/baidu.com'
				}, {
					text: '隐私政策',
					to: 'baidu'
				}],
				phoneArea: ['+86', '+87'],
				currenPhoneArea: '+86',
				phoneNumber: ''
			}
		},
		computed: {
			canGetShortMsg() {
				let reg = /^1\d{10}$/;
				return reg.test(this.phoneNumber);
			}
		},
		methods: {
			selectPhoneArea(event) {
				this.currenPhoneArea = this.phoneArea[event.detail.value];
			},
			sendShortMsg() {
				if (!this.canGetShortMsg) return;
				/**
				 * 发送验证吗
				 */
			},
			/**
			 * 去密码登录页
			 */
			toPwdLogin() {
				uni.navigateTo({
					url: './pwd-login'
				})
			},
			openLoginList() {
				this.$refs.loginActionSheet.open();
			}
		}
	}
</script>

<style>
	@import url("../../common/myStyle.css");

	.lgnin-iknow {
		padding-top: 24rpx;
		padding-bottom: 48rpx;
	}

	.phone-input-box {
		height: 85rpx;
		background-color: #f9f9f9;
	}

	.phone-input {
		border-left-width: 1px;
		border-left-color: #d7d9d8;
	}

	.tip-text {
		padding-top: 20rpx;
		padding-bottom: 36rpx;
	}

	.send-btn-box {
		height: 85rpx;
		background-color: #d8d8da;
		margin-bottom: 50rpx;
	}

	.send-btn-active {
		background-color: #007aff;
	}

	.login-text {
		color: #1c436e;
	}
</style>