yuanling-app/pages/security/index.vue

<template>
	<view class="container">
		<!-- 列表区域 -->
		<scroll-view class="scroll-container" scroll-y refresher-enabled @refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing">
			<view class="security-list">
				<view v-for="(item, index) in securityList" :key="index" class="security-card">
					<view class="card-left">
						<image class="avatar" :src="item.avatar" mode="aspectFill" />
					</view>
					<view class="card-middle">
						<text class="name">{{ item.name }}</text>
						<text class="phone">{{ item.phone }}</text>
						<text class="position">{{ item.position }}</text>
					</view>
					<view class="card-right">
						<view class="action-buttons">
							<button size="mini" type="primary" class="action-btn"
								@tap.stop="onCardTap(item)">查看详情</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	interface SecurityPerson {
		id : number;
		name : string;
		phone : string;
		position : string;
		status : string;
		avatar : string;
	}

	const isRefreshing = ref(false);

	const securityList = ref<SecurityPerson[]>([
		{
			id: 1,
			name: '张明',
			phone: '13800138000',
			position: '安保主管',
			status: '在岗',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/0e24afc38826cc6acd7c21f9423bfff1.jpg'
		},
		{
			id: 2,
			name: '李强',
			phone: '13800138001',
			position: '安保队长',
			status: '休息',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/5c69aa860f81bf5bcf6592deb7391099.jpg'
		},
		{
			id: 3,
			name: '王华',
			phone: '13800138002',
			position: '安保员',
			status: '在岗',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/4b109fb7399df8f30756530cac9e9004.jpg'
		}
	]);

	const onRefresh = () => {
		isRefreshing.value = true;
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};

	const onCardTap = (item : SecurityPerson) => {
		uni.navigateTo({
			url: `/pages/security/personnelDetails?name=${item.name}`
		})
	};
</script>

<style>
	page {
		height: 100%;
	}

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

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

	.security-list {
		padding: 20rpx;
	}

	.security-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.card-left {
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.card-middle {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.phone {
		font-size: 14px;
		color: #666666;
		margin-bottom: 8rpx;
	}

	.position {
		font-size: 14px;
		color: #999999;
	}

	.card-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
	}

	.status-tag {
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
		font-size: 12px;
		margin-bottom: 16rpx;
	}

	.status-active {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-inactive {
		background-color: #fff1f0;
		color: #ff4d4f;
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		font-size: 12px;
		padding: 0 20rpx;
	}
</style>