officialAccount/pages/login/phonebumber.vue

<template>
	<view class="login-container">
		<view class="title">
			<image class="title-imge" src="/static/index/nu.png" />
			<view class="title-font">
				<view class="">您好，</view>
				<view class="">欢迎使用护理单元~</view>
			</view>
		</view>
		<image class="photo-imge" src="/static/index/bgc.png" />
		<image class="old-imge" src="/static/index/old.png" />
		<view class="under-container">
			<view class="under-container-title">
				<view class="under-container-input">
					<view class="input-left">+86</view>
					<input type="number" style="width: 600rpx;font-size: 33rpx;" maxlength="11" placeholder="请输入绑定手机号"
						@input="isRight" />
				</view>
			</view>
			<view class="button-blue" @click="huakuaiOpen = true">
				滑块校验
			</view>
			<view class="button-blue" v-show="canClick" @click="jumpto">
				获得验证码
			</view>
			<view class="button-gray" v-show="!canClick">
				获得验证码
			</view>
		</view>
		<view class="bg-mask" v-if="huakuaiOpen" @click="huakuaiOpen=false" >
			<huakuai @click.stop />
		</view>


	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import huakuai from "@/compontent/public/huakuai.vue"

	const huakuaiOpen = ref(false);

	const jumpto = () => {
		uni.navigateTo({
			url: `/pages/login/code?phonenumber=${phonenumber.value}`
		});
	}
	//检测是不是11位手机号
	function is11DigitNumber(value) {
		return /^\d{11}$/.test(value.toString());
	}
	const phonenumber = ref("");
	const canClick = ref(false);
	const isRight = (res) => {
		console.log("????", res.detail.value)
		if (is11DigitNumber(res.detail.value)) {
			phonenumber.value = res.detail.value
			canClick.value = true;
		} else {
			canClick.value = false;
		}

	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

		.title {
			margin-top: 70rpx;
			align-items: center;

			.title-imge {
				width: 100rpx;
				height: 105rpx;
				margin-left: 100rpx;
			}

			.title-font {
				font-size: 35rpx;
				font-weight: 600;
				margin-left: 105rpx;
				margin-top: 10rpx;
			}
		}

		.photo-imge {
			position: absolute;
			top: 120rpx;
			left: 0;
			width: 100%;
			height: 1100rpx;
		}

		.old-imge {
			position: absolute;
			right: 30rpx;
			top: 400rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.under-container {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 45vh;
			background-color: #fff;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;

			.radio-circle {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 30rpx;
				height: 30rpx;
				background-color: #00C9FF;
				border-radius: 50%;
			}
		}
	}

	.under-container-title {
		display: flex;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		font-weight: 500;
		width: 100%;

		.radio-circle-blue {
			color: #0083FF;
			margin-top: 3rpx;
		}

		.radio-circle-font {
			color: #5A607F;
			margin-left: 18rpx;
			margin-top: 3rpx;
		}

		.under-container-input {
			width: 80%;
			display: flex;
			align-items: center;
			height: 100rpx;
			border-radius: 43rpx;
			color: #5A607F;
			font-size: 33rpx;
			border: 2rpx solid #C0C5D9;

			.input-left {
				margin: 0 30rpx;
			}
		}
	}

	.button-gray {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		background-color: rgb(188, 188, 188);
		color: #fff;
		font-size: 33rpx;
		margin-bottom: 30rpx;
	}

	.button-white {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		color: #5A607F;
		font-size: 33rpx;
		margin-bottom: 30rpx;
		border: 2rpx solid #C0C5D9;
	}

	.button-blue {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
		margin-bottom: 30rpx;
	}

	.bubble {
		transition: opacity 1s ease-out;
		position: absolute;
		left: 25rpx;
		top: -5rpx;
		background-color: black;
		color: white;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 23rpx;
		box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.2);
		pointer-events: none;
		opacity: 1;
		/* 初始为可见 */
	}

	.bubble::after {
		transition: opacity 1s ease-out;
		content: '';
		position: absolute;
		left: 50%;
		bottom: -8rpx;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid black;
		transform: translateX(-50%);
	}

	/* 隐藏气泡 */
	.bubble.hidden {
		opacity: 0;
	}

	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5rpx);
		z-index: 998;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>