mechanicStore-app/pages/myEdit/myEdit.uvue

<template>
	<view class="page-container">
		<!-- 内容区 -->
		<scroll-view class="content-box" scroll-y>
			<!-- 头像+基础信息区 -->
			<view class="avatar-section">
				<view class="avatar-wrap">
					<image class="avatar-img" :src="userAvatar" mode="aspectFill">
					</image>
					<image class="avatar-tag" src="/static/imagesInfo/xiangji-icon.png" mode="aspectFit">
					</image>
					<!-- 头像角标 -->
				</view>
				<text class="user-name">
					刘大锤
				</text>
				<text class="user-phone">
					16709890987
				</text>
			</view>

			<!-- 信息列表容器 -->
			<view class="info-list">
				<!-- 年龄项（带开关） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						年龄
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text">
							24岁
						</text>
						<switch class="info-switch" checked color="#FFCC00">
						</switch>
					</view>
				</view>

				<!-- 昵称项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						昵称
					</text>
					<view class="info-content" style="flex-direction: row;" @click="openNicknameContainer">
						<text class="content-text">
							熙熙
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 生活照片项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						生活照片
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text text-gray">
							未添加
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 商户简介项（审核失败） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						商户简介
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text text-red">
							审核失败
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 证件上传项（待审核+待处理） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						证件上传
					</text>
					<view class="info-content" style="flex-direction: row;">
						<view class="status-tag-wrap" style="flex-direction: row;">
							<text class="status-tag tag-gray">
								待审核
							</text>
							<text class="status-tag tag-orange">
								待处理
							</text>
						</view>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 紧急联系人项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						紧急联系人
					</text>
					<view class="info-content" style="flex-direction: row;">
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 我的负责人项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						我的负责人
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text">
							李景才-18709873290
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 从业年份项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						从业年份
					</text>
					<view class="info-content" style="flex-direction: row;">
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>

		<page-container :show="containerShow" :position="containerPosition" :round="containerRound"
		:overlay="containerOverlay" :overlay-style="containerOverlayStyle"
		:close-on-slide-down="containerCloseOnSlideDown" @afterleave="onAfterLeave" class="pagecontainerpopup">
			<view class="container">
				<text class="container-title">
					{{ containerTitle }}
				</text>
				<input class="nickname-input" v-model="nicknameInput" placeholder="请输入昵称" />
				<text class="nickname-error" v-if="nicknameError">
					{{ nicknameError }}
				</text>
				<button class="save-btn" @click="saveNickname">
					确定
				</button>
			</view>
		</page-container>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const userAvatar = ref('/static/imagesInfo/avatar.png');

	// page-container 组件所需变量
	const containerShow = ref(false);
	const containerPosition = ref('center');
	const containerRound = ref(true);
	const containerOverlay = ref(true);
	const containerOverlayStyle = ref({
			backgroundColor: 'rgba(0, 0, 0, 0.5)'
		});
	const containerCloseOnSlideDown = ref(true);

	const containerTitle = ref('修改昵称');
	const nicknameInput = ref('');
	const nicknameError = ref('');

	const closeContainer = () => {
		containerShow.value = false;
	};

	const openNicknameContainer = () => {
		nicknameInput.value = '熙熙';
		containerShow.value = true;
	};

	const saveNickname = () => {
		uni.showToast({ title: '昵称修改成功', icon: 'success' });
		containerShow.value = false;
	};
	// 获取个人信息接口
	const getUserInfo = async () => {
		try {
			const res = await uni.request({
					url: '/api/user/info',
					method: 'GET'
				});
			if (res.data.code === 200) {
				const data = res.data.data;
				userAvatar.value = data.avatar || '/static/imagesInfo/avatar.png';
				// 更新其他个人信息...
			}
		} catch (error) {
			console.error('获取用户信息失败', error);
		}
	};



	// 修改头像接口
	const updateAvatar = async (tempFilePath) => {
		try {
			const res = await uni.uploadFile({
					url: '/api/user/avatar',
					filePath: tempFilePath,
					name: 'file'
				});
			const data = JSON.parse(res.data);
			if (data.code === 200) {
				userAvatar.value = data.data.url;
				uni.showToast({ title: '头像上传成功', icon: 'success' });
			}
		} catch (error) {
			console.error('上传头像失败', error);
			uni.showToast({ title: '上传失败', icon: 'none' });
		}
	};

	const onAfterLeave = () => {
		console.log('容器关闭动画结束');
	};
</script>

<style>
	/* 页面容器：解决100vh兼容，全屏适配 */
	.page-container {
		/* min-height: 100%; */
		height: 100%;
		background-color: #f8f8f8;
	}

	/* 顶部导航栏：显式flex-direction:row，横向排版 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	/* 关闭图标 */
	.close-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 导航标题 */
	.nav-title {
		font-size: 36rpx;
		font-weight: 700;
		/* 替换font-weight:600 */
		color: #333;
	}

	/* 占位空盒 */
	.empty-box {
		width: 40rpx;
		height: 40rpx;
	}

	/* 头像+基础信息区：居中排版 */
	.avatar-section {

		align-items: center;
		padding: 40rpx 20rpx;
		background-color: #f5f5f5;
		margin-bottom: 10rpx;

	}

	/* 头像容器：相对定位，容纳角标 */
	.avatar-wrap {
		position: relative;
		margin-bottom: 16rpx;

	}

	/* 头像图片 */
	.avatar-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	/* 头像角标 */
	.avatar-tag {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 32rpx;
		height: 32rpx;
	}

	/* 用户名 */
	.user-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 8rpx;

	}

	/* 手机号 */
	.user-phone {
		font-size: 24rpx;
		color: #666;
		/* 替换font-weight:500 */
	}

	/* 信息列表容器 */
	.info-list {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin: 0 20rpx;
		/* 左右间距 */
		border-radius: 12rpx;
		box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.05);
		/* 四周阴影 */
		overflow: hidden;
	}

	/* 信息项：显式flex-direction:row，横向排版 */
	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 最后一个信息项去掉下边框 */
	.info-list .info-item:last-child {
		border-bottom: none;
	}

	/* 信息标签 */
	.info-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
	}

	/* 信息内容容器：显式flex-direction:row，横向排版 */
	.info-content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* 内容文本 */
	.content-text {
		font-size: 28rpx;
		color: #333;
		margin-right: 12rpx;
	}

	/* 灰色文本（未添加） */
	.text-gray {
		color: #999;
	}

	/* 红色文本（审核失败） */
	.text-red {
		color: #ff4444;
	}

	/* 箭头图标 */
	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	/* 开关样式 */
	.info-switch {
		transform: scale(0.9);
	}

	/* 状态标签容器：显式flex-direction:row，横向排版 */
	.status-tag-wrap {
		display: flex;
		margin-right: 12rpx;
	}

	/* 状态标签通用样式 */
	.status-tag {
		font-size: 22rpx;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}

	/* 待审核标签（灰色） */
	.tag-gray {
		color: #999;
		background-color: #f0f0f0;
	}

	/* 待处理标签（橙色） */
	.tag-orange {
		color: #fff;
		background-color: #ff9900;
	}

	/* page-container 容器样式 */
	.container {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 36rpx;
		/* width: 90%;
		margin: 0 auto;
		*/
	}
	.pagecontainerpopup{
		border-radius: 40rpx;
		width: 80%;
	}
	.container-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 30rpx;
		background: linear-gradient(to right, #FFF9E6, #FFFFFF);
		border-radius: 16rpx;
		padding: 8rpx 20rpx;
		display: block;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.nickname-input {
		width: 100%;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.nickname-error {
		font-size: 24rpx;
		color: #ff4444;
		margin-bottom: 20rpx;
		display: block;
	}

	.save-btn {
		width: 100%;
		background-color: #ffc107;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 50rpx;
		padding: 20rpx;
		border: none;
	}
</style>