zhjwxt/uniapp/pages/common/profile/index.vue

<template>
	<view class="profile-container">
		<!-- 自定义导航栏 -->
		<uni-nav-bar
			:statusBar="true"
			backgroundColor="#181A20"
			color="#fff"
			title="我的"
		/>
		
		<!-- 用户头像和基本信息 -->
		<view class="profile-header">
			<view class="avatar-section">
				<image :src="userInfo.avatar || '/static/icon-img/tou.png'" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.name || '员工姓名' }}</text>
				<text class="user-role">{{ (userInfo.role_info && userInfo.role_info.role_name) || '员工角色' }}</text>
				<text class="user-phone">{{ userInfo.phone || '手机号码' }}</text>
			</view>
		</view>

		<!-- 我的功能九宫格 -->
		<view class="grid-container">
			<view class="grid-title">个人中心</view>
			<view class="grid-content">
				<view 
					class="grid-item" 
					v-for="(item, index) in profileItems" 
					:key="index"
					@click="handleProfileClick(item)"
				>
					<view class="grid-icon">
						<uni-icons :type="item.icon" size="32" color="#29d3b4"></uni-icons>
					</view>
					<text class="grid-text">{{ item.title }}</text>
					<text class="grid-desc" v-if="item.desc">{{ item.desc }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				profileItems: [
					{
						title: '我的资料',
						icon: 'contact',
						desc: '查看编辑个人信息',
						action: 'viewProfile'
					},
					{
						title: '我的合同',
						icon: 'compose',
						path: '/pages/parent/contracts/index'
					},
					{
						title: '我的工资',
						icon: 'wallet',
						desc: '查看工资明细',
						action: 'viewSalary'
					},
					{
						title: '我的考勤',
						icon: 'calendar',
						path: '/pages/common/my_attendance'
					},
					{
						title: '系统设置',
						icon: 'settings',
						path: '/pages/market/my/set_up'
					}
				]
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		onShow() {
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo() {
				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = userInfo;
				}
			},
			handleProfileClick(item) {
				if (item.action) {
					// 处理特殊操作
					switch (item.action) {
						case 'viewProfile':
							this.viewPersonalProfile();
							break;
						case 'viewSalary':
							this.viewSalaryInfo();
							break;
					}
				} else if (item.path) {
					// 页面跳转
					this.$navigateTo({
						url: item.path
					});
				}
			},
			viewPersonalProfile() {
				// 显示个人资料弹窗或跳转到编辑页面
				uni.showModal({
					title: '个人资料',
					content: '个人资料页面开发中，将包含employee_number、name、phone、email、address等字段的查看和编辑功能',
					showCancel: false
				});
			},
			viewSalaryInfo() {
				// 显示工资信息弹窗或跳转到工资页面
				uni.showModal({
					title: '工资明细',
					content: '工资明细页面开发中，将显示base_salary、performance_bonus、deductions、net_salary等字段，只能查看不能修改',
					showCancel: false
				});
			}
		}
	}
</script>

<style scoped>
	.profile-container {
		background-color: #181A20;
		min-height: 100vh;
		color: #fff;
	}

	.profile-header {
		display: flex;
		align-items: center;
		padding: 30px 20px;
		background: linear-gradient(135deg, #29d3b4 0%, #1a9b7c 100%);
		margin: 20px;
		border-radius: 12px;
	}

	.avatar-section {
		width: 80px;
		height: 80px;
		margin-right: 20px;
	}

	.avatar-section image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3px solid rgba(255, 255, 255, 0.3);
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 8px;
		color: #fff;
	}

	.user-role {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 5px;
	}

	.user-phone {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
	}

	.grid-container {
		margin: 20px;
	}

	.grid-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #fff;
	}

	.grid-content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}

	.grid-item {
		background-color: #292929;
		border-radius: 8px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 90px;
		transition: all 0.3s ease;
	}

	.grid-item:active {
		background-color: #3a3a3a;
		transform: scale(0.95);
	}

	.grid-icon {
		margin-bottom: 8px;
	}

	.grid-text {
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 1.2;
		margin-bottom: 3px;
		font-weight: bold;
	}

	.grid-desc {
		font-size: 10px;
		color: rgba(255, 255, 255, 0.6);
		text-align: center;
		line-height: 1.1;
	}
</style>