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">
			<view class="logo-icon">
				<!-- 蓝色圆角正方形 logo -->
			</view>
			<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>