officialAccount/pages/login/index.vue

<template>
	<view class="login-container">
		<image class="title-imge" src="https://www.focusnu.com/media/directive/login/icon.png" />
		<image class="photo-imge" src="https://www.focusnu.com/media/directive/login/bgc.png" />
		<view class="under-container">

			<view class="button-blue" @click="loginIt">
				一键登录
			</view>
			<view class="under-container-title">
				<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
				<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">同意护理单元</view>
				<view class="radio-circle-blue" @click="jumpToPro">
					《使用条款》
				</view>
				<view class="radio-circle-font" @click="isTarget = !isTarget">并授权NU获取本机号码</view>
			</view>

		</view>
		<!-- 遮罩 -->
		<transition name="fade">
			<view v-if="isFadingOut" class="overlay" @click="closeModal" :style="{ backgroundColor: maskColor }" />
		</transition>

		<!-- 底部弹窗 -->
		<transition name="slide-up">
			<view v-if="isFadingOut" class="modal">
				<view class="modal-title">服务协议及隐私保护</view>
				<view class="model-p">
					<text>&#x3000;&#x3000;为了更好地保障您的合法权益，请阅读并同意以下协议</text>
					<text style="color: rgb(0,141,255);" @click="jumpToPro">《护理单元使用条款》</text>
					<text>，同意后将自动登录。</text>
				</view>
				<view class="model-down">
					<view class="model-white" @click="closeModal">
						不同意
					</view>
					<view class="model-blue" @click="closeModal();isTarget=true">
						同意
					</view>
				</view>
			</view>
		</transition>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getOpenid,
		getMessage
	} from '@/api/loginApi.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const isTarget = ref(false);
	const isFadingOut = ref(false);

	// 遮罩色，rgba 可调透明度
	const maskColor = ref('rgba(0, 0, 0, 0.5)')

	function closeModal() {
		isFadingOut.value = false
	}
	



	const getCode = () => {
		uni.login({
			provider: 'weixin',
			success(res) {
				getOpenid(res.code).then(res => {
					let openid = res.data.openid
					uni.setStorageSync("openid", openid)
					getMessage(openid).then(res => {
						// uni.navigateTo({
						// 	url: `/pages/login/phonebumber`
						// });
						if(!res.result.tel){
							uni.redirectTo({
								url: `/pages/login/phonebumber`
							});
						}else{
							uni.setStorageSync('tel', res.result.tel);
							uni.setStorageSync('token', res.result.token);
							uni.setStorageSync('serverUrl', res.result.serverUrl);
							uni.redirectTo({
								url: `/pages/login/threeselectone`
							});
							// if(uni.getStorageSync('special')){
							// 	uni.setStorageSync('tel', res.result.tel);
							// 	uni.setStorageSync('token', res.result.token);
							// 	uni.setStorageSync('serverUrl', res.result.serverUrl);
							// 	uni.redirectTo({
							// 		url: `/pages/login/threeselectone`
							// 	});
							// }else{
							// 	uni.setStorageSync('tel', res.result.tel);
							// 	uni.setStorageSync('token', res.result.token);
							// 	uni.setStorageSync('serverUrl', res.result.serverUrl);
							// 	uni.redirectTo({
							// 		url: `/pages/login/threeselectone`
							// 	});
							// }
						}
					})
				})
			},
			fail(err) {
				console.error('获取 code 失败：', err);
			}
		});
	}

	const loginIt = () => {
		if (!isTarget.value) {
			isFadingOut.value = true;
		} else {
			getCode()
		}
	};
	const jumpToPro = () => {
		uni.navigateTo({
			url: "/pages/login/protocol"
		});
	}
	onLoad((options)=>{
		superLogin()
		// if(options.type){
		// 	uni.setStorageSync('special', true);
		// }else{
		// 	uni.setStorageSync('special', 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-imge {
			width: 150rpx;
			height: 210rpx;
			margin: 0 auto;
			margin-top: 500rpx;
		}

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

		.under-container {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 20vh;
			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: 10rpx;
		margin-bottom: 40rpx;
		align-items: center;
		font-size: 23rpx;
		font-weight: 500;

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

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

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

	/* 遮罩 */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
	}

	/* 弹窗 */
	.modal {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.modal-title {
			font-size: 32rpx;
			font-weight: 700;
			margin: 50rpx 0;
		}

		.model-p {
			padding: 0 50rpx;
			width: 100%;
			font-size: 30rpx;
		}

		.model-down {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 0 50rpx;
			margin-top: 40rpx;

			.model-white {
				border-radius: 50rpx;
				width: 300rpx;
				height: 95rpx;
				border: 5rpx solid rgb(0, 141, 255);
				color: rgb(0, 141, 255);
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.model-blue {
				border-radius: 50rpx;
				width: 300rpx;
				height: 95rpx;
				background: linear-gradient(to right, #00C9FF, #0076FF);
				color: #fff;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	/* 动画：遮罩淡入淡出 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.fade-enter-to,
	.fade-leave-from {
		opacity: 1;
	}

	/* 动画：弹窗上滑 */
	.slide-up-enter-active,
	.slide-up-leave-active {
		transition: transform 0.3s;
	}

	.slide-up-enter-from,
	.slide-up-leave-to {
		transform: translateY(100%);
	}

	.slide-up-enter-to,
	.slide-up-leave-from {
		transform: translateY(0);
	}
</style>