threeonecheck_web/pages/personalcenter/edit.vue

<template>
	<view class="page">
		<view class="padding bg-white">
			<!-- 头像 -->
			<view class="flex justify-between align-center padding-tb solid-bottom" @click="chooseAvatar">
				<view class="text-black">头像</view>
				<view class="flex align-center">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 昵称 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">昵称</view>
				<view class="flex align-center flex-sub justify-end">
					<input class="input-right" v-model="userInfo.nickname" placeholder="请输入昵称" />
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 用户名 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">用户名</view>
				<view class="flex align-center">
					<text class="text-black">{{ userInfo.username }}</text>
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 个性签名 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">个性签名</view>
				<view class="flex align-center flex-sub justify-end">
					<input class="input-right" v-model="userInfo.signature" placeholder="请输入个性签名" />
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 性别 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black">性别</view>
				<view class="flex align-center">
					<view class="gender-switch">
						<view 
							class="gender-item" 
							:class="{ 'gender-active': userInfo.gender === 1, 'gender-male': userInfo.gender === 1 }"
							@click="userInfo.gender = 1"
						>
							<text class="cuIcon-male"></text>
						</view>
						<view 
							class="gender-item" 
							:class="{ 'gender-active': userInfo.gender === 2, 'gender-female': userInfo.gender === 2 }"
							@click="userInfo.gender = 2"
						>
							<text class="cuIcon-female"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 日期选择 -->
			<view class="flex justify-between align-center padding-tb solid-bottom" @click="showDatePicker = true">
				<view class="text-black">日期选择</view>
				<view class="flex align-center">
					<text class="text-black">{{ userInfo.birthday || '请选择日期' }}</text>
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<up-calendar 
				:show="showDatePicker" 
				mode="single" 
				@confirm="confirmDate" 
				@close="showDatePicker = false"
			></up-calendar>
			
			<button class="bg-blue round margin-top-xl" @click="handleSave">保存</button>
			<button class="round line-blue margin-top" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const showDatePicker = ref(false);

const userInfo = reactive({
	avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
	nickname: '希缝弗斯',
	username: '17374339800',
	signature: '',
	gender: 1,  // 1-男 2-女
	birthday: '2025-10-09'
});

// 选择头像
const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			userInfo.avatar = res.tempFilePaths[0];
		}
	});
};

// 日期选择确认
const confirmDate = (e) => {
	userInfo.birthday = e[0];
	showDatePicker.value = false;
};

// 保存
const handleSave = () => {
	uni.showToast({ title: '保存成功', icon: 'success' });
};

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.reLaunch({ url: '/pages/login/login' });
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f5f5f5;
}

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

.label-text {
	flex-shrink: 0;
	margin-right: 20rpx;
}

.input-right {
	text-align: right;
	font-size: 28rpx;
	color: #333;
}

.padding-tb {
	padding: 30rpx 0;
}

.gender-switch {
	display: flex;
	align-items: center;
	background: #f0f0f0;
	border-radius: 40rpx;
	padding: 4rpx;
}

.gender-item {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #999;
	transition: all 0.3s;
}

.gender-active {
	color: #fff;
}

.gender-male {
	background: #2667E9;
}

.gender-female {
	background: #ff6b81;
}

.line-blue {
	border: 1rpx solid #2667E9;
	color: #2667E9;
	background: #fff;
}
</style>