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" :disabled="uploadingAvatar">
						<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 class="submit-wrap">
			<view class="submit-btn hover-active" @click="handleConfirm">确定</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';
import { PostUpdateProfile, uploadFileToServer } from '@/api/dining.js';
import { UPLOAD } from '@/settings/siteSetting.js';

const userStore = useUserStore();
const uploadingAvatar = ref(false);

// 选择完头像后直接上传到 /file/upload，返回完整图片 URL
async function doUploadAvatar(tempPath) {
	const res = await uploadFileToServer(tempPath);
	if (!res || typeof res !== 'string') return '';
	const p = res.trim();
	if (/^https?:\/\//i.test(p)) return p;
	const base = (UPLOAD || '').replace(/\/$/, '');
	return base ? base + p.replace(/^\//, '') : p;
}

function isTempAvatarPath(url) {
	if (!url || typeof url !== 'string') return false;
	const u = url.trim();
	return !/^https?:\/\//i.test(u) || /127\.0\.0\.1|localhost|\/tmp\/|wxfile:\/\//i.test(u);
}

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

// 表单数据（userId 用于更新资料接口必填）
const formData = ref({
	userId: null,
	avatar: '',
	nickname: '',
	gender: 'male',
	birthday: '',
	phone: '1510987760'
});

// 初始化用户信息（头像用 avatarUrl/avatar，与缓存字段一致）
onMounted(() => {
	const userInfo = userStore.getUserInfo || {};
	const g = userInfo.gender;
	const genderVal = g === '女' || g === 'female' ? 'female' : 'male';
	formData.value = {
		userId: userInfo.id ?? userInfo.userId ?? null,
		avatar: userInfo.avatarUrl ?? userInfo.avatar ?? '',
		nickname: userInfo.nickName ?? userInfo.nickname ?? '',
		gender: genderVal,
		birthday: userInfo.birthday ?? '',
		phone: userInfo.phone ?? userInfo.mobile ?? '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);
		}
	});
};

// 选择头像后直接上传到服务器接口 /file/upload，把返回的 url 写入表单
async function uploadAvatarAndSet(tempPath) {
	if (!tempPath) return;
	try {
		uploadingAvatar.value = true;
		const url = await doUploadAvatar(tempPath);
		formData.value.avatar = url || tempPath;
		uni.showToast({ title: url ? '头像上传成功' : '头像上传未返回地址', icon: url ? 'success' : 'none' });
	} catch (err) {
		uni.showToast({ title: err?.message || '头像上传失败', icon: 'none' });
		formData.value.avatar = tempPath;
	} finally {
		uploadingAvatar.value = false;
	}
}

// 微信小程序：选择头像后立即上传，防止重复点击导致 another chooseAvatar is in progress
const onChooseAvatar = async (e) => {
	if (uploadingAvatar.value) return;
	const tempPath = e.detail?.avatarUrl;
	if (tempPath) await uploadAvatarAndSet(tempPath);
};

// 获取微信头像（仅非 MP-WEIXIN 时从 actionSheet 进入；MP-WEIXIN 已改用模板内 button chooseAvatar）
const handleWechatAvatar = () => {
	// #ifdef MP-WEIXIN
	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: async (res) => {
			await uploadAvatarAndSet(res.tempFilePaths[0]);
		},
		fail: (err) => {
			console.log('选择相册失败', err);
		}
	});
};

// 拍照：选择后立即上传
const handleTakePhoto = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['camera'],
		success: async (res) => {
			await uploadAvatarAndSet(res.tempFilePaths[0]);
		},
		fail: (err) => {
			console.log('拍照失败', err);
		}
	});
};

// 确定：先默认调用一次上传头像接口，等待返回后，再把返回的图片 url 传给 dining/user/updateProfile
const handleConfirm = async () => {
	const uid = formData.value.userId;
	if (uid == null || uid === '') {
		uni.showToast({ title: '请先登录', icon: 'none' });
		return;
	}
	let avatarUrl = formData.value.avatar || '';
	// 有头像且为本地临时路径时，先调用自己的上传接口，等待返回后再走更新资料
	if (avatarUrl && isTempAvatarPath(avatarUrl)) {
		try {
			avatarUrl = await doUploadAvatar(avatarUrl);
			if (!avatarUrl) {
				uni.showToast({ title: '头像上传未返回地址', icon: 'none' });
				return;
			}
		} catch (err) {
			uni.showToast({ title: err?.message || '头像上传失败', icon: 'none' });
			return;
		}
	}
	const genderStr = formData.value.gender === 'female' ? '女' : '男';
	const dto = { userId: Number(uid) };
	if (avatarUrl) dto.avatarUrl = avatarUrl;
	if (formData.value.nickname) dto.nickName = formData.value.nickname;
	dto.gender = genderStr;
	if (formData.value.birthday) dto.birthday = formData.value.birthday;
	try {
		await PostUpdateProfile(dto);
		userStore.setUserInfo({
			...userStore.getUserInfo,
			avatarUrl: avatarUrl || formData.value.avatar,
			nickName: formData.value.nickname
		});
		uni.showToast({ title: '保存成功', icon: 'success' });
		setTimeout(() => uni.navigateBack(), 1500);
	} catch (e) {
		uni.showToast({ title: e?.message || '保存失败', icon: 'none' });
	}
};

// 处理生日选择
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;
}

.submit-wrap {
	margin-top: 60rpx;
	padding: 0 20rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
	border-radius: 44rpx;
}

.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;
	}
	&[disabled] {
		opacity: 0.7;
	}
}

.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>