考研题库小程序题目卡片组件开发

<!-- 题目卡片容器 --><!-- 动态绑定类名：如果 isAnswered 为真，添加 'answered' 样式，用于区分已答题和未答题状态 --><viewclass="question-card {{ isAnswered ? 'answered' : '' }}">  <!-- ==================== 题目头部区域 ==================== -->  <viewclass="card-header">    <!-- 显示题目类型和难度，文字颜色由 typeColor 动态控制 -->    <viewclass="question-type"style="color: {{ typeColor }}">      {{ questionType }} • {{ difficulty }}    </view>    <!-- 显示当前题号进度，例如：第 1/10 题 -->    <viewclass="question-number">      第 {{ currentIndex }}/{{ totalCount }} 题    </view>  </view>  <!-- ==================== 题目内容区域 ==================== -->  <viewclass="question-content">    <!-- 显示具体的题目文本内容 -->    <textclass="question-text">{{ question.content }}</text>  </view>  <!-- ==================== 选项列表区域 ==================== -->  <viewclass="options-list">    <!-- 循环渲染选项列表 -->    <!-- wx:for 遍历 question.options 数组 -->    <!-- wx:key 使用 index 作为唯一标识，优化渲染性能 -->    <blockwx:for="{{ question.options }}"wx:key="index">      <!-- 单个选项容器 -->      <!-- 动态类名逻辑：           1. 如果当前选项被选中 (selectedIndex === index)，添加 'selected' 类           2. 如果显示结果且当前选项是正确答案 (showResult && correctIndex === index)，添加 'correct' 类           3. 如果显示结果且当前选项被选错 (showResult && selectedIndex === index && correctIndex !== index)，添加 'wrong' 类      -->      <view        class="option-item {{ selectedIndex === index ? 'selected' : '' }} {{ showResult && correctIndex === index ? 'correct' : '' }} {{ showResult && selectedIndex === index && correctIndex !== index ? 'wrong' : '' }}"        bindtap="onSelectOption"        data-index="{{ index }}"      >        <!-- 选项前缀，如 A, B, C, D -->        <viewclass="option-prefix">{{ optionPrefixs[index] }}</view>        <!-- 选项具体文本内容 -->        <textclass="option-text">{{ item }}</text>        <!-- 正确图标：仅在显示结果且该选项为正确答案时显示 -->        <viewwx:if="{{ showResult && correctIndex === index }}"class="option-icon correct-icon">✓</view>        <!-- 错误图标：仅在显示结果且该选项被用户误选时显示 -->        <viewwx:if="{{ showResult && selectedIndex === index && correctIndex !== index }}"class="option-icon wrong-icon">✗</view>      </view>    </block>  </view>  <!-- ==================== 答案解析区域 ==================== -->  <!-- 仅在 showResult 为 true 时渲染，即用户提交答案后显示 -->  <viewclass="answer-section"wx:if="{{ showResult }}">    <viewclass="answer-title">📖 答案解析</view>    <!-- 显示解析详细内容 -->    <viewclass="answer-content">{{ question.explanation }}</view>    <!-- 显示正确答案文本 -->    <viewclass="answer-correct">正确答案：{{ correctAnswer }}</view>  </view>  <!-- ==================== 底部操作按钮区域 ==================== -->  <!-- 仅在显示结果后出现，用于收藏或进入下一题 -->  <viewclass="action-buttons"wx:if="{{ showResult }}">    <!-- 收藏按钮：如果未收藏 (!isCollected) 则显示 -->    <buttonclass="action-btn collect-btn"bindtap="onCollect"wx:if="{{ !isCollected }}">      ⭐ 收藏    </button>    <!-- 取消收藏按钮：如果已收藏则显示 -->    <buttonclass="action-btn collected-btn"bindtap="onUncollect"wx:else>      ⭐ 已收藏    </button>    <!-- 下一题/完成按钮 -->    <!-- 如果是最后一题 (isLast)，显示“完成”，否则显示“下一题” -->    <buttonclass="action-btn next-btn"bindtap="onNext">      {{ isLast ? '完成' : '下一题' }} →    </button>  </view></view>

// components/question-card/question-card.jsComponent({  /**   * 组件的属性列表   * 用于接收父组件传递的数据   */  properties: {    // 题目完整对象，包含题干、选项、答案等信息    question: {      type: Object,      value: {}    },    // 当前题目的序号（从1开始）    currentIndex: {      type: Number,      value: 1    },    // 题目总数    totalCount: {      type: Number,      value: 20    },    // 是否显示答题结果（正确/错误状态及解析）    showResult: {      type: Boolean,      value: false    },    // 用户当前选中的答案索引（-1表示未选择）    selectedAnswer: {      type: Number,      value: -1    },    // 该题目是否已被收藏    isCollected: {      type: Boolean,      value: false    }  },  /**   * 组件的初始数据   * 用于内部状态管理，不直接由父组件控制   */  data: {    // 选项前缀数组，用于显示 A, B, C, D...    optionPrefixs: ['A', 'B', 'C', 'D', 'E', 'F'],    // 题目类型文本（如：单选题）    questionType: '',    // 难度等级文本（如：简单）    difficulty: '',    // 难度对应的颜色值，用于UI展示    typeColor: '',    // 正确答案的完整文本描述（如：A. 选项内容）    correctAnswer: '',    // 正确答案在选项数组中的索引    correctIndex: -1,    // 内部维护的用户选中索引，与 properties.selectedAnswer 同步    selectedIndex: -1  },  /**   * 生命周期函数   */  lifetimes: {    /**     * 在组件实例进入页面节点树时执行     * 此时可以安全地访问 properties 和 setData     */    attached() {      this.initQuestionData();    }  },  /**   * 数据监听器   * 当指定字段变化时触发   */  observers: {    /**     * 监听 question 和 selectedAnswer 的变化     * 当父组件传入新的选中答案时，同步更新内部 selectedIndex     */    'question, selectedAnswer': function(question, selectedAnswer) {      // 确保题目存在且选中答案有效      if (question && selectedAnswer !== undefined) {        this.setData({          selectedIndex: selectedAnswer        });      }    }  },  /**   * 组件的方法列表   */  methods: {    /**     * 初始化题目相关展示数据     * 根据传入的 question 对象，计算并设置类型、难度、颜色、正确答案等     */    initQuestionData() {      const { question } = this.properties;      if (!question) return;      // 映射题目类型数字到文本      const typeMap = { 1: '单选题', 2: '多选题', 3: '判断题' };      this.setData({        // 设置题目类型，默认为单选题        questionType: typeMap[question.type] || '单选题',        // 设置难度文本，假设 difficulty 为 1, 2, 3        difficulty: ['简单', '中等', '困难'][question.difficulty - 1] || '简单',        // 根据难度获取对应的主题色        typeColor: this.getDifficultyColor(question.difficulty),        // 生成正确答案的展示文本        correctAnswer: this.getCorrectAnswerText(question),        // 记录正确答案的索引        correctIndex: question.answer      });    },    /**     * 根据难度等级获取对应的颜色值     * @param {Number} difficulty - 难度等级 (1:简单, 2:中等, 3:困难)     * @returns {String} 颜色十六进制代码     */    getDifficultyColor(difficulty) {      const colors = {         1: '#10b981', // 绿色 - 简单        2: '#f59e0b', // 橙色 - 中等        3: '#ef4444'  // 红色 - 困难      };      return colors[difficulty] || '#6b7280'; // 默认灰色    },    /**     * 构建正确答案的展示文本     * 格式例如："A. 北京"     * @param {Object} question - 题目对象     * @returns {String} 格式化后的答案文本     */    getCorrectAnswerText(question) {      if (!question.options || !question.answer) return '';      // 获取对应索引的前缀 (A, B, C...)      const prefix = ['A', 'B', 'C', 'D'][question.answer];      // 拼接前缀和选项内容      return `${prefix}. ${question.options[question.answer]}`;    },    /**     * 处理选项点击事件     * @param {Object} e - 点击事件对象     */    onSelectOption(e) {      // 如果已经显示了结果（即已提交答案），则禁止再次选择      if (this.properties.showResult) return;       // 获取被点击选项的索引      const index = e.currentTarget.dataset.index;      // 向父组件触发自定义事件 'select'，传递选中的答案索引      this.triggerEvent('select', { answer: index });    },    /**     * 处理收藏按钮点击     * 向父组件触发 'collect' 事件，传递题目ID     */    onCollect() {      this.triggerEvent('collect', { questionId: this.properties.question.id });    },    /**     * 处理取消收藏按钮点击     * 向父组件触发 'uncollect' 事件，传递题目ID     */    onUncollect() {      this.triggerEvent('uncollect', { questionId: this.properties.question.id });    },    /**     * 处理“下一题”或“完成”按钮点击     * 向父组件触发 'next' 事件     */    onNext() {      this.triggerEvent('next');    }  }});

<!-- 在页面中使用 --><question-card  question="{{currentQuestion}}"  currentIndex="{{currentIndex}}"  totalCount="{{totalQuestions}}"  showResult="{{showResult}}"  selectedAnswer="{{selectedAnswer}}"  isCollected="{{isQuestionCollected}}"  bind:select="onSelectAnswer"  bind:collect="onCollectQuestion"  bind:uncollect="onUncollectQuestion"  bind:next="onNextQuestion"/>