buddhism/pages/article/article-detail.vue

<template>
  <view class="page">
    <!-- 自定义导航栏 -->
    <custom-navbar :title="articleData.title || '文章详情'" />

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-content">
        <text>加载中...</text>
      </view>
    </view>

    <!-- 文章内容 -->
    <view v-else-if="articleData" class="article-container">
      <!-- 文章标题 -->
      <view class="article-header">
        <text class="article-title">{{ articleData.title }}</text>
        <text v-if="articleData.subtitle" class="article-subtitle">{{ articleData.subtitle }}</text>
      </view>

      <!-- 文章封面图 -->
      <view v-if="articleData.coverUrl" class="article-cover">
        <image :src="articleData.coverUrl" mode="aspectFill" />
      </view>

      <!-- 文章内容 -->
      <view class="article-content">
        <rich-text :nodes="articleData.content"></rich-text>
      </view>

      <!-- 文章信息 -->
      <view class="article-info">
        <text class="info-item">发布时间：{{ formatTime(articleData.createTime) }}</text>
        <text v-if="articleData.templeName" class="info-item"
          >寺庙：{{ articleData.templeName }}</text
        >
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error-container">
      <view class="error-content">
        <text>内容加载失败</text>
        <button class="retry-btn" @click="loadArticleData">重新加载</button>
      </view>
    </view>
  </view>
</template>

<script>
  import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue'

  export default {
    components: {
      CustomNavbar,
    },
    data() {
      return {
        loading: true,
        articleData: null,
        articleId: null,
      }
    },
    onLoad(options) {
      // 从页面参数或本地存储获取文章数据
      if (options.id) {
        this.articleId = options.id
        this.loadArticleData()
      } else {
        // 从本地存储获取文章数据
        const storedArticle = uni.getStorageSync('currentArticle')
        if (storedArticle) {
          this.articleData = storedArticle
          this.loading = false
          // 清除本地存储
          uni.removeStorageSync('currentArticle')
        } else {
          this.loading = false
          uni.showToast({
            title: '文章数据不存在',
            icon: 'none',
          })
        }
      }
    },
    methods: {
      // 加载文章数据
      async loadArticleData() {
        if (!this.articleId) {
          this.loading = false
          return
        }

        this.loading = true
        try {
          const { getArticleById } = await import('@/api/article/article.js')
          const response = await getArticleById(this.articleId)

          if (response.code === 200 && response.data) {
            this.articleData = response.data
          } else {
            uni.showToast({
              title: response.msg || '获取文章失败',
              icon: 'none',
            })
          }
        } catch (error) {
          console.error('获取文章详情失败:', error)
          uni.showToast({
            title: '网络错误',
            icon: 'none',
          })
        } finally {
          this.loading = false
        }
      },

      // 格式化时间
      formatTime(timeStr) {
        if (!timeStr) return ''
        const date = new Date(timeStr)
        return (
          date.toLocaleDateString('zh-CN') +
          ' ' +
          date.toLocaleTimeString('zh-CN', { hour12: false })
        )
      },
    },
  }
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .loading-container,
  .error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
  }

  .loading-content,
  .error-content {
    text-align: center;
    color: #666;
    font-size: 28rpx;
  }

  .retry-btn {
    margin-top: 20rpx;
    padding: 20rpx 40rpx;
    background-color: #4c97e7;
    color: white;
    border: none;
    border-radius: 10rpx;
    font-size: 28rpx;
  }

  .article-container {
    padding: 30rpx;
    background-color: white;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .article-header {
    margin-bottom: 30rpx;
  }

  .article-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10rpx;
  }

  .article-subtitle {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.3;
  }

  .article-cover {
    margin-bottom: 30rpx;
    border-radius: 15rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 400rpx;
    }
  }

  .article-content {
    margin-bottom: 30rpx;
    line-height: 1.8;
    font-size: 30rpx;
    color: #333;

    :deep(p) {
      margin-bottom: 20rpx;
    }

    :deep(a) {
      color: #4c97e7;
      text-decoration: underline;
    }

    :deep(img) {
      max-width: 100%;
      height: auto;
      margin: 20rpx 0;
    }
  }

  .article-info {
    padding-top: 30rpx;
    border-top: 1rpx solid #eee;

    .info-item {
      display: block;
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
  }
</style>