zhjwxt/uniapp/components/fitness-record-list-popup/index.vue

<!-- 体测记录列表弹窗组件 -->
<template>
	<view class="fitness-record-list-popup" v-if="visible" @click.stop="handleMaskClick">
		<view class="popup-container" @click.stop>
			<!-- 标题栏 -->
			<view class="popup-header">
				<text class="popup-title">体测记录</text>
				<view class="close-btn" @click.stop="handleClose">
					<text>✕</text>
				</view>
			</view>

			<!-- 体测记录列表 -->
			<view class="fitness-records-container">
				<!-- 空状态提示 -->
				<view v-if="!records || records.length === 0" class="empty-state">
					<view class="empty-icon">📊</view>
					<view class="empty-text">暂无体测记录</view>
					<view class="empty-tip">点击下方"新增"按钮添加体测记录</view>
				</view>

				<!-- 体测记录列表 -->
				<FitnessRecordCard
					v-for="record in records"
					:key="record.id"
					:record="record"
					@edit="handleEdit"
				/>
			</view>

			<!-- 底部操作按钮 -->
			<view class="popup-footer">
				<view class="footer-btn cancel-btn" @click.stop="handleClose">关闭</view>
				<view class="footer-btn confirm-btn" @click.stop="handleAddNew">新增</view>
			</view>
		</view>
	</view>
</template>

<script>
import FitnessRecordCard from '@/components/fitness-record-card/fitness-record-card.vue'

export default {
	name: 'FitnessRecordListPopup',
	components: {
		FitnessRecordCard
	},
	props: {
		// 是否显示弹窗
		visible: {
			type: Boolean,
			default: false
		},
		// 体测记录列表
		records: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		// 关闭弹窗
		handleClose() {
			this.$emit('close')
		},

		// 点击遮罩关闭
		handleMaskClick() {
			this.handleClose()
		},

		// 新增体测记录
		handleAddNew() {
			this.$emit('add')
		},

		// 编辑体测记录
		handleEdit(record) {
			this.$emit('edit', record)
		}
	}
}
</script>

<style lang="less" scoped>
.fitness-record-list-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 999; /* 比FitnessRecordPopup的z-index低 */
}

.popup-container {
	width: 100%;
	max-height: 80vh;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 32rpx 24rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.popup-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
}

.close-btn {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F5F5F5;
	border-radius: 50%;
	
	text {
		font-size: 40rpx;
		color: #999999;
		line-height: 1;
	}
}

.fitness-records-container {
	flex: 1;
	overflow-y: auto;
	padding: 24rpx 32rpx;
	max-height: 50vh;
}

/* 滚动条样式 */
.fitness-records-container::-webkit-scrollbar {
	width: 6rpx;
}

.fitness-records-container::-webkit-scrollbar-track {
	background: transparent;
}

.fitness-records-container::-webkit-scrollbar-thumb {
	background: #29D3B4;
	border-radius: 3rpx;
}

.fitness-records-container::-webkit-scrollbar-thumb:hover {
	background: #24B89E;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	line-height: 1;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 16rpx;
}

.empty-tip {
	font-size: 24rpx;
	color: #CCCCCC;
}

.popup-footer {
	display: flex;
	padding: 24rpx 32rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #F0F0F0;
	gap: 24rpx;
}

.footer-btn {
	flex: 1;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.cancel-btn {
	background: #F5F5F5;
	color: #666666;
}

.confirm-btn {
	background: linear-gradient(135deg, #29D3B4 0%, #24B89E 100%);
	color: #FFFFFF;
}
</style>