古刹巡礼列表页设计优化2.0

pages/ancient/ancient.vue

@@ -28,6 +28,17 @@
           <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"
@@ -65,7 +76,18 @@ export default {
       loading: false,
       templeList: [],
       refreshing: false, // 新增：控制下拉刷新的状态
-      error: null // 新增：错误状态
+      error: null, // 新增：错误状态
+      // 硬编码的默认项
+      defaultTemple: {
+        id: 'default-temple',
+        title: '往生殿',
+        description: "用于祈愿离苦，善缘延续",
+        imageUrl: 'https://api.ccttiot.com/image-1754553886458.png', // 默认图片路径
+        buttonText: '了解详情',
+        detail: '万佛塔是一座具有重要历史价值的古建筑...',
+        templeName: '万佛塔',
+        isDefault: true // 标记为默认项
+      }
     }
   },
   onLoad() {
@@ -117,17 +139,30 @@ export default {
     // 处理古刹点击事件
     handleTempleClick(temple) {
       console.log('点击了古刹:', temple.title)
-      // 这里可以跳转到详情页面
-      uni.showToast({
-        title: `查看${temple.title}详情`,
-        icon: 'none',
-        duration: 2000
-      })
       
-      // 示例：跳转到详情页面
+      // 如果是默认项，可以特殊处理
-      // uni.navigateTo({
+      if (temple.isDefault) {
-      //   url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}`
+        uni.showToast({
-      // })
+          title: `查看${temple.title}详情（默认项）`,
+          icon: 'none',
+          duration: 2000
+        })
+        // 可以跳转到默认项的详情页面
+        // uni.navigateTo({
+        //   url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}&isDefault=true`
+        // })
+      } else {
+        // 普通项的处理
+        uni.showToast({
+          title: `查看${temple.title}详情`,
+          icon: 'none',
+          duration: 2000
+        })
+        // 示例：跳转到详情页面
+        // uni.navigateTo({
+        //   url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}`
+        // })
+      }
     },
 
     // 下拉刷新

pages/ancient/commponts/ancientItem.vue

@@ -4,15 +4,15 @@ export default {
   props: {
     title: {
       type: String,
-      default: "万佛塔"
+      default: "往生殿"
     },
     description: {
       type: String,
-      default: "万佛塔始建于2016年"
+      default: "用于祈愿离苦，善缘延续"
     },
     imageUrl: {
       type: String,
-      default: ""
+      default: "https://api.ccttiot.com/image-1754553886458.png"
     },
     buttonText: {
       type: String,
@@ -116,7 +116,6 @@ export default {
     /* 描述文本 */
     .card-description {
       margin: 20rpx 0 28rpx 0;
-      width: 258rpx;
       height: 38rpx;
       font-weight: 400;
       font-size: 28rpx;