From 2459662c5a06cf1bae716b6f3be8e944bb86463f Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Sat, 23 Aug 2025 10:26:42 +0800
Subject: [PATCH] 1

---
 pages/profile/profile.vue | 724 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 712 insertions(+), 12 deletions(-)

diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index ce129c8..acafb98 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -2,7 +2,7 @@
 	<view class="profile-container page-container-with-bg">
 		<!-- 用户信息卡片 -->
 		<view class="user-info-card">
-			<view class="user-avatar-section">
+			<view class="user-avatar-section" :class="{ 'logged-in': userInfo.nickName }" @click="handleUserAction">
 				<view class="avatar-wrapper">
 					<u-avatar
 						:src="userInfo.avatarUrl || ''"
@@ -16,15 +16,19 @@
 					<view class="online-status" v-if="userInfo.nickName">
 						<view class="status-dot"></view>
 					</view>
+					<!-- 登录提示图标，仅在未登录时显示 -->
+					<view class="login-hint" v-if="!userInfo.nickName">
+						<text class="hint-icon">👋</text>
+					</view>
 				</view>
 			</view>
 			<view class="user-info-section">
-				<view class="user-name">{{ userInfo.nickName || '点击登录' }}</view>
+				<view class="user-name">{{ userInfo.nickName || '点击头像登录' }}</view>
 				<view class="user-status">{{ userInfo.nickName ? '已登录' : '未登录' }}</view>
 				<view class="login-days" v-if="userInfo.nickName">已使用 {{ loginDays }} 天</view>
 			</view>
-			<view class="user-action" @click="handleUserAction">
-				<text class="action-icon">{{ userInfo.nickName ? '⚙️' : '👋' }}</text>
+			<view class="user-action" v-if="userInfo.nickName" @click="handleUserAction">
+				<text class="action-icon">⚙️</text>
 			</view>
 		</view>
 
@@ -149,11 +153,68 @@
 				</view>
 			</view>
 		</view>
+
+		<!-- 用户信息设置模态框 -->
+		<u-modal
+			:show="showUserInfoModal"
+			title="完善个人信息"
+			@confirm="saveUserInfo"
+			@cancel="cancelUserInfo"
+			:show-cancel-button="true"
+			confirm-text="保存"
+			cancel-text="取消"
+		>
+			<view class="user-info-form" :class="{ 'form-animate': showUserInfoModal }">
+				<view class="form-item">
+					<text class="form-label">头像</text>
+					<view class="avatar-selector">
+						<button
+							class="avatar-button"
+							open-type="chooseAvatar"
+							@chooseavatar="onChooseAvatar"
+						>
+							<u-avatar
+								:src="tempUserInfo.avatarUrl || ''"
+								:text="tempUserInfo.nickName ? tempUserInfo.nickName.charAt(0) : '👤'"
+								size="80"
+								shape="circle"
+								bg-color="linear-gradient(135deg, #FF8A80, #FFB6C1)"
+								color="white"
+								font-size="32"
+							></u-avatar>
+							<view class="avatar-edit-overlay">
+								<text class="edit-icon">📷</text>
+							</view>
+						</button>
+						<text class="avatar-tips">点击选择头像</text>
+					</view>
+				</view>
+				<view class="form-item">
+					<text class="form-label">昵称</text>
+					<input
+						type="nickname"
+						v-model="tempUserInfo.nickName"
+						placeholder="请输入昵称"
+						class="nickname-input"
+						:class="{ 'error': nicknameError }"
+						maxlength="20"
+						@input="onNicknameInput"
+						@blur="onNicknameBlur"
+						@focus="onNicknameFocus"
+					/>
+					<view class="nickname-tips" v-if="nicknameTips">
+						<text class="tips-text" :class="{ 'error': nicknameError }">{{ nicknameTips }}</text>
+					</view>
+				</view>
+			</view>
+		</u-modal>
 	</view>
 </template>
 
 <script>
 import { reactive, ref, onMounted, computed } from 'vue'
+import { uploadImage } from '@/http/api/common.js'
+import { updateUserInfo } from '@/http/api/profile.js'
 
 export default {
 	name: 'ProfilePage',
@@ -167,6 +228,18 @@ export default {
 		const loginDays = ref(0)
 		const notificationCount = ref(3)
 
+		// 用户信息设置模态框相关数据
+		const showUserInfoModal = ref(false)
+		const tempUserInfo = ref({
+			nickName: '',
+			avatarUrl: ''
+		})
+
+		// 昵称输入相关状态
+		const nicknameTips = ref('')
+		const nicknameError = ref(false)
+		const lastValidNickname = ref('')
+
 		// 宠物统计数据
 		const petStats = reactive({
 			petCount: 0,
@@ -277,24 +350,36 @@ export default {
 				provider: 'weixin',
 				success: (res) => {
 					console.log('登录成功', res)
-					// 模拟登录成功
-					userInfo.value = {
-						nickName: '宠物主人',
+
+					// 登录成功后显示用户信息设置模态框
+					// 清空临时用户信息，准备用户输入
+					tempUserInfo.value = {
+						nickName: '',
 						avatarUrl: ''
 					}
-					uni.setStorageSync('userInfo', userInfo.value)
+
+					// 重置昵称相关状态
+					nicknameTips.value = ''
+					nicknameError.value = false
+					lastValidNickname.value = ''
+
+					// 显示用户信息设置模态框
+					showUserInfoModal.value = true
+
+					// 保存登录时间，但不设置用户信息（等用户完善后再设置）
 					uni.setStorageSync('loginDate', new Date().toISOString())
 					calculateLoginDays()
 
 					uni.showToast({
-						title: '登录成功',
-						icon: 'success'
+						title: '登录成功，请完善个人信息',
+						icon: 'success',
+						duration: 2000
 					})
 				},
 				fail: (err) => {
 					console.error('登录失败', err)
 					uni.showToast({
-						title: '登录失败',
+						title: '登录失败，请重试',
 						icon: 'none'
 					})
 				}
@@ -392,6 +477,305 @@ export default {
 			}
 		}
 
+		// 头像选择处理
+		const onChooseAvatar = async (e) => {
+			try {
+				console.log('选择头像:', e.detail)
+
+				// 检查微信基础库版本兼容性
+				const systemInfo = uni.getSystemInfoSync()
+				const SDKVersion = systemInfo.SDKVersion
+				if (SDKVersion) {
+					const versionArray = SDKVersion.split('.').map(Number)
+					const requiredVersion = [2, 21, 2]
+					let isSupported = false
+
+					for (let i = 0; i < 3; i++) {
+						if (versionArray[i] > requiredVersion[i]) {
+							isSupported = true
+							break
+						} else if (versionArray[i] < requiredVersion[i]) {
+							break
+						}
+					}
+
+					if (!isSupported && versionArray.join('.') !== requiredVersion.join('.')) {
+						uni.showToast({
+							title: '微信版本过低，请升级后使用',
+							icon: 'none'
+						})
+						return
+					}
+				}
+
+				const { avatarUrl } = e.detail
+
+				// 检查是否获取到头像路径
+				if (!avatarUrl) {
+					uni.showToast({
+						title: '头像选择失败',
+						icon: 'none'
+					})
+					return
+				}
+
+				// 先显示临时头像
+				tempUserInfo.value.avatarUrl = avatarUrl
+
+				// 上传头像到服务器
+				const imageData = {
+					filePath: avatarUrl,
+					name: 'avatar',
+					formData: {
+						type: 'user_avatar'
+					}
+				}
+
+				const uploadResult = await uploadImage(imageData, {
+					custom: {
+						auth: true,
+						loading: true,
+						loadingText: '正在上传头像...'
+					}
+				})
+
+				// 更新为服务器返回的永久URL
+				if (uploadResult && uploadResult.url) {
+					tempUserInfo.value.avatarUrl = uploadResult.url
+					uni.showToast({
+						title: '头像上传成功',
+						icon: 'success',
+						duration: 1500
+					})
+				} else {
+					throw new Error('上传结果无效')
+				}
+
+			} catch (error) {
+				console.error('头像上传失败:', error)
+
+				// 根据错误类型显示不同提示
+				let errorMessage = '头像上传失败'
+
+				// 处理微信内容安全检测失败
+				if (error.errCode === 87014 || (error.message && error.message.includes('安全检测'))) {
+					errorMessage = '头像内容不符合规范，请重新选择'
+				}
+				// 处理网络错误
+				else if (error.errCode === -1 || (error.message && error.message.includes('网络'))) {
+					errorMessage = '网络异常，请稍后重试'
+				}
+				// 处理文件大小超限
+				else if (error.errCode === 1003 || (error.message && error.message.includes('文件大小'))) {
+					errorMessage = '头像文件过大，请选择较小的图片'
+				}
+				// 处理服务器错误
+				else if (error.statusCode >= 500) {
+					errorMessage = '服务器异常，请稍后重试'
+				}
+				// 处理权限错误
+				else if (error.statusCode === 401 || error.statusCode === 403) {
+					errorMessage = '权限不足，请重新登录'
+				}
+
+				uni.showToast({
+					title: errorMessage,
+					icon: 'none',
+					duration: 2000
+				})
+
+				// 重置头像为空
+				tempUserInfo.value.avatarUrl = ''
+			}
+		}
+
+		// 保存用户信息
+		const saveUserInfo = async () => {
+			try {
+				// 验证头像和昵称信息的完整性
+				if (!tempUserInfo.value.nickName || !tempUserInfo.value.nickName.trim()) {
+					uni.showToast({
+						title: '请输入昵称',
+						icon: 'none'
+					})
+					return
+				}
+
+				// 验证昵称格式
+				if (!validateNickname(tempUserInfo.value.nickName)) {
+					uni.showToast({
+						title: '昵称格式不正确',
+						icon: 'none'
+					})
+					return
+				}
+
+				// 验证头像
+				if (!tempUserInfo.value.avatarUrl) {
+					uni.showToast({
+						title: '请选择头像',
+						icon: 'none'
+					})
+					return
+				}
+
+				console.log('开始保存用户信息:', tempUserInfo.value)
+
+				// 调用API同步到服务器
+				const updateResult = await updateUserInfo({
+					nickName: tempUserInfo.value.nickName.trim(),
+					avatarUrl: tempUserInfo.value.avatarUrl
+				}, {
+					custom: {
+						auth: true,
+						loading: true,
+						loadingText: '正在保存用户信息...'
+					}
+				})
+
+				console.log('服务器保存成功:', updateResult)
+
+				// 更新本地存储中的userInfo
+				userInfo.value = {
+					nickName: tempUserInfo.value.nickName.trim(),
+					avatarUrl: tempUserInfo.value.avatarUrl
+				}
+				uni.setStorageSync('userInfo', userInfo.value)
+
+				// 关闭模态框
+				showUserInfoModal.value = false
+
+				// 重置临时数据和状态
+				tempUserInfo.value = {
+					nickName: '',
+					avatarUrl: ''
+				}
+				nicknameTips.value = ''
+				nicknameError.value = false
+				lastValidNickname.value = ''
+
+				// 显示成功提示
+				uni.showToast({
+					title: '用户信息保存成功',
+					icon: 'success',
+					duration: 2000
+				})
+
+				// 更新页面显示状态
+				calculateLoginDays()
+
+			} catch (error) {
+				console.error('保存用户信息失败:', error)
+
+				// 根据错误类型显示不同提示
+				let errorMessage = '保存失败，请重试'
+
+				if (error.statusCode === 401 || error.statusCode === 403) {
+					errorMessage = '登录已过期，请重新登录'
+				} else if (error.statusCode >= 500) {
+					errorMessage = '服务器异常，请稍后重试'
+				} else if (error.message && error.message.includes('网络')) {
+					errorMessage = '网络异常，请检查网络连接'
+				} else if (error.message && error.message.includes('昵称')) {
+					errorMessage = '昵称不符合要求，请修改后重试'
+				}
+
+				uni.showToast({
+					title: errorMessage,
+					icon: 'none',
+					duration: 3000
+				})
+			}
+		}
+
+		// 取消用户信息设置
+		const cancelUserInfo = () => {
+			showUserInfoModal.value = false
+			// 重置临时数据
+			tempUserInfo.value = {
+				nickName: '',
+				avatarUrl: ''
+			}
+			// 重置昵称状态
+			nicknameTips.value = ''
+			nicknameError.value = false
+			lastValidNickname.value = ''
+		}
+
+		// 昵称输入处理
+		const onNicknameInput = (e) => {
+			const value = e.detail.value
+			tempUserInfo.value.nickName = value
+
+			// 实时验证昵称
+			validateNickname(value)
+		}
+
+		// 昵称获得焦点
+		const onNicknameFocus = () => {
+			nicknameTips.value = '支持中文、英文、数字，2-20个字符'
+			nicknameError.value = false
+		}
+
+		// 昵称失去焦点
+		const onNicknameBlur = () => {
+			const currentNickname = tempUserInfo.value.nickName
+
+			// 保存当前有效昵称，以备安全检测失败时恢复
+			if (currentNickname && !nicknameError.value) {
+				lastValidNickname.value = currentNickname
+			}
+
+			// 微信会在失去焦点时进行内容安全检测
+			// 如果检测不通过，内容会被自动清空
+			setTimeout(() => {
+				// 检查是否被清空（安全检测失败）
+				if (lastValidNickname.value && !tempUserInfo.value.nickName) {
+					nicknameTips.value = '昵称内容不符合规范，已自动清空'
+					nicknameError.value = true
+				} else if (tempUserInfo.value.nickName) {
+					// 内容未被清空，验证通过
+					nicknameTips.value = '昵称可用'
+					nicknameError.value = false
+				}
+			}, 100)
+		}
+
+		// 昵称验证
+		const validateNickname = (nickname) => {
+			if (!nickname) {
+				nicknameTips.value = ''
+				nicknameError.value = false
+				return true
+			}
+
+			// 长度检查
+			if (nickname.length < 2) {
+				nicknameTips.value = '昵称至少需要2个字符'
+				nicknameError.value = true
+				return false
+			}
+
+			if (nickname.length > 20) {
+				nicknameTips.value = '昵称不能超过20个字符'
+				nicknameError.value = true
+				return false
+			}
+
+			// 字符格式检查（中文、英文、数字、部分特殊字符）
+			const validPattern = /^[\u4e00-\u9fa5a-zA-Z0-9_\-\s]+$/
+			if (!validPattern.test(nickname)) {
+				nicknameTips.value = '昵称只能包含中文、英文、数字、下划线和连字符'
+				nicknameError.value = true
+				return false
+			}
+
+			// 验证通过
+			nicknameTips.value = '昵称格式正确'
+			nicknameError.value = false
+			return true
+		}
+
 		// 初始化时检查新功能
 		onMounted(() => {
 			initPage()
@@ -413,7 +797,20 @@ export default {
 			refreshData,
 			formatNumber,
 			onShow,
-			onPullDownRefresh
+			onPullDownRefresh,
+			// 用户信息设置模态框相关
+			showUserInfoModal,
+			tempUserInfo,
+			onChooseAvatar,
+			saveUserInfo,
+			cancelUserInfo,
+			// 昵称输入相关
+			nicknameTips,
+			nicknameError,
+			onNicknameInput,
+			onNicknameFocus,
+			onNicknameBlur,
+			validateNickname
 		}
 	},
 
@@ -451,6 +848,38 @@ export default {
 	}
 
 	.user-avatar-section {
+		cursor: pointer;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		border-radius: 50%;
+		padding: 12rpx;
+		position: relative;
+
+		// 未登录时的可点击提示
+		&:not(.logged-in) {
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				border: 2rpx dashed rgba(255, 138, 128, 0.3);
+				border-radius: 50%;
+				animation: breathe 3s ease-in-out infinite;
+			}
+		}
+
+		&:hover {
+			background: rgba(255, 138, 128, 0.15);
+			transform: scale(1.08);
+			box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.25);
+		}
+
+		&:active {
+			transform: scale(0.92);
+			transition: all 0.1s ease;
+		}
+
 		.avatar-wrapper {
 			position: relative;
 
@@ -473,6 +902,41 @@ export default {
 					border-radius: 50%;
 				}
 			}
+
+			.login-hint {
+				position: absolute;
+				bottom: -8rpx;
+				right: -8rpx;
+				width: 40rpx;
+				height: 40rpx;
+				background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
+				animation: pulse 2s infinite;
+				border: 3rpx solid white;
+				z-index: 10;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: -6rpx;
+					left: -6rpx;
+					right: -6rpx;
+					bottom: -6rpx;
+					border: 2rpx solid rgba(255, 138, 128, 0.3);
+					border-radius: 50%;
+					animation: ripple 2s infinite;
+				}
+
+				.hint-icon {
+					font-size: 22rpx;
+					color: white;
+					font-weight: bold;
+				}
+			}
 		}
 	}
 
@@ -898,6 +1362,153 @@ export default {
 	}
 }
 
+/* 用户信息设置模态框样式 */
+.user-info-form {
+	padding: 40rpx 20rpx;
+	opacity: 0;
+	transform: translateY(20rpx);
+	transition: all 0.3s ease;
+
+	&.form-animate {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.form-item {
+		margin-bottom: 40rpx;
+
+		.form-label {
+			display: block;
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 20rpx;
+		}
+
+		.avatar-selector {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.avatar-button {
+				position: relative;
+				background: none;
+				border: none;
+				padding: 8rpx;
+				margin-bottom: 20rpx;
+				border-radius: 50%;
+				transition: all 0.3s ease;
+
+				&::after {
+					border: none;
+				}
+
+				&:hover {
+					background: rgba(255, 138, 128, 0.1);
+					transform: scale(1.05);
+				}
+
+				&:active {
+					transform: scale(0.95);
+				}
+
+				.avatar-edit-overlay {
+					position: absolute;
+					bottom: 4rpx;
+					right: 4rpx;
+					width: 36rpx;
+					height: 36rpx;
+					background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+					border-radius: 50%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					box-shadow: 0 4rpx 12rpx rgba(255, 138, 128, 0.4);
+					border: 2rpx solid white;
+
+					.edit-icon {
+						font-size: 20rpx;
+						color: white;
+						font-weight: bold;
+					}
+				}
+			}
+
+			.avatar-tips {
+				font-size: 26rpx;
+				color: #666;
+				background: rgba(255, 138, 128, 0.1);
+				padding: 8rpx 16rpx;
+				border-radius: 20rpx;
+				border: 1rpx solid rgba(255, 138, 128, 0.2);
+			}
+		}
+
+		.nickname-input {
+			width: 100%;
+			height: 88rpx;
+			padding: 0 28rpx;
+			border: 2rpx solid #E8E8E8;
+			border-radius: 16rpx;
+			font-size: 32rpx;
+			color: #333;
+			background: #FAFAFA;
+			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			position: relative;
+
+			&:focus {
+				border-color: #FF8A80;
+				background: white;
+				box-shadow: 0 0 0 6rpx rgba(255, 138, 128, 0.12);
+				transform: translateY(-2rpx);
+			}
+
+			&::placeholder {
+				color: #BDBDBD;
+				font-size: 30rpx;
+			}
+
+			&.error {
+				border-color: #FF5722;
+				background: rgba(255, 87, 34, 0.05);
+
+				&:focus {
+					box-shadow: 0 0 0 6rpx rgba(255, 87, 34, 0.12);
+				}
+			}
+		}
+
+		.nickname-tips {
+			margin-top: 16rpx;
+			padding: 8rpx 12rpx;
+			border-radius: 8rpx;
+			background: rgba(102, 102, 102, 0.08);
+
+			.tips-text {
+				font-size: 24rpx;
+				color: #666;
+				line-height: 1.5;
+				display: flex;
+				align-items: center;
+
+				&::before {
+					content: 'ℹ️';
+					margin-right: 8rpx;
+					font-size: 20rpx;
+				}
+
+				&.error {
+					color: #FF5722;
+
+					&::before {
+						content: '⚠️';
+					}
+				}
+			}
+		}
+	}
+}
+
 /* 动画效果 */
 @keyframes fadeIn {
 	from {
@@ -910,10 +1521,99 @@ export default {
 	}
 }
 
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.1);
+		opacity: 0.8;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes breathe {
+	0%, 100% {
+		opacity: 0.3;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.6;
+		transform: scale(1.02);
+	}
+}
+
+@keyframes ripple {
+	0% {
+		transform: scale(1);
+		opacity: 0.8;
+	}
+	100% {
+		transform: scale(1.4);
+		opacity: 0;
+	}
+}
+
 .profile-container > view {
 	animation: fadeIn 0.5s ease-out;
 }
 
+/* 响应式设计 */
+@media screen and (max-width: 750rpx) {
+	.user-info-form {
+		padding: 32rpx 16rpx;
+
+		.form-item {
+			margin-bottom: 32rpx;
+
+			.form-label {
+				font-size: 30rpx;
+				margin-bottom: 16rpx;
+			}
+
+			.avatar-selector {
+				.avatar-tips {
+					font-size: 24rpx;
+					padding: 6rpx 12rpx;
+				}
+			}
+
+			.nickname-input {
+				height: 80rpx;
+				font-size: 30rpx;
+				padding: 0 24rpx;
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 1200rpx) {
+	.user-info-form {
+		padding: 48rpx 32rpx;
+		max-width: 600rpx;
+		margin: 0 auto;
+
+		.form-item {
+			margin-bottom: 48rpx;
+
+			.form-label {
+				font-size: 34rpx;
+				margin-bottom: 24rpx;
+			}
+
+			.nickname-input {
+				height: 96rpx;
+				font-size: 34rpx;
+				padding: 0 32rpx;
+			}
+		}
+	}
+}
+
 .profile-container > view:nth-child(1) { animation-delay: 0.1s; }
 .profile-container > view:nth-child(2) { animation-delay: 0.2s; }
 .profile-container > view:nth-child(3) { animation-delay: 0.3s; }