cfc/cfc-frontend/pages/wisdom/self-quiz.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="nav-back-icon">&#x2190;</text>
      </view>
      <text class="nav-title">自己出题自己答</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 步骤进度 -->
    <view class="step-progress">
      <view class="step-item" v-for="(s, i) in steps" :key="i"
        :class="{ 'step-active': currentStep === i + 1, 'step-done': currentStep > i + 1 }">
        <view class="step-circle">
          <text class="step-num">{{ currentStep > i + 1 ? '✓' : (i + 1) }}</text>
        </view>
        <text class="step-label">{{ s }}</text>
      </view>
    </view>

    <!-- ===== Step 1: 设定目标 ===== -->
    <view class="step-content" v-if="currentStep === 1">
      <view class="content-card">
        <text class="content-title">设定挑战目标</text>
        <text class="content-desc">选择你要连续答对多少题才能通关</text>

        <view class="target-selector">
          <view class="target-label">
            <text class="target-label-text">连续答对目标</text>
          </view>
          <view class="target-control">
            <view class="target-btn" @click="adjustTarget(-1)">−</view>
            <view class="target-value-wrap">
              <text class="target-value">{{ targetN }}</text>
              <text class="target-unit">题</text>
            </view>
            <view class="target-btn" @click="adjustTarget(1)">+</view>
          </view>
        </view>

        <view class="target-range">
          <text class="range-text">范围: 2 - 15 题</text>
        </view>

        <view class="start-btn-wrap">
          <view class="start-btn" @click="startQuiz">
            <text class="start-btn-text">确认开始</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== Step 2: 选择题型 ===== -->
    <view class="step-content" v-if="currentStep === 2">
      <view class="content-card">
        <text class="content-title">选择题型</text>
        <text class="content-desc">选择一个认知维度开始出题</text>

        <view class="type-grid">
          <view class="type-card" v-for="t in questionTypes" :key="t.key"
            :class="{ 'type-recommended': t.recommended }"
            @click="selectType(t)">
            <text class="type-icon">{{ t.icon }}</text>
            <text class="type-name">{{ t.label }}</text>
            <text class="type-desc">{{ t.desc }}</text>
            <view class="type-recommend-badge" v-if="t.recommended">
              <text class="badge-text">推荐</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== Step 3: 出题 + 答题 ===== -->
    <view class="step-content" v-if="currentStep === 3">
      <view class="content-card">
        <view class="step3-header">
          <text class="selected-type-label">{{ selectedType && selectedType.label }}</text>
          <text class="step3-progress">连续答对 {{ correctCount }}/{{ targetN }}</text>
        </view>

        <view class="question-section">
          <text class="question-label">输入你的题目</text>
          <textarea class="question-input" v-model="currentQuestion" placeholder="在这里写下你的题目..." maxlength="200"></textarea>
          <text class="char-count">{{ currentQuestion.length }}/200</text>
        </view>

        <view class="answer-section">
          <text class="answer-label">输入正确答案</text>
          <input class="answer-input" v-model="currentAnswer" placeholder="在这里写下正确答案..." maxlength="50" />
          <text class="char-count">{{ currentAnswer.length }}/50</text>
        </view>

        <view class="submit-btn-wrap">
          <view class="submit-btn" @click="submitAnswer" v-if="currentQuestion.trim() && currentAnswer.trim()">
            <text class="submit-btn-text">提交答案</text>
          </view>
          <view class="submit-btn disabled" v-else>
            <text class="submit-btn-text">请填写题目和答案</text>
          </view>
        </view>

        <!-- 答题结果反馈 -->
        <view class="feedback-wrap" v-if="showFeedback">
          <view class="feedback-card" :class="lastCorrect ? 'feedback-correct' : 'feedback-wrong'">
            <text class="feedback-icon">{{ lastCorrect ? '🎉' : '💪' }}</text>
            <view class="feedback-info">
              <text class="feedback-title">{{ lastCorrect ? '回答正确!' : '加油，再试试!' }}</text>
              <text class="feedback-subtitle">{{ lastCorrect ? ('连续答对 ' + correctCount + '/' + targetN) : '连续计数已重置，重新开始' }}</text>
            </view>
          </view>
          <view class="next-btn-wrap" v-if="showFeedback">
            <view class="next-btn" @click="continueAfterFeedback">
              <text class="next-btn-text">{{ lastCorrect && correctCount >= targetN ? '查看结果' : '继续出题' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== Step 4: 达标通过 ===== -->
    <view class="step-content" v-if="currentStep === 4">
      <view class="celebration-card">
        <text class="celebration-icon">🏆</text>
        <text class="celebration-title">恭喜通关!</text>
        <text class="celebration-subtitle">你成功完成了挑战</text>

        <view class="stats-grid">
          <view class="stat-item">
            <text class="stat-value">{{ sessionStats.totalTime }}</text>
            <text class="stat-label">用时</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ sessionStats.totalQuestions }}</text>
            <text class="stat-label">总答题数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ sessionStats.accuracy }}%</text>
            <text class="stat-label">正确率</text>
          </view>
        </view>

        <view class="celebration-actions">
          <view class="action-btn primary" @click="playAgain">
            <text class="action-btn-text">再来一轮</text>
          </view>
          <view class="action-btn secondary" @click="goBack">
            <text class="action-btn-text secondary-text">返回智维度</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var STORAGE_KEY = 'selfQuizSession'

var DAN_TYPES = [
  { key: 'perception', label: '感知能力', icon: '\u{1F441}', desc: '感官信息处理', recommended: false },
  { key: 'focus', label: '专注力', icon: '\u{1F3AF}', desc: '持续集中注意力', recommended: false },
  { key: 'memory', label: '记忆力', icon: '\u{1F9E0}', desc: '信息编码和回忆', recommended: false },
  { key: 'logic', label: '逻辑思维', icon: '\u{1F9E9}', desc: '推理和问题解决', recommended: false },
  { key: 'spatial', label: '空间思维', icon: '\u{1F9CA}', desc: '空间想象和判断', recommended: false },
  { key: 'processing', label: '加工速度', icon: '\u26A1', desc: '信息处理速度', recommended: false }
]

export default {
  data: function() {
    return {
      steps: ['设定目标', '选择题型', '出题答题', '达标通过'],
      currentStep: 1,
      targetN: 5,
      questionTypes: DAN_TYPES,
      selectedType: null,
      currentQuestion: '',
      currentAnswer: '',
      correctCount: 0,
      totalAttempts: 0,
      showFeedback: false,
      lastCorrect: false,
      sessionStats: {
        totalTime: '0秒',
        totalQuestions: 0,
        accuracy: 0
      },
      sessionStartTime: null
    }
  },
  onLoad: function() {
    this.restoreSession()
  },
  onUnload: function() {
    this.saveSession()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    adjustTarget: function(delta) {
      var newVal = this.targetN + delta
      if (newVal >= 2 && newVal <= 15) {
        this.targetN = newVal
      }
    },
    startQuiz: function() {
      this.currentStep = 2
      this.sessionStartTime = Date.now()
      this.saveSession()
    },
    selectType: function(type) {
      this.selectedType = type
      this.currentStep = 3
      this.currentQuestion = ''
      this.currentAnswer = ''
      this.showFeedback = false
      this.saveSession()
    },
    submitAnswer: function() {
      this.totalAttempts++
      var isCorrect = true

      if (isCorrect) {
        this.correctCount++
        this.lastCorrect = true
      } else {
        this.correctCount = 0
        this.lastCorrect = false
      }

      this.showFeedback = true
      this.saveSession()

      if (this.correctCount >= this.targetN) {
        // Step transition handled in continueAfterFeedback
      }
    },
    continueAfterFeedback: function() {
      if (this.correctCount >= this.targetN) {
        var elapsed = Math.floor((Date.now() - this.sessionStartTime) / 1000)
        var minutes = Math.floor(elapsed / 60)
        var seconds = elapsed % 60
        this.sessionStats.totalTime = (minutes > 0 ? minutes + '分' : '') + seconds + '秒'
        this.sessionStats.totalQuestions = this.totalAttempts
        this.sessionStats.accuracy = Math.round((this.correctCount / this.totalAttempts) * 100)
        this.currentStep = 4
        this.clearSession()
      } else {
        this.currentQuestion = ''
        this.currentAnswer = ''
        this.showFeedback = false
      }
    },
    playAgain: function() {
      this.currentStep = 1
      this.correctCount = 0
      this.totalAttempts = 0
      this.showFeedback = false
      this.currentQuestion = ''
      this.currentAnswer = ''
      this.selectedType = null
      this.sessionStartTime = null
      this.clearSession()
    },
    saveSession: function() {
      var session = {
        step: this.currentStep,
        targetN: this.targetN,
        selectedType: this.selectedType,
        correctCount: this.correctCount,
        totalAttempts: this.totalAttempts,
        currentQuestion: this.currentQuestion,
        currentAnswer: this.currentAnswer,
        sessionStartTime: this.sessionStartTime
      }
      try {
        uni.setStorageSync(STORAGE_KEY, session)
      } catch (e) {}
    },
    restoreSession: function() {
      try {
        var session = uni.getStorageSync(STORAGE_KEY)
        if (session) {
          this.currentStep = session.step || 1
          this.targetN = session.targetN || 5
          this.selectedType = session.selectedType || null
          this.correctCount = session.correctCount || 0
          this.totalAttempts = session.totalAttempts || 0
          this.currentQuestion = session.currentQuestion || ''
          this.currentAnswer = session.currentAnswer || ''
          this.sessionStartTime = session.sessionStartTime || null
        }
      } catch (e) {}
    },
    clearSession: function() {
      try {
        uni.removeStorageSync(STORAGE_KEY)
      } catch (e) {}
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8E1 0%, #f5f7fa 100%);
  padding-bottom: 100rpx;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 80rpx 30rpx 20rpx;
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back-icon {
  font-size: 36rpx;
  color: #fff;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
}

.nav-placeholder {
  width: 60rpx;
}

/* ===== 步骤进度 ===== */
.step-progress {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 30rpx 40rpx;
  background: #fff;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-item + .step-item::before {
  content: '';
  position: absolute;
  top: 18rpx;
  left: -50%;
  width: 100%;
  height: 4rpx;
  background: #e0e0e0;
  z-index: 0;
}

.step-done + .step-item::before,
.step-item.step-active + .step-item::before {
  background: #e0e0e0;
}

.step-item.step-done + .step-item::before {
  background: #FFD700;
}

.step-circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.step-active .step-circle {
  background: #FFD700;
}

.step-done .step-circle {
  background: #52c41a;
}

.step-num {
  font-size: 20rpx;
  color: #fff;
  font-weight: bold;
}

.step-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

.step-active .step-label {
  color: #B8860B;
  font-weight: bold;
}

.step-done .step-label {
  color: #52c41a;
}

/* ===== 步骤内容 ===== */
.step-content {
  padding: 30rpx;
}

.content-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.content-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
  text-align: center;
  margin-bottom: 10rpx;
}

.content-desc {
  font-size: 26rpx;
  color: #999;
  display: block;
  text-align: center;
  margin-bottom: 40rpx;
}

/* ===== Step1: 目标选择 ===== */
.target-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.target-label {
  margin-right: 30rpx;
}

.target-label-text {
  font-size: 28rpx;
  color: #666;
}

.target-control {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.target-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #FFF8E1;
  border: 2rpx solid #FFD700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #B8860B;
  font-weight: bold;
}

.target-btn:active {
  opacity: 0.7;
}

.target-value-wrap {
  margin: 0 30rpx;
  text-align: center;
}

.target-value {
  font-size: 72rpx;
  font-weight: bold;
  color: #B8860B;
  display: block;
}

.target-unit {
  font-size: 28rpx;
  color: #999;
}

.target-range {
  text-align: center;
  margin-bottom: 40rpx;
}

.range-text {
  font-size: 24rpx;
  color: #ccc;
}

.start-btn-wrap {
  text-align: center;
}

.start-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: 20rpx 80rpx;
  border-radius: 44rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.4);
}

.start-btn:active {
  opacity: 0.8;
}

.start-btn-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}

/* ===== Step2: 题型选择 ===== */
.type-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.type-card {
  width: calc(50% - 10rpx);
  padding: 24rpx;
  margin-bottom: 20rpx;
  background: #f9f9f9;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  position: relative;
  text-align: center;
}

.type-card:active {
  border-color: #FFD700;
}

.type-recommended {
  border-color: #FFD700;
  background: #FFF8E1;
}

.type-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 8rpx;
}

.type-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.type-desc {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

.type-recommend-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #FF6B35;
  border-radius: 12rpx;
  padding: 2rpx 12rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #fff;
  font-weight: bold;
}

/* ===== Step3: 出题 ===== */
.step3-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.selected-type-label {
  font-size: 28rpx;
  color: #B8860B;
  font-weight: bold;
}

.step3-progress {
  font-size: 26rpx;
  color: #666;
}

.question-section, .answer-section {
  margin-bottom: 30rpx;
}

.question-label, .answer-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 12rpx;
}

.question-input {
  width: 100%;
  min-height: 160rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #333;
  box-sizing: border-box;
}

.answer-input {
  width: 100%;
  height: 72rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  color: #333;
  box-sizing: border-box;
}

.char-count {
  font-size: 22rpx;
  color: #ccc;
  text-align: right;
  display: block;
  margin-top: 6rpx;
}

.submit-btn-wrap {
  text-align: center;
  margin-top: 20rpx;
}

.submit-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: 20rpx 80rpx;
  border-radius: 44rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.4);
}

.submit-btn.disabled {
  opacity: 0.5;
}

.submit-btn-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}

/* ===== 反馈 ===== */
.feedback-wrap {
  margin-top: 30rpx;
}

.feedback-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.feedback-correct {
  background: #f0fff4;
  border: 2rpx solid #52c41a;
}

.feedback-wrong {
  background: #fff5f5;
  border: 2rpx solid #ff4d4f;
}

.feedback-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.feedback-info {
  flex: 1;
}

.feedback-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.feedback-subtitle {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}

.next-btn-wrap {
  text-align: center;
}

.next-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: 16rpx 60rpx;
  border-radius: 40rpx;
}

.next-btn:active {
  opacity: 0.8;
}

.next-btn-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

/* ===== Step4: 庆祝 ===== */
.celebration-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.celebration-icon {
  font-size: 120rpx;
  display: block;
  margin-bottom: 20rpx;
}

.celebration-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #B8860B;
  display: block;
  margin-bottom: 8rpx;
}

.celebration-subtitle {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 40rpx;
}

.stats-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 40rpx;
}

.stat-item {
  text-align: center;
  margin: 0 30rpx;
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #B8860B;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
  display: block;
}

.celebration-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-btn {
  width: 60%;
  padding: 20rpx 0;
  border-radius: 44rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.action-btn.primary {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.4);
}

.action-btn.secondary {
  background: #fff;
  border: 2rpx solid #ddd;
}

.action-btn-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}

.secondary-text {
  color: #666;
}
</style>