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="showImg(item.image)"
            mode="aspectFill"
            class="memorial-image"
          />
          <view class="memorial-info">
            <text class="memorial-title">{{ item.title }}</text>
            <text class="memorial-code">{{ item.code }}</text>
            <text class="memorial-status">{{ item.status }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MemorialAlbum",
  data() {
    return {
      memorialItems: [
        {
          id: 1,
          title: "香在苏州｜世界美食之都",
          code: "#001-0050/1000",
          status: "XXX博物馆",
          image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png",
        },
        {
          id: 2,
          title: "香在苏州｜世界美食之都",
          code: "#001-0050/1000",
          status: "XXX博物馆",
          image: "/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png",
        },
        {
          id: 3,
          title: "香在苏州｜世界美食之都",
          code: "#001-0050/1000",
          status: "XXX博物馆",
          image: "/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png",
        },
        {
          id: 4,
          title: "香在苏州｜世界美食之都",
          code: "#001-0050/1000",
          status: "XXX博物馆",
          image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png",
        },
      ],
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 跳转到详情页面
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPackages/memorialAlbum/detail?id=${item.id}`,
      });
    },

    // 图片预览
    previewImage(imagePath) {
      const imageUrl = this.showImg(imagePath);
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl,
      });
    },

    // 图片路径处理
    showImg(img) {
      if (!img) return "";
      if (img.startsWith("http")) {
        return img;
      }
      // 这里需要根据你的项目实际情况调整API地址
      const NEWAPIURL = "https://epic.js-dyyj.com";
      return `${NEWAPIURL}${img}`;
    },
  },
};
</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;
}

// 响应式处理
@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>