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.gender === '男' ? '../../static/img/anbaoimg/male.png' : '../../static/img/anbaoimg/female.png'"
							mode="aspectFill" />
					</view>
					<view class="card-middle">
						<text class="name">{{ item.name }}</text>
						<text class="phone">联系方式：{{ item.contactPhone }}</text>
						<text class="position">籍贯：{{ item.nativePlace }}</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';
	import { clientGet } from '../../utils/request';
	interface SecurityPerson {
		name : string,
		birthDate : string,
		contactPhone : string,
		createBy : string,
		createTime : string,
		currentAddress : string,
		email : string,
		ethnicity : string,
		gender : string,
		id : number,
		idNumber : string,
		maritalStatus : string,
		nativePlace : string,
		updateBy : string,
		updateTime : string
	}

	const isRefreshing = ref(false);
	const currentPage = ref(1);
	const pageSize = ref(100);
	const total = ref(0);
	const securityList = ref<SecurityPerson[]>([]);


	const getEventList = async () => {
		const res = await clientGet("/park/securityPersonnel/findByPage", {
			pageNum: currentPage.value,
			pageSize: pageSize.value,
		})
		if (res.code !== 200) {
			uni.showToast({
				title: "请求数据失败",
				duration: 2000
			})
		}
		console.log("获取数据", res);
		securityList.value = res.records
	}
	getEventList()
	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>