Mini_Program/pages/edit-profile/edit-profile.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">编辑资料</text>
			<view class="save-btn" @click="handleSave">
				<text class="save-text">保存</text>
			</view>
		</view>
		
		<scroll-view class="scroll-content" scroll-y>
			<!-- 头像 -->
			<view class="profile-item" @click="handleAvatarClick">
				<text class="item-label">头像</text>
				<view class="item-value">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 昵称 -->
			<view class="profile-item" @click="handleNicknameClick">
				<text class="item-label">昵称</text>
				<view class="item-value">
					<text class="nickname-text">{{ userInfo.nickname }}</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 性别 -->
			<view class="profile-item" @click="handleGenderClick">
				<text class="item-label">性别</text>
				<view class="item-value">
					<text class="gender-text">{{ userInfo.gender || '未设置' }}</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 生日 -->
			<view class="profile-item" @click="handleBirthdayClick">
				<text class="item-label">生日</text>
				<view class="item-value">
					<text class="birthday-text">{{ userInfo.birthday || '未设置' }}</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 个人简介 -->
			<view class="profile-item" @click="handleBioClick">
				<text class="item-label">个人简介</text>
				<view class="item-value">
					<text class="bio-text">{{ userInfo.bio || '未设置' }}</text>
					<text class="arrow">></text>
				</view>
			</view>
		</scroll-view>
		
		<view class="login-mask" v-if="!isLogin">
			<button class="login-btn" @click="goToLogin">请先登录</button>
		</view>
	</view>
</template>

<script>
	import { getUserProfile, updateUserProfile } from '../../utils/api.js'
	
	const defaultAvatar = 'https://picsum.photos/seed/avatar/200/200'
	
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					username: '',
					nickname: '',
					avatar: defaultAvatar,
					gender: '',
					birthday: '',
					bio: '',
					phone: '',
					email: ''
				},
				isLogin: false,
				isSaving: false
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		onShow() {
			// 先读取可能从文本编辑页返回的临时内容
			const tempBio = uni.getStorageSync('temp_text_bio')
			if (typeof tempBio === 'string') {
				// 如果有临时内容，直接设置到 userInfo，不重新加载服务器数据
				this.userInfo.bio = tempBio
				uni.removeStorageSync('temp_text_bio')
				// 同时更新本地存储
				const storedUser = uni.getStorageSync('userInfo')
				if (storedUser) {
					storedUser.bio = tempBio
					uni.setStorageSync('userInfo', storedUser)
				}
				return
			}
			// 如果没有临时内容，才从服务器加载
			this.loadUserInfo(true)
		},
		methods: {
			async loadUserInfo(forceRemote = false) {
				try {
					const storedUser = uni.getStorageSync('userInfo') || null
					const isLogin = uni.getStorageSync('isLogin')
					if (!storedUser || !storedUser.id || !isLogin) {
						this.isLogin = false
						this.userInfo = {
							...this.userInfo,
							id: null,
							username: '',
							nickname: '',
							avatar: defaultAvatar,
							gender: '',
							birthday: '',
							bio: '',
							phone: '',
							email: ''
						}
						return
					}
					this.isLogin = true
					this.userInfo = {
						...this.userInfo,
						...storedUser,
						avatar: storedUser.avatar || defaultAvatar
					}
					if (!forceRemote && this.userInfo.nickname) {
						return
					}
					const res = await getUserProfile(storedUser.id)
					if (res && res.code === 200 && res.data) {
						this.userInfo = {
							...this.userInfo,
							...res.data,
							avatar: res.data.avatar || defaultAvatar
						}
						uni.setStorageSync('userInfo', {
							...storedUser,
							...res.data
						})
					}
				} catch (e) {
					console.error('加载用户资料失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},
			goBack() {
				uni.navigateBack()
			},
			async handleSave() {
				try {
					if (!this.isLogin || !this.userInfo.id) {
						uni.showToast({ title: '请先登录', icon: 'none' })
						return
					}
					if (this.isSaving) return
					this.isSaving = true
					uni.showLoading({ title: '保存中...' })
					const payload = {
						userId: this.userInfo.id,
						nickname: this.userInfo.nickname || '',
						avatar: this.userInfo.avatar === defaultAvatar ? '' : (this.userInfo.avatar || ''),
						gender: this.userInfo.gender || '',
						birthday: this.userInfo.birthday || '',
						bio: this.userInfo.bio || '',
						phone: this.userInfo.phone || '',
						email: this.userInfo.email || ''
					}
					const res = await updateUserProfile(payload)
					uni.hideLoading()
					this.isSaving = false
					if (res && res.code === 200) {
						const merged = {
							...this.userInfo,
							...res.data,
							avatar: res.data.avatar || this.userInfo.avatar || defaultAvatar
						}
						this.userInfo = merged
						uni.setStorageSync('userInfo', merged)
						uni.showToast({ title: '保存成功', icon: 'success' })
						setTimeout(() => uni.navigateBack(), 800)
					} else {
						uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
					}
				} catch (e) {
					uni.hideLoading()
					this.isSaving = false
					console.error('保存用户资料失败:', e)
					uni.showToast({ title: '网络错误，请稍后再试', icon: 'none' })
				}
			},
			handleAvatarClick() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 这里可以上传图片到服务器
						// 暂时直接使用本地路径
						this.userInfo.avatar = tempFilePath
						uni.showToast({
							title: '头像已更新',
							icon: 'success'
						})
					}
				})
			},
			handleNicknameClick() {
				uni.showModal({
					title: '修改昵称',
					editable: true,
					placeholderText: '请输入昵称',
					content: this.userInfo.nickname,
					success: (res) => {
						if (res.confirm && res.content) {
							this.userInfo.nickname = res.content.trim()
						}
					}
				})
			},
			handleGenderClick() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				uni.showActionSheet({
					itemList: ['男', '女', '保密'],
					success: (res) => {
						const genders = ['男', '女', '保密']
						this.userInfo.gender = genders[res.tapIndex]
					}
				})
			},
			handleBirthdayClick() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				// 兼容各端：使用可编辑输入框让用户填写 YYYY-MM-DD
				uni.showModal({
					title: '设置生日',
					editable: true,
					placeholderText: '格式：YYYY-MM-DD',
					content: this.userInfo.birthday || '',
					success: (modalRes) => {
						if (modalRes.confirm) {
							const value = (modalRes.content || '').trim()
							// 简单校验 YYYY-MM-DD
							const ok = /^\d{4}-\d{2}-\d{2}$/.test(value)
							if (!value || ok) {
								this.userInfo.birthday = value
							} else {
								uni.showToast({ title: '日期格式应为YYYY-MM-DD', icon: 'none' })
							}
						}
					}
				})
			},
			handleBioClick() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				// 跳转到文本编辑页面
				const bioValue = this.userInfo.bio || ''
				uni.navigateTo({
					url: `/pages/text-edit/text-edit?key=bio&value=${encodeURIComponent(bioValue)}&placeholder=${encodeURIComponent('请输入个人简介')}&title=${encodeURIComponent('个人简介')}`
				})
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
		position: relative;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E0E0E0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.save-btn {
		width: 80rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.save-text {
		font-size: 28rpx;
		color: #4FC3F7;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
	}
	
	.profile-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #F0F0F0;
		background-color: #FFFFFF;
	}
	
	.item-label {
		font-size: 30rpx;
		color: #666666;
	}
	
	.item-value {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
		margin-left: 30rpx;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #F5F5F5;
		margin-right: 20rpx;
	}
	
	.nickname-text,
	.gender-text,
	.birthday-text,
	.bio-text {
		font-size: 30rpx;
		color: #333333;
		flex: 1;
		text-align: right;
		margin-right: 20rpx;
	}
	
	.bio-text {
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.arrow {
		font-size: 32rpx;
		color: #CCCCCC;
	}
	
	.login-mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.92);
	}
	
	.login-btn {
		width: 220rpx;
		height: 80rpx;
		background-color: #4FC3F7;
		color: #FFFFFF;
		border: none;
		border-radius: 40rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>