ajy/code/ajyApp/pages/login/login.nvue

<template>
	<view class="login-page">
		<!-- 顶部欢迎语 -->
		<view class="header">
			<text class="hello">HELLO，</text>
			<text class="welcome">欢迎使用研年健康平台</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-area">
			<!-- 手机号输入 -->
			<view class="input-wrapper">
				<image class="input-icon" src="/static/login/phone.png" />
				<input
					class="input-field"
					type="number"
					maxlength="11"
					placeholder="请输入手机号"
					placeholder-class="placeholder-text"
					:value="phone"
					@input="onPhoneInput"
				/>
			</view>

			<!-- 验证码输入 -->
			<view class="input-wrapper">
				<image class="input-icon" src="/static/login/pwd.png" />
				<input
					class="input-field code-input"
					type="number"
					maxlength="6"
					placeholder="请输入验证码"
					placeholder-class="placeholder-text"
					:value="code"
					@input="onCodeInput"
				/>
				<text
					class="code-btn"
					:class="[codeBtnDisabled ? 'code-btn-disabled' : '']"
					@click="onGetCode"
				>{{ countdown > 0 ? countdown + 's后重发' : '获取验证码' }}</text>
			</view>

			<!-- 登录按钮 -->
			<view
				class="login-btn"
				:class="[!canLogin ? 'login-btn-disabled' : '']"
				@click="onLogin"
			>
				<text class="login-btn-text">登录</text>
			</view>
		</view>

		<!-- 其他登录方式 -->
		<view class="other-login">
			<view class="divider">
				<view class="divider-line"></view>
				<text class="divider-text">其他登录方式</text>
				<view class="divider-line"></view>
			</view>

			<view class="third-party-area">
				<!-- 微信登录 -->
				<view class="third-party-btn" @click="onWechatLogin">
					<image class="third-party-icon" src="/static/login/wechat@2x.png" />
				</view>
			</view>

			<!-- Apple 登录 - 仅iOS显示，符合苹果审核规范 -->
			<view class="apple-section" >
				<view class="apple-login-btn" @click="onAppleLogin">
					<image class="apple-icon" src="/static/login/apple@2x.png" />
					<text class="apple-btn-text">通过 Apple 登录</text>
				</view>
			</view>
		</view>

		<!-- 底部协议 -->
		<view class="footer">
			<view class="agreement-row" @click="onToggleAgreement">
				<view class="checkbox" :class="[agreed ? 'checkbox-checked' : '']">
					<text class="checkbox-icon" v-if="agreed">✓</text>
				</view>
				<text class="agreement-text">登录即代表同意</text>
				<text class="agreement-link" @click.stop="onOpenPrivacy">隐私政策</text>
				<text class="agreement-text">和</text>
				<text class="agreement-link" @click.stop="onOpenTerms">用户协议</text>
			</view>
		</view>

		<!-- 隐私政策弹窗 -->
		<customPopup :isShow="isShowDrawer" @closePop="isShowDrawer=false">
			<view class="boxcontent">
				<view class="rich_header">
					<text class="rich_title">服务协议与隐私政策</text>
				</view>
				<scroll-view class="privateContent" scroll-y="true">
					<view class="contentBox">
						<text class="content-text">感谢您信任并使用研年健康平台!我们深知保护个人隐私信息的重要性，请在使用研年健康平台的服务前，认真阅读我们的</text>
						<view class="linebox">
							<text class="link-text" @click="goWebview(1)">《用户协议》</text>
							<text class="content-text">和</text>
							<text class="link-text" @click="goWebview(2)">《隐私政策》</text>
						</view>
						<text class="content-text">，以帮助您了解我们在收集、使用、存储和共享您个人信息的情况以及您享有的相关权利。</text>
						<text class="content-text"> 请您仔细阅读并作出适当的选择:</text>
						<text class="content-text"> 1.《用户协议》的主要内容包括:协议适用范围、服务内容及形式、软件使用及许可、终端责任安全、用户权利与义务、用户行为规范、知识产权声明、用户信息保护。</text>
						<text class="content-text"> 2.关于《隐私政策》，我们特别向您说明:</text>
						<text class="content-text">(1)根据合法、正当、必要的原则，我们会收集实现产品功能所必要的信息，包括:您在注册帐号时所填写的信息(昵称、手机号码);您的日志信息及设备信息、设备型号;当您选择使用部分服务时，我们将在征求您的同意后获取相关权限。</text>
					</view>
				</scroll-view>
				<view class="rich_btn">
					<text class="btn-disagree" @click="onAgree(0)">不同意</text>
					<text class="btn-agree" @click="onAgree(1)">同意</text>
				</view>
			</view>
		</customPopup>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import customPopup from '@/components/customPopup/customPopup.nvue'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		customPopup,
		ayToast
	},
	data() {
		return {
			phone: '',
			code: '',
			countdown: 0,
			agreed: false,
			isIOS: false,
			countdownTimer: null,
			isShowDrawer: false
		}
	},
	computed: {
		isPhoneValid() {
			return /^1[3-9]\d{9}$/.test(this.phone)
		},
		codeBtnDisabled() {
			return this.countdown > 0 || !this.isPhoneValid
		},
		canLogin() {
			return this.isPhoneValid && this.code.length >= 4 && this.agreed
		}
	},
	onLoad() {
		// 判断平台
		const sysInfo = uni.getSystemInfoSync()
		this.isIOS = sysInfo.platform === 'ios'
	},
	onUnload() {
		if (this.countdownTimer) {
			clearInterval(this.countdownTimer)
			this.countdownTimer = null
		}
	},
	methods: {
		onPhoneInput(e) {
			this.phone = e.detail.value
		},
		onCodeInput(e) {
			this.code = e.detail.value
		},
		// 获取验证码
		onGetCode() {
			if (this.codeBtnDisabled) return
			if (!this.isPhoneValid) {
				this.$toastRef.error('请输入正确的手机号')
				return
			}
			// 开始倒计时
			this.countdown = 60
			this.countdownTimer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.countdownTimer)
					this.countdownTimer = null
				}
			}, 1000)
			this.$toastRef.success('验证码已发送')
			// TODO: 调用发送验证码接口
		},
		// 登录
		onLogin() {
			if (!this.agreed) {
				this.$toastRef.error('请先同意隐私政策和用户协议')
				return
			}
			if (!this.isPhoneValid) {
				this.$toastRef.error('请输入正确的手机号')
				return
			}
			if (this.code.length < 4) {
				this.$toastRef.error('请输入验证码')
				return
			}
			this.$toastRef.loading('登录中...')
			// TODO: 调用登录接口
			// http.post('/auth/login', { phone: this.phone, code: this.code }, { withToken: false })
		},
		// 微信登录
		onWechatLogin() {
			if (!this.agreed) {
				this.$toastRef.error('请先同意隐私政策和用户协议')
				return
			}
			this.$toastRef.text('微信登录')
			// TODO: 调用微信登录
		},
		// Apple登录
		onAppleLogin() {
			if (!this.agreed) {
				this.$toastRef.error('请先同意隐私政策和用户协议')
				return
			}
			this.$toastRef.text('Apple登录')
			// TODO: 调用 Apple 登录
		},
		// 切换协议勾选
		onToggleAgreement() {
			this.agreed = !this.agreed
		},
		// 打开隐私政策/用户协议弹窗
		onOpenPrivacy() {
			this.isShowDrawer = true
		},
		onOpenTerms() {
			this.isShowDrawer = true
		},
		// 弹窗中同意/不同意操作
		onAgree(type) {
			this.isShowDrawer = false
			if (type === 1) {
				this.agreed = true
			}
		},
		// 跳转webview查看完整协议
		goWebview(id) {
			uni.navigateTo({
				url: '/pages/webview/webview?id=' + id
			})
		}
	}
}
</script>

<style>
.login-page {
	flex: 1;
	background-color: #ffffff;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-top: 160rpx;
}

/* 顶部欢迎语 */
.header {
	margin-bottom: 80rpx;
}
.hello {
	font-size: 56rpx;
	font-weight: bold;
	color: #1a9e78;
	margin-bottom: 10rpx;
}
.welcome {
	font-size: 40rpx;
	font-weight: bold;
	color: #1a9e78;
}

/* 表单区域 */
.form-area {
	margin-bottom: 60rpx;
}
.input-wrapper {
	flex-direction: row;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 16rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	height: 100rpx;
	margin-bottom: 24rpx;
}
.input-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 16rpx;
}
.input-field {
	flex: 1;
	font-size: 30rpx;
	color: #333333;
	height: 100rpx;
}
.placeholder-text {
	color: #999999;
	font-size: 30rpx;
}
.code-input {
	flex: 1;
}
.code-btn {
	font-size: 28rpx;
	color: #1a9e78;
	padding-left: 20rpx;
}
.code-btn-disabled {
	color: #cccccc;
}

/* 登录按钮 */
.login-btn {
	height: 96rpx;
	background-color: #7ecdb8;
	border-radius: 48rpx;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
}
.login-btn-disabled {
	background-color: #c8e6dc;
}
.login-btn-text {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: bold;
}

/* 其他登录方式 */
.other-login {
	flex: 1;
	align-items: center;
}
.divider {
	flex-direction: row;
	align-items: center;
	margin-top: 60rpx;
	margin-bottom: 50rpx;
}
.divider-line {
	width: 140rpx;
	height: 1px;
	background-color: #e0e0e0;
}
.divider-text {
	font-size: 26rpx;
	color: #999999;
	margin-left: 20rpx;
	margin-right: 20rpx;
}

/* 第三方登录按钮 */
.third-party-area {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
}
.third-party-btn {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	background-color: #f5f5f5;
	align-items: center;
	justify-content: center;
}
.third-party-icon {
	width: 56rpx;
	height: 56rpx;
}

/* Apple 登录按钮 - 符合苹果HIG规范 */
.apple-section {
	align-items: center;
	margin-top: 20rpx;
}
.apple-login-btn {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 580rpx;
	height: 88rpx;
	background-color: #000000;
	border-radius: 44rpx;
}
.apple-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}
.apple-btn-text {
	font-size: 30rpx;
	color: #ffffff;
	font-weight: 500;
}

/* 底部协议 */
.footer {
	position: fixed;
	bottom: 60rpx;
	left: 40rpx;
	right: 40rpx;
}
.agreement-row {
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.checkbox {
	width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #cccccc;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
}
.checkbox-checked {
	background-color: #1a9e78;
	border-color: #1a9e78;
}
.checkbox-icon {
	font-size: 20rpx;
	color: #ffffff;
}
.agreement-text {
	font-size: 24rpx;
	color: #999999;
}
.agreement-link {
	font-size: 24rpx;
	color: #1a9e78;
}

/* 隐私政策弹窗 */
.boxcontent {
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.rich_header {
	align-items: center;
	margin-bottom: 30rpx;
}
.rich_title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333333;
}
.privateContent {
	height: 500rpx;
}
.contentBox {
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.content-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 44rpx;
}
.linebox {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
.link-text {
	font-size: 26rpx;
	color: #1a9e78;
	line-height: 44rpx;
}
.rich_btn {
	flex-direction: row;
	justify-content: space-between;
	margin-top: 30rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.btn-disagree {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: #999999;
	background-color: #f5f5f5;
	border-radius: 40rpx;
	margin-right: 20rpx;
}
.btn-agree {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: #ffffff;
	background-color: #1a9e78;
	border-radius: 40rpx;
	margin-left: 20rpx;
}
</style>