mechanicStore-app/pages/login/login.uvue

<template>
	<view class="page-container">
		<view class="close-btn" @click="goBack">
		</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="mobile" maxlength="11" />
			</view>

			<view class="input-box row-between">
				<input class="input-field" type="number" placeholder="请输入验证码" v-model="mobileCode" 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">
				<radio :value="isAgree" color="#FFCC33" style="transform: scale(0.7);" class="radio r" />
				<view class="agree-content">
					<text class="agree-text" @click="showModal=true">
						我已阅读并同意
						<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="customLoginIn()">
					<view class="icon-box blue-bg">
						<u-icon name="phone" :size="24" />
					</view>
					<text class="method-name">
						一键登录
					</text>
				</view>
				<view class="method-item column-center" @click="wechatLogin">
					<view class="icon-box green-bg">
						<text class="wechat-mark">微</text>
					</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';

	import { fetchSendcode, fetchLogin } from '@/utils/api/login.uts'
	const slogan = ref('');
	const privacyName = ref('');
	const privacyUrl = ref('');
	const mobile = ref('');
	const phone = ref<string>('');
	const mobileCode = ref<string>('');
	const isAgree = ref<boolean>(false);
	const showModal = ref<boolean>(false);
	const countdown = ref<number>(0);
	const uniVerifyManager = ref(null as UniVerifyManager | null);
	const isAppEnv = process.env.UNI_PLATFORM === 'app'
	// 定义定时器变量
	let timer : number | null = null;

	const canSend = computed(() => mobile.value.length === 11 && countdown.value === 0);
	const canLogin = computed(() => phone.value.length === 11 && mobileCode.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 = async () => {
		if (!canSend.value) return;
		console.log(mobile.value, 'mobile')
		try {
			const res = await fetchSendcode({ mobile: mobile.value });
			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);
		} catch (err : any) {
			console.error('获取客户评价接口异常', err)
		}
	};

	const onAgreeChange = (e : any) => {
		// UTS 中 any 类型必须 as 成具体类型再访问属性
		const evt = e as UTSJSONObject;
		console.log(evt, 'evt')
		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 = async () => {
		// if (!canLogin.value) {
		// 	console.log(isAgree.value)
		// 	uni.showToast({ title: isAgree.value ? '请填写完整信息' : '请先同意协议', icon: 'none' });
		// 	return;
		// }
		uni.showLoading({ title: '登录中...' });
		const res = await fetchLogin({ mobile: mobile.value, code: mobileCode.value });
		console.log(res, 'res');

		const code = (res as UTSJSONObject)["code"] as number | null;
		const message = (res as UTSJSONObject)["message"] as string ?? '';
		const data = (res as UTSJSONObject)["data"] as UTSJSONObject | null;


		if (code == 200 && data != null) {
			const token = data["token"] as string | null;
			if (token != null && token.length > 0) {
				uni.setStorageSync('token', token);
				uni.hideLoading();
				uni.showToast({ title: '登录成功', icon: 'success' });
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/homepage/console'
					});
				}, 500);
			}
		} else {
			uni.hideLoading();
			// const toastMsg = (message ?? '') as string;
			uni.showToast({ title: message, icon: 'none' });
		}

		// 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' });
	};

	// 解析一键登录错误信息，提取 errorDesc
	const getErrorMessage = (err : any) : string => {
		const str = JSON.stringify(err)

		// 根据错误码和关键词判断（按优先级排序）
		if (str.includes('410021') || str.includes('数据网络未开启')) {
			return '请开启移动数据网络'
		}
		if (str.includes('-20202') || str.includes('蜂窝网络')) {
			return '请开启蜂窝网络'
		}
		if (str.includes('无SIM卡') || str.includes('SIM卡不存在')) {
			return '请插入SIM卡'
		}
		if (str.includes('超时') || str.includes('timeout')) {
			return '网络连接超时，请稍后重试'
		}
		if (str.includes('30005')) {
			return '预登录失败，请检查网络设置'
		}

		// 提取具体错误信息作为备选
		let match = str.match(/"resultMsg":"([^"]+)"/)
		if (match == null) {
			match = str.match(/"errorDesc":"([^"]+)"/)
		}
		if (match == null) {
			match = str.match(/"errMsg":"([^"]+)"/)
		}

		if (match != null && match.length > 1) {
			const msg = match[1]
			if (msg != null) {
				return msg
			}
		}

		return '登录失败，请检查网络'
	}

	const preLogin = (callback : (() => void)) => {
		uniVerifyManager.value?.preLogin({
			success: (res) => {
				phone.value = res.number;
				slogan.value = res.slogan;
				privacyName.value = res.privacyName;
				privacyUrl.value = res.privacyUrl;
				callback();
			},
			fail: (err) => {
				const hasCauseMessage = (err.cause?.cause?.message ?? '').length > 0
				console.log(JSON.parse(err.cause?.cause?.message as string))
				const msgObj = JSON.parse(err.cause?.cause?.message as string) as UTSJSONObject
				if (hasCauseMessage) {
					uni.showModal({
						title: msgObj.getString('resultMsg'),
						content: getErrorMessage(err),
						showCancel: false
					});
				}

			}
		});
	}
	const pushCustomPage = () => {
		const url = '/pages/login/verifyManager?phone=' + phone.value + '&slogan=' + slogan.value + '&name=' + privacyName.value + '&link=' + privacyUrl.value;
		uni.openDialogPage({
			url: url,
			animationType: 'slide-in-bottom',
			success(res) {
				console.log("成功打开自定义登录页面");
			},
			fail(err) {
				console.log(err);
			}
		})
	}

	const customLoginIn = () => {
		if ('production' === process.env.NODE_ENV && '__UNI__HelloUniAppX' === uni.getAppBaseInfo().appId) {
			uni.showModal({
				title: '提示',
				content: '一键登录为收费功能，当前环境暂不支持。请在HBuilderX中新建Hello uni-app x项目真机运行体验！',
				showCancel: false
			})
			return
		}
		const isPreLoginValid = uniVerifyManager.value?.isPreLoginValid() ?? false;
		if (isPreLoginValid) {
			pushCustomPage();
		} else {
			preLogin(() => {
				pushCustomPage();
			})
		}
	}



	onLoad(() => {
		if (isAppEnv) {
			uniVerifyManager.value = uni.getUniVerifyManager();

		}
		// 预登录
		preLogin(() => { });
	})
</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: #ffe205;
		border-bottom: 1rpx solid #ffff7f;
	}

	.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;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.wechat-mark {
		font-size: 34rpx;
		color: #ffffff;
		font-weight: 700;
	}

	/* 	.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>