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

<template>
  <view class="detail-container">
    <!-- loading -->
    <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>

    <template v-else-if="article">
      <!-- 文章内容区 -->
      <scroll-view scroll-y class="content-scroll" @scrolltolower="onScrollToBottom">
        <!-- 封面 -->
        <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-sep">|</text>
          <text class="meta-date">{{ formatDate(article.publishedAt) }}</text>
          <text class="meta-sep">|</text>
          <text class="meta-readtime">{{ article.readTime || 3 }}分钟阅读</text>
          <text class="reading-time-badge">{{ formatReadingTime(readingSeconds) }}</text>
        </view>
        <!-- 分类 -->
        <view class="detail-category-row">
          <text class="detail-category">{{ article.categoryName || '' }}</text>
        </view>
        <!-- 五维权重彩条 -->
        <view v-if="article.relatedDimensions" class="detail-dimensions">
          <view v-for="dim in parseDimensions(article)" :key="dim.code" class="dim-bar-item">
            <view class="dim-bar" :style="{ background: dim.color, width: dim.weight + '%' }"></view>
            <text class="dim-label">{{ dim.name }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="divider"></view>
        <!-- 正文 -->
        <view class="detail-body">
          <rich-text :nodes="article.content"></rich-text>
        </view>
        <!-- 底部占位 -->
        <view style="height: 160rpx;"></view>
      </scroll-view>

      <!-- 底部 -->
      <view class="detail-footer">
        <button class="share-btn" open-type="share" @click="onShareTap">
          <text class="share-btn-icon">📤</text>
          <text class="share-btn-text">分享</text>
        </button>
      </view>
    </template>
  </view>
</template>

<script>
import { getArticleDetail, reportReadingTime } from '@/utils/api.js'
import shareMixin from '../../components/share-mixin.js'

export default {
  mixins: [shareMixin],
  data() {
    return {
      articleId: '',
      article: null,
      loading: true,
      error: false,
      errorMsg: '',
      readingSeconds: 0,
      lastReportedSeconds: 0,
      isTimerRunning: false,
      timerHandle: null,
      syncHandle: null
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.articleId = options.id
      this.loadDetail(options.id)
    } else {
      this.error = true
      this.errorMsg = '参数错误'
      this.loading = false
    }
  },
  onShow: function() {
    if (this.article && !this.error) {
      this.startReadingTimer()
    }
  },
  onHide: function() {
    this.pauseReadingTimer()
  },
  onUnload: function() {
    this.pauseReadingTimer()
  },
  methods: {
    async loadDetail(id) {
      this.loading = true
      this.error = false
      try {
        var res = await getArticleDetail({ id: id })
        if (res.code === 200 && res.data) {
          this.article = res.data
          this.setShareInfo('推荐阅读: ' + (res.data.title || ''), '/pages/article-center/article-detail?id=' + id)
          this.startReadingTimer()
        } else {
          this.error = true
          this.errorMsg = '文章不存在或无权限查看'
        }
      } catch (e) {
        this.error = true
        this.errorMsg = '加载失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.slice(0, 10)
    },
    parseDimensions: function(article) {
      var dimMap = {
        body:   { code: 'body',   color: '#FF8C42', name: '身' },
        mind:   { code: 'mind',   color: '#FF6B9D', name: '心' },
        wisdom: { code: 'wisdom', color: '#6366F1', name: '智' },
        action: { code: 'action', color: '#10B981', name: '行' },
        wealth: { code: 'wealth', color: '#F59E0B', name: '富' }
      }
      var raw = article && article.relatedDimensions
        ? article.relatedDimensions.split(',').map(function(s) { return s.trim().toLowerCase() })
        : []
      var weights = null
      if (article && article.dimensionWeights) {
        try {
          var w = JSON.parse(article.dimensionWeights)
          if (w && typeof w === 'object') weights = w
        } catch (e) {}
      }
      if (!weights) {
        var n = raw.filter(function(c) { return dimMap[c] }).length
        if (n > 0) {
          var base = Math.floor(100 / n)
          var rem = 100 - base * n
          weights = {}
          var i = 0
          raw.forEach(function(c) {
            if (!dimMap[c]) return
            weights[c] = i < rem ? base + 1 : base
            i++
          })
        }
      }
      return raw.filter(function(c) { return dimMap[c] }).map(function(c) {
        return {
          code: dimMap[c].code,
          name: dimMap[c].name,
          color: dimMap[c].color,
          weight: (weights && weights[c]) ? weights[c] : 20
        }
      })
    },
    onScrollToBottom() {
      // 滚动到底部
    },
    startReadingTimer: function() {
      if (this.isTimerRunning) return
      this.isTimerRunning = true
      var self = this
      this.timerHandle = setInterval(function() {
        self.readingSeconds++
      }, 1000)
      this.syncHandle = setInterval(function() {
        self.reportReadingTime()
      }, 30000)
    },
    pauseReadingTimer: function() {
      if (!this.isTimerRunning) return
      this.isTimerRunning = false
      if (this.timerHandle) {
        clearInterval(this.timerHandle)
        this.timerHandle = null
      }
      if (this.syncHandle) {
        clearInterval(this.syncHandle)
        this.syncHandle = null
      }
      this.reportReadingTime()
    },
    reportReadingTime: function() {
      var delta = this.readingSeconds - this.lastReportedSeconds
      if (delta <= 0) return
      this.lastReportedSeconds = this.readingSeconds
      var childId = uni.getStorageSync('currentChildId')
      if (!childId || !this.article) return
      reportReadingTime({
        articleId: this.article.id,
        childId: parseInt(childId),
        durationSeconds: delta
      })
    },
    formatReadingTime: function(seconds) {
      if (seconds < 60) {
        return '已读 ' + seconds + '秒'
      }
      var min = Math.floor(seconds / 60)
      var sec = seconds % 60
      return '已读 ' + min + '分' + (sec > 0 ? sec + '秒' : '')
    }
  }
}
</script>

<style scoped>
.detail-container { min-height: 100vh; background: #fff; }
.loading-wrap { display: flex; flex-direction: column; align-items: 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; }
.content-scroll { height: calc(100vh - 120rpx); }
.detail-cover { width: 100%; 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; align-items: center; padding: 16rpx 30rpx 0; font-size: 22rpx; color: #999; }
.meta-author { color: #5B9BD5; }
.meta-sep { margin: 0 12rpx; color: #ddd; }
.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-dimensions { padding: 16rpx 30rpx 0; display: flex; gap: 12rpx; }
.dim-bar-item { flex: 1; }
.dim-bar { height: 8rpx; border-radius: 4rpx; }
.dim-label { font-size: 18rpx; color: #999; text-align: center; display: block; margin-top: 4rpx; }
.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 { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
.share-btn { height: 72rpx; line-height: 72rpx; background: #f5f5f5; color: #666; font-size: 24rpx; border-radius: 36rpx; padding: 0 24rpx; display: flex; align-items: center; border: none; }
.share-btn::after { border: none; }
.share-btn-icon { font-size: 28rpx; margin-right: 6rpx; }
.share-btn-text { font-size: 24rpx; }
.reading-time-badge { margin-left: auto; font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.08); padding: 4rpx 12rpx; border-radius: 20rpx; white-space: nowrap; }
</style>