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">
				<text class="item-label">手机号</text>
				<view class="item-right">
					<text class="item-value">{{phone}}</text>
				</view>
			</view>
			<view class="info-item">
				<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>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			avatar: '/static/my/avator.png',
			nickname: '用户',
			phone: '',
			appid: '',
			showNicknamePopup: false,
			nicknameInput: '',
			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/my/avator.png'
			this.phone = phone
			this.nickname = nickname
			this.appid = appid
			this.avatar = avatar
		},
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempPath = res.tempFilePaths[0]
					uni.navigateTo({
						url: '/pages/my/crop/crop?src=' + encodeURIComponent(tempPath)
					})
				}
			})
		},
		editNickname() {
			this.nicknameInput = this.nickname
			this.showNicknamePopup = true
		},
		closeNicknamePopup() {
			this.showNicknamePopup = false
			this.keyboardHeight = 0
		},
		onKeyboardHeight(e) {
			this.keyboardHeight = e.detail.height || 0
		},
		saveNickname() {
			const val = this.nicknameInput.trim()
			if (!val) {
				this.$refs.ayToast.error('昵称不能为空')
				return
			}
			this.nickname = val
			uni.setStorageSync('nickname', val)
			this.showNicknamePopup = false
			this.keyboardHeight = 0
			this.$refs.ayToast.success('修改成功')
		}
	},
	onShow() {
		// 从裁剪页返回后刷新头像
		const avatar = uni.getStorageSync('avatar')
		if (avatar) {
			this.avatar = avatar
		}
	}
}
</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>