buddhism/pages/ancient/ancient.vue

<template>
  <view class="page">
    <custom-navbar ref="customNavbar" title="古刹巡礼" />
    <tile-grid />
    <scroll-view
      :refresher-triggered="refreshing"
      class="scroll-container"
      refresher-enabled="true"
      scroll-y="true"
      @refresherrefresh="onRefresh"
    >
      <view class="header">
        <!-- 状态展示 -->
        <status-display
          v-if="loading && templeList.length === 0"
          loading-text="加载中..."
          type="loading"
        />

        <!-- 错误状态 -->
        <view v-else-if="error" class="error-container">
          <view class="error-text">{{ error }}</view>
          <button class="retry-button" @click="loadPageData">重新加载</button>
        </view>

        <!-- 古刹列表 -->
        <view v-else class="temple-list">
          <view v-if="templeList.length === 0" class="no-data">
            暂无古刹数据
          </view>
          <!-- 默认项 -->
          <ancient-item
            :key="defaultTemple.id"
            :button-text="defaultTemple.buttonText"
            :description="defaultTemple.description"
            :image-url="defaultTemple.imageUrl"
            :title="defaultTemple.title"
            class="temple-card default-temple"
            @click="handleTempleClick(defaultTemple)"
          />
          <!-- 动态数据项 -->
          <ancient-item
            v-for="(temple, index) in templeList"
            :key="temple.id"
            :button-text="temple.buttonText"
            :description="temple.description"
            :image-url="temple.imageUrl"
            :title="temple.title"
            class="temple-card"
            @click="handleTempleClick(temple)"
          />
        </view>
      </view>
    </scroll-view>

    <view class="bottom">
      <image
        :src="CommonEnum.BOTTOM_TILES"
        class="files"
        mode="aspectFit"
      ></image>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import StatusDisplay from "../../components/status-display/status-display.vue";
import AncientItem from "./commponts/ancientItem.vue";
import { getTempleTours } from "../../api/article/article.js";
import PageScrollMixin from "../../mixins/page-scroll-mixin.js";

export default {
  mixins: [PageScrollMixin],
  components: {
    CustomNavbar,
    StatusDisplay,
    "ancient-item": AncientItem,
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      templeList: [],
      refreshing: false, // 新增：控制下拉刷新的状态
      error: null, // 新增：错误状态
      // 硬编码的默认项
      defaultTemple: {
        id: "default-temple",
        title: "往生殿",
        description: "用于祈愿离苦，善缘延续",
        imageUrl: "https://api.ccttiot.com/image-1754553886458.png", // 默认图片路径
        buttonText: "了解详情",
        detail: "万佛塔是一座具有重要历史价值的古建筑...",
        templeName: "万佛塔",
        isDefault: true, // 标记为默认项
      },
    };
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData();
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true;
      this.error = null; // 清除之前的错误
      try {
        const response = await getTempleTours();
        if (response.code === 200 && response.data) {
          // 转换数据格式以适配组件
          this.templeList = response.data
            .filter((item) => item.coverUrl) // 只显示有封面的项目
            .map((item) => ({
              id: item.id || Math.random().toString(36).substr(2, 9),
              title: item.title || "未知古刹",
              description: item.subtitle || "暂无描述",
              imageUrl: item.coverUrl,
              buttonText: "了解详情",
              detail: item.content || "",
              templeName: item.templeName,
              isDefault: false,
            }));
        } else {
          console.error("获取古刹数据失败:", response.msg);
          this.error = response.msg || "获取数据失败";
          uni.showToast({
            title: this.error,
            icon: "none",
            duration: 2000,
          });
        }
      } catch (error) {
        console.error("获取页面数据失败:", error);
        this.error = "网络请求失败";
        uni.showToast({
          title: this.error,
          icon: "none",
          duration: 2000,
        });
      } finally {
        this.loading = false;
      }
    },

    // 处理古刹点击事件
    handleTempleClick(temple) {
      console.log("点击了古刹:", temple.title);

      // 如果是默认项，可以特殊处理
      if (temple.isDefault) {
        uni.navigateTo({
          url: `/pages/memorial/memorial`,
        });
      } else {
        // 示例：跳转到详情页面
        uni.navigateTo({
          url: `/pages/ancient/ancientTourById?id=${temple.id}`,
        });
        console.log("点击了古刹:", temple.title);
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      await this.loadPageData();
      this.refreshing = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #faf8f3;
}

.scroll-container {
  height: 80vh; /* 确保scroll-view占满屏幕高度 */
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.temple-list {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
}

.temple-card {
  width: 100%;
  //margin-bottom: 20rpx;
  align-items: center;
}

.no-data {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

.error-container {
  text-align: center;
  padding: 40rpx;
  color: #f00;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.retry-button {
  background-color: #007bff;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  line-height: 1;
}

.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%; // 确保占满宽度
  z-index: 10; // 防止被内容覆盖
  .files {
    width: 100%; // 图片宽度适配容器
    height: 80rpx; // 根据设计图调整高度
    object-fit: cover; // 保持图片比例
  }
}
</style>