phone-app------test1-/pages/UserProfileModal/UserProfileModal.vue

<template>
	<view class="status-bar"></view>
	<view class="user-profile page-container">
		<view class="modal-header">
			<view class="modal-left"  @click="closeUserCard">
				<view class="iconfont icon-fanhui custom-navbar-icon"></view>
			</view>
			<view class="modal-title">
				<view class="title-text">编辑资料</view>
			</view>
			<view class="modal-right" @click="saveUpdate">
				<view class="save-btn">保存</view>
			</view>
		</view>
		<view class="modal-body">
			<view class="avatar-upload-section" @click="triggerAvatarUpload">
				<view class="avatar-upload-container">
					<view v-if="editUserAvatar" class="avatar-preview">
						<image :src="editUserAvatar" mode="aspectFill"></image>
					</view>
					<view v-else class="avatar-placeholder">
						<uni-icons type="person-filled" size="100rpx" color="#ffffff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="form-card">
				<view class="form-field">
					<view class="form-text">用户名</view>
					<input adjust-position="false" class="form-field-input form-field-username"
						:class="{'edit-input-focus':isNameFocus}" v-model="editUsername" @focus="isNameFocus=true"
						@blur="isNameFocus=false" />
				</view>
				<view class="solid-line"></view>
				<view class="form-field">
					<view class="form-text">邮箱</view>
					<input adjust-position="false" class="form-field-input form-field-emile"
						:class="{'edit-input-focus':isEmailFocus}" v-model="editEmail" @focus="isEmailFocus=true"
						@blur="isEmailFocus=false" />
				</view>
			</view>
			<view class="prompt-content">*保存后再返回哟</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import { getUserInfo } from '@/utils/cloud-api.js'
	import {getToken} from '@/utils/user-info.js'

	const closeUserCard = () => {
		console.log("点击了返回")
		uni.navigateBack({
			delta: 1,
			fail() {
				uni.reLaunch({
					url: '/pages/Chat/Chat'
				})
			}
		})
	}
	
	const saveUpdate = () => {
		uni.navigateBack({
			url: '/pages/Chat/Chat'
		})
	}


	const editUserAvatar = ref('')
	const editUsername = ref('')
	const editEmail = ref('')
	const isNameFocus = ref(false)
	const isEmailFocus = ref(false)

	// 上传头像
	const triggerAvatarUpload = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0]
				handlrImageSelected(tempFilePath)
			},
			fail: (err) => {
				console.log('选择图片失败', err);
			}
		})
	}

	// 处理选择的图片
	const handlrImageSelected = (filePath) => {
		editUserAvatar.value = filePath
	}
	
	onMounted(async()=>{
		const token = getToken()
		const UserInfo = await getUserInfo(token)
		
		editUserAvatar.value = UserInfo.avatar || ''
		editUsername.value = UserInfo.username || ''
		editEmail.value = UserInfo.email || ''
	})
</script>

<style lang="scss" scoped>
	.user-profile {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(193, 193, 193, 0.1);
	}


	.modal-header {
		position: relative;
		width: 100%;
		height: auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.modal-left {
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
		}

		.modal-title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 100%;
			height: auto;
			left: 50%;
			transform: translate(-50%);
			
			.title-text {
				font-size: 16px;
				font-weight: 500;
			}

		}

		.modal-right {
			display: flex;
			align-items: center;
			justify-content: center;
			size: 40rpx;
			z-index: 2;
			
			.save-btn {
				background-color: #3b82f6;
				color: #ffffff;
				padding: 8rpx 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}
		}
	}

	.modal-body {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
		box-sizing: border-box;

		.avatar-upload-section {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-bottom: 10rpx;
			box-sizing: border-box;

			.avatar-upload-container {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				padding: 5rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				background: #f3f4f6;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 5rpx solid #dddddd;
				box-sizing: border-box;


				.avatar-preview {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.avatar-placeholder {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx;
					box-sizing: border-box;
					border-radius: 50%;
					background: #9ca3af;
				}
			}
		}

		.form-card {
			width: 100%;
			padding: 20rpx;
			background: #ffffff;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin: 20rpx 0;
		}

		.form-field {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			margin: 20rpx 0rpx;
			width: 100%;
			
			.form-text {
				font-size: 15px;
				font-weight: 300;
			}

			.form-field-input {
				width: 100%;
				height: 80rpx
			}

			.edit-input-focus {
				background: rgba(170, 255, 255, 0.1);
			}

			.form-field-username {
				
			}

			.form-field-emile {}

		}
		
		.prompt-content {
			width: 100%;
			font-size: 10px;
			color: #9ca3af;
		}
	}
</style>