yuanling-app/pages/security/personnelDetails.vue

<template>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y>
			<!-- 顶部个人信息区 -->
			<view class="header">
				<view class="avatar-section">
					<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
					<view class="name-info">
						<text class="name">{{name}}</text>
						<text class="job-number">工号：SP20230001</text>
						<view class="status-tag">
							<text>在岗</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 基本信息卡片 -->
			<view class="info-card">
				<view class="card-title">
					<uni-icons type="person" size="16" color="#333333"></uni-icons>
					<text>基本信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">性别</text>
						<text class="content">男</text>
					</view>
					<view class="info-item">
						<text class="label">年龄</text>
						<text class="content">35岁</text>
					</view>
					<view class="info-item">
						<text class="label">联系电话</text>
						<text class="content">138****8888</text>
					</view>
					<view class="info-item">
						<text class="label">身份证号</text>
						<text class="content">330************1234</text>
					</view>
					<view class="info-item">
						<text class="label">所属部门</text>
						<text class="content">安保一部</text>
					</view>
					<view class="info-item">
						<text class="label">职位级别</text>
						<text class="content">高级安保员</text>
					</view>
				</view>
			</view>

			<!-- 入职信息卡片 -->
			<view class="info-card">
				<view class="card-title">
					<uni-icons type="staff" size="16" color="#333333"></uni-icons>
					<text>入职信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">入职时间</text>
						<text class="content">2023-01-15</text>
					</view>
					<view class="info-item">
						<text class="label">合同期限</text>
						<text class="content">3年</text>
					</view>
					<view class="info-item">
						<text class="label">试用期状态</text>
						<text class="content">已转正</text>
					</view>
					<view class="info-item">
						<text class="label">直属领导</text>
						<text class="content">李主管</text>
					</view>
					<view class="info-item">
						<text class="label">工作地点</text>
						<text class="content">总部大楼B区</text>
					</view>
				</view>
			</view>

			<!-- 资质证书区域 -->
			<view class="info-card">
				<view class="card-title">
					<uni-icons type="medal" size="16" color="#333333"></uni-icons>
					<text>资质证书</text>
				</view>
				<view class="cert-list">
					<view class="cert-item" v-for="(cert, index) in certificates" :key="index">
						<view class="cert-header">
							<text class="cert-name">{{ cert.name }}</text>
							<text class="cert-status">{{ cert.status }}</text>
						</view>
						<view class="cert-info">
							<text class="cert-date">获得时间：{{ cert.date }}</text>
							<text class="cert-validity">有效期至：{{ cert.validity }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部功能区 -->
		<view class="bottom-actions">
			<button class="action-btn call-btn">
				<uni-icons type="phone" size="16" color="#FFFFFF"></uni-icons>
				<text>拨打电话</text>
			</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	let name = ref();
	const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/ae0bc4decca03b83ac852cefebc20813.jpg';
	onLoad((Option) => {
		console.log('接收到的参数:', Option);
		name = Option.name
	})
	const certificates = ref([
		{
			name: '安保人员资格证',
			status: '有效',
			date: '2022-12-01',
			validity: '2025-12-01'
		},
		{
			name: '消防安全培训证书',
			status: '有效',
			date: '2023-03-15',
			validity: '2024-03-15'
		},
		{
			name: '急救技能证书',
			status: '有效',
			date: '2023-05-20',
			validity: '2024-05-20'
		}
	]);
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F5F6F7;
	}

	.scroll-container {
		flex: 1;
		overflow: auto;
	}

	.header {
		position: relative;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		border: 4rpx solid #FFFFFF;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.name-info {
		margin-top: 20rpx;
		text-align: center;
	}

	.name {
		display: block;
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.job-number {
		display: block;
		font-size: 14px;
		color: #666666;
		margin-bottom: 16rpx;
	}

	.status-tag {
		display: inline-block;
		padding: 4rpx 20rpx;
		background-color: #E6F7FF;
		border-radius: 4px;
	}

	.status-tag text {
		font-size: 12px;
		color: #1890FF;
	}

	.info-card {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.card-title text {
		margin-left: 12rpx;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.info-list {
		display: flex;
		flex-direction: column;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #F0F0F0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 14px;
		color: #666666;
	}

	.content {
		font-size: 14px;
		color: #333333;
	}

	.cert-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.cert-item {
		padding: 20rpx;
		background-color: #F8F9FA;
		border-radius: 8px;
	}

	.cert-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.cert-name {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.cert-status {
		font-size: 12px;
		color: #52C41A;
	}

	.cert-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.cert-date,
	.cert-validity {
		font-size: 12px;
		color: #999999;
	}

	.bottom-actions {
		display: flex;
		padding: 20rpx 30rpx;
		gap: 20rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #F0F0F0;
	}

	.action-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}

	.action-btn text {
		margin-left: 8rpx;
		font-size: 14px;
	}

	.call-btn {
		background-color: #52C41A;
	}
</style>