labor_map_miniapp/pages/my/editProfile.vue

<template>
	<view class="edit-profile-page">
		<!-- 头像编辑区域 -->
		<view class="profile-section">
			<view class="profile-item" @click="changeAvatar">
				<text class="item-label">头像</text>
				<view class="item-value avatar-container">
					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
					</button>
					<!-- <text class="arrow">></text> -->
				</view>
			</view>
			
			<view class="profile-item" @click="editNickname">
				<text class="item-label">昵称</text>
				<view class="item-value">
					<text class="nickname">{{ userInfo.nickname || '未设置' }}</text>
					<!-- <text class="arrow">></text> -->
				</view>
			</view>
			
			<!-- <view class="profile-item">
				<text class="item-label">性别</text>
				<view class="item-value">
					<text>{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置' }}</text>
				</view>
			</view> -->
		</view>
		
		<!-- 保存按钮 -->
		<!-- <view class="save-section">
			<button class="save-btn" @click="saveProfile">保存</button>
		</view> -->
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUserStore } from '../../stores/user.js';
import { appUserEditAvatar, appserEditUser } from '../../api/index.js';

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo || {});

// 更换头像
const onChooseAvatar = async (e) => {
    const { avatarUrl } = e.detail 
    console.log(avatarUrl)
	try {
		await appUserEditAvatar(avatarUrl)
		// 更新用户 store 中的头像信息
		if (avatarUrl) {
		  userStore.updateUserInfoField('avatarUrl', avatarUrl);
		}
	} catch(err) {
		console.log(err)
	}

  }

// 更换头像（通过按钮点击触发）
const changeAvatar = () => {
	// 这里可以添加其他更换头像的逻辑
	console.log('点击更换头像');
};

// 编辑昵称
const editNickname = () => {
	uni.showModal({
		title: '编辑昵称',
		editable: true,
		placeholderText: '请输入昵称',
		success: async (res) => {
			if (res.confirm) {
				const nickname = res.content;
				if (nickname) {
					/* userStore.updateUserInfoField('nickName', nickname);
					uni.showToast({
						title: '昵称已更新',
						icon: 'success'
					}); */
					try {
						await appserEditUser({ nickname })
						userStore.updateUserInfoField('nickname', nickname);
					} catch(err) {
						console.log(err)
					}
				}
			}
		}
	});
};

// 保存资料
const saveProfile = () => {
	uni.showToast({
		title: '资料保存成功',
		icon: 'success'
	});
	
	// 返回上一页
	setTimeout(() => {
		uni.navigateBack();
	}, 1000);
};
</script>

<style lang="scss">
.edit-profile-page {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	
	.page-header {
		background-color: #fff;
		padding: 16px;
		text-align: center;
		position: relative;
		border-bottom: 1px solid #eee;
		
		.page-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	}
	
	.profile-section {
		background-color: #fff;
		margin-top: 12px;
		padding: 0 16px;
		
		.profile-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px 0;
			border-bottom: 1px solid #eee;
			
			&:last-child {
				border-bottom: none;
			}
			
			.item-label {
				font-size: 16px;
				color: #333;
			}
			
			.item-value {
				display: flex;
				align-items: center;
				color: #999;
				
				.nickname {
					max-width: 200px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.arrow {
					margin-left: 8px;
					font-size: 18px;
				}
				
				.avatar-container {
					display: flex;
					align-items: center;
				}
				
				.avatar-btn {
					background: none;
					border: none;
					padding: 0;
					margin: 0;
					width: 50px;
					height: 50px;
					border-radius: 25px;
					overflow: hidden;
					
					&::after {
						border: none;
					}
					
					.avatar {
						width: 50px;
						height: 50px;
						border-radius: 25px;
					}
				}
			}
		}
	}
	
	.save-section {
		padding: 24px 16px;
		
		.save-btn {
			width: 100%;
			height: 48px;
			background-color: #07c160;
			color: #fff;
			font-size: 16px;
			border-radius: 24px;
			border: none;
			
			&::after {
				border: none;
			}
		}
	}
}
</style>