xiaoe_mp_npm 1.0.21 → 1.0.22-test02

package/src/Task/TaskQuizPopup/components/quizContent/index.js

@@ -0,0 +1,132 @@
+const computedBehavior = require('miniprogram-computed').behavior
+Component({
+  behaviors: [computedBehavior],
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 展示的题目内容对象
+    questionContent: {
+      type: Object,
+      value: {},
+      observer(val){
+        // 获取正确答案和用户作答的选项
+        if (val?.id) {
+          // 获取富文本的内容操作
+          // this.getRichTextContent(val)
+          const correctAnswer = this.getAnswerMap(val, val.correct_answer)
+          const userAnswer = this.getAnswerMap(val, val.user_answer)
+          this.setData({
+            correctAnswer,
+            userAnswer
+          })
+        }
+      }
+    },
+    // 是否是结果解析
+    showAnalysis: {
+      type: Boolean,
+      value: false,
+    },
+    // 题目序号
+    quizIndex: {
+      type: Number,
+      value: 1,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // 答案选项映射
+    optionIndexMap: [
+      'A',
+      'B',
+      'C',
+      'D',
+      'E',
+      'F',
+      'G',
+      'H',
+      'I',
+      'J',
+      'K',
+      'L',
+      'M',
+      'N',
+      'O',
+      'P',
+      'Q',
+      'R',
+      'S',
+      'T',
+      'U',
+      'V',
+      'W',
+      'X',
+      'Y',
+      'Z',
+    ],
+    correctAnswer: '', // 正确答案
+    userAnswer: '', // 用户作答选项
+  },
+  computed: {
+    // 单选题/多选题/判断题才会显示答案
+    isShowOptionList({ questionContent }) {
+      return [0, 1, 3].includes(questionContent?.qs_type)
+    },
+    // 用户是否回答正确
+    isSuccess({ questionContent }) {
+      let correctAnswer = questionContent?.correct_answer
+      let userAnswer = questionContent?.user_answer
+      return (
+        correctAnswer &&
+        userAnswer &&
+        userAnswer.length === correctAnswer.length &&
+        userAnswer.every((val) => correctAnswer.includes(val))
+      )
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 选择答案操作
+    clickOption(e) {
+      // 查看解析情况下，不能选择
+      if (this.data.showAnalysis) return
+      this.triggerEvent('clickOption', e.currentTarget.dataset.index)
+    },  
+    /**
+     * 获取答案对应的结果
+     * @param questionContent 题目内容
+     * @param answerList 需要操作的答案列表
+     * @returns 
+     */
+    getAnswerMap(questionContent, answerList) {
+      if (!this.data.showAnalysis) return ''
+      let letters = []
+      let temp = JSON.parse(JSON.stringify(answerList))
+      if (typeof temp === 'number') {
+        temp = [temp]
+      }
+      questionContent.options.forEach((item, index) => {
+        if (temp.indexOf(String(item.op_id)) >= 0) {
+          // 如果是判断题写入的是正确，错误
+          if (questionContent.qs_type === 3) {
+            letters.push(
+              this.data.optionIndexMap[index] === 'A'
+                ? '正确'
+                : '错误'
+            )
+          } else {
+            letters.push(this.data.optionIndexMap[index])
+          }
+        }
+      })
+      return letters.join(' ')
+    },
+  }
+})

package/src/Task/TaskQuizPopup/components/quizContent/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "quizRichText": "../quizRichText/index"
+  }
+}

package/src/Task/TaskQuizPopup/components/quizContent/index.scss

@@ -0,0 +1,192 @@
+$deviceWidth: 750;
+
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin card-margin-bottom {
+  margin-bottom: vmin(32);
+}
+@mixin question-cover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: vmin(32) vmin(24);
+  background-color: #ffffff;
+  border-radius: vmin(16);
+  .question-type {
+    display: flex;
+    padding: vmin(4) vmin(8);
+    justify-content: center;
+    align-items: center;
+    border-radius: vmin(4);
+    background: #f5f5f5;
+    backdrop-filter: blur(0.1rem);
+    font-size: vmin(20);
+    font-style: normal;
+    font-weight: 500;
+    color: #b2b2b2;
+    margin-bottom: vmin(16);
+  }
+  .question-content-cover {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    margin-bottom: vmin(48);
+    color: #333333;
+    font-family: "PingFang SC";
+    font-size: vmin(32);
+    font-style: normal;
+    font-weight: 500;
+    line-height: vmin(48);
+    .question-content {
+    }
+  }
+  .question-option-list {
+    width: 100%;
+    .question-option {
+      display: flex;
+      align-items: flex-start;
+      min-height: vmin(48);
+      border-radius: vmin(16);
+      font-family: "PingFang SC";
+      font-size: vmin(32);
+      font-style: normal;
+      font-weight: 400;
+      margin-bottom: vmin(48);
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .img-cover {
+        height: vmin(48);
+        width: vmin(40);
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        margin-right: vmin(16);
+        .check-icon {
+          width: vmin(40);
+          height: vmin(40);
+        }
+      }
+      .judge-item {
+        font-size: vmin(28);
+        font-weight: 400;
+        line-height: vmin(44);
+        width: 100%;
+      }
+
+      .index {
+        line-height: vmin(48);
+      }
+      .title {
+        flex: 1;
+        overflow: hidden;
+        padding: 0;
+        word-wrap: break-word;
+        line-height: vmin(48);
+        box-sizing: border-box;
+        max-width: 100%;
+      }
+    }
+  }
+
+  .question-analysis {
+    width: 100%;
+    margin-top: vmin(48);
+    font-size: vmin(28);
+    padding: vmin(32) vmin(24);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: vmin(8);
+    background: #f5f5f5;
+    box-sizing: border-box;
+    .question-analysis-top-part {
+      .question-result {
+        color: #ff4747;
+        font-size: vmin(28);
+        font-style: normal;
+        font-weight: 500;
+        margin-bottom: vmin(24);
+      }
+      .right-color {
+        color: #07c160;
+      }
+      .question-answer-box {
+        display: flex;
+        .question-answer {
+          margin-right: vmin(32);
+          font-weight: 400;
+          color: #666666;
+        }
+      }
+    }
+    .question-tip {
+      margin-top: vmin(24);
+      margin-bottom: vmin(8);
+      color: #666666;
+      line-height: vmin(40);
+    }
+    .question-analysis-content {
+      color: #333333;
+      font-family: "PingFang SC";
+      font-size: vmin(28);
+      font-style: normal;
+      font-weight: 400;
+      line-height: vmin(40);
+    }
+  }
+}
+
+image {
+  vertical-align: middle;
+}
+
+.card-margin-bottom {
+  @include card-margin-bottom;
+}
+
+.question-cover {
+  @include question-cover;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .card-margin-bottom {
+    @include card-margin-bottom;
+  }
+
+  .question-cover {
+    @include question-cover;
+  }
+  
+}
+
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .card-margin-bottom {
+    @include card-margin-bottom;
+  }
+
+  .question-cover {
+    @include question-cover;
+  }  
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .card-margin-bottom {
+    @include card-margin-bottom;
+  }
+
+  .question-cover {
+    @include question-cover;
+  }
+}

package/src/Task/TaskQuizPopup/components/quizContent/index.wxml

@@ -0,0 +1,65 @@
+<wxs src="./index.wxs" module="quizTools" />
+<view
+  wx:if="{{ questionContent }}"
+  class="question-cover {{ showAnalysis && 'card-margin-bottom' }}"
+>
+  <!-- 题目类型 -->
+  <view class="question-type">{{ quizTools.typeText(questionContent.qs_type) }}</view>
+  <!-- 题目 -->
+  <view class="question-content-cover">
+    <view class="question-order">{{ quizIndex }}.</view>
+    <quizRichText wx:if="{{ questionContent.qs_content }}" richTextContent="{{ questionContent.qs_content }}" />
+  </view>
+  <!-- 选项 -->
+  <view class="question-option-list">
+    <view
+      class="question-option"
+      wx:for="{{ questionContent.options }}"
+    >
+      <!-- 单选题/多选题/判断题 -->
+      <block wx:if="{{ isShowOptionList }}">
+        <view class="img-cover" data-index="{{ index }}" catchtap="clickOption">
+          <image
+            src="{{ quizTools.getChoiceIcon(item, questionContent.qs_type, questionContent.correct_answer, questionContent.user_answer, showAnalysis) }}"
+            class="check-icon"
+          />
+        </view>
+        <!-- 判断题答案选项无需使用富文本 -->
+        <block wx:if="{{ questionContent.qs_type === 3 }}">
+          <view class="judge-item" data-index="{{ index }}" catchtap="clickOption">
+            {{ item.op_content }}
+          </view>
+        </block>
+        <!-- 单选题/多选题答案选项使用富文本 -->
+        <block wx:else>
+          <view class="index">{{ optionIndexMap[index] }}.</view>
+          <view class="title" data-index="{{ index }}" catchtap="clickOption">
+              <quizRichText wx:if="{{ item.op_content }}" richTextContent="{{ item.op_content }}" />
+          </view>
+        </block>
+      </block>
+    </view>
+  </view>
+  <!-- 解析 -->
+  <view class="question-analysis" wx:if="{{ showAnalysis }}">
+    <view class="question-analysis-top-part">
+      <view class="question-result {{ isSuccess && 'right-color' }}">
+        {{ isSuccess ? '回答正确' : '回答错误' }}
+      </view>
+      <view class="question-answer-box">
+        <view class="question-answer">
+          正确答案：{{ correctAnswer }}
+        </view>
+        <view class="question-answer">
+          我的答案：{{ userAnswer }}
+        </view>
+      </view>
+    </view>
+    <view class="question-tip" wx:if="{{ questionContent.qs_analysis }}">
+      解析
+    </view>
+    <view class="question-analysis-content">
+      <quizRichText wx:if="{{ questionContent.qs_analysis }}" richTextContent="{{ questionContent.qs_analysis }}" />
+    </view>
+  </view>
+</view>

package/src/Task/TaskQuizPopup/components/quizContent/index.wxs

@@ -0,0 +1,79 @@
+
+// 题目类型
+var typeText = function(type) {
+  var text = '';
+  switch (type) {
+    // 单选
+    case 0:
+      text = '单选题';
+      break;
+    // 多选
+    case 1:
+      text = '多选题';
+      break;
+    // 判断
+    case 3:
+      text = '判断题';
+      break;
+    default:
+      break;
+  }
+  return text;
+}
+
+
+/**
+ * 获取展示的勾选icon
+ * @param item 当前选项的item
+ * @param type 题目类型，单选/多选/判断
+ * @param correct_answer 正确的答案
+ * @param user_answer 用户选择的答案
+ * @param showAnalysis 是否是展示题目解析情况
+ * @returns 
+ */
+var getChoiceIcon = function (item, type, correct_answer, user_answer, showAnalysis) {
+  var judgeAnswer = function(item) {
+    if (!showAnalysis) return '';
+    var correctAnswer = correct_answer;
+    var userAnswer = user_answer;
+    var type = '';
+    // 选项是否在用户选择内
+    for (var i = 0; i < userAnswer.length; i++) {
+      if (userAnswer[i] === item.op_id) {
+        // 判断答案正确与否
+        for (var index = 0; index < correctAnswer.length; index++) {
+          if (correctAnswer[index] === item.op_id) {
+            type = 'right';
+            break
+          } else {
+            type = 'wrong';
+          }
+        }
+        break
+      }
+    }
+    return type;
+  }
+  var iconSrc = '';
+  // 区别多选和单选、判断
+  if (item.selected) {
+    // 选中状态
+    iconSrc = type === 1 ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr12yki0h1u.svg' : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr114sn0g54.svg';
+  } else if (judgeAnswer(item) === 'right') {
+    // 正确状态
+    iconSrc = type === 1 ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr2zyki0skx.svg' : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr2zykn0iix.svg';
+  } else if (judgeAnswer(item) === 'wrong') {
+    // 错误状态
+    iconSrc = type === 1 ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr2zykm0zhs.svg' : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr2zyko0tts.svg';
+  } else {
+    // 空状态
+    iconSrc =
+      type === 1 ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr0ve6b0ezt.svg' : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr0mnyy0uwf.svg';
+  }
+  return iconSrc;
+};
+
+module.exports = {
+  typeText:typeText,
+  getChoiceIcon:getChoiceIcon
+}

package/src/Task/TaskQuizPopup/components/quizContent/index.wxss

@@ -0,0 +1 @@
+image{vertical-align:middle}.card-margin-bottom{margin-bottom:4.26667vmin}.question-cover{display:flex;flex-direction:column;align-items:flex-start;padding:4.26667vmin 3.2vmin;background-color:#ffffff;border-radius:2.13333vmin}.question-cover .question-type{display:flex;padding:.53333vmin 1.06667vmin;justify-content:center;align-items:center;border-radius:.53333vmin;background:#f5f5f5;backdrop-filter:blur(0.1rem);font-size:2.66667vmin;font-style:normal;font-weight:500;color:#b2b2b2;margin-bottom:2.13333vmin}.question-cover .question-content-cover{display:flex;align-items:flex-start;width:100%;margin-bottom:6.4vmin;color:#333333;font-family:"PingFang SC";font-size:4.26667vmin;font-style:normal;font-weight:500;line-height:6.4vmin}.question-cover .question-option-list{width:100%}.question-cover .question-option-list .question-option{display:flex;align-items:flex-start;min-height:6.4vmin;border-radius:2.13333vmin;font-family:"PingFang SC";font-size:4.26667vmin;font-style:normal;font-weight:400;margin-bottom:6.4vmin}.question-cover .question-option-list .question-option:last-child{margin-bottom:0}.question-cover .question-option-list .question-option .img-cover{height:6.4vmin;width:5.33333vmin;display:flex;flex-shrink:0;align-items:center;margin-right:2.13333vmin}.question-cover .question-option-list .question-option .img-cover .check-icon{width:5.33333vmin;height:5.33333vmin}.question-cover .question-option-list .question-option .judge-item{font-size:3.73333vmin;font-weight:400;line-height:5.86667vmin;width:100%}.question-cover .question-option-list .question-option .index{line-height:6.4vmin}.question-cover .question-option-list .question-option .title{flex:1;overflow:hidden;padding:0;word-wrap:break-word;line-height:6.4vmin;box-sizing:border-box;max-width:100%}.question-cover .question-analysis{width:100%;margin-top:6.4vmin;font-size:3.73333vmin;padding:4.26667vmin 3.2vmin;display:flex;flex-direction:column;align-items:flex-start;border-radius:1.06667vmin;background:#f5f5f5;box-sizing:border-box}.question-cover .question-analysis .question-analysis-top-part .question-result{color:#ff4747;font-size:3.73333vmin;font-style:normal;font-weight:500;margin-bottom:3.2vmin}.question-cover .question-analysis .question-analysis-top-part .right-color{color:#07c160}.question-cover .question-analysis .question-analysis-top-part .question-answer-box{display:flex}.question-cover .question-analysis .question-analysis-top-part .question-answer-box .question-answer{margin-right:4.26667vmin;font-weight:400;color:#666666}.question-cover .question-analysis .question-tip{margin-top:3.2vmin;margin-bottom:1.06667vmin;color:#666666;line-height:5.33333vmin}.question-cover .question-analysis .question-analysis-content{color:#333333;font-family:"PingFang SC";font-size:3.73333vmin;font-style:normal;font-weight:400;line-height:5.33333vmin}@media screen and (min-width: 768px) and (orientation: portrait){.card-margin-bottom{margin-bottom:2.08333vmin}.question-cover{display:flex;flex-direction:column;align-items:flex-start;padding:2.08333vmin 1.5625vmin;background-color:#ffffff;border-radius:1.04167vmin}.question-cover .question-type{display:flex;padding:.26042vmin .52083vmin;justify-content:center;align-items:center;border-radius:.26042vmin;background:#f5f5f5;backdrop-filter:blur(0.1rem);font-size:1.30208vmin;font-style:normal;font-weight:500;color:#b2b2b2;margin-bottom:1.04167vmin}.question-cover .question-content-cover{display:flex;align-items:flex-start;width:100%;margin-bottom:3.125vmin;color:#333333;font-family:"PingFang SC";font-size:2.08333vmin;font-style:normal;font-weight:500;line-height:3.125vmin}.question-cover .question-option-list{width:100%}.question-cover .question-option-list .question-option{display:flex;align-items:flex-start;min-height:3.125vmin;border-radius:1.04167vmin;font-family:"PingFang SC";font-size:2.08333vmin;font-style:normal;font-weight:400;margin-bottom:3.125vmin}.question-cover .question-option-list .question-option:last-child{margin-bottom:0}.question-cover .question-option-list .question-option .img-cover{height:3.125vmin;width:2.60417vmin;display:flex;flex-shrink:0;align-items:center;margin-right:1.04167vmin}.question-cover .question-option-list .question-option .img-cover .check-icon{width:2.60417vmin;height:2.60417vmin}.question-cover .question-option-list .question-option .judge-item{font-size:1.82292vmin;font-weight:400;line-height:2.86458vmin;width:100%}.question-cover .question-option-list .question-option .index{line-height:3.125vmin}.question-cover .question-option-list .question-option .title{flex:1;overflow:hidden;padding:0;word-wrap:break-word;line-height:3.125vmin;box-sizing:border-box;max-width:100%}.question-cover .question-analysis{width:100%;margin-top:3.125vmin;font-size:1.82292vmin;padding:2.08333vmin 1.5625vmin;display:flex;flex-direction:column;align-items:flex-start;border-radius:.52083vmin;background:#f5f5f5;box-sizing:border-box}.question-cover .question-analysis .question-analysis-top-part .question-result{color:#ff4747;font-size:1.82292vmin;font-style:normal;font-weight:500;margin-bottom:1.5625vmin}.question-cover .question-analysis .question-analysis-top-part .right-color{color:#07c160}.question-cover .question-analysis .question-analysis-top-part .question-answer-box{display:flex}.question-cover .question-analysis .question-analysis-top-part .question-answer-box .question-answer{margin-right:2.08333vmin;font-weight:400;color:#666666}.question-cover .question-analysis .question-tip{margin-top:1.5625vmin;margin-bottom:.52083vmin;color:#666666;line-height:2.60417vmin}.question-cover .question-analysis .question-analysis-content{color:#333333;font-family:"PingFang SC";font-size:1.82292vmin;font-style:normal;font-weight:400;line-height:2.60417vmin}}@media screen and (min-height: 630px) and (orientation: landscape){.card-margin-bottom{margin-bottom:2.53968vmin}.question-cover{display:flex;flex-direction:column;align-items:flex-start;padding:2.53968vmin 1.90476vmin;background-color:#ffffff;border-radius:1.26984vmin}.question-cover .question-type{display:flex;padding:.31746vmin .63492vmin;justify-content:center;align-items:center;border-radius:.31746vmin;background:#f5f5f5;backdrop-filter:blur(0.1rem);font-size:1.5873vmin;font-style:normal;font-weight:500;color:#b2b2b2;margin-bottom:1.26984vmin}.question-cover .question-content-cover{display:flex;align-items:flex-start;width:100%;margin-bottom:3.80952vmin;color:#333333;font-family:"PingFang SC";font-size:2.53968vmin;font-style:normal;font-weight:500;line-height:3.80952vmin}.question-cover .question-option-list{width:100%}.question-cover .question-option-list .question-option{display:flex;align-items:flex-start;min-height:3.80952vmin;border-radius:1.26984vmin;font-family:"PingFang SC";font-size:2.53968vmin;font-style:normal;font-weight:400;margin-bottom:3.80952vmin}.question-cover .question-option-list .question-option:last-child{margin-bottom:0}.question-cover .question-option-list .question-option .img-cover{height:3.80952vmin;width:3.1746vmin;display:flex;flex-shrink:0;align-items:center;margin-right:1.26984vmin}.question-cover .question-option-list .question-option .img-cover .check-icon{width:3.1746vmin;height:3.1746vmin}.question-cover .question-option-list .question-option .judge-item{font-size:2.22222vmin;font-weight:400;line-height:3.49206vmin;width:100%}.question-cover .question-option-list .question-option .index{line-height:3.80952vmin}.question-cover .question-option-list .question-option .title{flex:1;overflow:hidden;padding:0;word-wrap:break-word;line-height:3.80952vmin;box-sizing:border-box;max-width:100%}.question-cover .question-analysis{width:100%;margin-top:3.80952vmin;font-size:2.22222vmin;padding:2.53968vmin 1.90476vmin;display:flex;flex-direction:column;align-items:flex-start;border-radius:.63492vmin;background:#f5f5f5;box-sizing:border-box}.question-cover .question-analysis .question-analysis-top-part .question-result{color:#ff4747;font-size:2.22222vmin;font-style:normal;font-weight:500;margin-bottom:1.90476vmin}.question-cover .question-analysis .question-analysis-top-part .right-color{color:#07c160}.question-cover .question-analysis .question-analysis-top-part .question-answer-box{display:flex}.question-cover .question-analysis .question-analysis-top-part .question-answer-box .question-answer{margin-right:2.53968vmin;font-weight:400;color:#666666}.question-cover .question-analysis .question-tip{margin-top:1.90476vmin;margin-bottom:.63492vmin;color:#666666;line-height:3.1746vmin}.question-cover .question-analysis .question-analysis-content{color:#333333;font-family:"PingFang SC";font-size:2.22222vmin;font-style:normal;font-weight:400;line-height:3.1746vmin}}@media screen and (min-height: 768px) and (orientation: landscape){.card-margin-bottom{margin-bottom:2.08333vmin}.question-cover{display:flex;flex-direction:column;align-items:flex-start;padding:2.08333vmin 1.5625vmin;background-color:#ffffff;border-radius:1.04167vmin}.question-cover .question-type{display:flex;padding:.26042vmin .52083vmin;justify-content:center;align-items:center;border-radius:.26042vmin;background:#f5f5f5;backdrop-filter:blur(0.1rem);font-size:1.30208vmin;font-style:normal;font-weight:500;color:#b2b2b2;margin-bottom:1.04167vmin}.question-cover .question-content-cover{display:flex;align-items:flex-start;width:100%;margin-bottom:3.125vmin;color:#333333;font-family:"PingFang SC";font-size:2.08333vmin;font-style:normal;font-weight:500;line-height:3.125vmin}.question-cover .question-option-list{width:100%}.question-cover .question-option-list .question-option{display:flex;align-items:flex-start;min-height:3.125vmin;border-radius:1.04167vmin;font-family:"PingFang SC";font-size:2.08333vmin;font-style:normal;font-weight:400;margin-bottom:3.125vmin}.question-cover .question-option-list .question-option:last-child{margin-bottom:0}.question-cover .question-option-list .question-option .img-cover{height:3.125vmin;width:2.60417vmin;display:flex;flex-shrink:0;align-items:center;margin-right:1.04167vmin}.question-cover .question-option-list .question-option .img-cover .check-icon{width:2.60417vmin;height:2.60417vmin}.question-cover .question-option-list .question-option .judge-item{font-size:1.82292vmin;font-weight:400;line-height:2.86458vmin;width:100%}.question-cover .question-option-list .question-option .index{line-height:3.125vmin}.question-cover .question-option-list .question-option .title{flex:1;overflow:hidden;padding:0;word-wrap:break-word;line-height:3.125vmin;box-sizing:border-box;max-width:100%}.question-cover .question-analysis{width:100%;margin-top:3.125vmin;font-size:1.82292vmin;padding:2.08333vmin 1.5625vmin;display:flex;flex-direction:column;align-items:flex-start;border-radius:.52083vmin;background:#f5f5f5;box-sizing:border-box}.question-cover .question-analysis .question-analysis-top-part .question-result{color:#ff4747;font-size:1.82292vmin;font-style:normal;font-weight:500;margin-bottom:1.5625vmin}.question-cover .question-analysis .question-analysis-top-part .right-color{color:#07c160}.question-cover .question-analysis .question-analysis-top-part .question-answer-box{display:flex}.question-cover .question-analysis .question-analysis-top-part .question-answer-box .question-answer{margin-right:2.08333vmin;font-weight:400;color:#666666}.question-cover .question-analysis .question-tip{margin-top:1.5625vmin;margin-bottom:.52083vmin;color:#666666;line-height:2.60417vmin}.question-cover .question-analysis .question-analysis-content{color:#333333;font-family:"PingFang SC";font-size:1.82292vmin;font-style:normal;font-weight:400;line-height:2.60417vmin}}

package/src/Task/TaskQuizPopup/components/quizRichText/index.js

@@ -0,0 +1,47 @@
+import WxParse from '../wxParse/wxParse'
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 展示的内容对象
+    richTextContent: {
+      type: String,
+      value: '',
+      observer(val){
+        // 获取富文本的内容操作
+        if(val) this.getRichTextContent(val)
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 获取富文本的内容
+    getRichTextContent(richContent) {
+      WxParse.wxParse('richContent', 'html', richContent, this)
+      setTimeout(() => {
+        console.error('jer===========richContent', this.data.richContent);
+      }, 0);
+    },
+    imageInit(e) {
+      WxParse.imageLoad(e, this).then(() => {
+        // 不知道为啥不响应渲染，所以这里重新setdata一次
+        this.setData({
+          richContent: this.data.richContent
+        })
+        console.error('jer===========????img', this.data.richTextContent, this.data.richContent);
+      })
+    },
+  }
+})

package/src/Task/TaskQuizPopup/components/quizRichText/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "audio-player": "../../../../../../../components/audio_player/index"
+  }
+}

package/src/Task/TaskQuizPopup/components/quizRichText/index.scss

@@ -0,0 +1,7 @@
+$deviceWidth: 750;
+
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@import '..\\wxParse/wxParse.wxss';

package/src/Task/TaskQuizPopup/components/quizRichText/index.wxml

@@ -0,0 +1,2 @@
+<import src="../wxParse/wxParse.wxml" />
+<template is="wxParse" data="{{ wxParseData:richContent.nodes }}" />

package/src/Task/TaskQuizPopup/components/quizRichText/index.wxss

@@ -0,0 +1 @@
+.wxParse{color:#666;line-height:1.8;overflow:hidden}.wxParse view{white-space:pre-line;word-wrap:break-word;box-sizing:border-box}.wxParse view,.wxParse navigator,.wxParse text,.wxParse image,.wxParse video,.wxParse input,.wxParse button,.wxParse checkbox,.wxParse label,.wxParse textarea,.wxParse form,.wxParse radio,.wxParse navigator{max-width:100% !important}view{word-wrap:break-word;white-space:normal}.wxParse .user-select view,.wxParse .user-select text{user-select:text;-webkit-user-select:text}.wxParse-inline{display:inline;margin:0;padding:0}.wxParse-div{margin:0;padding:0}.wxParse-h1{font-size:2em;margin:.67em 0}.wxParse-h2{font-size:1.5em;margin:.75em 0}.wxParse-h3{font-size:1.17em;margin:.83em 0}.wxParse-h4{margin:1.12em 0}.wxParse-h5{font-size:.83em;margin:1.5em 0}.wxParse-h6{font-size:.75em;margin:1.67em 0}.wxParse-h1{font-size:18px;font-weight:400;margin-bottom:.9em}.wxParse-h2{font-size:16px;font-weight:400;margin-bottom:.34em}.wxParse-h3{font-weight:400;font-size:15px;margin-bottom:.34em}.wxParse-h4{font-weight:400;font-size:14px;margin-bottom:.24em}.wxParse-h5{font-weight:400;font-size:13px;margin-bottom:.14em}.wxParse-h6{font-weight:400;font-size:12px;margin-bottom:.04em}.wxParse-section{width:100%;max-width:100% !important;box-sizing:border-box}.wxParse-h1,.wxParse-h2,.wxParse-h3,.wxParse-h4,.wxParse-h5,.wxParse-h6,.wxParse-b,.wxParse-strong{font-weight:bolder}.wxParse-i,.wxParse-cite,.wxParse-em,.wxParse-var,.wxParse-address{font-style:italic}.wxParse-pre,.wxParse-tt,.wxParse-code,.wxParse-kbd,.wxParse-samp{font-family:monospace}.wxParse-pre{white-space:pre}.wxParse-big{font-size:1.17em}.wxParse-small,.wxParse-sub,.wxParse-sup{font-size:.83em}.wxParse-sub{vertical-align:sub}.wxParse-sup{vertical-align:super}.wxParse-s,.wxParse-strike,.wxParse-del{text-decoration:line-through}.wxParse-strong,wxParse-s{display:inline}.wxParse-a{color:blue;word-break:break-all;overflow:auto;text-decoration:underline}.wxParse-video{text-align:center;margin:10px 0}.wxParse-video-video,.wxParse-iframe-video{width:100%;margin-bottom:10rpx}video.xiaoe-iframe-video{height:386rpx;margin-bottom:20rpx;max-width:100%;box-sizing:border-box;display:block}.xiaoe-iframe-audio{margin-bottom:20rpx;max-width:100%;display:block}.xiaoe-iframe-audio .audio-player{width:auto !important;max-width:100%}.wxParse-img{overflow:hidden !important}.hidden{visibility:hidden}.box-center{margin:0 auto}.wxParse-blockquote{margin:0;padding:10px 0 10px 5px;font-family:Courier, Calibri,"宋体";background:#f5f5f5;border-left:3px solid #dbdbdb}.wxParse-code,.wxParse-wxxxcode-style{display:inline;background:#f5f5f5}.wxParse-ul{margin:20rpx 10rpx}.wxParse-li,.wxParse-li-inner{display:flex;align-items:baseline;margin:10rpx 0}.wxParse-li .wxParse-li-init{width:90rpx;height:100%;text-align:right;overflow:hidden;line-height:40rpx;height:45rpx}.wxParse-li-text{align-items:center;line-height:20px}.wxParse-hr{display:block;unicode-bidi:isolate;margin-block-start:0.5em;margin-block-end:0.5em;margin-inline-start:auto;margin-inline-end:auto;overflow:hidden;border-style:inset;border-width:1px}.wxParse-li-circle{width:10rpx;height:10rpx;background-color:#333;margin:0rpx 32rpx 4rpx;border-radius:10rpx}.wxParse-li-square{width:10rpx;height:10rpx;background-color:#333;margin:0rpx 32rpx 4rpx}.wxParse-li-ring{width:10rpx;height:10rpx;border:2rpx solid #333;border-radius:50%;background-color:#fff;margin:0rpx 30rpx 3rpx}.wxParse-u{text-decoration:underline}.wxParse-hide{display:none}.WxEmojiView{align-items:center}.wxEmoji{width:16px;height:16px}.wxParse-tr{display:flex;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.wxParse-th,.wxParse-td{flex:1;padding:5px;font-size:28rpx;border-left:1px solid #e0e0e0;word-wrap:break-word}.wxParse-td:last{border-top:1px solid #e0e0e0}.wxParse-th{background:#f0f0f0;border-top:1px solid #e0e0e0}.img{max-width:100%}.wxParse-br{min-height:1em}.wxParse-p{min-height:1em}

package/src/Task/TaskQuizPopup/components/wxParse/base.wxml

@@ -0,0 +1,50 @@
+<!--基础元素-->
+<template name="wxParseVideo">
+  <!--增加video标签支持，并循环添加-->
+  <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+    <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
+  </view>
+</template>
+
+<template name="xiaoeAudio">
+  <!-- 如果要应用此组件，需要在相应的页面添加组件声明，具体参考 page/home/content/content_img_text/content_img_text.json -->
+  <audio-player
+    class="{{item.classStr}}"
+    isMaxWidth="{{true}}"
+    id="{{item.id}}"
+    src="{{item.attr.src}}"
+    length="{{item.attr.length}}"
+    title="{{item.attr.title}}"
+  ></audio-player>
+</template>
+
+<template name="xiaoeVideo">
+  <video bindloadedmetadata="videoLoad" class="{{item.classStr}}" src="{{item.attr.src}}" controls></video>
+</template>
+
+<template name="wxParseImg">
+  <image
+    class="{{item.classStr}} wxParse-{{item.tag}} {{!item.show?'hidden':''}} {{item.center?'box-center':''}}"
+    data-width="{{ item.width }}"
+    data-no_img_preview="{{item.no_img_preview}}"
+    data-from="{{item.from}}"
+    data-src="{{item.attr.src}}"
+    data-idx="{{item.imgIndex}}"
+    src="{{item.attr.src}}"
+    mode="widthFix"
+    style="width:{{ item.width }};max-width:100%;{{item.styleStr}};{{item.importWidth}};{{item.center?'display:block;':'display:inline-block;'}}"
+    bindload="imageInit"
+    catchtap="wxParsePreview"
+  />
+</template>
+
+<template name="WxEmojiView" catchtap="showNoSupportUrl">
+  <view class="WxEmojiView wxParse-inline" style="{{item.styleStr}}">
+    <block wx:for="{{item.textArray}}" wx:key="">
+      <block class="{{item.text == '\\n' ? 'wxParse-hide':''}}" wx:if="{{item.node == 'text'}}">{{item.text}}</block>
+      <block wx:elif="{{item.node == 'element'}}">
+        <image class="wxEmoji" src="{{item.baseSrc}}{{item.text}}" />
+      </block>
+    </block>
+  </view>
+</template>