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

<template>
  <view class="detail-container">
    <!-- 登录浮层（全局组件，页面内弹出底部登录） -->
    <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
    <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" v-if="isLogin && !readingCompleted">{{ formatReadingTime(readingSeconds) }}</text>
            <text class="reading-time-badge completed" v-else-if="isLogin && readingCompleted">✅ 阅读完成</text>
            <text class="meta-sep" v-if="isLogin">|</text>
           <text class="meta-readcount">{{ article.viewCount || 0 }}人阅读</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="detail-summary" v-if="article.summary">
          <text class="detail-summary-text">{{ article.summary }}</text>
        </view>
        <view class="divider"></view>
        <view class="detail-body"><mp-html :content="article.content" :domain="config.API_BASE_URL" :tag-style="contentTagStyle" /></view>

        <!-- 关联商品（文章标签匹配推荐） -->
        <view class="related-section" v-if="relatedProducts.length > 0">
          <view class="related-header">
            <text class="related-title">相关商品</text>
            <text class="related-sub">与本文内容相关</text>
          </view>
          <scroll-view scroll-x class="related-scroll" :show-scrollbar="false">
            <view class="related-list">
              <view class="related-item" v-for="p in relatedProducts" :key="p.id" @click="goProduct(p)">
                <image class="related-img" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
                <view class="related-info">
                  <text class="related-name">{{ p.name }}</text>
                  <view class="related-price-row">
                    <text class="related-price">¥{{ p.memberPrice }}</text>
                    <text class="related-match">匹配{{ p.tagMatchCount }}标签</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 评论区（已屏蔽） -->
        <view style="height: 200rpx;"></view>
      </scroll-view>

      <!-- 底部 -->
      <view class="detail-footer">
        <view class="share-btn" @click="generatePoster">
          <text class="share-btn-icon">🖼</text>
          <text class="share-btn-text">生成海报</text>
        </view>
      </view>
    </template>

    <ContentSharePoster :show="showPoster" :title="(article && article.title) || ''" :coverImage="(article && article.coverImage) || ''" :qrCodeBase64="posterQrCode || ''" typeLabel="好文推荐" :dimensionCode="posterDimension || ''" :summary="posterSummary || ''" :inviteText="posterInviteText || ''" @close="closePoster" />

    <!-- 浠宝答题弹窗 -->
    <view class="quiz-mask" v-if="showQuiz" @click="closeQuiz">
      <view class="quiz-dialog" @click.stop>
        <view class="quiz-mascot">
          <text class="mascot-icon">{{ mascotIcon }}</text>
          <text class="mascot-name">{{ mascotName }}</text>
        </view>
        <text class="quiz-intro">阅读完成！考考你三个问题～</text>
        <view class="quiz-question" v-for="(q, qi) in quizQuestions" :key="qi">
          <text class="q-title">问题{{ qi+1 }}: {{ q.question }}</text>
          <view class="q-options">
            <text v-for="(opt, oi) in q.options" :key="oi" class="q-option" :class="{ selected: quizAnswers[qi] === String.fromCharCode(65 + oi) }" @click="selectQuizAnswer(qi, oi)">{{ opt }}</text>
          </view>
        </view>
        <button class="quiz-submit" @click="submitQuiz">提交答案</button>
      </view>
    </view>

    <!-- 答题结果 -->
    <view class="result-mask" v-if="showResult">
      <view class="result-dialog">
        <text class="result-icon">{{ resultIcon }}</text>
        <text class="result-text">答对 {{ quizResult.correctCount }}/{{ quizResult.totalQuestions }} 题</text>
        <text class="result-energy">获得 {{ quizResult.cfEarned }} CF值 + {{ quizResult.energyEarned }} 能量 ⚡</text>
        <button class="result-btn" @click="closeResult">知道了</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getArticleDetail, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz, getArticleRelatedProducts } from '@/utils/api.js'
import shareMixin from '../../components/share-mixin.js'
import ContentSharePoster from '@/components/ContentSharePoster.vue'
import MpHtml from '@/components/mp-html/mp-html.vue'
import config from '@/config.js'

export default {
  mixins: [shareMixin],
  components: { ContentSharePoster, MpHtml },
  data() {
    return {
      articleId: '', article: null, loading: true, error: false, errorMsg: '',
      relatedProducts: [],
      readingSeconds: 0, lastReportedSeconds: 0, readingCompleted: false,
      isTimerRunning: false, timerHandle: null, syncHandle: null,
      currentChildId: null, isLogin: false,
      showPoster: false, posterQrCode: '',
      posterDimension: '', posterSummary: '', posterInviteText: '',
      contentTagStyle: { p: 'font-size:32rpx;color:#444;line-height:1.8;', div: 'font-size:32rpx;color:#444;line-height:1.8;', section: 'font-size:32rpx;color:#444;line-height:1.8;', li: 'font-size:32rpx;color:#444;line-height:1.8;', blockquote: 'font-size:32rpx;color:#444;line-height:1.8;' },
      // 答题
      showQuiz: false, quizQuestions: [], quizAnswers: [], showResult: false, quizResult: {}, quizRecordId: null,
      mascotList: [{ icon: '🐶', name: '浠宝' }, { icon: '🐼', name: '福宝' }],
      mascotIcon: '🐶', mascotName: '浠宝'
    }
  },
  computed: {},
  onLoad(options) {
    this.mascotIcon = this.mascotList[Math.floor(Math.random() * 2)].icon
    this.mascotName = this.mascotList[Math.floor(Math.random() * 2)].name
    // 兼容旧分享链接：refCode / inviteCode 参数（shareMixin onLoad 也会处理，此处显式兜底）
    if (options && (options.refCode || options.inviteCode)) {
      this.autoBindInviteCode(options.refCode || options.inviteCode)
    }
    var aid = ''
    if (options && options.id) {
      aid = options.id
    } else if (options && options.scene) {
      try {
        var sceneDecoded = decodeURIComponent(options.scene)
        var idMatch = sceneDecoded.match(/id=(\d+)/)
        if (idMatch && idMatch[1]) aid = idMatch[1]
        var refMatch = sceneDecoded.match(/ref=([^&]+)/)
        if (refMatch && refMatch[1]) this.autoBindInviteCode(refMatch[1])
      } catch (e) {}
    }
    if (aid) { this.articleId = aid; this.loadDetail(aid) }
    else { this.error = true; this.errorMsg = '参数错误'; this.loading = false }
    this.currentChildId = uni.getStorageSync('currentChildId') || null
    this.isLogin = !!uni.getStorageSync('token')
  },
  onShow() {
    var memberId = uni.getStorageSync('currentChildId')
    if (!this.article || this.error) return
    // 已登录用户（家长/成员/规划师）均可计时，匿名用户不计时
    if (this.isLogin) this.startNewReadingSession()
  },
  onHide() { this.pauseReadingTimer() },
  onUnload() { 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.article.coverImage = this.getImageUrl(this.article.coverImage)
          this.article.content = this.resolveContentUrls(this.article.content)
          this.setShareInfo('推荐阅读: ' + (res.data.title || ''), '/pages/article-center/article-detail?id=' + id)
          this.startReadingTimer()
          this.loadRelatedProducts(id)
        } else { this.error = true; this.errorMsg = '文章不存在或无权限查看' }
      } catch (e) { this.error = true; this.errorMsg = '加载失败' }
      finally { this.loading = false }
    },
    formatDate(d) { return d ? d.slice(0, 10) : '' },
    loadRelatedProducts: function(id) {
      var self = this
      getArticleRelatedProducts({ articleId: id, size: 6 }).then(function(res) {
        if (res && res.code === 200 && res.data) {
          var list = res.data
          var i
          for (i = 0; i < list.length; i++) {
            list[i].coverImage = self.getImageUrl(list[i].coverImage)
          }
          self.relatedProducts = list
        }
      }).catch(function() {})
    },
    goProduct: function(p) {
      if (p && p.id) {
        uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + p.id })
      }
    },
    getImageUrl: function(path) {
      if (!path) return ''
      if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
      if (!path || path === 'null' || path === 'undefined' || path === '/null') return ''
      var s = String(path).trim()
      if (!s || s === 'null' || s === '/null') return ''
      if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
      return config.API_BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
    },
    resolveContentUrls: function(html) {
      if (!html) return html
      // 将富文本内容中的相对图片路径（/uploads/...）拼接为绝对 URL
      return html.replace(/(src|href)=["']\/(uploads\/[^"']+)/g, function(match, attr, path) {
        return attr + '="' + config.API_BASE_URL + '/' + path + '"'
      })
    },
    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 } })
    },
    getMainDimension: function() {
      var dims = this.article ? this.parseDimensions(this.article) : []
      var best = null
      var i
      for (i = 0; i < dims.length; i++) {
        if (!best || dims[i].weight > best.weight) best = dims[i]
      }
      return best ? best.code : ''
    },
    onScrollToBottom() {},
    startNewReadingSession: function() {
      // 每次进入文章详情页都从 0 开始新会话，时长不延续上一次
      this.readingSeconds = 0
      this.lastReportedSeconds = 0
      this.startReadingTimer()
    },
    // 获取当前操作对象的 memberId：优先 currentChildId（切换视角），否则用 userId
    getActiveMemberId: function() {
      var mid = uni.getStorageSync('currentChildId')
      if (mid) return parseInt(mid)
      var uid = uni.getStorageSync('userId')
      return uid ? parseInt(uid) : null
    },
    startReadingTimer: function() {
      // 无登录态时不计时（匿名浏览只显示时长要求，不计时）
      if (!this.isLogin) return
      if (this.isTimerRunning || this.readingCompleted) return
      this.isTimerRunning = true
      var self = this
      this.timerHandle = setInterval(function() { self.readingSeconds++ }, 1000)
      // 每 10 秒自动记录一次该用户已读时长
      this.syncHandle = setInterval(function() { self.reportReadingTime() }, 10000)
    },
    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()
    },
    async reportReadingTime() {
      var delta = this.readingSeconds - this.lastReportedSeconds
      if (delta <= 0) return
      this.lastReportedSeconds = this.readingSeconds
      var memberId = this.getActiveMemberId()
      if (!this.isLogin || !this.article) return
      reportReadingTime({ articleId: this.article.id, memberId: memberId || 0, durationSeconds: delta })

      // 达到阅读时长自动完成
      var targetSeconds = (this.article.readTime || 3) * 60
      if (!this.readingCompleted && this.readingSeconds >= targetSeconds) {
        this.readingCompleted = true
        this.pauseReadingTimer()
        try { await completeArticleRead({ articleId: this.article.id, memberId: memberId || 0, durationSeconds: this.readingSeconds }) } catch (e) {}
        uni.showToast({ title: '阅读完成 +5能量', icon: 'success' })
        // 弹出答题（登录用户）
        this.startQuiz()
      }
    },
    formatReadingTime: function(seconds) {
      if (seconds < 60) return '已读 ' + seconds + '秒'
      var min = Math.floor(seconds / 60); var sec = seconds % 60
      return '已读 ' + min + '分' + (sec > 0 ? sec + '秒' : '')
    },
    async generatePoster() {
      if (!this.articleId) return
      uni.showLoading({ title: '生成海报中...' })
      try {
        if (!this.referralCode) {
          await this.loadReferralCode()
        }
        var scene = 'id=' + this.articleId + (this.referralCode ? '&ref=' + this.referralCode : '')
        if (scene.length > 32) {
          scene = scene.substring(0, 32)
        }
        var res = await getShareQrCode('pages/article-center/article-detail', scene)
        if (res && res.data) {
          this.posterQrCode = res.data.qrCodeBase64 || ''
          this.posterDimension = this.getMainDimension()
          this.posterSummary = (this.article && this.article.summary) || ''
          this.posterInviteText = '「' + (uni.getStorageSync('nickname') || '好友') + '」邀请你一起阅读这篇文章'
          this.showPoster = true
        }
      } catch (e) { uni.showToast({ title: '生成失败', icon: 'none' }) }
      finally { uni.hideLoading() }
    },
    // 答题
    async startQuiz() {
      if (!this.isLogin) {
        uni.showToast({ title: '登录后即可完成知识测评', icon: 'none' })
        setTimeout(() => { this.openLoginSheet() }, 1500)
        return
      }
      var memberId = this.getActiveMemberId()
      try {
        var res = await generateQuiz({ articleId: this.articleId, memberId: memberId || 0 })
        if (res.code === 200 && res.data && res.data.questions && res.data.questions.length > 0) {
          this.quizRecordId = res.data.recordId
          this.quizQuestions = res.data.questions
          this.quizAnswers = []
          this.showQuiz = true
        }
      } catch (e) {}
    },
    async submitQuiz() {
      var memberId = this.getActiveMemberId()
      var answers = []
      for (var i = 0; i < this.quizQuestions.length; i++) {
        answers.push(this.quizAnswers[i] || '')
      }
      try {
        var res = await submitQuiz({ recordId: this.quizRecordId, memberId: parseInt(memberId || 0), answers: answers })
        if (res.code === 200) {
          this.quizResult = res.data || {}
          this.showQuiz = false
          this.showResult = true
        }
      } catch (e) {}
    },
    closePoster: function() {
      this.showPoster = false
    },
    closeQuiz: function() {
      this.showQuiz = false
    },
    closeResult: function() {
      this.showResult = false
    },
    selectQuizAnswer: function(qi, oi) {
      this.quizAnswers[qi] = String.fromCharCode(65 + oi)
    }
  }
}
</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); } 360% { 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; }
.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; flex-wrap: wrap; }
.meta-author { color: #5B9BD5; }
.meta-sep { margin: 0 12rpx; color: #ddd; }
.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; }
.reading-time-badge.completed { color: #10B981; background: rgba(16,185,129,0.1); }
.meta-readcount {
  font-size: 20rpx;
  color: #bbb;
}
.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; }
.detail-summary { padding: 20rpx 30rpx; }
.detail-summary-text { font-size: 26rpx; color: #888; line-height: 1.7; display: block; border-left: 4rpx solid #F97316; padding-left: 20rpx; }
.divider { height: 1rpx; background: #eee; margin: 24rpx 30rpx; }
.detail-body { padding: 0 30rpx; font-size: 32rpx; color: #444; line-height: 1.8; }

/* 关联商品 */
.related-section { padding: 30rpx 0 20rpx; }
.related-header { display: flex; align-items: baseline; padding: 0 30rpx; margin-bottom: 20rpx; }
.related-title { font-size: 30rpx; font-weight: 700; color: #333; }
.related-sub { font-size: 22rpx; color: #999; margin-left: 16rpx; }
.related-scroll { white-space: nowrap; padding-left: 30rpx; }
.related-list { display: inline-flex; }
.related-item { width: 240rpx; margin-right: 20rpx; background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06); display: inline-block; vertical-align: top; }
.related-img { width: 240rpx; height: 240rpx; display: block; background: #f5f5f5; }
.related-info { padding: 14rpx 16rpx 18rpx; }
.related-name { font-size: 24rpx; color: #333; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; min-height: 68rpx; }
.related-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx; }
.related-price { font-size: 26rpx; font-weight: 700; color: #F97316; }
.related-match { font-size: 18rpx; color: #999; }

.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
.share-btn::after { border: none; }
.share-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
.share-btn-text { font-size: 26rpx; color: #fff; font-weight: 600; }

/* 答题弹窗 */
.quiz-mask, .result-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
.quiz-dialog, .result-dialog { background: #fff; border-radius: 24rpx; width: 650rpx; padding: 32rpx; }
.quiz-mascot { display: flex; align-items: center; justify-content: center; gap: 12rpx; margin-bottom: 16rpx; }
.mascot-icon { font-size: 60rpx; }
.mascot-name { font-size: 32rpx; font-weight: 700; color: #F97316; }
.quiz-intro { text-align: center; font-size: 28rpx; color: #666; margin-bottom: 24rpx; }
.quiz-question { margin-bottom: 20rpx; }
.q-title { font-size: 26rpx; font-weight: 600; color: #333; margin-bottom: 12rpx; }
.q-options { display: flex; flex-direction: column; gap: 8rpx; }
.q-option { padding: 14rpx 20rpx; border: 2rpx solid #E5E7EB; border-radius: 12rpx; font-size: 24rpx; color: #333; }
.q-option.selected { border-color: #F97316; background: #FFF7ED; color: #92400E; }
.quiz-submit, .result-btn { width: 100%; padding: 20rpx; background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 28rpx; border-radius: 12rpx; border: none; margin-top: 20rpx; }
.result-dialog { text-align: center; }
.result-icon { font-size: 80rpx; }
.result-text { font-size: 32rpx; font-weight: 700; color: #333; margin: 16rpx 0; }
.result-energy { font-size: 28rpx; color: #F97316; }
</style>