xiaoe_mp_npm 1.0.21 → 1.0.22-store2

package/miniprogram_dist/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/miniprogram_dist/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/miniprogram_dist/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
+}