From 606d69f16fb8d1ea7b57bb0966a946825a4e0d45 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 14 Aug 2025 14:17:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=A4=E5=88=B9=E6=96=87=E7=AB=A0=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=88=B0=E8=AF=A6=E7=BB=86=E7=9A=84=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/ancient/ancient.vue               | 364 ++++++++++++------------
 pages/ancient/commponts/ancientItem.vue | 235 ++++++++-------
 2 files changed, 299 insertions(+), 300 deletions(-)

diff --git a/pages/ancient/ancient.vue b/pages/ancient/ancient.vue
index 136b609..7263a98 100644
--- a/pages/ancient/ancient.vue
+++ b/pages/ancient/ancient.vue
@@ -3,18 +3,18 @@
     <custom-navbar ref="customNavbar" title="古刹巡礼" />
     <tile-grid />
     <scroll-view
-      class="scroll-container"
-      scroll-y="true"
-      refresher-enabled="true"
       :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"
-          type="loading"
           loading-text="加载中..."
+          type="loading"
         />
 
         <!-- 错误状态 -->
@@ -25,225 +25,225 @@
 
         <!-- 古刹列表 -->
         <view v-else class="temple-list">
-          <view v-if="templeList.length === 0" class="no-data"> 暂无古刹数据 </view>
+          <view v-if="templeList.length === 0" class="no-data">
+            暂无古刹数据</view
+          >
           <!-- 默认项 -->
           <ancient-item
             :key="defaultTemple.id"
-            :title="defaultTemple.title"
+            :button-text="defaultTemple.buttonText"
             :description="defaultTemple.description"
             :image-url="defaultTemple.imageUrl"
-            :button-text="defaultTemple.buttonText"
-            @click="handleTempleClick(defaultTemple)"
+            :title="defaultTemple.title"
             class="temple-card default-temple"
+            @click="handleTempleClick(defaultTemple)"
           />
           <!-- 动态数据项 -->
           <ancient-item
             v-for="(temple, index) in templeList"
             :key="temple.id"
-            :title="temple.title"
+            :button-text="temple.buttonText"
             :description="temple.description"
             :image-url="temple.imageUrl"
-            :button-text="temple.buttonText"
-            @click="handleTempleClick(temple)"
+            :title="temple.title"
             class="temple-card"
+            @click="handleTempleClick(temple)"
           />
         </view>
       </view>
     </scroll-view>
 
     <view class="bottom">
-      <image :src="CommonEnum.BOTTOM_TILES" mode="aspectFit" class="files"></image>
+      <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'
+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 = '网络请求失败'
+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',
+            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
-      },
+      } 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: `/app/article/tourById?id=${temple.id}`,
+        });
+      }
+    },
+
+    // 下拉刷新
+    async onRefresh() {
+      this.refreshing = true;
+      await this.loadPageData();
+      this.refreshing = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .page {
-    background: #faf8f3;
-  }
+.page {
+  background: #faf8f3;
+}
 
-  .scroll-container {
-    height: 80vh; /* 确保scroll-view占满屏幕高度 */
-    display: flex;
-    flex-direction: column;
-  }
+.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;
-  }
+.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-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;
-  }
+.temple-card {
+  width: 100%;
+  //margin-bottom: 20rpx;
+  align-items: center;
+}
 
-  .no-data {
-    text-align: center;
-    padding: 40rpx;
-    color: #999;
-    font-size: 28rpx;
-  }
+.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;
-  }
+.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;
-  }
+.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; // 保持图片比例
-    }
+.bottom {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%; // 确保占满宽度
+  z-index: 10; // 防止被内容覆盖
+  .files {
+    width: 100%; // 图片宽度适配容器
+    height: 80rpx; // 根据设计图调整高度
+    object-fit: cover; // 保持图片比例
   }
+}
 </style>
diff --git a/pages/ancient/commponts/ancientItem.vue b/pages/ancient/commponts/ancientItem.vue
index 38ddc8b..7b4dd41 100644
--- a/pages/ancient/commponts/ancientItem.vue
+++ b/pages/ancient/commponts/ancientItem.vue
@@ -1,30 +1,30 @@
 <script>
-  export default {
-    name: 'ancientItem',
-    props: {
-      title: {
-        type: String,
-        default: '往生殿',
-      },
-      description: {
-        type: String,
-        default: '用于祈愿离苦，善缘延续',
-      },
-      imageUrl: {
-        type: String,
-        default: 'https://api.ccttiot.com/image-1754553886458.png',
-      },
-      buttonText: {
-        type: String,
-        default: '了解详情',
-      },
+export default {
+  name: "ancientItem",
+  props: {
+    title: {
+      type: String,
+      default: "往生殿",
     },
-    methods: {
-      handleClick() {
-        this.$emit('click')
-      },
+    description: {
+      type: String,
+      default: "用于祈愿离苦，善缘延续",
     },
-  }
+    imageUrl: {
+      type: String,
+      default: "https://api.ccttiot.com/image-1754553886458.png",
+    },
+    buttonText: {
+      type: String,
+      default: "了解详情",
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit("click");
+    },
+  },
+};
 </script>
 
 <template>
@@ -32,8 +32,8 @@
     <view class="card-background">
       <image
         v-if="imageUrl"
-        :src="imageUrl"
         :alt="title"
+        :src="imageUrl"
         class="background-image"
         mode="aspectFill"
       />
@@ -53,111 +53,110 @@
   </view>
 </template>
 
-<style scoped lang="scss">
-  /* ==================== 卡片容器 ==================== */
-  .ancient-card {
-    position: relative;
-    width: 670rpx;
-    height: 286rpx;
-    border-radius: 16rpx;
+<style lang="scss" scoped>
+/* ==================== 卡片容器 ==================== */
+.ancient-card {
+  position: relative;
+  width: 670rpx;
+  height: 286rpx;
+  border-radius: 16rpx;
 
-    overflow: hidden;
+  overflow: hidden;
 
-    /* ========== 背景层 ========== */
-    .card-background {
-      position: absolute;
-      top: 0;
-      left: 0;
+  /* ========== 背景层 ========== */
+  .card-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #3d3d3d;
+
+    /* 真实背景图 */
+    .background-image {
       width: 100%;
       height: 100%;
-      background: #3d3d3d;
-
-      /* 真实背景图 */
-      .background-image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover; // 保持比例填充
-        opacity: 0.4;
-      }
-
-      /* 缺省背景（渐变+模糊） */
-      .placeholder-background {
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        filter: blur(8px);
-      }
+      object-fit: cover; // 保持比例填充
+      opacity: 0.4;
     }
 
-    /* ========== 内容层 ========== */
-    .card-content {
-      position: relative;
-      z-index: 2; // 确保内容在背景上层
+    /* 缺省背景（渐变+模糊） */
+    .placeholder-background {
+      width: 100%;
       height: 100%;
-      padding: 40rpx 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      filter: blur(8px);
+    }
+  }
+
+  /* ========== 内容层 ========== */
+  .card-content {
+    position: relative;
+    z-index: 2; // 确保内容在背景上层
+    height: 100%;
+    padding: 40rpx 28rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    /* 标题样式 */
+    .card-title {
+      width: 160rpx;
+      height: 54rpx;
+      font-weight: 500;
+      font-size: 40rpx;
+      color: #ffffff;
+      line-height: 54rpx;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    /* 描述文本 */
+    .card-description {
+      margin: 20rpx 0 28rpx 0;
+      height: 38rpx;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #ffffff;
+      line-height: 38rpx;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    /* 按钮样式 */
+    .card-button {
       display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
+      align-items: center;
+      padding: 0 15rpx;
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      //background: rgba(255, 255, 255, 0.2);
+      //backdrop-filter: blur(10px); // 毛玻璃效果
+      height: 54rpx;
+      border-radius: 33rpx 33rpx 33rpx 33rpx;
+      border: 1rpx solid #ffffff;
 
-      /* 标题样式 */
-      .card-title {
-        width: 160rpx;
-        height: 54rpx;
-        font-weight: 500;
-        font-size: 40rpx;
-        color: #ffffff;
-        line-height: 54rpx;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-      }
+      /* 箭头图标 */
+      .arrow-icon {
+        margin-left: 8px;
 
-      /* 描述文本 */
-      .card-description {
-        margin: 20rpx 0 28rpx 0;
-        height: 38rpx;
-        font-weight: 400;
-        font-size: 28rpx;
-        color: #ffffff;
-        line-height: 38rpx;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-      }
-
-      /* 按钮样式 */
-      .card-button {
-        display: flex;
-        align-items: center;
-        padding: 0 15rpx;
-        color: white;
-        font-size: 14px;
-        font-weight: 500;
-        //background: rgba(255, 255, 255, 0.2);
-        //backdrop-filter: blur(10px); // 毛玻璃效果
-        width: 176rpx;
-        height: 54rpx;
-        border-radius: 33rpx 33rpx 33rpx 33rpx;
-        border: 1rpx solid #ffffff;
-
-        /* 箭头图标 */
-        .arrow-icon {
-          margin-left: 8px;
-
-          .arrow-text {
-            width: 96rpx;
-            height: 32rpx;
-            font-weight: 400;
-            font-size: 24rpx;
-            color: #ffffff;
-            line-height: 32rpx;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-          }
+        .arrow-text {
+          width: 96rpx;
+          height: 32rpx;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ffffff;
+          line-height: 32rpx;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
         }
       }
     }
   }
+}
 </style>