古刹巡礼详细页面开发0.5

README_ancientTourById.md

@@ -58,8 +58,9 @@
 
 2. **相关阅读推荐**
    - 显示相关文章列表
-   - 支持点击跳转到相关文章
+   - 支持点击跳转到相关文章（通过文章ID）
    - 显示文章标题、副标题和时间
+   - 自动获取文章ID用于跳转
 
 3. **响应式设计**
    - 适配不同屏幕尺寸
@@ -104,7 +105,8 @@ const relevantArticles = await getRelevantArticles('24');
     └── 相关文章列表
         ├── 文章标题
         ├── 副标题
-        └── 创建时间
+        ├── 创建时间
+        └── 文章ID（用于跳转）
 ```
 
 ### 样式特点
@@ -130,6 +132,7 @@ const relevantArticles = await getRelevantArticles('24');
 2. **页面路径：`pages/ancient/ancientTourById.vue`**
 3. **支持参数传递：通过 `options.id` 获取巡礼ID，默认为24**
 4. **测试功能：页面包含测试按钮，方便开发调试**
+5. **相关文章跳转：自动获取文章ID，支持无限级跳转**
 
 ### 注意事项
 

api/article/article.js

@@ -96,7 +96,7 @@ export function getTourById(id) {
 /**
  * 获取相关文章列表
  * @param {string} articleId - 当前文章ID
- * @returns {Promise} 返回相关文章列表，包含title、subtitle、createTime
+ * @returns {Promise} 返回相关文章列表，包含id、title、subtitle、createTime
  */
 export function getRelevantArticles(articleId) {
   return request({

pages/ancient/ancientTourById.vue

@@ -54,6 +54,8 @@
               <view class="item-meta">
                 <text class="item-subtitle" v-if="item.subtitle">{{ item.subtitle }}</text>
                 <text class="item-time">{{ formatTime(item.createTime) }}</text>
+                <!-- 开发时显示文章ID -->
+                <text class="item-id" v-if="!tourId">ID: {{ item.id }}</text>
               </view>
             </view>
             <view class="item-arrow">
@@ -162,7 +164,7 @@ export default {
         
         if (res.code === 200 && res.data) {
           this.relevantArticles = res.data.map(item => ({
-            id: item.id,
+            id: item.id || item.articleId, // 兼容不同的ID字段名
             title: item.title || '',
             subtitle: item.subtitle || '',
             createTime: item.createTime || ''
@@ -194,9 +196,28 @@ export default {
 
          // 跳转到相关文章
      goToArticle(article) {
-       if (article.id) {
+       console.log('点击相关文章:', article);
+       
+       if (article && article.id) {
+         console.log('跳转到文章ID:', article.id);
          uni.navigateTo({
-           url: `/pages/ancient/ancientTourById?id=${article.id}`
+           url: `/pages/ancient/ancientTourById?id=${article.id}`,
+           success: () => {
+             console.log('跳转成功');
+           },
+           fail: (error) => {
+             console.error('跳转失败:', error);
+             uni.showToast({
+               title: '跳转失败',
+               icon: 'none'
+             });
+           }
+         });
+       } else {
+         console.warn('文章ID不存在:', article);
+         uni.showToast({
+           title: '文章信息不完整',
+           icon: 'none'
          });
        }
      },
@@ -375,6 +396,16 @@ export default {
   flex-shrink: 0;
 }
 
+.item-id {
+  font-size: 20rpx;
+  color: #666;
+  background: #f0f0f0;
+  padding: 4rpx 8rpx;
+  border-radius: 4rpx;
+  margin-left: 10rpx;
+  flex-shrink: 0;
+}
+
 .item-arrow {
   width: 40rpx;
   height: 40rpx;