xiaoe_mp_npm 1.0.21 → 1.0.22-test02

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

@@ -0,0 +1,283 @@
+
+ .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-自定义个性化的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/src/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/src/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/src/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;
+  }
+}