buddhism/pages/ancient/ancient.vue

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

        <!-- 错误状态 -->
        <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"
            :title="defaultTemple.title"
            :description="defaultTemple.description"
            :image-url="defaultTemple.imageUrl"
            :button-text="defaultTemple.buttonText"
            @click="handleTempleClick(defaultTemple)"
            class="temple-card default-temple"
          />
          <!-- 动态数据项 -->
          <ancient-item
            v-for="(temple, index) in templeList"
            :key="temple.id"
            :title="temple.title"
            :description="temple.description"
            :image-url="temple.imageUrl"
            :button-text="temple.buttonText"
            @click="handleTempleClick(temple)"
            class="temple-card"
          />
        </view>
      </view>
    </scroll-view>

    <view class="bottom">
      <image :src="CommonEnum.BOTTOM_TILES" mode="aspectFit" class="files"></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,
              }))
          } 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.showToast({
            title: `查看${temple.title}详情`,
            icon: 'none',
            duration: 2000,
          })
          // 示例：跳转到详情页面
          // uni.navigateTo({
          //   url: `/pages/ancient/detail?id=${temple.id}&title=${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>