xiaoe_mp_npm 1.0.21 → 1.0.22-test02

package/src/Task/TaskPopup/component/TaskItem/index.js

@@ -1,304 +1,379 @@
 const computedBehavior = require('miniprogram-computed').behavior
 
 const getHoursMinutes = (minutes) => {
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-  return `${hours>0?hours+'小时':''}${remainingMinutes>0?remainingMinutes+'分钟':''}`
+  const hours = Math.floor(minutes / 60)
+  const remainingMinutes = minutes % 60
+  return `${hours > 0 ? hours + '小时' : ''}${remainingMinutes > 0 ? remainingMinutes + '分钟' : ''}`
 }
 
 const task_config = {
-  1:{
-    1:{
+  1: {
+    1: {
       taskBelongType: 1,
-      taskBtnText: "去观看",
-      event: "view"
-    }
+      taskBtnText: '去观看',
+      event: 'view',
+    },
   },
-  2:{
-    1:{
+  2: {
+    1: {
       taskBelongType: 2,
-      taskBtnText: "去评论",
-      handle: "toComment",
-      event: "input"
+      taskBtnText: '去评论',
+      handle: 'toComment',
+      event: 'input',
     },
-    2:{
+    2: {
       taskBelongType: 3,
-      taskBtnText: "去转发",
-      handle: "toShare",
-      event: "share"
+      taskBtnText: '去转发',
+      handle: 'toShare',
+      event: 'share',
     },
-    3:{
+    3: {
       taskBelongType: 4,
-      taskBtnText: "去点赞",
-      event: "like"
+      taskBtnText: '去点赞',
+      event: 'like',
     },
   },
-  3:{
-    4:{
+  3: {
+    4: {
       taskBelongType: 5,
-      taskBtnText: "去下单",
-      handle: "toGoods",
-      event: "order"
+      taskBtnText: '去下单',
+      handle: 'toGoods',
+      event: 'order',
     },
-    5:{
+    5: {
       taskBelongType: 6,
-      taskBtnText: "去消费",
-      handle: "toGoods",
-      event: "consumption"
-    }
+      taskBtnText: '去消费',
+      handle: 'toGoods',
+      event: 'consumption',
+    },
   },
-  4:{
-    6:{
+  4: {
+    6: {
       taskBelongType: 7,
-      taskBtnText: "去打赏",
-      handle: "toGive",
-      event: "give"
+      taskBtnText: '去打赏',
+      handle: 'toGive',
+      event: 'give',
     },
-    7:{
+    7: {
       taskBelongType: 8,
-      taskBtnText: "去投票",
-      event: "vote"
+      taskBtnText: '去投票',
+      event: 'vote',
     },
-    8:{
+    8: {
       taskBelongType: 9,
-      taskBtnText: "去完成",
-      event: "questionnaire"
+      taskBtnText: '去完成',
+      event: 'questionnaire',
     },
-    9:{
+    9: {
       taskBelongType: 10,
-      taskBtnText: "去签到",
-      handle: "toSign",
-      event: "sign"
-    }
-  }
+      taskBtnText: '去签到',
+      handle: 'toSign',
+      event: 'sign',
+    },
+    10: {
+      taskBelongType: 11,
+      taskBtnText: '去答题',
+      handle: 'toQuiz',
+      event: 'quiz',
+    },
+  },
 }
 
 const list_type_config = {
-  "reward": {
-    btnText: "去使用",
-    btnClick: "reward"
+  reward: {
+    btnText: '去使用',
+    btnClick: 'reward',
+  },
+  error: {
+    btnText: '领奖励',
+    btnClick: 'toRetry',
   },
-  "error": {
-    btnText: "领奖励",
-    btnClick: "toRetry"
-  }
 }
 
 // 奖励icon配置
 const reward_config = {
   1: {
-    label: "积分",
-    icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y1064s.png"
+    label: '积分',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y1064s.png',
   },
   2: {
-    label: "优惠券",
-    icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y00wfn.png"
+    label: '优惠券',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5y00wfn.png',
   },
   3: {
-    label: "红包",
-    icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xy0i8g.png"
+    label: '红包',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xy0i8g.png',
   },
   4: {
-    label: "课程",
-    icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xu04is.png"
+    label: '课程',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xu04is.png',
   },
   5: {
-    label: "奖品",
-    icon: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xz08pf.png"
-  }
+    label: '奖品',
+    icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltrgz5xz08pf.png',
+  },
 }
 
 Component({
   behaviors: [computedBehavior],
   properties: {
-    taskItem:{
+    // 任务详情数据
+    // id 直播间任务ID
+    // is_show_answer c端是否展示答案解析，0不展示，1展示
+    // task_type 任务类型：1=观看任务，2=互动任务，3=消费任务，4=活跃任务
+    // task_condition 直播任务条件：观看任务时填写具体分钟值，互动任务时：1-评论 2-分享 3-点赞，消费任务时：4-下单笔数 5-消费金额，活跃任务时：6-打赏 7-投票 8-问卷 9-签到 10-答题任务
+    // state 任务状态:1-正常，2-已停止
+    // reward_type 奖励类型：1=积分，2=优惠券，3=红包，4=课程/商品，5=自定义奖品
+    // reward_frequency 满足奖励所需频次，消费任务时：满足多少笔、或多少金额 ；答题任务时，答对多少题
+    // finish_frequency 已经完成奖励频次，消费任务时：满足多少笔、多少金额单位分
+    // reward_value 奖励值：积分数值、优惠券码、红包、商品、自定义奖品等。如果奖品存在多个字段，存储成json格式）
+    // start_at 任务开始时间
+    // end_at任务结束时间
+    // join_state 参与状态：0=未参与，1=参与中，2=已完成
+    // reward_state 奖励状态：1-待发放，2-发放成功，3-发放失败
+    // qs_is_pass 答题任务时，true-满足条件，false-不满足条件
+    taskItem: {
       type: Object,
-      value:()=>{
+      value: () => {
         return {}
-      }
+      },
     },
-    isRadius:{
-      type:Boolean,
-      value: false
+    isRadius: {
+      type: Boolean,
+      value: false,
     },
-    listType:{
-      type:String,
-      value: "task"
+    listType: {
+      type: String,
+      value: 'task',
     },
-    itemIndex:{
+    itemIndex: {
       type: Number,
-      value: 0
+      value: 0,
     },
-    isMb:{
+    isMb: {
       type: Boolean,
-      value: false
+      value: false,
     },
-    viewingInProgress:{
+    viewingInProgress: {
       type: Array,
-      value:()=>{
+      value: () => {
         return []
-      }
-    }
+      },
+    },
   },
   data: {
-    activeNames:["1"],
+    activeNames: ['1'],
     taskBelongType: null, // 任务类型归属 1-观看 2-评论 3-转发 4-点赞
   },
-  watch:{
-    taskItem:function(newVal){
+  watch: {
+    taskItem: function (newVal) {
       const { task_type, task_condition } = newVal
-      const { taskBelongType } = this.getTaskConfig(task_type,task_condition)
+      const { taskBelongType } = this.getTaskConfig(task_type, task_condition)
       this.setData({
-        taskBelongType
+        taskBelongType,
       })
-    }
+    },
   },
-  computed:{
+  computed: {
+    // 是否展示奖励
+    isShowReward(data) {
+      const { listType, taskItem, isQuizTask } = data
+      // 答题任务&&已参与&&没满足条件，即已提交（没成功获取奖励情况），需要隐藏奖励
+      if (isQuizTask && taskItem.join_state === 2 && !taskItem.qs_is_pass) {
+        return false
+      }
+      return listType === 'task' || listType === 'error'
+    },
+    // 是否是答题任务
+    isQuizTask(data) {
+      const { taskItem } = data
+      return taskItem.task_type === 4 && taskItem.task_condition === '10'
+    },
+    // 未完成及已提交状态
+    getFailStatus(data) {
+      const { taskItem, isQuizTask } = data
+      return (
+        (isQuizTask && taskItem.join_state === 2 && !taskItem.qs_is_pass) ||
+        (taskItem.join_state === 0 && taskItem.state === 2)
+      )
+    },
+    // 展示答题任务中，说明模块, 答题任务&&（任务结束||参与了）&&（任务结束&&没参与————这个有单独的提示）
+    showAnswerTaskIntroduce(data) {
+      const { taskItem, isQuizTask } = data
+      return (
+        isQuizTask &&
+        (taskItem.state === 2 || taskItem.join_state === 2) &&
+        !(taskItem.state === 2 && taskItem.join_state === 0)
+      )
+    },
     // 任务标题
-    taskTitle(data){
-      let title = ""
+    taskTitle(data) {
+      let title = ''
       const { task_condition, reward_frequency } = data.taskItem
-      switch(data.taskBelongType){
+      switch (data.taskBelongType) {
         case 1:
           title = `观看时长${getHoursMinutes(task_condition)}`
-          break;
+          break
         case 2:
-          title = "评论1次"
-          break;
+          title = '评论1次'
+          break
         case 3:
-          title = "转发1次"
-          break;
+          title = '转发1次'
+          break
         case 4:
-          title = "点赞1次"
-          break;
+          title = '点赞1次'
+          break
         case 5:
           title = `成功消费 ${reward_frequency} 笔订单数`
-          break;
+          break
         case 6:
-          title = `成功消费 ${(reward_frequency/100).toFixed(2)} 元`
-          break;
+          title = `成功消费 ${(reward_frequency / 100).toFixed(2)} 元`
+          break
         case 7:
           title = `完成打赏`
-          break;
+          break
         case 8:
           title = `完成投票`
-          break;
+          break
         case 9:
           title = `完成问卷`
-          break;
+          break
         case 10:
           title = `完成签到`
-          break;
+          break
+        case 11:
+          title = `完成答题，并答对${reward_frequency}题`
+          break
       }
       return title
     },
 
     // 任务按钮
-    btnText(data){
-      if(data.listType !== 'task'){
+    btnText(data) {
+      if (data.listType !== 'task') {
         return list_type_config[data.listType]?.btnText
-      }else{
+      } else {
         // 正常任务列表
-        const {join_state, state, task_type, task_condition} = data.taskItem
-        if(join_state === 2) return "已完成"
-        if(state === 2) return "已结束"
-        if(join_state === 0) return "未开始"
-        return task_config[task_type][task_type===1?1:task_condition]?.taskBtnText || "去参与"
-      } 
+        const { join_state, state, task_type, task_condition, qs_is_pass } = data.taskItem
+        // 答题任务&&已参与&&没满足条件
+        if (data.isQuizTask && join_state === 2 && !qs_is_pass) {
+          //已提交
+          return '已提交'
+        }
+        if (join_state === 2) return '已完成'
+        if (state === 2) return '未完成'
+        if (join_state === 0) return '未开始'
+        return task_config[task_type][task_type === 1 ? 1 : task_condition]?.taskBtnText || '去参与'
+      }
     },
 
     // 奖励内容
-    rewardText(data){
+    rewardText(data) {
       const { reward_type, reward_value } = data.taskItem
-      const onlyOneType = [2,4,5]
-      if(onlyOneType.includes(reward_type)){
+      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{
+      } 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}`
       }
     },
-    
+
     // 奖励图标
-    rewardIcon(data){
+    rewardIcon(data) {
       const { reward_type } = data.taskItem
       return reward_config[reward_type]?.icon
     },
 
     // 任务完成剩余条件
-    residueCondition(data){
+    residueCondition(data) {
       const { join_state, state, task_type, task_condition, reward_value, reward_type, id } = data.taskItem
-      if(join_state!==1 || state ===2) return ""
-      
-      if(task_type === 1){
+      if (join_state !== 1 || state === 2) return ''
+
+      if (task_type === 1) {
         // 观看任务
-        if(data.viewingInProgress.length){
-          const { residue_time } = data.viewingInProgress.find(item => item.id === id)
-          return residue_time && residue_time > 60 ? '再观看 '+ Math.floor(residue_time / 60) + '分钟 '+ '获得奖励':'即将获得奖励'
-        }        
-      }else if(task_type === 3 && task_condition === "4"){
+        if (data.viewingInProgress.length) {
+          const { residue_time } = data.viewingInProgress.find((item) => item.id === id)
+          return residue_time && residue_time > 60
+            ? '再观看 ' + Math.floor(residue_time / 60) + '分钟 ' + '获得奖励'
+            : '即将获得奖励'
+        }
+      } else if (task_type === 3 && task_condition === '4') {
         // 下单笔数
         const { reward_frequency, finish_frequency } = data.taskItem
-        return reward_frequency && finish_frequency ? `再下${reward_frequency - finish_frequency}单 获得奖励`:''
-      }else if(task_type === 3 && task_condition === "5"){
+        return reward_frequency && finish_frequency ? `再下${reward_frequency - finish_frequency}单 获得奖励` : ''
+      } else if (task_type === 3 && task_condition === '5') {
         // 消费金额
-        const { reward_frequency, finish_frequency } = data.taskItem        
-        return reward_frequency && finish_frequency ? `再消费${((reward_frequency - finish_frequency)/100).toFixed(2)}元 获得奖励`:''
-      }else{
-        return ""
+        const { reward_frequency, finish_frequency } = data.taskItem
+        return reward_frequency && finish_frequency
+          ? `再消费${((reward_frequency - finish_frequency) / 100).toFixed(2)}元 获得奖励`
+          : ''
+      } else {
+        return ''
       }
     },
 
-    // 红包奖励剩余个数 
-    redEnvelopeNum(data){
+    // 红包奖励剩余个数
+    redEnvelopeNum(data) {
       const { join_state, state, reward_value, reward_type } = data.taskItem
-      if(join_state!==1 || state ===2 || reward_type !==3) return ""
+      if (
+        (join_state !== 1 || state === 2 || reward_type !== 3) ||
+        (join_state === 0 && state === 2)
+      ) {
+        return ''
+      }
       return reward_value.remain_nums ? `领取名额还剩 ${reward_value.remain_nums}个` : '领取名额还剩 0个，无法领取'
-    }
+    },
   },
   lifetimes: {
     // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
-    attached: function () {
-
-    },
-    moved: function () { },
-    detached: function () { },
+    attached: function () {},
+    moved: function () {},
+    detached: function () {},
   },
   methods: {
-    getHoursMinutes(minutes){
-      const hours = Math.floor(minutes / 60);
-      const remainingMinutes = minutes % 60;
-      return `${hours>0?hours+'小时':''}${remainingMinutes>0?remainingMinutes+'分钟':''}`
+    // 打开答题任务答案解析
+    handleAnswerAnalysis() {
+      this.triggerEvent('btnClick', {
+        type: "quizAnalysis",
+        taskItem: this.data.taskItem
+      })
+    },
+    getHoursMinutes(minutes) {
+      const hours = Math.floor(minutes / 60)
+      const remainingMinutes = minutes % 60
+      return `${hours > 0 ? hours + '小时' : ''}${remainingMinutes > 0 ? remainingMinutes + '分钟' : ''}`
     },
-    btnClick(){
-      console.log("data.viewingInProgress btnClick",this.properties.viewingInProgress)
+    btnClick() {
+      console.log('data.viewingInProgress btnClick', this.properties.viewingInProgress)
       const { reward_type, task_type, task_condition, reward_value, id } = this.data.taskItem
-      if(this.data.listType === "task"){
-        if(this.data.btnText === "已完成" || this.data.btnText === "已结束" || this.data.btnText === "未开始") return
+      if (this.data.listType === 'task') {
+        if (['已完成', '未开始', '未开始', '已提交'].includes(this.data.btnText)) return
         const { handle } = this.getTaskConfig(task_type, task_condition)
-        if(handle){
-          this.triggerEvent("btnClick", {
-            type: handle
+        if (handle) {
+          this.triggerEvent('btnClick', {
+            type: handle,
+            taskItem: this.data.taskItem
           })
-        }else{
-          this.triggerEvent("btnClick",{
-            type: "closePopup"
+        } else {
+          this.triggerEvent('btnClick', {
+            type: 'closePopup',
           })
         }
-      }else{
+      } else {
         const { event } = this.getTaskConfig(task_type, task_condition)
-        this.triggerEvent("btnClick",{
+        this.triggerEvent('btnClick', {
           type: list_type_config[this.data.listType]?.btnClick,
           reward_type,
           taskBelongType: event,
           reward_value,
-          id
+          id,
         })
       }
     },
-    getTaskConfig(task_type,task_condition){
-      if(task_type === 1) task_condition = 1
+    getTaskConfig(task_type, task_condition) {
+      if (task_type === 1) task_condition = 1
       return task_config[task_type][task_condition]
     },
   },

package/src/Task/TaskPopup/component/TaskItem/index.scss

@@ -77,7 +77,28 @@ $deviceWidth: 750;
       margin-top: vmin(8);
       font-size: vmin(24);
       color: #FF5429;
+      font-family: "PingFang SC";
       line-height: vmin(32);
+      align-items: center;
+      .warning-text {
+      }
+      .finish-text {
+        display: inline-block;
+        color: #999999;
+      }
+      .show-answer {
+        display: inline-flex;
+        align-items: center;
+        margin-left: vmin(20);
+        font-style: normal;
+        font-weight: 400;
+        line-height: vmin(32);
+        .analysis-icon {
+          width: vmin(24);
+          height: vmin(24);
+          margin-left: -vmin(4);
+        }
+      }
     }
   }
 
@@ -104,6 +125,11 @@ $deviceWidth: 750;
       background: #F5F5F5;
       color: #B2B2B2;
     }
+    &.orange-btn{
+      color: #ffffff;
+      opacity: 0.4;
+      background: #ff5429;
+    }
   }
   
 }

package/src/Task/TaskPopup/component/TaskItem/index.wxml

@@ -12,17 +12,16 @@
       <view class="title" wx:if="{{listType === 'reward'}}">{{ rewardText }}</view>
 
       <!-- 奖励内容 -->
-      <view class="reward" wx:if="{{listType === 'task' || listType === 'error'}}">
+      <view class="reward" wx:if="{{isShowReward}}">
         <image class="reward-img" src="{{rewardIcon}}" />
         <view class="reward-text">{{ rewardText }}</view>
       </view>
     </view>
 
     <!-- 任务时间 -->
-    <view
-      class="time"
-      wx:if="{{listType === 'task' || listType === 'error'}}"
-    >任务时间：{{taskItem.show_start_at}} 至 {{taskItem.show_end_at}}</view>
+    <view class="time" wx:if="{{listType === 'task' || listType === 'error'}}">
+      任务时间：{{taskItem.show_start_at}} 至 {{taskItem.show_end_at}}
+    </view>
 
     <view class="time" wx:if="{{listType === 'reward'}}">获得方式：{{ taskTitle }}</view>
 
@@ -36,12 +35,32 @@
 
     <!-- 奖励发放异常提示 -->
     <view class="task-tip" wx:if="{{taskItem.is_show_reward_info}}">奖励发放中，请稍后查看</view>
-    <view class="task-tip" wx:if="{{listType === 'task' && taskItem.reward_state === 3}}">奖品异常，无法领取，请联系商家处理</view>
+    <view class="task-tip" wx:if="{{listType === 'task' && taskItem.reward_state === 3 && taskItem.task_condition !== '10'}}">
+      奖品异常，无法领取，请联系商家处理
+    </view>
+
+    <!-- 答题任务没完成的提示情况处理  -->
+    <view class="task-tip" wx:if="{{showAnswerTaskIntroduce}}">
+      <!-- 完成但不满足条件 -->
+      <text class="warning-text" wx:if="{{!taskItem.qs_is_pass}}">未达到获奖条件：答对 {{taskItem.reward_frequency}} 题</text>
+      <!-- 完成 -->
+      <text wx:else class="finish-text">已达到获奖条件：答对 {{taskItem.reward_frequency}} 题</text>
+      <!-- 查看解析按钮, 只有开启了解析查看才会显示  -->
+      <view wx:if="{{taskItem.is_show_answer === 1}}" class="show-answer" catch:tap="handleAnswerAnalysis">
+        查看解析
+        <image class="analysis-icon" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lyqwwwi10xtb.svg" />
+      </view>
+    </view>
+
+    <!-- 超时没完成 -->
+    <view class="task-tip" wx:if="{{taskItem.join_state === 0 && taskItem.state === 2}}">已超时，未获得奖励</view>
   </view>
 
   <!-- 右侧按钮 -->
   <view
-    class="btn {{listType === 'reward'?'reward-btn':''}} {{listType==='task' && (taskItem.join_state === 2 || taskItem.join_state === 3 || taskItem.join_state === 0 || taskItem.state === 2)?'gray-btn':''}}"
+    class="btn {{listType === 'reward' && 'reward-btn'}} {{(listType==='task' && (taskItem.join_state === 2 || taskItem.join_state === 3 || taskItem.join_state === 0 || taskItem.state === 2))&&'gray-btn'}} {{getFailStatus && 'orange-btn'}}"
     catch:tap="btnClick"
-  >{{btnText}}</view>
+  >
+    {{btnText}}
+  </view>
 </view>