EpicSoul/subPackages/memorialAlbum/index.vue

<template>
	<view class="memorial-album">
		<!-- 纪念册网格 -->
		<view class="memorial-grid">
			<view class="memorial-item" v-for="(item, index) in memorialItems" :key="index" @click="goToDetail(item)">
				<view class="memorial-card">
					<image :src="item.goodsImg.split(',')[0]" mode="aspectFill" class="memorial-image" />
					<view class="memorial-info">
						<text class="memorial-title">{{ item.goodsTitle }}</text>
						<text class="memorial-code">{{ item.code }}</text>
						<text class="memorial-status">{{ item.ownPart }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MemorialAlbum",
		data() {
			return {
				memorialItems: [

				],
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.Post({},
					"/framework/order/ipOrderList",
					"DES"
				).then((res) => {
					if (res.code == 200) {
						this.memorialItems = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},
			// 跳转到详情页面
			goToDetail(item) {
				uni.navigateTo({
					url: `/subPackages/memorialAlbum/detail?id=${item.orderChildId}`,
				});
			},

		

			
		},
	};
</script>

<style lang="scss" scoped>
	.memorial-album {
		min-height: 100vh;
		background: #f8f9fa;
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 顶部导航
	.nav-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: white;
		border-bottom: 1rpx solid #eee;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-placeholder {
		width: 60rpx;
	}

	// 纪念册网格
	.memorial-grid {
		padding: 30rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.memorial-item {
		background: white;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;

		&:active {
			transform: scale(0.98);
		}
	}

	.memorial-card {
		width: 100%;
	}

	.memorial-image {
		width: 100% !important;
		height: 460rpx !important;
		background: #f5f5f5;
		display: block;
		object-fit: cover;
	}

	.memorial-info {
		padding: 28rpx 24rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.memorial-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.memorial-code {
		font-size: 26rpx;
		color: #666;
		font-family: "Courier New", monospace;
	}

	.memorial-status {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	// 响应式处理
	@media screen and (max-width: 400px) {
		.memorial-grid {
			padding: 20rpx;
			gap: 15rpx;
		}

		.memorial-image {
			height: 460rpx !important; // 保持较高的高度，即使在小屏幕上
		}

		.memorial-info {
			padding: 24rpx 20rpx;
		}

		.memorial-title {
			font-size: 28rpx;
		}
	}
</style>