campus-errand/miniapp/pages/mine/profile.vue

<template>
	<view class="profile-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="nav-back" @click="goBack">
					<image class="back-icon" src="/static/ic_back.png" mode="aspectFit"></image>
				</view>
				<text class="navbar-title">编辑资料</text>
				<view class="nav-placeholder"></view>
			</view>
		</view>
		<view :style="{ height: (statusBarHeight + 44) + 'px' }"></view>

		<!-- 头像 -->
		<view class="profile-section">
			<view class="profile-item">
				<text class="item-label">头像</text>
				<view class="item-right" @click="onPickAvatar">
					<image class="avatar-preview" :src="form.avatarUrl || '/static/logo.png'" mode="aspectFill"></image>
					<image class="arrow-icon" src="/static/ic_arrow.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="profile-item">
				<text class="item-label">昵称</text>
				<view class="item-right">
					<input class="nickname-input" type="nickname" v-model="form.nickname" placeholder="请输入昵称" maxlength="20" @blur="onNicknameBlur" />
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-section">
			<button class="save-btn" @click="onSave" :loading="saving" :disabled="saving">保存</button>
		</view>
	</view>
</template>

<script>
import { updateProfile } from '../../utils/api'
import { uploadFile } from '../../utils/request'
import { useUserStore } from '../../stores/user'

export default {
	data() {
		return {
			statusBarHeight: 0,
			form: {
				nickname: '',
				avatarUrl: ''
			},
			saving: false
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 0
		const userStore = useUserStore()
		this.form.nickname = userStore.userInfo.nickname || ''
		this.form.avatarUrl = userStore.userInfo.avatarUrl || ''
	},
	methods: {
		goBack() { uni.navigateBack() },

		/** 选择头像 */
		async onPickAvatar() {
			const self = this
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: async (res) => {
					const tempUrl = res.tempFilePaths[0]
					if (!tempUrl) return
					try {
						uni.showLoading({ title: '上传中...' })
						const uploadRes = await uploadFile(tempUrl)
						self.form.avatarUrl = uploadRes.url
						uni.hideLoading()
					} catch (err) {
						uni.hideLoading()
						// 上传失败，先用临时路径显示
						self.form.avatarUrl = tempUrl
					}
				}
			})
		},

		/** 昵称输入框失焦（微信昵称选择后触发） */
		onNicknameBlur(e) {
			if (e.detail.value) {
				this.form.nickname = e.detail.value
			}
		},

		/** 保存 */
		async onSave() {
			if (!this.form.nickname.trim()) {
				uni.showToast({ title: '请输入昵称', icon: 'none' })
				return
			}
			this.saving = true
			try {
				const res = await updateProfile({
					nickname: this.form.nickname.trim(),
					avatarUrl: this.form.avatarUrl
				})
				// 更新本地用户信息
				const userStore = useUserStore()
				const info = { ...userStore.userInfo, nickname: res.nickname, avatarUrl: res.avatarUrl }
				userStore.setLoginInfo(userStore.token, info)
				uni.showToast({ title: '保存成功', icon: 'success' })
				setTimeout(() => { uni.navigateBack() }, 1000)
			} catch (e) {
				// 错误已在 request 中处理
			} finally {
				this.saving = false
			}
		}
	}
}
</script>

<style scoped>
.profile-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}
.custom-navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #FFB700; }
.navbar-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; }
.nav-back { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
.back-icon { width: 40rpx; height: 40rpx; }
.navbar-title { font-size: 34rpx; font-weight: bold; color: #363636; }
.nav-placeholder { width: 60rpx; }

.profile-section {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
}
.profile-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}
.profile-item:last-child { border-bottom: none; }
.item-label { font-size: 30rpx; color: #333; flex-shrink: 0; }
.item-right { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.avatar-preview { width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 16rpx; }
.avatar-btn {
	display: flex; align-items: center; background: none; border: none;
	padding: 0; margin: 0; line-height: normal;
}
.avatar-btn::after { border: none; }
.arrow-icon { width: 28rpx; height: 28rpx; }
.nickname-input { text-align: right; font-size: 30rpx; color: #333; flex: 1; }
.wx-tip { font-size: 24rpx; color: #999; margin-right: 12rpx; }

.save-section { padding: 40rpx 24rpx; }
.save-btn {
	width: 100%; height: 88rpx; line-height: 88rpx;
	background: #FAD146; color: #fff; font-size: 32rpx;
	font-weight: bold; border-radius: 44rpx; border: none;
}
.save-btn::after { border: none; }
.save-btn[disabled] { opacity: 0.6; }
</style>