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">
					<view class="avatar-container" @click="handleAvatarClick">
						<image 
							:src="formData.avatar || getFileUrl('img/personal/userDemo.png')" 
							:mode="formData.avatar ? 'aspectFill' : 'widthFix'" 
							class="avatar-img"
						/>
					</view>
				</view>
			</view>

			<!-- 昵称 -->
			<view class="user-item">
				<view class="user-item-label">昵称</view>
				<view class="user-item-value">
					<input v-model="formData.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);
		}
	});
};

// 获取微信头像
const handleWechatAvatar = () => {
	// #ifdef MP-WEIXIN
	// 先尝试从已登录的用户信息中获取头像
	const userInfo = userStore.getUserInfo;
	if (userInfo && userInfo.avatar) {
		formData.value.avatar = userInfo.avatar;
		uni.showToast({
			title: '已使用微信头像',
			icon: 'success'
		});
		return;
	}
	
	// 如果用户信息中没有头像，则调用微信API获取
	wx.getUserProfile({
		desc: '用于完善个人资料',
		success: (res) => {
			if (res.userInfo && res.userInfo.avatarUrl) {
				formData.value.avatar = res.userInfo.avatarUrl;
				uni.showToast({
					title: '获取成功',
					icon: 'success'
				});
			}
		},
		fail: (err) => {
			console.log('获取微信头像失败', err);
			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-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>