xiaoe_mp_npm 1.0.21 → 1.0.22-test02

package/miniprogram_dist/Task/TaskPopup/component/TaskItem/index.wxss

@@ -71,8 +71,27 @@
   margin-top: 1.06667vmin;
   font-size: 3.2vmin;
   color: #FF5429;
+  font-family: "PingFang SC";
+  line-height: 4.26667vmin;
+  align-items: center;
+}
+.item-box .left .task-tip .finish-text {
+  display: inline-block;
+  color: #999999;
+}
+.item-box .left .task-tip .show-answer {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 2.66667vmin;
+  font-style: normal;
+  font-weight: 400;
   line-height: 4.26667vmin;
 }
+.item-box .left .task-tip .show-answer .analysis-icon {
+  width: 3.2vmin;
+  height: 3.2vmin;
+  margin-left: -vmin(4);
+}
 .item-box .btn {
   width: 19.2vmin;
   height: 7.46667vmin;
@@ -95,6 +114,11 @@
   background: #F5F5F5;
   color: #B2B2B2;
 }
+.item-box .btn.orange-btn {
+  color: #ffffff;
+  opacity: 0.4;
+  background: #ff5429;
+}
 @media screen and (min-width: 768px) and (orientation: portrait) {
   .item-box {
     display: flex;
@@ -169,8 +193,27 @@
     margin-top: 0.52083vmin;
     font-size: 1.5625vmin;
     color: #FF5429;
+    font-family: "PingFang SC";
+    line-height: 2.08333vmin;
+    align-items: center;
+  }
+  .item-box .left .task-tip .finish-text {
+    display: inline-block;
+    color: #999999;
+  }
+  .item-box .left .task-tip .show-answer {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 1.30208vmin;
+    font-style: normal;
+    font-weight: 400;
     line-height: 2.08333vmin;
   }
+  .item-box .left .task-tip .show-answer .analysis-icon {
+    width: 1.5625vmin;
+    height: 1.5625vmin;
+    margin-left: -vmin(4);
+  }
   .item-box .btn {
     width: 9.375vmin;
     height: 3.64583vmin;
@@ -193,6 +236,11 @@
     background: #F5F5F5;
     color: #B2B2B2;
   }
+  .item-box .btn.orange-btn {
+    color: #ffffff;
+    opacity: 0.4;
+    background: #ff5429;
+  }
 }
 @media screen and (min-height: 630px) and (orientation: landscape) {
   .item-box {
@@ -268,8 +316,27 @@
     margin-top: 0.63492vmin;
     font-size: 1.90476vmin;
     color: #FF5429;
+    font-family: "PingFang SC";
+    line-height: 2.53968vmin;
+    align-items: center;
+  }
+  .item-box .left .task-tip .finish-text {
+    display: inline-block;
+    color: #999999;
+  }
+  .item-box .left .task-tip .show-answer {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 1.5873vmin;
+    font-style: normal;
+    font-weight: 400;
     line-height: 2.53968vmin;
   }
+  .item-box .left .task-tip .show-answer .analysis-icon {
+    width: 1.90476vmin;
+    height: 1.90476vmin;
+    margin-left: -vmin(4);
+  }
   .item-box .btn {
     width: 11.42857vmin;
     height: 4.44444vmin;
@@ -292,6 +359,11 @@
     background: #F5F5F5;
     color: #B2B2B2;
   }
+  .item-box .btn.orange-btn {
+    color: #ffffff;
+    opacity: 0.4;
+    background: #ff5429;
+  }
 }
 @media screen and (min-height: 768px) and (orientation: landscape) {
   .item-box {
@@ -367,8 +439,27 @@
     margin-top: 0.52083vmin;
     font-size: 1.5625vmin;
     color: #FF5429;
+    font-family: "PingFang SC";
+    line-height: 2.08333vmin;
+    align-items: center;
+  }
+  .item-box .left .task-tip .finish-text {
+    display: inline-block;
+    color: #999999;
+  }
+  .item-box .left .task-tip .show-answer {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 1.30208vmin;
+    font-style: normal;
+    font-weight: 400;
     line-height: 2.08333vmin;
   }
+  .item-box .left .task-tip .show-answer .analysis-icon {
+    width: 1.5625vmin;
+    height: 1.5625vmin;
+    margin-left: -vmin(4);
+  }
   .item-box .btn {
     width: 9.375vmin;
     height: 3.64583vmin;
@@ -391,4 +482,9 @@
     background: #F5F5F5;
     color: #B2B2B2;
   }
+  .item-box .btn.orange-btn {
+    color: #ffffff;
+    opacity: 0.4;
+    background: #ff5429;
+  }
 }

package/miniprogram_dist/Task/TaskPopup/component/TaskList/index.js

@@ -47,6 +47,10 @@ const taskTypeConfig = {
     9:{
       title: "签到",
       icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltpfaylp019h.png"
+    },
+    10:{
+      title: "答题",
+      icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyr74osf0jjo.svg"
     }
   }
 }

package/miniprogram_dist/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/miniprogram_dist/Task/TaskQuizPopup/components/quizContent/index.json

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

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
+}