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

<template>
  <view class="detail-container" :style="{ '--font-scale': fontScale }">
    <!-- 登录浮层（全局组件，页面内弹出底部登录） -->
    <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 v-if="relatedArticles.length > 0" class="related-section">
          <view class="related-header">
            <text class="related-title">相关文章</text>
            <text class="related-subtitle">根据标签推荐</text>
          </view>
          <view class="ra-list">
            <view
              v-for="item in relatedArticles"
              :key="item.id"
              class="ra-item"
              hover-class="ra-item-pressed"
              @click="goRelatedArticle(item)"
            >
              <image class="ra-cover" :src="getImageUrl(item.coverImage) || '/static/default-article.png'" mode="aspectFill" />
              <view class="ra-body">
                <text class="ra-title">{{ item.title }}</text>
                <text class="ra-summary" v-if="item.summary">{{ item.summary }}</text>
              </view>
            </view>
          </view>
          <view v-if="relatedArticlesLoading" class="related-loading-hint">加载中...</view>
        </view>

        <!-- 关联商品推荐（文章标签 ↔ 商品标签匹配，登录/匿名均可返回；商城两列大卡片样式，触底分页加载） -->
        <view v-if="relatedProducts.length > 0" class="related-section">
          <view class="related-header">
            <text class="related-title">相关商品</text>
            <text class="related-subtitle">根据文章内容推荐</text>
          </view>
          <dimension-products :products="relatedProducts" layout="mall" @productClick="goRelatedProduct" />
          <view v-if="relatedProductsLoading" class="related-loading-hint">加载中...</view>
          <view v-else-if="relatedProductsNoMore" class="related-loading-hint dim">没有更多了</view>
        </view>

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

      <!-- 底部 -->
      <view class="detail-footer">
        <view v-if="isLogin" class="listen-btn" :class="{ playing: audioPlaying }" @click="toggleArticleAudio">
          <text class="listen-btn-icon">{{ audioLoading ? '⏳' : (audioPlaying ? '⏸' : '🔊') }}</text>
          <text class="listen-btn-text">{{ audioLoading ? '生成中' : (audioPlaying ? '停止' : '听文章') }}</text>
        </view>
        <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>
        <template v-if="currentQuestion">
          <view class="quiz-step-bar">
            <text class="quiz-step-text">第 {{ currentQuizIndex + 1 }} / {{ quizQuestions.length }} 题</text>
            <view class="quiz-dots">
              <view v-for="(q, qi) in quizQuestions" :key="qi" class="quiz-dot" :class="{ active: qi === currentQuizIndex, done: quizAnswers[qi] }"></view>
            </view>
          </view>
          <text class="q-title">{{ currentQuestion.question }}</text>
          <view class="q-options">
            <view v-for="(opt, oi) in currentQuestionOptions" :key="oi" class="q-option-row" :class="opt.selected ? 'selected' : ''" @click="selectQuizAnswer(currentQuizIndex, oi)">
              <text class="q-option-letter">{{ opt.letter }}.</text>
              <text class="q-option-text">{{ opt.text }}</text>
              <text class="q-option-check">✓</text>
            </view>
          </view>
          <view class="quiz-nav">
            <button v-if="currentQuizIndex > 0" class="quiz-prev" @click="goPrevQuestion">上一题</button>
            <button v-if="currentQuizIndex < quizQuestions.length - 1" class="quiz-submit" @click="goNextQuestion">下一题</button>
            <button v-else class="quiz-submit" @click="submitQuiz">提交答案</button>
          </view>
        </template>
      </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, getArticleAudio, getArticleRelatedProducts, getRelatedArticles, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz, completeTask } from '@/utils/api.js'
import shareMixin from '../../components/share-mixin.js'
import ContentSharePoster from '@/components/ContentSharePoster.vue'
import DimensionProducts from '@/components/DimensionProducts.vue'
import MpHtml from '@/components/mp-html/mp-html.vue'
import config from '@/config.js'
import { getFontScale } from '@/utils/fontScale.js'

export default {
  mixins: [shareMixin],
  components: { ContentSharePoster, DimensionProducts, MpHtml },
  data() {
    return {
      articleId: '', article: null, loading: true, error: false, errorMsg: '',
      relatedProducts: [],
      relatedArticles: [],
      // 关联区块分页状态
      relatedProductsPage: 1, relatedProductsLoading: false, relatedProductsNoMore: false,
      relatedArticlesPage: 1, relatedArticlesLoading: false, relatedArticlesNoMore: false,
      readingSeconds: 0, lastReportedSeconds: 0, readingCompleted: false,
      isTimerRunning: false, timerHandle: null, syncHandle: null,
      currentChildId: null, isLogin: false,
      // 听文章（AI 朗读）
      audioUrls: [], audioPlaying: false, audioLoading: false, audioContext: null, audioChunkIndex: 0,
      showPoster: false, posterQrCode: '',
      posterDimension: '', posterSummary: '', posterInviteText: '',
      fontScale: 1,
      // 答题
      showQuiz: false, quizQuestions: [], quizAnswers: [], showResult: false, quizResult: {}, quizRecordId: null, currentQuizIndex: 0,
      mascotList: [{ icon: '🐶', name: '浠宝' }, { icon: '🐼', name: '福宝' }],
      mascotIcon: '🐶', mascotName: '浠宝',
      taskId: null
    }
  },
  computed: {
    contentTagStyle() {
      var scale = this.fontScale || 1
      var fontSize = 32 * scale
      return { p: 'font-size:' + fontSize + 'rpx;color:#444;line-height:1.8;', div: 'font-size:' + fontSize + 'rpx;color:#444;line-height:1.8;', section: 'font-size:' + fontSize + 'rpx;color:#444;line-height:1.8;', li: 'font-size:' + fontSize + 'rpx;color:#444;line-height:1.8;', blockquote: 'font-size:' + fontSize + 'rpx;color:#444;line-height:1.8;' }
    },
    // 当前展示的一题（一题一页）
    currentQuestion: function() {
      if (!this.quizQuestions || !this.quizQuestions.length) return null
      return this.quizQuestions[this.currentQuizIndex] || null
    },
    // 当前题的选项展示数据：统一派生字母、剥离后端自带前缀、标记选中态。
    // 避免在模板 :class / 插值中调用方法（小程序渲染层不支持）且数组索引访问不响应。
    currentQuestionOptions: function() {
      var q = this.currentQuestion
      if (!q || !q.options) return []
      var selected = this.quizAnswers[this.currentQuizIndex] || ''
      return q.options.map(function(opt, oi) {
        var letter = String.fromCharCode(65 + oi)
        var s = opt ? opt.toString().trim() : ''
        // 剥离 "A." / "A)" / "(A)" 等常见前缀，字母由下方单独渲染避免重复
        var cleaned = s.replace(/^[A-Za-z][\.\)\:：]\s*/i, '').trim()
        return { letter: letter, text: cleaned, selected: selected === letter }
      })
    }
  },
  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.taskId = options && options.taskId ? parseInt(options.taskId) : null
    this.currentChildId = uni.getStorageSync('currentChildId') || null
    this.isLogin = !!uni.getStorageSync('token')
  },
  onShow() {
    this.fontScale = getFontScale()
    var memberId = uni.getStorageSync('currentChildId')
    if (!this.article || this.error) return
    // 已登录用户（家长/成员/规划师）均可计时，匿名用户不计时
    if (this.isLogin) this.startNewReadingSession()
  },
  onHide() { this.pauseReadingTimer(); this.stopArticleAudio() },
  onUnload() { this.pauseReadingTimer(); this.stopArticleAudio() },
  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()
          // 关联区块：放在 loadDetail 内只走一次（onShow 不重复请求，避免双发）；先重置分页状态再加载第 1 页
          this.resetRelatedState()
          this.loadRelatedProducts(id, 1, false)
          this.loadRelatedArticles(id, 1, false)
        } else { this.error = true; this.errorMsg = '文章不存在或无权限查看' }
      } catch (e) { this.error = true; this.errorMsg = '加载失败' }
      finally { this.loading = false }
    },
    // 重置关联区块分页状态（loadDetail 每次加载前调用，避免切文章后旧状态残留）
    resetRelatedState: function() {
      this.relatedProductsPage = 1
      this.relatedProductsLoading = false
      this.relatedProductsNoMore = false
      this.relatedArticlesPage = 1
      this.relatedArticlesLoading = false
      this.relatedArticlesNoMore = false
    },
    // 加载文章关联商品（后端按 标签匹配数 > 用户权重 > 家庭权重 > 销量 排序），每页 4 个，触底翻页
    loadRelatedProducts: function(articleId, page, append) {
      var self = this
      if (!articleId) return
      var pg = page || 1
      if (pg === 1) {
        this.relatedProducts = []
        this.relatedProductsNoMore = false
      }
      if (this.relatedProductsLoading) return
      this.relatedProductsLoading = true
      getArticleRelatedProducts({ articleId: articleId, size: 4, page: pg }).then(function(res) {
        self.relatedProductsLoading = false
        if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
          if (append && pg > 1) {
            self.relatedProducts = self.relatedProducts.concat(res.data)
          } else {
            self.relatedProducts = res.data
          }
          if (res.data.length < 4) self.relatedProductsNoMore = true
        } else {
          self.relatedProductsNoMore = true
        }
      }).catch(function() {
        self.relatedProductsLoading = false
        self.relatedProductsNoMore = true
      })
    },
    // 加载相关文章（后端按共享标签数降序），每页 3 篇，触底翻页；无匹配返回空数组 → 前端整块隐藏
    loadRelatedArticles: function(articleId, page, append) {
      var self = this
      if (!articleId) return
      var pg = page || 1
      if (pg === 1) {
        this.relatedArticles = []
        this.relatedArticlesNoMore = false
      }
      if (this.relatedArticlesLoading) return
      this.relatedArticlesLoading = true
      getRelatedArticles({ articleId: articleId, size: 3, page: pg }).then(function(res) {
        self.relatedArticlesLoading = false
        if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
          if (append && pg > 1) {
            self.relatedArticles = self.relatedArticles.concat(res.data)
          } else {
            self.relatedArticles = res.data
          }
          if (res.data.length < 3) self.relatedArticlesNoMore = true
        } else {
          self.relatedArticlesNoMore = true
        }
      }).catch(function() {
        self.relatedArticlesLoading = false
        self.relatedArticlesNoMore = true
      })
    },
    // 跳转相关文章详情
    goRelatedArticle: function(item) {
      if (!item || !item.id) return
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + item.id })
    },
    // 跳转商品详情（优先使用后端返回的 url）
    goRelatedProduct: function(prod) {
      if (!prod) return
      var pid = prod.productId || prod.id
      var url = prod.url || ('/pages/discover-detail/product-detail/product-detail?id=' + (pid || ''))
      if (url.indexOf('/pages/') !== 0) return
      uni.navigateTo({ url: url })
    },
    formatDate(d) { return d ? d.slice(0, 10) : '' },
    getImageUrl: function(path) {
      if (!path) return ''
      if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
      return config.API_BASE_URL + path
    },
    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: function() {
      // 触底优先翻页「相关商品」（页面下方区块），商品加载完再翻「相关文章」
      if (this.relatedProducts.length > 0 && !this.relatedProductsNoMore && !this.relatedProductsLoading) {
        this.relatedProductsPage++
        this.loadRelatedProducts(this.articleId, this.relatedProductsPage, true)
        return
      }
      if (this.relatedArticles.length > 0 && !this.relatedArticlesNoMore && !this.relatedArticlesLoading) {
        this.relatedArticlesPage++
        this.loadRelatedArticles(this.articleId, this.relatedArticlesPage, true)
      }
    },
    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 toggleArticleAudio() {
      if (this.audioPlaying) { this.stopArticleAudio(); return }
      if (this.audioLoading || !this.article) return
      if (this.audioUrls && this.audioUrls.length > 0) { this.playAudioChunk(0); return }
      this.audioLoading = true
      try {
        var res = await getArticleAudio({ articleId: this.article.id })
        if (res.code === 200 && res.data && res.data.audioUrls && res.data.audioUrls.length > 0) {
          this.audioUrls = res.data.audioUrls
          this.playAudioChunk(0)
        } else {
          uni.showToast({ title: (res && res.message) || '抱歉，音频暂不可用', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '音频生成失败，请稍后重试', icon: 'none' })
      } finally {
        this.audioLoading = false
      }
    },
    playAudioChunk: function(index) {
      var self = this
      // 播放期间保证阅读计时运行（未登录不计时）
      if (this.isLogin && !this.isTimerRunning && !this.readingCompleted) this.startReadingTimer()
      this.audioChunkIndex = index
      var ctx = uni.createInnerAudioContext()
      this.audioContext = ctx
      ctx.src = this.audioUrls[index]
      ctx.onEnded(function() {
        if (index + 1 < self.audioUrls.length) { self.playAudioChunk(index + 1) }
        else { self.stopArticleAudio() }
      })
      ctx.onError(function() {
        uni.showToast({ title: '播放失败', icon: 'none' })
        self.stopArticleAudio()
      })
      ctx.play()
      this.audioPlaying = true
    },
    stopArticleAudio: function() {
      if (this.audioContext) {
        try { this.audioContext.stop() } catch (e) {}
        try { this.audioContext.destroy() } catch (e) {}
        this.audioContext = null
      }
      this.audioPlaying = false
    },
    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.currentQuizIndex = 0
          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
          // 有关联任务：答完题即完成打卡任务
          if (this.taskId && memberId) {
            try {
              var cr = await completeTask(this.taskId, parseInt(memberId), '', '阅读+答题完成', 'text')
              if (cr && cr.data) {
                uni.showToast({ title: '任务已完成', icon: 'success' })
              }
            } catch (e) { /* ignore */ }
          }
        }
      } catch (e) {}
    },
    closePoster: function() {
      this.showPoster = false
    },
    closeQuiz: function() {
      this.showQuiz = false
    },
    closeResult: function() {
      this.showResult = false
    },
    selectQuizAnswer: function(qi, oi) {
      // Vue 2 中数组索引直接赋值（quizAnswers[qi] = x）不触发响应式更新，
      // 必须用 $set 才能驱动选中态/圆点高亮刷新
      this.$set(this.quizAnswers, qi, String.fromCharCode(65 + oi))
    },
    // 一题一页：上一题 / 下一题
    goPrevQuestion: function() {
      if (this.currentQuizIndex > 0) this.currentQuizIndex--
    },
    goNextQuestion: function() {
      if (this.currentQuizIndex < this.quizQuestions.length - 1) this.currentQuizIndex++
    }
  }
}
</script>

<style scoped lang="scss">
.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: $uni-info; 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: $brand-primary; 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: calc(36rpx * var(--font-scale, 1)); 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: $uni-info; }
.meta-sep { margin: 0 12rpx; color: #ddd; }
.reading-time-badge { margin-left: auto; font-size: 20rpx; color: $uni-info; background: rgba(14, 165, 233, 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: $uni-info; background: rgba(14, 165, 233, 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: calc(26rpx * var(--font-scale, 1)); 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: calc(32rpx * var(--font-scale, 1)); color: #444; line-height: 1.8; }

/* 关联商品推荐 */
.related-section { margin-top: 20rpx; padding: 0 30rpx 8rpx; }
.related-header { display: flex; align-items: baseline; margin-bottom: 16rpx; }
.related-title { font-size: 30rpx; font-weight: bold; color: #333; }
.related-subtitle { font-size: 20rpx; color: #999; margin-left: 12rpx; }
.related-loading-hint { text-align: center; font-size: 22rpx; color: #F97316; padding: 16rpx 0 8rpx; }
.related-loading-hint.dim { color: #bbb; }

/* 相关文章 */
.ra-list { display: flex; flex-direction: column; gap: 16rpx; }
.ra-item { display: flex; align-items: center; background: #fafafa; border-radius: 12rpx; padding: 16rpx; }
.ra-item-pressed { opacity: 0.7; }
.ra-cover { width: 140rpx; height: 100rpx; border-radius: 8rpx; background: #eee; flex-shrink: 0; }
.ra-body { margin-left: 20rpx; flex: 1; min-width: 0; }
.ra-title { display: block; font-size: 28rpx; font-weight: 600; color: #333; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-summary { display: block; margin-top: 8rpx; font-size: 22rpx; color: #999; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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; }

.listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
.listen-btn.playing { background: rgba(14, 165, 233, 0.2); }
.listen-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
.listen-btn-text { font-size: 26rpx; color: $uni-info; 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-step-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 24rpx; }
.quiz-step-text { font-size: 24rpx; color: #999; margin-right: 12rpx; }
.quiz-dots { display: flex; align-items: center; gap: 8rpx; }
.quiz-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #E5E7EB; }
.quiz-dot.active { background: #F97316; }
.quiz-dot.done { background: #FDBA74; }
.q-title { font-size: 30rpx; font-weight: 600; color: #333; line-height: 1.5; margin-bottom: 20rpx; }
.q-options { display: flex; flex-direction: column; gap: 12rpx; }
.q-option-row { display: flex; align-items: center; padding: 16rpx 20rpx; border: 2rpx solid #E5E7EB; border-radius: 12rpx; }
.q-option-row.selected { border-color: #F97316; background: #FFF7ED; }
.q-option-letter { width: 44rpx; font-size: 26rpx; font-weight: 600; color: #666; flex-shrink: 0; }
.q-option-row.selected .q-option-letter { color: #F97316; }
.q-option-text { flex: 1; min-width: 0; font-size: 26rpx; color: #333; }
.q-option-row.selected .q-option-text { color: #92400E; }
.q-option-check { width: 32rpx; height: 32rpx; border-radius: 50%; border: 3rpx solid #D1D5DB; color: transparent; font-size: 20rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.q-option-row.selected .q-option-check { border-color: #F97316; background: #F97316; color: #fff; }
.quiz-nav { display: flex; gap: 16rpx; margin-top: 28rpx; }
.quiz-prev { flex: 1; padding: 20rpx; background: #fff; color: #F97316; border: 2rpx solid #F97316; font-size: 28rpx; border-radius: 12rpx; }
.quiz-prev::after { border: none; }
.quiz-submit { flex: 1; padding: 20rpx; background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 28rpx; border-radius: 12rpx; border: none; }
.quiz-submit::after { border: none; }
.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>