cfc/cfc-frontend/pages/mind/article-detail.vue

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

    <!-- 错误状态 -->
    <view v-else-if="error" class="error-wrap">
      <text class="error-icon">📄</text>
      <text class="error-text">{{ errorMsg }}</text>
      <button class="retry-btn" @click="loadDetail(articleId)">重新加载</button>
    </view>

    <!-- 文章内容 -->
    <view v-else-if="article" class="detail-content">
      <!-- 封面图 -->
      <image
        v-if="article.coverImage"
        class="detail-cover"
        :src="article.coverImage"
        mode="widthFix"
      />

      <!-- 文章标题 -->
      <text class="detail-title">{{ article.title }}</text>

      <!-- 元信息 -->
      <view class="detail-meta">
        <text class="meta-author">{{ article.author || '浠艾福' }}</text>
        <text class="meta-separator">|</text>
        <text class="meta-date">{{ getFormattedDate() }}</text>
        <text class="meta-separator">|</text>
        <text class="meta-read">{{ article.readTime || 3 }} 分钟阅读</text>
      </view>

      <!-- 分类标签 -->
      <view class="detail-category-row">
        <text class="detail-category">{{ article.categoryName || '' }}</text>
      </view>

      <!-- 文章标签 -->
      <view v-if="tagList.length" class="detail-tags">
        <text v-for="(tag, idx) in tagList" :key="idx" class="tag-item">{{ tag }}</text>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 文章正文（富文本） -->
      <view class="detail-body">
        <rich-text :nodes="article.content" />
      </view>

      <!-- 底部完成按钮 -->
      <view class="detail-footer">
        <button class="read-btn" @click="onReadComplete">阅读完成</button>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="error-wrap">
      <text class="error-icon">📄</text>
      <text class="error-text">文章不存在</text>
    </view>
  </view>
</template>

<script>
import { getArticleDetail, recordArticleRead } from '../../utils/api.js'

export default {
  data() {
    return {
      articleId: '',
      article: null,
      loading: true,
      error: false,
      errorMsg: '',
      tagList: []
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.articleId = options.id
      this.loadDetail(options.id)
    } else {
      this.error = true
      this.errorMsg = '参数错误'
      this.loading = false
    }
  },
  methods: {
    async loadDetail(id) {
      this.loading = true
      this.error = false
      try {
        const res = await getArticleDetail({ id: id })
        if (res.code === 200 && res.data) {
          this.article = res.data
          // 解析标签 JSON 字符串
          if (res.data.tags) {
            try {
              let parsed = JSON.parse(res.data.tags)
              this.tagList = Array.isArray(parsed) ? parsed : []
            } catch (e) {
              this.tagList = []
            }
          }
        } else {
          this.error = true
          this.errorMsg = '文章不存在或无权限查看'
        }
      } catch (e) {
        this.error = true
        this.errorMsg = '加载失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },
    getFormattedDate() {
      if (this.article && this.article.publishedAt) {
        return this.article.publishedAt.slice(0, 10)
      }
      return ''
    },
    async onReadComplete() {
      try {
        await recordArticleRead({ id: this.article.id })
        uni.showToast({ title: '阅读记录已保存', icon: 'success' })
      } catch (e) {
        // 静默处理
      }
      setTimeout(function() {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 120rpx;
}

/* ===== 加载状态 ===== */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 300rpx;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #e0e0e0;
  border-top-color: #5B9BD5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20rpx;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 26rpx;
  color: #999;
}

/* ===== 错误状态 ===== */
.error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 300rpx;
}
.error-icon {
  font-size: 100rpx;
  margin-bottom: 24rpx;
}
.error-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}
.retry-btn {
  width: 240rpx;
  height: 72rpx;
  line-height: 72rpx;
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  border-radius: 36rpx;
  text-align: center;
  border: none;
}
.retry-btn::after {
  border: none;
}

/* ===== 内容区 ===== */
.detail-cover {
  width: 100%;
  max-height: 500rpx;
  display: block;
}
.detail-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  padding: 30rpx 30rpx 0;
}

/* ===== 元信息 ===== */
.detail-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16rpx 30rpx 0;
  font-size: 22rpx;
  color: #999;
}
.meta-author {
  color: #5B9BD5;
}
.meta-separator {
  margin: 0 12rpx;
  color: #ddd;
}
.meta-date,
.meta-read {
  color: #999;
}

/* ===== 分类标签 ===== */
.detail-category-row {
  padding: 16rpx 30rpx 0;
}
.detail-category {
  display: inline-block;
  font-size: 20rpx;
  color: #5B9BD5;
  background: rgba(91, 155, 213, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

/* ===== 标签 ===== */
.detail-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 12rpx 30rpx 0;
  gap: 12rpx;
}
.tag-item {
  font-size: 20rpx;
  color: #8B5CF6;
  background: rgba(139, 92, 246, 0.08);
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
}

/* ===== 分割线 ===== */
.divider {
  height: 1rpx;
  background: #eee;
  margin: 24rpx 30rpx;
}

/* ===== 正文 ===== */
.detail-body {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #444;
  line-height: 1.8;
}
.detail-body rich-text {
  word-break: break-word;
}

/* ===== 底部按钮 ===== */
.detail-footer {
  padding: 40rpx 60rpx;
}
.read-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  text-align: center;
  border: none;
}
.read-btn::after {
  border: none;
}
</style>