xiaoe_mp_npm 1.0.21 → 1.0.22-test02

package/miniprogram_dist/Task/TaskQuizPopup/components/wxParse/wxParse.wxss

@@ -0,0 +1,316 @@
+.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: 0.67em 0;
+}
+.wxParse-h2 {
+  font-size: 1.5em;
+  margin: 0.75em 0;
+}
+.wxParse-h3 {
+  font-size: 1.17em;
+  margin: 0.83em 0;
+}
+.wxParse-h4 {
+  margin: 1.12em 0;
+}
+.wxParse-h5 {
+  font-size: 0.83em;
+  margin: 1.5em 0;
+}
+.wxParse-h6 {
+  font-size: 0.75em;
+  margin: 1.67em 0;
+}
+.wxParse-h1 {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 0.9em;
+}
+.wxParse-h2 {
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 0.34em;
+}
+.wxParse-h3 {
+  font-weight: 400;
+  font-size: 15px;
+  margin-bottom: 0.34em;
+}
+.wxParse-h4 {
+  font-weight: 400;
+  font-size: 14px;
+  margin-bottom: 0.24em;
+}
+.wxParse-h5 {
+  font-weight: 400;
+  font-size: 13px;
+  margin-bottom: 0.14em;
+}
+.wxParse-h6 {
+  font-weight: 400;
+  font-size: 12px;
+  margin-bottom: 0.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: 0.83em;
+}
+.wxParse-sub {
+  vertical-align: sub;
+}
+.wxParse-sup {
+  vertical-align: super;
+}
+.wxParse-s,
+.wxParse-strike,
+.wxParse-del {
+  text-decoration: line-through;
+}
+/*wxparse-自定义个性化的css样式*/
+/*增加video的css样式*/
+.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 {
+  /* width:686rpx; */
+  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;
+}
+.wxParse-img {
+  /*background-color: #efefef;*/
+  overflow: hidden!important;
+  /*width:40px;
+    height: 40px;*/
+}
+.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-table{
+    width: 100%;
+    height: 400px;
+}
+.wxParse-thead,.wxParse-tfoot,.wxParse-tr{
+    display: flex;
+    flex-direction: row;
+}
+.wxParse-th,.wxParse-td{
+    display: flex;
+    width: 580px;
+    overflow: auto;
+}*/
+.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;
+}
+/* p标签没换行 故设此样式 */
+.wxParse-p {
+  min-height: 1em;
+}

package/miniprogram_dist/Task/TaskQuizPopup/index.js

@@ -0,0 +1,232 @@
+const computedBehavior = require('miniprogram-computed').behavior
+import { rpxToVmin } from '../../common/utils/index.js'
+import Dialog from '@vant/weapp/dialog/dialog';
+
+// 奖励icon配置
+const reward_config = {
+  1: {
+    label: '积分',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y1064s.png',
+  },
+  2: {
+    label: '优惠券',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y00wfn.png',
+  },
+  3: {
+    label: '红包',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xy0i8g.png',
+  },
+  4: {
+    label: '课程',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xu04is.png',
+  },
+  5: {
+    label: '奖品',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xz08pf.png',
+  },
+}
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    showPopup:{
+      type: Boolean,
+      value: false
+    },
+    popPosition: {
+      type: String,
+      value: 'bottom'
+    },
+    orientation: {
+      type: String,
+      value: 'hor'
+    },
+    // 当前打开弹窗的任务
+    quiz_task_item: {
+      type: Object,
+      value: {}
+    },
+    // 当前任务的参与结果
+    join_result: {
+      type: Object,
+      value: {}
+    },
+    // 当前答题数组
+    show_quiz_list: {
+      type: Array,
+      value: []
+    },
+    // 当前查看解析的答题数组
+    show_quiz_analysis_list: {
+      type: Array,
+      value: []
+    },
+    // 整个任务列表数据
+    task_list: {
+      type: Array,
+      value: []
+    },
+    // 是否是结果解析
+    showAnalysis: {
+      type: Boolean,
+      value: false,
+    },
+    // 是否全屏互动
+    isFull: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    currentIndex: 0, // 当前题目的下标
+    total: 0, // 总题目数
+    quizList: [], // 题目内容
+  },
+  computed: {
+    customStyle({ popPosition, orientation }) {
+      const position = `position: ${orientation === 'ver' ? 'fixed' : 'absolute'}; left: 0; bottom: 0`
+      return popPosition === "bottom" ? `${position}; width: ${orientation === 'ver' ? '100%' : ''}; height: calc(100% - ${rpxToVmin(422)});` : "height: 100%;width: 100vmin;border-radius: 0;"
+    },
+    // 奖励图标
+    rewardIcon({ quiz_task_item }) {
+      const { reward_type } = quiz_task_item
+      return reward_config[reward_type]?.icon
+    },
+
+    // 奖励内容
+    rewardText({ quiz_task_item }) {
+      const { reward_type, reward_value } = quiz_task_item
+      const onlyOneType = [2, 4, 5]
+      if (onlyOneType.includes(reward_type)) {
+        return `+1 ${reward_config[reward_type]?.label}`
+      } else if (reward_type === 3) {
+        return `+${(reward_value.money / 100).toFixed(2)} ${reward_config[reward_type]?.label}`
+      } else {
+        return `+${reward_value} ${reward_config[reward_type]?.label}`
+      }
+    },
+  },
+  observers: {
+    showPopup(val) {
+      if (val) {
+        this.setData({
+          currentIndex: 0,
+          total: this.data.show_quiz_list.length,
+          quizList: this.data[this.data.showAnalysis ? 'show_quiz_analysis_list' : 'show_quiz_list'],
+        }, ()=> {
+          console.error('jer=========进入弹窗', this.data);
+        })
+      }
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closePop(){
+      this.triggerEvent("closePop")
+      this.setData({
+        currentIndex: 0,
+        total: 0,
+        quizList: [],
+      })
+    },
+    // 答题顺序恐惧
+    handleQuizOrder(e) {
+      let currentIndex = this.data.currentIndex;
+      switch (e.currentTarget.dataset.type) {
+        case "prev":
+          currentIndex--;
+          break;
+        case "next":
+          currentIndex++;
+          break;
+        case "submit":
+          Dialog.confirm({
+            context: this,
+            closeOnClickOverlay: false,
+            title: '确认提交？',
+            message: '提交后将无法修改答案，系统直接批改，确认要提交吗？',
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonColor: '#1472FF',
+            zIndex: 501,
+          })
+          .then(() => {
+            // 处理获取题目id和答案id
+            let params = this.data.quizList.map((item) => {
+              // 获取用户选择的答案
+              let userAnswer = [];
+              for (let index = 0; index < item.options.length; index++) {
+                const ele = item.options[index];
+                if (ele.selected) {
+                  userAnswer.push(ele.op_id);
+                }
+              }
+              return {
+                qs_id: item.qs_id,
+                op_id: userAnswer,
+              };
+            });
+            // 获取列表中当前任务是否结束了，兼容提交前端校验
+            const taskFindItem =
+              this.data.task_list.find(
+                (item) => item.id === this.data.quiz_task_item.id
+              ) || {};
+            if (taskFindItem.state === 2) {
+              this.closePop()
+              wx.showToast({
+                title: '当前答题已结束，无法继续提交',
+                icon: 'none',
+                duration: 1000,
+              })
+              return;
+            }
+            // 存储用户答案，用于接口请求参数
+            // 调用完成任务接口
+            this.triggerEvent("commonFulfilTasks", {
+              user_answer: params,
+              ids: [this.data.quiz_task_item.id],
+              taskItem: this.data.quiz_task_item,
+            })
+          })
+          .catch((err) => {
+            // 暂无操作
+          });
+          break;
+
+        default:
+          break;
+      }
+      this.setData({ currentIndex })
+    },
+    // 点击选项进行操作答题
+    clickOption(e) {
+      const index = e.detail
+      console.error('jer=============选择11111', index);
+      const tempQuizItem =
+        this.data.quizList[this.data.currentIndex];
+      // 多选题
+      if (tempQuizItem.qs_type === 1) {
+        tempQuizItem.options[index].selected = !tempQuizItem.options[index].selected
+      } else {
+        for (let i = 0; i < tempQuizItem.options.length; i++) {
+          tempQuizItem.options[i].selected = false;
+        }
+        tempQuizItem.options[index].selected = true;
+      }
+      this.setData({
+        quizList: this.data.quizList
+      }, ()=> {
+        console.error('jer============更改之后的数组', this.data.quizList);
+      })
+    },
+  }
+})

package/miniprogram_dist/Task/TaskQuizPopup/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-popup": "@vant/weapp/popup/index",
+    "quizContent": "./components/quizContent/index"
+  }
+}

package/miniprogram_dist/Task/TaskQuizPopup/index.scss

@@ -0,0 +1,159 @@
+$deviceWidth: 750;
+
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin task-quiz-popup {
+  height: 100%;
+  .quiz-popup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f5f5;
+    border-radius: vmin(24) vmin(24) 0 0;
+    z-index: 500;
+    .content-header {
+      width: 100%;
+      height: vmin(96);
+      font-size: vmin(32);
+      font-weight: 500;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      .popup-close-icon {
+        width: vmin(32);
+        height: vmin(32);
+        position: absolute;
+        top: vmin(32);
+        right: vmin(32);
+      }
+    }
+  
+    .popup-content{
+      flex: 1;
+      box-sizing: border-box;
+      overflow-y: overlay;
+      padding: 0 vmin(32);
+      width: 100%;
+
+      .reward-show-box {
+        display: flex;
+        padding: vmin(32) vmin(24);
+        flex-direction: column;
+        align-items: flex-start;
+        border-radius: vmin(16);
+        background: #fff;
+        color: #333333;
+        font-family: "PingFang SC";
+        font-size: vmin(28);
+        font-style: normal;
+        font-weight: 400;
+        margin-bottom: vmin(32);
+        line-height: vmin(40);
+        .reward-condition {
+          font-weight: 500;
+          .orange-color {
+            color: #ff5429;
+          }
+        }
+        .reward-result {
+          display: flex;
+          align-items: center;
+          margin-top: vmin(8);
+          .reward-result-show {
+            margin-left: vmin(16);
+            color: #ff5429;
+            font-size: vmin(24);
+            display: inline-flex;
+            align-items: center;
+  
+            .reward-img {
+              width: vmin(24);
+              height: vmin(24);
+              padding: vmin(4) 0;
+              vertical-align: top;
+            }
+          }
+        }
+      }
+      .analysis-tip {
+        font-size: vmin(32);
+        color: #333333;
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 500;
+        line-height: vmin(48);
+        margin-bottom: vmin(32);
+      }
+    }
+  
+    .content-footer {
+      width: 100%;
+      height: vmin(112);
+      font-size: vmin(32);
+      font-weight: 400;
+      color: #999;
+      line-height: vmin(40);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 vmin(32);
+      box-sizing: border-box;
+      view {
+        flex: 1;
+        height: vmin(80);
+        font-weight: 500;
+        line-height: vmin(80);
+        font-size: vmin(28);
+        text-align: center;
+        border-radius: vmin(40);
+        box-sizing: border-box;
+      }
+      .last-step {
+        margin-right: vmin(30);
+      }
+      .last-step,
+      .next-step {
+        color: #1472ff;
+        border: vmin(2) solid #1472ff;
+      }
+      .submit-step {
+        color: #fff;
+        background: #1472ff;
+      }
+    }
+  }
+}
+
+.task-quiz-popup {
+  @include task-quiz-popup;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .task-quiz-popup {
+    @include task-quiz-popup;
+  }
+}
+
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .task-quiz-popup {
+    @include task-quiz-popup;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .task-quiz-popup {
+    @include task-quiz-popup;
+  }
+}