WechatApp/pages/personal/userInfo.vue

<template>
	<!-- 个人信息页面 -->
	<view class="content">
		<view class="user-info">
			<!-- 头像 -->
			<view class="user-item">
				<view class="user-item-label">头像</view>
				<view class="user-item-value">
					<!-- #ifdef MP-WEIXIN -->
					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<view class="avatar-container">
							<image 
								:src="formData.avatar || getFileUrl('img/personal/userDemo.png')" 
								:mode="formData.avatar ? 'aspectFill' : 'widthFix'" 
								class="avatar-img"
							/>
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="avatar-container" @click="handleAvatarClick">
						<image 
							:src="formData.avatar || getFileUrl('img/personal/userDemo.png')" 
							:mode="formData.avatar ? 'aspectFill' : 'widthFix'" 
							class="avatar-img"
						/>
					</view>
					<!-- #endif -->
				</view>
			</view>

			<!-- 昵称：微信端 type="nickname" 可一键填入微信昵称 -->
			<view class="user-item">
				<view class="user-item-label">昵称</view>
				<view class="user-item-value">
					<input
						v-model="formData.nickname"
						type="nickname"
						class="user-input"
						placeholder="请输入昵称，可点击使用微信昵称"
						placeholder-style="color: #999;"
					/>
				</view>
			</view>

			<!-- 性别 -->
			<view class="user-item">
				<view class="user-item-label">性别</view>
				<view class="user-item-value">
					<view class="gender-group">
						<view 
							v-for="item in genderOptions" 
							:key="item.value"
							class="gender-item" 
							:class="{ active: formData.gender === item.value }" 
							hover-class="none"
							@click="formData.gender = item.value"
						>
							<image 
								:src="getFileUrl(formData.gender === item.value ? 'img/personal/sele2.png' : 'img/personal/sele1.png')" 
								mode="widthFix" 
								class="gender-img"
							/>
							<text class="gender-text">{{ item.label }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 生日 -->
			<view class="user-item">
				<view class="user-item-label">生日</view>
				<view class="user-item-value">
					<picker mode="date" :value="formData.birthday" @change="handleBirthdayChange"
						class="picker-wrapper">
						<view class="picker-content">
							<text :class="['picker-text', { placeholder: !formData.birthday }]">
								{{ formData.birthday || '请选择生日' }}
							</text>
							<view class="arrow-icon"></view>
						</view>
					</picker>
				</view>
			</view>

			<!-- 手机号码 -->
			<view class="user-item">
				<view class="user-item-label">手机号码</view>
				<view class="user-item-value">
					<view class="phone-wrapper">
						<text class="phone-number">{{ formData.phone || '1510987760' }}</text>
						<text class="change-btn" @click="handleChangePhone">更换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store/user.js';
import { getFileUrl } from '@/utils/file.js';
import { go } from '@/utils/utils.js';

const userStore = useUserStore();

// 性别选项
const genderOptions = [
	{ value: 'male', label: '男' },
	{ value: 'female', label: '女' }
];

// 表单数据
const formData = ref({
	avatar: '',
	nickname: '',
	gender: 'male', // 默认选中男
	birthday: '',
	phone: '1510987760'
});

// 初始化用户信息
onMounted(() => {
	const userInfo = userStore.getUserInfo;
	if (userInfo) {
		formData.value = {
			avatar: userInfo.avatar || '',
			nickname: userInfo.nickname || '',
			gender: userInfo.gender || 'male',
			birthday: userInfo.birthday || '',
			phone: userInfo.phone || '1510987760'
		};
	}
});

// 处理头像点击
const handleAvatarClick = () => {
	uni.showActionSheet({
		itemList: ['微信头像', '从相册选择', '拍照'],
		success: (res) => {
			if (res.tapIndex === 0) {
				// 选择微信头像
				handleWechatAvatar();
			} else if (res.tapIndex === 1) {
				// 选择相册
				handleChooseAlbum();
			} else if (res.tapIndex === 2) {
				// 选择拍照
				handleTakePhoto();
			}
		},
		fail: (err) => {
			console.log('取消选择', err);
		}
	});
};

// 微信小程序：通过「头像昵称填写」能力选择头像（button open-type="chooseAvatar" 触发）
// 注意：e.detail.avatarUrl 为临时路径，需上传到服务器后保存永久链接
const onChooseAvatar = (e) => {
	if (e.detail && e.detail.avatarUrl) {
		formData.value.avatar = e.detail.avatarUrl;
		uni.showToast({ title: '头像已选择', icon: 'success' });
	}
};

// 获取微信头像（仅非 MP-WEIXIN 时从 actionSheet 进入；MP-WEIXIN 已改用模板内 button chooseAvatar）
const handleWechatAvatar = () => {
	// #ifdef MP-WEIXIN
	// 微信已废弃 getUserProfile，请直接点击页面头像区域，使用「选择头像」按钮
	uni.showToast({
		title: '请点击上方头像区域选择',
		icon: 'none'
	});
	// #endif
	// #ifndef MP-WEIXIN
	uni.showToast({
		title: '当前环境不支持',
		icon: 'none'
	});
	// #endif
};

// 选择相册
const handleChooseAlbum = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			// 这里可以调用上传接口
			// 暂时直接使用本地路径
			formData.value.avatar = tempFilePath;
		},
		fail: (err) => {
			console.log('选择相册失败', err);
		}
	});
};

// 拍照
const handleTakePhoto = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			// 这里可以调用上传接口
			// 暂时直接使用本地路径
			formData.value.avatar = tempFilePath;
		},
		fail: (err) => {
			console.log('拍照失败', err);
		}
	});
};

// 处理生日选择
const handleBirthdayChange = (e) => {
	formData.value.birthday = e.detail.value;
};

// 处理更换手机号
const handleChangePhone = () => {
	go('/pages/personal/setPhone');
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	min-height: 100vh;
	background-color: #F5F5F5;
	box-sizing: border-box;
	padding: 20rpx;
}

.user-info {
	width: 100%;
	border-radius: 23rpx;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 30rpx;

	.user-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		.user-item-label {
			font-size: 28rpx;
			color: #333;
			font-weight: 400;
		}

		.user-item-value {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
		}
	}
}

// 头像样式
.avatar-btn {
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	line-height: 1;
	&::after {
		border: none;
	}
}

.avatar-container {
	width: 76rpx;
	height: 76rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}

// 输入框样式
.user-input {
	flex: 1;
	text-align: right;
	font-size: 28rpx;
	color: #333;
}

// 性别选择样式
.gender-group {
	display: flex;
	align-items: center;
	gap: 40rpx;

	.gender-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		cursor: pointer;

		.gender-text {
			font-size: 28rpx;
			color: #333;
		}

		&.active {
			.gender-text {
				color: #FF6B35;
			}
		}
	}
}

// 日期选择器样式
.picker-wrapper {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.picker-content {
	display: flex;
	align-items: center;
	gap: 12rpx;

	.picker-text {
		font-size: 28rpx;
		color: #333;

		&.placeholder {
			color: #999;
		}
	}

	.arrow-icon {
		width: 12rpx;
		height: 12rpx;
		border-right: 2rpx solid #999;
		border-top: 2rpx solid #999;
		transform: rotate(45deg);
		margin-right: 4rpx;
	}
}

// 手机号样式
.phone-wrapper {
	display: flex;
	align-items: center;
	gap: 20rpx;

	.phone-number {
		font-size: 28rpx;
		color: #333;
	}

	.change-btn {
		font-size: 28rpx;
		color: #F47D1F;
		cursor: pointer;
	}
}

.gender-img {
	width: 26rpx;
	height: 26rpx;
}
</style>