mechanicStore-app/pages/login/login.uvue

<template>
	<view class="page-container">
		<view class="close-btn" @click="goBack">
			<uni-icons type="closeempty" size="24" color="#333">
			</uni-icons>
		</view>

		<view class="header-section">
			<text class="hello-text">
				Hello!
			</text>
			<text class="welcome-text">
				欢迎来到小丁到家
			</text>
			<image src="/static/logo-massage.png" class="logo-img" mode="aspectFit">
			</image>
		</view>

		<view class="form-section">
			<view class="input-box">
				<input class="input-field" type="number" placeholder="请输入手机号码" v-model="phone" maxlength="11" />
			</view>

			<view class="input-box row-between">
				<input class="input-field" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
				<text class="code-btn" :class="{ disabled: !canSend }" @click="sendCode">
					{{ codeText }}
				</text>
			</view>

			<view class="login-btn" :class="{ disabled: !canLogin }" @click="doLogin">
				登录
			</view>

			<view class="agree-row row-start">
				<checkbox :checked="isAgree" @change="onAgreeChange" style="transform: scale(0.8);" />
				<view class="agree-content">
					<text class="agree-text">
						我已阅读并同意
						<text class="link-text">
							《用户协议》
						</text>
						<text class="link-text">
							《隐私政策》
						</text>
						<text class="link-text">
							《上门按摩服务行业平台公约》
						</text>
						，未注册的手机号将自动创建小丁到家账号
					</text>
				</view>
			</view>
		</view>

		<view class="footer-section">
			<view class="divider-row row-center">
				<view class="line">
				</view>
				<text class="divider-text">
					其他登录方式
				</text>
				<view class="line">
				</view>
			</view>
			<view class="methods-row row-center">
				<view class="method-item column-center" @click="oneKeyNav">
					<view class="icon-box blue-bg">
						<uni-icons type="checkmark" size="20" color="#fff">
						</uni-icons>
					</view>
					<text class="method-name">
						一键登录
					</text>
				</view>
				<view class="method-item column-center" @click="wechatLogin">
					<view class="icon-box green-bg">
						<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
					</view>
					<text class="method-name">
						微信登录
					</text>
				</view>
			</view>
		</view>

		<view v-if="showModal" class="modal-mask" @click="showModal=false">
			<view class="modal-box" @click.stop>
				<text class="modal-title">
					服务协议及隐私政策
				</text>

				<scroll-view scroll-y class="modal-scroll">
					<text class="modal-welcome">
						欢迎您使用小丁到家!
					</text>
					<text class="modal-desc">
						请你务必审慎阅读、并充分理解
						<text class="modal-link">
							《用户协议》
						</text>
						和
						<text class="modal-link">
							《隐私政策》
						</text>
						，协议内容包括但不限于:
					</text>
					<text class="modal-list">
						1、在您使用软件及服务的过程中，向您提供相关基本功能，我们将根据合法、正当、必要的原则，收集或使用必要的个人信息;
					</text>
					<text class="modal-list">
						2、基于您的授权，我们可能会获取您的地理位置、相册、相机等相关软件权限;
					</text>
					<text class="modal-list">
						3、我们会采取符合标准的技术措施和数据安全措施来保护您的个人信息安全;
					</text>
					<text class="modal-list">
						4、您可以查询，更正，管理您的个人信息，我们也提供账户注销的渠道;
					</text>
					<text class="modal-footer">
						如您同意以上协议内容，请点击“同意”开始使用我们的产品和服务，我们依法尽全力保护您的个人信息。
					</text>
				</scroll-view>

				<view class="modal-btns row-between">
					<text class="modal-btn reject" @click="rejectAgreement">
						拒绝并退出
					</text>
					<text class="modal-btn agree" @click="agreeAgreement">
						同意
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, computed } from 'vue';

	const phone = ref<string>('');
	const code = ref<string>('');
	const isAgree = ref<boolean>(false);
	const showModal = ref<boolean>(false);
	const countdown = ref<number>(0);

	// 定义定时器变量
	let timer : number | null = null;

	const canSend = computed(() => phone.value.length === 11 && countdown.value === 0);
	const canLogin = computed(() => phone.value.length === 11 && code.value.length === 6 && isAgree.value);
	const codeText = computed(() => countdown.value > 0 ? `${countdown.value}s 后重试` : '获取验证码');

	const goBack = () => uni.navigateBack();
	const oneKeyNav = () => uni.navigateTo({ url: '/pages/login/login-one-key' });
	const wechatLogin = () => uni.showToast({ title: '微信登录开发中', icon: 'none' });

	const sendCode = () => {
		if (!canSend.value) return;

		const currentTimer = timer;
		if (currentTimer !== null) {
			clearInterval(currentTimer);
		}
		timer = null;

		countdown.value = 60;
		uni.showToast({ title: '验证码已发送', icon: 'success' });

		timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				const t = timer;
				if (t !== null) {
					clearInterval(t);
				}
				timer = null;
				countdown.value = 0;
			}
		}, 1000);
	};

	const onAgreeChange = (e : any) => {
		// UTS 中 any 类型必须 as 成具体类型再访问属性
		const evt = e as UTSJSONObject;
		if (evt != null) {
			const detail = evt["detail"] as UTSJSONObject | null;
			if (detail != null) {
				const value = detail["value"] as boolean | null;
				isAgree.value = (value != null) && value;
				return;
			}
		}
		isAgree.value = false;
	};

	const doLogin = () => {
		if (!canLogin.value) {
			uni.showToast({ title: isAgree.value ? '请填写完整信息' : '请先同意协议', icon: 'none' });
			return;
		}
		uni.showLoading({ title: '登录中...' });
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({ title: '登录成功', icon: 'success' });
		}, 1500);
	};

	const rejectAgreement = () => {
		showModal.value = false;
		uni.showToast({ title: '您拒绝了协议', icon: 'none' });
	};

	const agreeAgreement = () => {
		showModal.value = false;
		isAgree.value = true;
		uni.showToast({ title: '已同意协议', icon: 'success' });
	};
</script>

<style>
	.page-container {
		background: linear-gradient(180deg, #e0f7fa 0%, #fff8e1 100%);
		height: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		z-index: 10;
	}

	.header-section {
		align-items: center;
		margin-bottom: 60rpx;
	}

	.hello-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.welcome-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.logo-img {
		width: 300rpx;
		height: 300rpx;
		border-radius: 150rpx;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.form-section {
		margin-bottom: 60rpx;
	}

	.input-box {
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.input-field {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.code-btn {
		font-size: 26rpx;
		color: #ffc107;
		font-weight: bold;
		white-space: nowrap;
	}

	.code-btn.disabled {
		color: #ccc;
	}

	.login-btn {
		background: linear-gradient(90deg, #ffc107, #ffca2c);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.3);
	}

	.login-btn.disabled {
		background: #ddd;
		color: #999;
		box-shadow: none;
	}

	.agree-row {
		align-items: flex-start;
	}

	.agree-content {
		flex: 1;
		margin-left: 10rpx;
	}

	.agree-text {
		font-size: 24rpx;
		color: #999;
		line-height: 1.6;
	}

	.link-text {
		color: #00b894;
		border-bottom: 1rpx solid #00b894;
	}

	.footer-section {
		margin-top: auto;
	}

	.divider-row {
		margin-bottom: 40rpx;
		align-items: center;
	}

	.line {
		flex: 1;
		height: 1rpx;
		background-color: #ddd;
	}

	.divider-text {
		font-size: 26rpx;
		color: #999;
		margin: 0 20rpx;
	}

	.methods-row {
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.method-item {
		margin-right: 60rpx;
		align-items: center;
	}

	.method-item:last-child {
		margin-right: 0;
	}

	.icon-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.blue-bg {
		background: linear-gradient(135deg, #4a90e2, #67b26f);
	}

	.green-bg {
		background: linear-gradient(135deg, #00b894, #00cec9);
	}

	.method-name {
		font-size: 26rpx;
		color: #666;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	.modal-box {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		width: 600rpx;
		max-height: 800rpx;
		flex-direction: column;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.modal-scroll {
		flex: 1;
		margin-bottom: 20rpx;
	}

	.modal-welcome {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.modal-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15rpx;
	}

	.modal-link {
		color: #00b894;
		border-bottom: 1rpx solid #00b894;
	}

	.modal-list {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}

	.modal-footer {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}

	.modal-btns {
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
	}

	.modal-btn {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		padding: 15rpx 0;
	}

	.modal-btn.reject {
		color: #999;
		margin-right: 20rpx;
	}

	.modal-btn.agree {
		color: #00b894;
	}

	.row-between {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.row-start {
		flex-direction: row;
		align-items: flex-start;
	}

	.row-center {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.column-center {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>