古刹巡礼详细页面开发

2025-08-14 10:50:12 +08:00 · 2025-08-14 10:50:12 +08:00 · 00dcc597f3
commit 00dcc597f3
parent 5303ae03d8
6 changed files with 512 additions and 256 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@ node_modules/
 unpackage/
 .DS_Store.
 /config/dev.js
+.idea/
--- a/README_ancientTourById.md
+++ b/README_ancientTourById.md
@ -0,0 +1,151 @@
+# 古刹巡礼详情页面使用说明
+
+## 新增API接口
+
+### 1. 获取巡礼详情 - `/app/article/tourById`
+
+**接口地址：** `GET /app/article/tourById`
+
+**请求参数：**
+- `id` (string): 巡礼ID
+
+**返回数据：**
+```json
+{
+  "msg": "操作成功",
+  "code": 200,
+  "data": {
+    "title": "寒山寺",
+    "content": "<p>内容内容内容...</p>",
+    "createTime": "2025-07-21 17:33:32",
+    "coverUrl": "https://example.com/image.jpg"
+  }
+}
+```
+
+### 2. 获取相关文章 - `/app/article/relevant`
+
+**接口地址：** `GET /app/article/relevant`
+
+**请求参数：**
+- `articleId` (string): 当前文章ID
+
+**返回数据：**
+```json
+{
+  "msg": "操作成功",
+  "code": 200,
+  "data": [
+    {
+      "id": "25",
+      "title": "我是标题",
+      "subtitle": "我是副标题",
+      "createTime": "2025-07-21 17:33:32"
+    }
+  ]
+}
+```
+
+## 页面功能
+
+### 主要特性
+
+1. **文章详情展示**
+   - 显示文章标题
+   - 显示创建时间
+   - 显示封面图片
+   - 支持HTML内容渲染
+
+2. **相关阅读推荐**
+   - 显示相关文章列表
+   - 支持点击跳转到相关文章
+   - 显示文章标题、副标题和时间
+
+3. **响应式设计**
+   - 适配不同屏幕尺寸
+   - 现代化的卡片式布局
+   - 优雅的加载状态
+
+### 使用方法
+
+#### 1. 页面跳转
+```javascript
+// 跳转到指定巡礼详情页
+uni.navigateTo({
+  url: `/pages/ancient/ancientTourById?id=24`
+});
+```
+
+#### 2. 获取数据
+```javascript
+import { getTourById, getRelevantArticles } from '@/api/article/article.js';
+
+// 获取巡礼详情
+const tourDetail = await getTourById('24');
+
+// 获取相关文章
+const relevantArticles = await getRelevantArticles('24');
+```
+
+### 页面结构
+
+```
+页面布局：
+├── 自定义导航栏
+├── 测试按钮（开发时显示）
+├── 文章头部信息
+│   ├── 文章标题
+│   └── 创建时间
+├── 封面图片
+├── 文章内容
+│   └── HTML内容渲染
+└── 相关阅读区域
+    ├── 区域标题
+    └── 相关文章列表
+        ├── 文章标题
+        ├── 副标题
+        └── 创建时间
+```
+
+### 样式特点
+
+1. **卡片式设计**
+   - 白色背景卡片
+   - 圆角边框
+   - 阴影效果
+
+2. **颜色搭配**
+   - 主色调：白色背景
+   - 文字颜色：深灰色
+   - 辅助色：浅灰色
+
+3. **交互效果**
+   - 点击反馈
+   - 平滑过渡动画
+   - 加载状态提示
+
+### 开发说明
+
+1. **API接口已添加到 `api/article/article.js`**
+2. **页面路径：`pages/ancient/ancientTourById.vue`**
+3. **支持参数传递：通过 `options.id` 获取巡礼ID，默认为24**
+4. **测试功能：页面包含测试按钮，方便开发调试**
+
+### 注意事项
+
+1. **HTML内容安全**
+   - 使用 `rich-text` 组件渲染HTML
+   - 添加基本样式确保显示效果
+
+2. **错误处理**
+   - API调用失败时显示友好提示
+   - 相关文章获取失败不影响主页面
+
+3. **性能优化**
+   - 使用计算属性处理HTML内容
+   - 合理的时间格式化处理
+
+4. **用户体验**
+   - 加载状态提示
+   - 点击反馈效果
+   - 响应式布局适配 
--- a/api/article/article.js
+++ b/api/article/article.js
@ -77,3 +77,33 @@ export function getTempleTours(params = {}) {
    params
  })
 }
+
+/**
+ * 根据ID获取古刹巡礼详情
+ * @param {string} id - 巡礼ID
+ * @returns {Promise} 返回巡礼详情数据，包含title、content、createTime、coverUrl
+ */
+export function getTourById(id) {
+  return request({
+    url: '/app/article/tourById',
+    method: 'GET',
+    params: {
+      id: id
+    }
+  })
+}
+
+/**
+ * 获取相关文章列表
+ * @param {string} articleId - 当前文章ID
+ * @returns {Promise} 返回相关文章列表，包含title、subtitle、createTime
+ */
+export function getRelevantArticles(articleId) {
+  return request({
+    url: '/app/article/relevant',
+    method: 'GET',
+    params: {
+      articleId: articleId
+    }
+  })
+} 
--- a/components/search-box/search-box.vue
+++ b/components/search-box/search-box.vue
@ -49,7 +49,7 @@ export default {
    onSearch() {
      // 只在点击搜索按钮或按回车时触发搜索
      if (this.value.trim()) {
-        this.$emit('search', this.value)
+      this.$emit('search', this.value)
      }
    }
  }
--- a/pages/ancient/ancientTourById.vue
+++ b/pages/ancient/ancientTourById.vue
@ -1,25 +1,65 @@
 <template>
  <view class="page">
    <!-- 使用自定义导航栏组件 -->
-    <custom-navbar title="走进平山"
+    <custom-navbar :title="tourDetail.title || '古刹巡礼'"
                   ref="customNavbar"
    />
-    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
-      <image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
-      <view class="temple-info">
-        <text class="temple-desc">{{ stripHtmlTags(templeInfo.content) || '暂无描述' }}</text>
+    <tile-grid/>
+    
+    <!-- 测试按钮（开发时使用） -->
+    <view class="test-buttons" v-if="!tourId">
+      <button class="test-btn" @click="testWithId('24')">测试寒山寺</button>
+      <button class="test-btn" @click="testWithId('25')">测试万佛塔</button>
+    </view>
+    
+    <!-- 主要内容区域 -->
+    <view class="content-container">
+      <!-- 文章头部信息 -->
+      <view class="article-header">
+        <text class="article-title">{{ tourDetail.title || '加载中...' }}</text>
+        <text class="article-time">{{ formatTime(tourDetail.createTime) }}</text>
      </view>

-      <!-- 联系信息区域 -->
-      <view class="contact-info" v-if="templeInfo.phone || templeInfo.address">
-        <view class="contact-item" v-if="templeInfo.phone">
-          <text class="contact-label">电话：</text>
-          <text class="contact-value" @click="callPhone">{{ templeInfo.phone }}</text>
+      <!-- 封面图片 -->
+      <view class="cover-image-container" v-if="tourDetail.coverUrl">
+        <image class="cover-image" 
+               :src="tourDetail.coverUrl" 
+               mode="aspectFill"
+               @error="handleImageError">
+        </image>
+      </view>
+
+      <!-- 文章内容 -->
+      <view class="article-content" v-if="tourDetail.content">
+        <rich-text :nodes="processedContent"></rich-text>
+      </view>
+
+      <!-- 加载状态 -->
+      <view class="loading-container" v-if="loading">
+        <text class="loading-text">加载中...</text>
+      </view>
+
+      <!-- 相关阅读区域 -->
+      <view class="relevant-section" v-if="relevantArticles.length > 0">
+        <view class="section-title">
+          <text class="title-text">相关阅读</text>
        </view>
-        <view class="contact-item" v-if="templeInfo.address" @click="openMap">
-          <text class="contact-label">地址：</text>
-          <text class="contact-value">{{ templeInfo.address }}</text>
-          <image class="nav-arrow" :src="CommonEnum.NAV_ARROW" mode="aspectFit"></image>
+        <view class="relevant-list">
+          <view class="relevant-item" 
+                v-for="(item, index) in relevantArticles" 
+                :key="index"
+                @click="goToArticle(item)">
+            <view class="item-content">
+              <text class="item-title">{{ item.title }}</text>
+              <view class="item-meta">
+                <text class="item-subtitle" v-if="item.subtitle">{{ item.subtitle }}</text>
+                <text class="item-time">{{ formatTime(item.createTime) }}</text>
+              </view>
+            </view>
+            <view class="item-arrow">
+              <text class="arrow">></text>
+            </view>
+          </view>
        </view>
      </view>
    </view>
@ -31,8 +71,9 @@ import {
  CommonEnum
 } from '@/enum/common.js'
 import {
-  getTempleInfo
-} from '@/api/walkInto/walkInto.js'
+  getTourById,
+  getRelevantArticles
+} from '@/api/article/article.js'
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";

 export default {
@ -42,215 +83,135 @@ export default {
  data() {
    return {
      CommonEnum,
-      templeInfo: {
-        id: '',
-        name: '',
+      tourId: '24', // 巡礼ID，默认为24
+      tourDetail: {
        title: '',
        content: '',
-        imgUrl: '',
-        address: '',
-        phone: '',
-        startTime: '',
-        endTime: '',
-        lon: null,
-        lat: null
+        createTime: '',
+        coverUrl: ''
      },
+      relevantArticles: [], // 相关文章列表
      loading: false
    }
  },
-  onLoad() {
-    this.fetchTempleInfo()
+  computed: {
+    // 处理文章内容，确保HTML正确显示
+    processedContent() {
+      if (!this.tourDetail.content) return '';
+      
+      // 处理HTML内容，确保样式正确
+      let content = this.tourDetail.content;
+      
+      // 添加基本样式
+      content = `<div style="
+        font-size: 28rpx; 
+        line-height: 1.8; 
+        color: #333; 
+        word-wrap: break-word; 
+        word-break: break-all;
+        padding: 20rpx 0;
+      ">${content}</div>`;
+      
+      return content;
+    }
+  },
+  onLoad(options) {
+    // 获取传递的参数，如果没有则使用默认值24
+    if (options.id) {
+      this.tourId = options.id;
+    }
+    // 无论是否有参数都加载数据
+    this.fetchTourDetail();
+    this.fetchRelevantArticles();
  },
  methods: {
-    async fetchTempleInfo() {
+    // 获取巡礼详情
+    async fetchTourDetail() {
      try {
-        this.loading = true
-        const res = await getTempleInfo()
+        this.loading = true;
+        const res = await getTourById(this.tourId);
+        
        if (res.code === 200 && res.data) {
-          this.templeInfo = res.data
+          this.tourDetail = {
+            title: res.data.title || '',
+            content: res.data.content || '',
+            createTime: res.data.createTime || '',
+            coverUrl: res.data.coverUrl || ''
+          };
        } else {
          uni.showToast({
-            title: res.msg || '获取寺庙信息失败',
+            title: res.msg || '获取文章详情失败',
            icon: 'none'
-          })
+          });
        }
-      } catch (e) {
-        console.error('获取寺庙信息失败:', e)
+      } catch (error) {
+        console.error('获取文章详情失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
-        })
+        });
      } finally {
-        this.loading = false
+        this.loading = false;
      }
    },

-    // 去除 HTML 标签，返回纯文本，并根据空格进行换行
-    stripHtmlTags(html) {
-      if (!html) return ''; // 处理空值
+    // 获取相关文章
+    async fetchRelevantArticles() {
+      try {
+        const res = await getRelevantArticles(this.tourId);
        
-      // 先去除HTML标签
-      let text = html.replace(/<[^>]+>/g, '');
-
-      // 解码HTML实体
-      text = text.replace(/&nbsp;/g, ' ');
-      text = text.replace(/&amp;/g, '&');
-      text = text.replace(/&lt;/g, '<');
-      text = text.replace(/&gt;/g, '>');
-      text = text.replace(/&quot;/g, '"');
-
-      // 根据空格进行换行处理
-      // 将连续的空格替换为换行符
-      text = text.replace(/\s{2,}/g, '\n');
-
-      // 处理段落开头的空格
-      text = text.replace(/^\s+/gm, '');
-
-      // 去除多余的空行
-      text = text.replace(/\n\s*\n/g, '\n');
-
-      // 为每个段落添加缩进（在每行开头添加两个空格）
-      text = text.replace(/^/gm, '    ');
-
-      // 移除内容末尾的联系信息（因为我们在单独的区域显示）
-      text = text.replace(/电话：.*$/gm, '');
-      text = text.replace(/地址：.*$/gm, '');
-
-      return text.trim();
-    },
-
-    // 拨打电话
-    callPhone() {
-      if (this.templeInfo.phone) {
-        uni.makePhoneCall({
-          phoneNumber: this.templeInfo.phone,
-          success: () => {
-            console.log('拨打电话成功')
-          },
-          fail: (err) => {
-            console.error('拨打电话失败:', err)
-            uni.showToast({
-              title: '拨打电话失败',
-              icon: 'none'
-            })
-          }
-        })
+        if (res.code === 200 && res.data) {
+          this.relevantArticles = res.data.map(item => ({
+            id: item.id,
+            title: item.title || '',
+            subtitle: item.subtitle || '',
+            createTime: item.createTime || ''
+          }));
+        }
+      } catch (error) {
+        console.error('获取相关文章失败:', error);
+        // 相关文章获取失败不影响主页面显示
      }
    },

-    // 打开地图
-    openMap() {
-      if (this.templeInfo.address && this.templeInfo.lon && this.templeInfo.lat) {
-        // #ifdef H5
-        // H5环境下使用地址搜索
-        this.openMapByAddress()
-        // #endif
+    // 格式化时间
+    formatTime(timeStr) {
+      if (!timeStr) return '';
      
-        // #ifndef H5
-        // 非H5环境下使用经纬度打开地图
-        uni.openLocation({
-          latitude: parseFloat(this.templeInfo.lat),
-          longitude: parseFloat(this.templeInfo.lon),
-          name: this.templeInfo.name || '寺庙',
-          address: this.templeInfo.address,
-          success: () => {
-            console.log('打开地图成功')
-          },
-          fail: (err) => {
-            console.error('打开地图失败:', err)
-            // 如果经纬度打开失败，尝试使用地址搜索
-            this.openMapByAddress()
-          }
-        })
-        // #endif
-      } else if (this.templeInfo.address) {
-        // 只有地址，使用地址搜索
-        this.openMapByAddress()
+      try {
+        const date = new Date(timeStr);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        
+        return `${year}-${month}-${day} ${hours}:${minutes}`;
+      } catch (error) {
+        return timeStr;
      }
    },

-    // 使用地址打开地图
-    openMapByAddress() {
-      // #ifdef H5
-      // H5环境下提供多个地图选项
-      uni.showActionSheet({
-        itemList: ['复制地址', '百度地图', '高德地图', '腾讯地图'],
-        success: (res) => {
-          switch (res.tapIndex) {
-            case 0:
-              // 复制地址
-              this.copyAddress()
-              break
-            case 1:
-              // 百度地图
-              this.openBaiduMap()
-              break
-            case 2:
-              // 高德地图
-              this.openGaodeMap()
-              break
-            case 3:
-              // 腾讯地图
-              this.openTencentMap()
-              break
-          }
-        }
-      })
-      // #endif
+         // 跳转到相关文章
+     goToArticle(article) {
+       if (article.id) {
+         uni.navigateTo({
+           url: `/pages/ancient/ancientTourById?id=${article.id}`
+         });
+       }
+     },

-      // #ifndef H5
-      // 非H5环境下直接复制地址
-      uni.showModal({
-        title: '提示',
-        content: '是否复制地址到剪贴板？',
-        success: (res) => {
-          if (res.confirm) {
-            this.copyAddress()
-          }
-        }
-      })
-      // #endif
-    },
+     // 处理图片加载错误
+     handleImageError() {
+       console.log('封面图片加载失败');
+       // 可以设置默认图片或隐藏图片容器
+     },

-    // 复制地址
-    copyAddress() {
-      uni.setClipboardData({
-        data: this.templeInfo.address,
-        success: () => {
-          uni.showToast({
-            title: '地址已复制',
-            icon: 'success',
-            duration: 2000
-          })
-        },
-        fail: () => {
-          uni.showToast({
-            title: '复制失败',
-            icon: 'none'
-          })
-        }
-      })
-    },
-
-    // 打开百度地图
-    openBaiduMap() {
-      const address = encodeURIComponent(this.templeInfo.address)
-      const url = `https://api.map.baidu.com/geocoder?address=${address}&output=html&src=webapp.baidu.openAPIdemo`
-      window.open(url, '_blank')
-    },
-
-    // 打开高德地图
-    openGaodeMap() {
-      const address = encodeURIComponent(this.templeInfo.address)
-      const url = `https://uri.amap.com/search?query=${address}`
-      window.open(url, '_blank')
-    },
-
-    // 打开腾讯地图
-    openTencentMap() {
-      const address = encodeURIComponent(this.templeInfo.address)
-      const url = `https://apis.map.qq.com/uri/v1/search?keyword=${address}&referer=myapp`
-      window.open(url, '_blank')
+     // 测试方法（开发时使用）
+    testWithId(id) {
+      this.tourId = id;
+      this.fetchTourDetail();
+      this.fetchRelevantArticles();
    }
  }
 }
@ -258,87 +219,200 @@ export default {

 <style lang="scss">
 .page {
-  background: #F5F0E7;
+  background: #F6F1E7;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
 }

-.header {
-  margin: 26rpx 28rpx;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0 15rpx;
-  padding-bottom: 40rpx;
-  border-radius: 16rpx 16rpx 16rpx 16rpx;
-}
-
-.temple-image {
-  width: 610rpx;
-  height: 324rpx;
-  background: #D8D8D8; /* 灰色占位背景 */
-  border-radius: 12rpx 12rpx 12rpx 12rpx;
-  display: block;
-  margin: 34rpx auto;
-  object-fit: cover;
-}
-
-.temple-info {
+.content-container {
  width: 100%;
-  padding: 24rpx 42rpx;
-  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
 }

-.temple-desc {
+/* 文章头部样式 */
+.article-header {
+  background: #fff;
+  padding: 40rpx 30rpx;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.article-title {
  display: block;
-  font-weight: 400;
-  font-size: 28rpx;
-  color: #522510;
-  line-height: 45rpx;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  white-space: pre-line; /* 保留换行符 */
-  word-wrap: break-word; /* 长单词换行 */
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 20rpx;
 }

-/* 联系信息样式 */
-.contact-info {
-  margin-top: 40rpx;
+.article-time {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+  line-height: 1.2;
+}
+
+/* 封面图片样式 */
+.cover-image-container {
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.cover-image {
+  width: 100%;
+  height: 400rpx;
+  display: block;
+}
+
+/* 文章内容样式 */
+.article-content {
+  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
-
-}
-
-.contact-item {
-  display: flex;
-  align-items: flex-start;
  margin-bottom: 20rpx;
-  line-height: 40rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  min-height: 200rpx;
 }

-.contact-item:last-child {
-  margin-bottom: 0;
+/* 加载状态样式 */
+.loading-container {
+  background: #fff;
+  padding: 60rpx 30rpx;
+  border-radius: 16rpx;
+  text-align: center;
+  margin-bottom: 20rpx;
 }

-.contact-label {
+.loading-text {
  font-size: 28rpx;
-  min-width: 100rpx;
-  color: #522510;
+  color: #999;
+}
+
+/* 相关阅读区域样式 */
+.relevant-section {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  background: #f8f8f8;
+}
+
+.title-text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.relevant-list {
+  padding: 0;
+}
+
+.relevant-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  transition: background-color 0.3s ease;
+}
+
+.relevant-item:last-child {
+  border-bottom: none;
+}
+
+.relevant-item:active {
+  background-color: #f5f5f5;
+}
+
+.item-content {
+  flex: 1;
+  margin-right: 20rpx;
+}
+
+.item-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 10rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.item-subtitle {
+  font-size: 24rpx;
+  color: #666;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 20rpx;
+}
+
+.item-time {
+  font-size: 22rpx;
+  color: #999;
  flex-shrink: 0;
 }

-.contact-value {
-  font-size: 28rpx;
-  color: #522510;
-  flex: 1;
-  word-wrap: break-word;
+.item-arrow {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

-.nav-arrow {
-  width: 32rpx;
-  height: 32rpx;
+.arrow {
+  font-size: 24rpx;
+  color: #ccc;
+  font-weight: bold;
+}
+
+/* 测试按钮样式 */
+.test-buttons {
+  position: fixed;
+  top: 100rpx; /* 根据导航栏高度调整 */
+  left: 20rpx;
+  z-index: 10;
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.test-btn {
+  margin-bottom: 10rpx;
+  background-color: #4CAF50;
+  color: #fff;
+  font-size: 28rpx;
+  padding: 15rpx 30rpx;
+  border-radius: 8rpx;
+  border: none;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+}
+
+.test-btn:last-child {
+  margin-bottom: 0;
 }
 </style>
--- a/utils/request.js
+++ b/utils/request.js
@ -17,8 +17,8 @@ import {
 // 环境配置
 const ENV_CONFIG = {
  develop: { // 开发环境
-    // baseUrl: 'http://192.168.2.136:4501',
-    baseUrl: 'https://testlu.chuangtewl.com/prod-api',
+      // baseUrl: 'http://192.168.2.136:4501',
+      baseUrl: 'https://testlu.chuangtewl.com/prod-api',
    appId: 1 // TODO: 根据实际后端配置调整
  },
  trial: { // 体验版