boschchina-wechat-crm/pages/login/login.vue

<template>
	<view class="login-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">登录</text>
		</view>

		<!-- Logo 区域 -->
		<view class="logo-section">
			<image class="logo-icon" src="/static/image/public/logo.png" mode="aspectFill"></image>
			<text class="app-name">布尔销销乐</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 手机号输入 -->
			<view class="input-item">
				<uni-easyinput v-model="phoneNumber" placeholder="请输入手机号" type="number" maxlength="11"
					:clearable="false" class="phone-input" />
			</view>

			<!-- 验证码输入 -->
			<view class="input-item verify-code-row">
				<uni-easyinput v-model="verifyCode" placeholder="验证码" type="number" maxlength="6" :clearable="false"
					class="code-input" />
				<text class="get-code-btn" :class="{ disabled: countdown > 0 }" @click="getVerifyCode">
					{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
				</text>
			</view>

			<!-- 登录按钮 -->
			<view class="login-btn-wrapper">
				<button class="login-btn" @click="handleLogin" :loading="isLoading">登录</button>
			</view>

			<!-- 协议说明 -->
			<view class="agreement-text">
				<text class="gray-text">登录即代表您已同意</text>
				<text class="link-text" @click="showUserAgreement">《用户协议》</text>
				<text class="gray-text">与</text>
				<text class="link-text" @click="showPrivacyPolicy">《隐私政策》</text>
			</view>
		</view>

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

			<!-- 微信一键登录 -->
			<view class="wechat-login-wrapper">
				<button class="wechat-login-btn" @click="wechatLogin">
					<text class="wechat-icon"></text>
					<text class="wechat-text">微信一键登录</text>
				</button>
			</view>
		</view>

		<!-- 用户协议弹窗 -->
		<view class="agreement-popup" v-if="showUserAgreementPopup" @click="closeUserAgreement">
			<view class="popup-mask"></view>
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<text class="popup-title">用户协议</text>
					<text class="popup-close" @click="closeUserAgreement">✕</text>
				</view>
				<scroll-view scroll-y class="popup-body">
					<view class="agreement-content">
						<text class="agreement-title">用户协议</text>
						<text class="update-time">最后更新时间：2026 年 4 月 24 日</text>

						<view class="section">
							<text class="section-title">一、协议的接受与修改</text>
							<text class="section-content">
								1.1 欢迎您使用布尔销销乐服务。请您仔细阅读本用户协议，以确保您了解我们的产品或服务，以及本协议规定的双方的权利和义务。\n
								1.2 当您使用本服务时，即表示您已阅读、理解并同意接受本协议的所有条款。如果您不同意本协议的任何条款，请立即停止使用本服务。\n
								1.3 我们有权根据需要不时修改本协议条款，修改后的协议一旦公布即有效代替原来的协议。您可随时查阅最新协议。
							</text>
						</view>

						<view class="section">
							<text class="section-title">二、服务内容</text>
							<text class="section-content">
								2.1 布尔销销乐是一款面向企业的客户关系管理工具，提供客户管理、销售跟进、数据分析等功能。\n
								2.2 我们有权对服务内容进行变更、中断或终止，变更、中断或终止服务前将尽可能提前通知用户。
							</text>
						</view>

						<view class="section">
							<text class="section-title">三、用户账号</text>
							<text class="section-content">
								3.1 您需要通过手机号验证码登录或微信授权登录方式使用本服务。\n
								3.2 您应保证提供的信息真实、准确、完整。\n
								3.3 您应妥善保管您的账号信息，因您保管不善导致账号被盗、密码失密或遭受其他损失的，您应自行承担相应责任。
							</text>
						</view>

						<view class="section">
							<text class="section-title">四、用户行为规范</text>
							<text class="section-content">
								4.1 您在使用本服务时，应遵守国家法律法规，不得利用本服务从事任何违法违规活动。\n
								4.2 您不得利用本服务制作、复制、发布、传播含有下列内容的信息：\n
								(1) 反对宪法所确定的基本原则的；\n
								(2) 危害国家安全、泄露国家秘密的；\n
								(3) 损害国家荣誉和利益的；\n
								(4) 煽动民族仇恨、民族歧视的；\n
								(5) 破坏国家宗教政策，宣扬邪教和封建迷信的；\n
								(6) 散布谣言、淫秽色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的。
							</text>
						</view>

						<view class="section">
							<text class="section-title">五、知识产权</text>
							<text class="section-content">
								5.1 本服务包含的所有内容（包括但不限于文字、图片、音频、视频、软件、程序、代码、界面设计等）的知识产权均归我们所有。\n
								5.2 未经我们书面许可，您不得以任何形式复制、传播、展示、修改本服务的内容。
							</text>
						</view>

						<view class="section">
							<text class="section-title">六、免责声明</text>
							<text class="section-content">
								6.1 因不可抗力（如自然灾害、政府行为、社会异常事件等）导致服务中断或数据丢失，我们不承担责任。\n
								6.2 因网络状况、通讯线路、黑客攻击、计算机病毒、政府管制等任何非我们原因导致的服务中断或数据丢失，我们不承担责任。
							</text>
						</view>

						<view class="section">
							<text class="section-title">七、协议终止</text>
							<text class="section-content">
								7.1 您有权随时停止使用本服务并注销账号。\n
								7.2 如您违反本协议，我们有权终止向您提供服务，并保留追究法律责任的权利。
							</text>
						</view>

						<view class="section">
							<text class="section-title">八、法律适用与争议解决</text>
							<text class="section-content">
								8.1 本协议的成立、生效、履行、解释及争议解决均适用中华人民共和国法律。\n
								8.2 如双方就本协议内容或其执行发生任何争议，应友好协商解决；协商不成的，任何一方均可向我们所在地有管辖权的人民法院提起诉讼。
							</text>
						</view>

						<view class="section">
							<text class="section-title">九、联系我们</text>
							<text class="section-content">
								如您对本协议有任何疑问，请通过以下方式联系我们：\n
								客服电话：400-XXX-XXXX\n
								客服邮箱：support@example.com
							</text>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<button class="agree-btn" @click="closeUserAgreement">我已知晓</button>
				</view>
			</view>
		</view>

		<!-- 隐私政策弹窗 -->
		<view class="agreement-popup" v-if="showPrivacyPolicyPopup" @click="closePrivacyPolicy">
			<view class="popup-mask"></view>
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<text class="popup-title">隐私政策</text>
					<text class="popup-close" @click="closePrivacyPolicy">✕</text>
				</view>
				<scroll-view scroll-y class="popup-body">
					<view class="agreement-content">
						<text class="agreement-title">隐私政策</text>
						<text class="update-time">最后更新时间：2026 年 4 月 24 日</text>

						<view class="section">
							<text class="section-title">一、我们如何收集和使用您的个人信息</text>
							<text class="section-content">
								1.1 为了向您提供服务，我们可能会收集以下信息：\n
								(1) 手机号码：用于账号注册和登录验证；\n
								(2) 微信昵称、头像：用于完善您的个人资料（仅在微信授权登录时收集）；\n
								(3) 设备信息：用于保障服务安全和优化用户体验。\n
								1.2 我们收集的信息仅用于提供服务、改进产品质量和保障账号安全，不会用于其他用途。
							</text>
						</view>

						<view class="section">
							<text class="section-title">二、我们如何共享、转让、公开披露您的个人信息</text>
							<text class="section-content">
								2.1 我们不会与任何公司、组织和个人共享您的个人信息，但以下情况除外：\n
								(1) 事先获得您的明确同意；\n
								(2) 根据法律法规或政府主管部门的强制性要求。\n
								2.2 我们不会转让您的个人信息给任何第三方。\n
								2.3 我们不会公开披露您的个人信息，除非获得您的明确同意或基于法律规定。
							</text>
						</view>

						<view class="section">
							<text class="section-title">三、我们如何保护您的个人信息</text>
							<text class="section-content">
								3.1 我们已使用符合业界标准的安全防护措施保护您的个人信息。\n
								3.2 我们采取数据加密、访问控制等技术措施防止数据遭到未经授权的访问、使用、修改或泄露。\n
								3.3 我们仅允许有必要知晓这些信息的员工访问您的个人信息，并为此设置了严格的访问权限控制。
							</text>
						</view>

						<view class="section">
							<text class="section-title">四、您的权利</text>
							<text class="section-content">
								4.1 您有权访问、更正、删除您的个人信息。\n
								4.2 您有权改变您授权同意的范围或撤回您的授权。\n
								4.3 您有权注销您的账号。
							</text>
						</view>

						<view class="section">
							<text class="section-title">五、我们如何处理未成年人的个人信息</text>
							<text class="section-content">
								5.1 我们非常重视对未成年人个人信息的保护。\n
								5.2 若您是 18 周岁以下的未成年人，在使用本服务前，应事先取得您家长或法定监护人的书面同意。
							</text>
						</view>

						<view class="section">
							<text class="section-title">六、隐私政策的更新</text>
							<text class="section-content">
								6.1 我们可能会适时对本隐私政策进行修订。\n
								6.2 当本政策的条款发生变更时，我们会在版本更新时以适当的方式向您提示变更后的内容。
							</text>
						</view>

						<view class="section">
							<text class="section-title">七、联系我们</text>
							<text class="section-content">
								如您对本隐私政策有任何疑问，请通过以下方式联系我们：\n
								客服电话：400-XXX-XXXX\n
								客服邮箱：support@example.com
							</text>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<button class="agree-btn" @click="closePrivacyPolicy">我已知晓</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		sendVerifyCode,
		loginByPhone
	} from '@/api/user.js'
	import {
		saveUserInfo
	} from '@/utils/userCache.js'

	// 表单数据
	const phoneNumber = ref('')
	const verifyCode = ref('')
	const countdown = ref(0)
	const isLoading = ref(false)
	let timer = null

	// 弹窗控制
	const showUserAgreementPopup = ref(false)
	const showPrivacyPolicyPopup = ref(false)

	// 获取验证码
	const getVerifyCode = async () => {
		if (countdown.value > 0) return

		if (!phoneNumber.value || phoneNumber.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}

		try {
			const res = await sendVerifyCode(phoneNumber.value)
			console.log('验证码发送成功:', res)

			// 开始倒计时
			countdown.value = 60
			timer = setInterval(() => {
				countdown.value--
				if (countdown.value <= 0) {
					clearInterval(timer)
				}
			}, 1000)

			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			})
		} catch (error) {
			console.error('发送验证码失败:', error)
		}
	}

	// 处理登录
	const handleLogin = async () => {
		if (isLoading.value) return

		if (!phoneNumber.value || phoneNumber.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}

		if (!verifyCode.value || verifyCode.value.length !== 6) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
			return
		}

		isLoading.value = true

		try {
			const res = await loginByPhone(phoneNumber.value, verifyCode.value)
			console.log('登录成功:', res)

			// 保存用户信息和 token
			const {
				userInfo,
				token
			} = res.data || res
			const saveSuccess = saveUserInfo(userInfo, token)

			if (saveSuccess) {
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})

				// 延迟跳转
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1500)
			} else {
				uni.showToast({
					title: '保存登录信息失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('登录失败:', error)
		} finally {
			isLoading.value = false
		}
	}

	// 微信登录
	const wechatLogin = () => {
		// #ifdef MP-WEIXIN
		uni.getUserProfile({
			desc: '用于完善用户资料',
			success: (res) => {
				console.log('微信授权成功:', res.userInfo)
				// TODO: 调用微信登录接口
				uni.showToast({
					title: '微信授权成功',
					icon: 'success'
				})
			},
			fail: (err) => {
				console.log('微信授权失败:', err)
			}
		})
		// #endif

		// #ifndef MP-WEIXIN
		uni.showToast({
			title: '请在微信小程序中使用',
			icon: 'none'
		})
		// #endif
	}

	// 显示用户协议
	const showUserAgreement = () => {
		showUserAgreementPopup.value = true
	}

	// 关闭用户协议
	const closeUserAgreement = () => {
		showUserAgreementPopup.value = false
	}

	// 显示隐私政策
	const showPrivacyPolicy = () => {
		showPrivacyPolicyPopup.value = true
	}

	// 关闭隐私政策
	const closePrivacyPolicy = () => {
		showPrivacyPolicyPopup.value = false
	}

	// 页面卸载时清除定时器
	import {
		onUnmounted
	} from 'vue'
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer)
		}
	})
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background-color: #ffffff;
		padding: 0 40rpx;
		position: relative;
	}

	// 导航栏
	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.nav-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #000000;
		}
	}

	// Logo 区域
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 80rpx;

		.logo-icon {
			width: 160rpx;
			height: 160rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			border-radius: 32rpx;
			box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
		}

		.app-name {
			font-size: 40rpx;
			font-weight: 600;
			color: #000000;
			margin-top: 32rpx;
		}
	}

	// 表单区域
	.form-section {
		.input-item {
			margin-bottom: 24rpx;

			.phone-input,
			.code-input {
				background-color: #f5f7fa;
				border-radius: 16rpx;
				font-size: 28rpx;
			}
		}

		.verify-code-row {
			display: flex;
			align-items: center;

			.code-input {
				flex: 1;
				margin-right: 20rpx;
			}

			.get-code-btn {
				font-size: 26rpx;
				color: #1890ff;
				white-space: nowrap;

				&.disabled {
					color: #999999;
				}
			}
		}

		.login-btn-wrapper {
			margin-top: 48rpx;
			margin-bottom: 24rpx;

			.login-btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(90deg, #1890ff 0%, #096dd9 100%);
				border-radius: 16rpx;
				border: none;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}
			}
		}

		.agreement-text {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			font-size: 22rpx;

			.gray-text {
				color: #999999;
				margin: 0 4rpx;
			}

			.link-text {
				color: #1890ff;
				margin: 0 4rpx;
			}
		}
	}

	// 其他登录方式
	.other-method-section {
		margin-top: 120rpx;

		.divider {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.divider-line {
				width: 120rpx;
				height: 1rpx;
				background-color: #e5e5e5;
			}

			.divider-text {
				font-size: 24rpx;
				color: #999999;
				margin: 0 24rpx;
			}
		}

		.wechat-login-wrapper {
			.wechat-login-btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(90deg, #07c160 0%, #06ad56 100%);
				border-radius: 16rpx;
				border: none;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}

				.wechat-icon {
					margin-right: 12rpx;
					font-size: 36rpx;
				}

				.wechat-text {
					color: #ffffff;
				}
			}
		}
	}

	// 协议弹窗
	.agreement-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.popup-content {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			animation: slideUp 0.3s ease-out;

			.popup-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.popup-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;
				}

				.popup-close {
					font-size: 40rpx;
					color: #999999;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.popup-body {
				flex: 1;
				overflow-y: auto;
				padding: 32rpx;

				.agreement-content {
					display: flex;
					flex-direction: column;

					.agreement-title {
						font-size: 36rpx;
						font-weight: 600;
						color: #000000;
						display: block;
						text-align: center;
						margin-bottom: 20rpx;
					}

					.update-time {
						font-size: 24rpx;
						color: #999999;
						display: block;
						text-align: center;
						margin-bottom: 40rpx;
					}

					.section {
						margin-bottom: 32rpx;

						.section-title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
							display: block;
							margin-bottom: 16rpx;
						}

						.section-content {
							font-size: 24rpx;
							color: #333333;
							line-height: 1.8;
							display: block;
							white-space: pre-wrap;
						}
					}
				}
			}

			.popup-footer {
				padding: 24rpx 32rpx 40rpx;
				border-top: 1rpx solid #f0f0f0;

				.agree-btn {
					width: 100%;
					height: 80rpx;
					background: linear-gradient(90deg, #1890ff 0%, #096dd9 100%);
					border-radius: 16rpx;
					border: none;
					font-size: 30rpx;
					font-weight: 500;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;

					&::after {
						border: none;
					}
				}
			}
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>