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">
        <!-- 定时器显示 -->
        <view class="reading-timer" v-if="readingSeconds >= 0">
          <text class="timer-icon">⏱</text>
          <text class="timer-text">{{ formatTime(readingSeconds) }}</text>
          <text class="timer-hint" v-if="readingSeconds < 60">阅读{{ 60 - readingSeconds }}秒可获取积分</text>
          <text class="timer-hint timer-ready" v-else>已达标，可领取积分</text>
        </view>
        <!-- 完成按钮 -->
        <button
          class="read-btn"
          :class="{ 'read-btn-active': readingSeconds >= 60 }"
          @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: [],
      readingSeconds: 0,
      readingTimer: null,
      readRecorded: false
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.articleId = options.id
      this.loadDetail(options.id)
      this.startReadingTimer()
    } else {
      this.error = true
      this.errorMsg = '参数错误'
      this.loading = false
    }
  },
  onHide() {
    this.stopReadingTimer()
  },
  onUnload() {
    this.stopReadingTimer()
  },
  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 ''
    },
    startReadingTimer() {
      var self = this
      this.readingTimer = setInterval(function() {
        self.readingSeconds = self.readingSeconds + 1
        // Auto-submit when reaching 60 seconds (threshold)
        // But don't auto-submit - just indicate readiness
      }, 1000)
    },
    stopReadingTimer() {
      if (this.readingTimer) {
        clearInterval(this.readingTimer)
        this.readingTimer = null
      }
    },
    formatTime(seconds) {
      var m = Math.floor(seconds / 60)
      var s = seconds % 60
      return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
    },
    async onReadComplete() {
      if (this.readRecorded) {
        uni.navigateBack()
        return
      }
      this.stopReadingTimer()
      try {
        var childId = uni.getStorageSync('currentChildId')
        var res = await recordArticleRead({
          id: this.article.id,
          durationSeconds: this.readingSeconds,
          childId: childId || undefined
        })
        this.readRecorded = true
        if (res.data && res.data.pointsEarned > 0) {
          uni.showToast({ title: '获得' + res.data.pointsEarned + '积分!', icon: 'success' })
        } else if (res.data && res.data.belowThreshold) {
          uni.showToast({ title: '阅读时间未达标', icon: 'none' })
        } else if (res.data && res.data.alreadyCompleted) {
          uni.showToast({ title: '已读过此文', icon: 'none' })
        } else {
          uni.showToast({ title: '阅读记录已保存', icon: 'success' })
        }
      } catch (e) {
        uni.showToast({ title: '记录保存失败', icon: 'none' })
      }
      var self = this
      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;
}

/* ===== 定时器 ===== */
.reading-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 16rpx 0 20rpx;
}
.timer-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}
.timer-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 16rpx;
}
.timer-hint {
  font-size: 22rpx;
  color: #999;
}
.timer-ready {
  color: #22c55e;
  font-weight: bold;
}

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