mahjong_group/pages/me/edit-info.vue

<template>
	<view class="content column">

		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
			<text style="font-size: 30rpx;">修改信息</text>
			<view style="width: 40rpx;"></view>
		</view>

		<view class="column" style="width: 90%; margin: 80rpx auto 0;">

			<view class="row"
				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">
				<text style="">我的UID</text>
				<text style="">{{ user.id }}</text>
			</view>

			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>

			<view class="row"
				style="justify-content: space-between; width: 100%; align-items: center;margin-top:20rpx;">

				<text style="font-size: 26rpx;">我的头像</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="user.avatarImage"
						style="width: 70rpx; height: 70rpx; background-color: aquamarine; border-radius: 50%;" mode="">
					</image>
				</button>

			</view>

			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>

			<view class="row"
				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">

				<text style="">我的昵称</text>

				<input type="nickname" v-model="user.nickName" style="text-align: right;" />
			</view>

			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>

			<view class="row"
				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">

				<text style="">我的年龄</text>

				<picker mode="selector" :value="ageIndex" :range="ageOptions" @change="onAgeChange">
					<view class="picker-text">
						{{ ageOptions[ageIndex] }}岁
					</view>
				</picker>
			</view>

			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>

			<view class="row"
				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">

				<text style="">我的性别</text>

				<picker mode="selector" :value="genderIndex" :range="genderOptions" @change="onGenderChange">
					<view class="picker-text">
						{{ genderOptions[genderIndex] }}
					</view>
				</picker>
			</view>

			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>



		</view>


	</view>
</template>

<script setup>
import { ref } from 'vue'
import { userInfo } from '@/common/server/user'

// 性别选项
const genderOptions = ['男', '女']
const genderIndex = ref(0)

// 年龄选项 (18-90岁)
const ageOptions = Array.from({ length: 73 }, (_, i) => i + 18)
const ageIndex = ref(0)

const user = ref({
	avatarImage: userInfo.value.avatarImage,
	nickName: userInfo.value.nickName,
	age: userInfo.value.age ?? 18,
	id: userInfo.value.id,
	sex: userInfo.value.sex == 1 ? '男' : '女'
})

onLoad(() => {
	console.log("userInfo", userInfo.value);
	// 根据用户性别设置picker的初始值
	if (userInfo.value.sex === '女') {
		genderIndex.value = 1
	} else {
		genderIndex.value = 0
	}

	// 根据用户年龄设置picker的初始值
	const userAge = userInfo.value.age ?? 18
	const ageIndexValue = Math.max(0, Math.min(72, userAge - 18))
	ageIndex.value = ageIndexValue
})
// 方法
const goBack = () => {
	// 返回上一页
	uni.navigateBack({
		delta: 1
	});
}
/**
* 选择头像
*/
const onChooseAvatar = (e) => {
	if (e && e.detail && e.detail.avatarUrl) {
		// user.value.avatarImage = e.detail.avatarUrl;
		convertToBase64(user.value.avatarImage);
	}
}
/**
 * 性别选择变化
 */
const onGenderChange = (e) => {
	genderIndex.value = e.detail.value
	user.value.sex = genderOptions[genderIndex.value]
}

/**
 * 年龄选择变化
 */
const onAgeChange = (e) => {
	ageIndex.value = e.detail.value
	user.value.age = ageOptions[ageIndex.value]
}

/**
 * 将图片转换为Base64
 */
const convertToBase64 = (filePath) => {
	console.log(filePath);
	uni.getFileSystemManager().readFile({
		filePath: filePath,
		encoding: "base64",
		success: (res) => {
			user.value.avatarImage = "data:image/png;base64," + res.data;
		},
		fail: (err) => {
			console.error("读取文件失败:", err);
			uni.showToast({
				title: "图片处理失败",
				icon: "none",
			});
		},
	});
}
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100vh;
}

.avatar-wrapper {
	margin: 0rpx;
	float: right;
	border-radius: 128rpx;
	overflow: hidden;
	border: 0rpx solid #F3F3F3;
	background-color: transparent;
	padding: 0;
	line-height: normal;

	&::after {
		border: none;
	}

	.avatar {
		width: 170rpx;
		height: 160rpx;
		border-radius: 50%;
	}
}

.picker-text {
	display: flex;
	align-items: center;
	color: #333;
	font-size: 26rpx;
}
</style>