ajy/code/ajyApp/pages/my/info/info.nvue

<template>
	<view class="page">
		<!-- 头像区 -->
		<view class="section">
			<view class="info-item" @click="changeAvatar">
				<text class="item-label">头像</text>
				<view class="item-right">
					<image class="avatar-preview" :src="avatar" mode="aspectFill"></image>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 基本信息 -->
		<view class="section">
			<view class="info-item" @click="editNickname">
				<text class="item-label">昵称</text>
				<view class="item-right">
					<text class="item-value">{{nickname}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item" @click="editGender">
				<text class="item-label">性别</text>
				<view class="item-right">
					<text class="item-value">{{gender === 1 ? '男' : '女'}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item" @click="editNumberField('age')">
				<text class="item-label">年龄</text>
				<view class="item-right">
					<text class="item-value">{{age ? age + '岁' : '去设置'}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item" @click="editNumberField('shoulderHeight')">
				<text class="item-label">肩高</text>
				<view class="item-right">
					<text class="item-value">{{shoulderHeight ? shoulderHeight + 'cm' : '去设置'}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item" @click="editNumberField('shoulderWidth')">
				<text class="item-label">肩宽</text>
				<view class="item-right">
					<text class="item-value">{{shoulderWidth ? shoulderWidth + 'cm' : '去设置'}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item" @click="editNumberField('weight')">
				<text class="item-label">体重</text>
				<view class="item-right">
					<text class="item-value">{{weight ? weight + 'kg' : '去设置'}}</text>
					<image class="item-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item">
				<text class="item-label">手机号</text>
				<view class="item-right">
					<text class="item-value">{{phone}}</text>
				</view>
			</view>
			<view class="info-item" style="border-bottom-width: 0;">
				<text class="item-label">AppId</text>
				<view class="item-right">
					<text class="item-value">{{appid}}</text>
				</view>
			</view>
		</view>

		<!-- 修改昵称弹窗 -->
		<view class="nickname-overlay" v-if="showNicknamePopup" @click="closeNicknamePopup">
			<view class="nickname-dialog" @click.stop="" :style="{marginBottom: keyboardHeight + 'px'}">
				<text class="dialog-title">修改昵称</text>
				<view class="input-box">
					<input class="nickname-input" v-model="nicknameInput" placeholder="请输入昵称" placeholder-class="input-placeholder"
						maxlength="12" :adjust-position="false" :focus="showNicknamePopup"
						@keyboardheightchange="onKeyboardHeight" />
				</view>
				<view class="dialog-btns">
					<view class="dialog-btn" @click="closeNicknamePopup">
						<text class="dialog-cancel">取消</text>
					</view>
					<view class="dialog-divider"></view>
					<view class="dialog-btn" @click="saveNickname">
						<text class="dialog-confirm">确定</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 数字输入弹窗 -->
		<view class="nickname-overlay" v-if="showNumberPopup" @click="closeNumberPopup">
			<view class="nickname-dialog" @click.stop="" :style="{marginBottom: keyboardHeight + 'px'}">
				<text class="dialog-title">修改{{ getNumberFieldLabel() }}</text>
				<view class="input-box">
					<input class="nickname-input" v-model="numberInput" :type="currentEditField === 'age' ? 'number' : 'digit'" :placeholder="'请输入' + getNumberFieldLabel()" placeholder-class="input-placeholder"
						:adjust-position="false" :focus="showNumberPopup"
						@keyboardheightchange="onKeyboardHeight" />
				</view>
				<view class="dialog-btns">
					<view class="dialog-btn" @click="closeNumberPopup">
						<text class="dialog-cancel">取消</text>
					</view>
					<view class="dialog-divider"></view>
					<view class="dialog-btn" @click="saveNumberField">
						<text class="dialog-confirm">确定</text>
					</view>
				</view>
			</view>
		</view>

		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'
import { uploadAvatar as uploadAvatarApi, updateProfile } from '@/utils/api/user.js'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			avatar: '/static/144x144.png',
			nickname: '用户',
			phone: '',
			appid: '',
			gender: 1, // 1男 2女
			age: '',
			shoulderHeight: '',
			shoulderWidth: '',
			weight: '',
			showNicknamePopup: false,
			showGenderPopup: false,
			showNumberPopup: false,
			nicknameInput: '',
			numberInput: '',
			currentEditField: '', // 'age' | 'shoulderHeight' | 'shoulderWidth' | 'weight'
			keyboardHeight: 0
		}
	},
	onLoad() {
		this.loadUserInfo()
	},
	methods: {
		loadUserInfo() {
			const phone = uni.getStorageSync('phone') || '138****8888'
			const nickname = uni.getStorageSync('nickname') || '用户'
			const appid = uni.getStorageSync('appId') || ''
			const avatar = uni.getStorageSync('avatar') || '/static/144x144.png'
			
			this.phone = phone
			this.nickname = nickname
			this.appid = appid
			this.avatar = avatar
			
			this.gender = uni.getStorageSync('gender') || 1
			this.age = uni.getStorageSync('age') || ''
			this.shoulderHeight = uni.getStorageSync('shoulderHeight') || ''
			this.shoulderWidth = uni.getStorageSync('shoulderWidth') || ''
			this.weight = uni.getStorageSync('weight') || ''
		},
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempPath = res.tempFilePaths[0]
					this.uploadAvatar(tempPath)
				}
			})
		},
		async uploadAvatar(filePath) {
			try {
				// 上传图片到 OSS
				const res = await uploadAvatarApi(filePath)
				const avatarUrl = res.url
				// 更新后端用户资料
				await updateProfile({ avatar: avatarUrl })
				// 更新本地存储和页面显示
				this.avatar = avatarUrl
				uni.setStorageSync('avatar', avatarUrl)
				this.$refs.ayToast.success('头像修改成功')
			} catch (e) {
				// 错误已由 http 层统一提示
			}
		},
		editNickname() {
			this.nicknameInput = this.nickname
			this.showNicknamePopup = true
		},
		closeNicknamePopup() {
			this.showNicknamePopup = false
			this.keyboardHeight = 0
		},
		onKeyboardHeight(e) {
			this.keyboardHeight = e.detail.height || 0
		},
		async saveNickname() {
			const val = this.nicknameInput.trim()
			if (!val) {
				this.$refs.ayToast.error('昵称不能为空')
				return
			}
			try {
				// 更新后端用户资料
				await updateProfile({ nickname: val })
				this.nickname = val
				uni.setStorageSync('nickname', val)
				this.showNicknamePopup = false
				this.keyboardHeight = 0
				this.$refs.ayToast.success('修改成功')
			} catch (e) {
				// 错误已由 http 层统一提示
			}
		},
		editGender() {
			uni.showActionSheet({
				itemList: ['男', '女'],
				success: (res) => {
					const val = res.tapIndex === 0 ? 1 : 2
					this.gender = val
					uni.setStorageSync('gender', val)
					// TODO: 如果后端支持，在这里调用 updateProfile({ gender: val })
					this.$refs.ayToast.success('修改成功')
				}
			})
		},
		editNumberField(field) {
			this.currentEditField = field
			this.numberInput = String(this[field] || '')
			this.showNumberPopup = true
		},
		closeNumberPopup() {
			this.showNumberPopup = false
			this.keyboardHeight = 0
		},
		getNumberFieldLabel() {
			const map = {
				age: '年龄',
				shoulderHeight: '肩高',
				shoulderWidth: '肩宽',
				weight: '体重'
			}
			return map[this.currentEditField] || ''
		},
		saveNumberField() {
			const val = this.numberInput.trim()
			if (!val) {
				this.$refs.ayToast.error(`请输入${this.getNumberFieldLabel()}`)
				return
			}
			
			const num = Number(val)
			if (isNaN(num) || num <= 0) {
				this.$refs.ayToast.error('请输入有效的数字')
				return
			}
			
			if (this.currentEditField === 'shoulderHeight' && (num < 50 || num > 250)) {
				this.$refs.ayToast.error('肩高范围为50-250cm')
				return
			}
			if (this.currentEditField === 'shoulderWidth' && (num < 20 || num > 80)) {
				this.$refs.ayToast.error('肩宽范围为20-80cm')
				return
			}
			if (this.currentEditField === 'weight' && (num < 10 || num > 300)) {
				this.$refs.ayToast.error('体重范围为10-300kg')
				return
			}
			if (this.currentEditField === 'age' && (num < 1 || num > 150)) {
				this.$refs.ayToast.error('年龄范围为1-150岁')
				return
			}
			
			this[this.currentEditField] = num
			uni.setStorageSync(this.currentEditField, num)
			// TODO: 如果后端支持，在这里调用 updateProfile({ [this.currentEditField]: num })
			
			this.showNumberPopup = false
			this.keyboardHeight = 0
			this.$refs.ayToast.success('修改成功')
		}
	},
	onShow() {
		// 返回时刷新用户信息
		this.loadUserInfo()
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #F5F6F8;
}
/* 分组 */
.section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	border-radius: 20rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	overflow: hidden;
}
/* 信息项 */
.info-item {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 110rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	border-bottom-width: 1px;
	border-bottom-color: #F0F0F0;
	border-bottom-style: solid;
}
.item-label {
	font-size: 30rpx;
	color: #333333;
}
.item-right {
	flex-direction: row;
	align-items: center;
}
.item-value {
	font-size: 30rpx;
	color: #999999;
	margin-right: 16rpx;
}
.item-arrow {
	width: 32rpx;
	height: 32rpx;
}
.avatar-preview {
	width: 80rpx;
	height: 80rpx;
	border-radius: 80rpx;
	margin-right: 16rpx;
}
/* 昵称修改弹窗 */
.nickname-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	justify-content: center;
	align-items: center;
}
.nickname-dialog {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 28rpx;
	align-items: center;
	overflow: hidden;
}
.dialog-title {
	font-size: 34rpx;
	color: #333333;
	font-weight: bold;
	margin-top: 48rpx;
	margin-bottom: 40rpx;
}
.input-box {
	width: 520rpx;
	height: 88rpx;
	background-color: #F5F6F8;
	border-radius: 16rpx;
	justify-content: center;
	padding-left: 24rpx;
	padding-right: 24rpx;
	margin-bottom: 48rpx;
}
.nickname-input {
	font-size: 30rpx;
	color: #333333;
}
.dialog-btns {
	flex-direction: row;
	align-self: stretch;
	border-top-width: 1px;
	border-top-color: #F0F0F0;
	border-top-style: solid;
	height: 96rpx;
	align-items: center;
}
.dialog-btn {
	flex: 1;
	height: 96rpx;
	justify-content: center;
	align-items: center;
}
.dialog-cancel {
	font-size: 32rpx;
	color: #999999;
}
.dialog-divider {
	width: 1px;
	height: 96rpx;
	background-color: #F0F0F0;
}
.dialog-confirm {
	font-size: 32rpx;
	color: #389588;
	font-weight: bold;
}
</style>