xiaoe_mp_npm 1.0.0-live2 → 1.0.0-live20

package/miniprogram_dist/Task/TaskBubble/index.js

@@ -1,12 +1,18 @@
+const computedBehavior = require('miniprogram-computed').behavior
 Component({
+  behaviors: [computedBehavior],
   /**
    * 组件的属性列表
    */
   properties: {
-    messageContent: {
+    taskMsg: {
       type: Object,
       value: {},
     },
+    zIndex: {
+      type: Number,
+      value: 1,
+    },
   },
 
   /**
@@ -14,6 +20,38 @@ Component({
    */
   data: {
     animationData: {},
+    taskIcon: {
+        1: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1y0v93.png",
+        2: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1w0t4k.png"
+    }
+  },
+
+  computed: {
+    // 奖品类型
+    rewardValue(data){
+      if(data.taskMsg.live_task?.task_type === 1){
+        const hours = Math.floor(data.taskMsg.live_task?.task_condition / 60);
+        const remainingMinutes = data.taskMsg.live_task?.task_condition % 60;
+
+        if (hours === 0) {
+            return `达${remainingMinutes}分钟`;
+        } else if (remainingMinutes === 0) {
+            return `达${hours}小时`;
+        } else {
+            return `达${hours}小时${remainingMinutes}分钟`;
+        }
+      }else {
+        return ['', '发表评论', '转发直播间', '完成点赞'][data.taskMsg.live_task?.task_condition] || ''
+      }
+    },
+    // 奖品icon
+    taskIconImg(data){
+        return data.taskIcon[data.taskMsg.live_task?.reward_type]
+    },
+    // 奖品数量
+    prizeNum(data){
+        return data.taskMsg.live_task?.reward_type === 1? data.taskMsg.live_task?.reward_value: data.taskMsg.coupon_list?.length
+    }
   },
 
   lifetimes: {},
@@ -22,6 +60,12 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    // 气泡点击事件
+    bubbleClick(){
+      this.triggerEvent("bubbleClick")
+    },
+  
+    // 显示气泡动画
     showBubble() {
       const animation = wx.createAnimation({
         duration: 1500,
@@ -38,6 +82,7 @@ Component({
       }, 1500)
     },
 
+    // 隐藏气泡动画
     hideBubble() {
       const animation = wx.createAnimation({
         duration: 1500,
@@ -49,7 +94,6 @@ Component({
       this.setData({
         animationData: animation.export(),
       })
-
       // 在动画结束后调用还原元素位置的函数
       setTimeout(() => {
         this.restoreElement()
@@ -57,6 +101,7 @@ Component({
       }, 1500) // 设置延时与动画时长一致
     },
 
+    // 重置气泡位置
     restoreElement() {
       const animation = wx.createAnimation({
         duration: 0, // 立即执行，无过渡效果

package/miniprogram_dist/Task/TaskBubble/index.scss

@@ -7,7 +7,6 @@ $deviceWidth: 750;
 @mixin barrage-container {
   color: #fff;
   font-size: vmin(20);
-  margin-bottom: vmin(76);
   .barrage-wrap {
     display: flex;
     .barrage-item {
@@ -30,12 +29,13 @@ $deviceWidth: 750;
         height: vmin(48);
         border-radius: 50%;
         margin-left: vmin(10);
+        margin-right: vmin(8);
         flex-shrink: 0;
       }
       .task-type {
         display: flex;
         flex-direction: column;
-        margin-left: vmin(8);
+        margin-right: vmin(8);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

package/miniprogram_dist/Task/TaskBubble/index.wxml

@@ -1,29 +1,22 @@
-<view>
-  <view class="barrage-container">
-    <view class="barrage-wrap">
-      <view class="barrage-item" animation="{{animationData}}">
-        <view class="barrage-content">
-          <image
-            class="task-completion-icon"
-            src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1y0c73.png"
-            alt
-          />
-          <view class="task-type">{{messageContent.id}}</view>
-          <view>达1小时</view>
-          <image
-            class="prize-icon"
-            src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1y0v93.png"
-            alt="奖励"
-          />
-          <view class="prize-num">+1</view>
-          <image
-            class="right-arrow-icon"
-            src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1k0dzj.png"
-            alt
-          />
-        </view>
+<view class="barrage-container" catch:tap="bubbleClick" style="{{zIndex?'z-index:'+zIndex:''}}">
+  <view class="barrage-wrap">
+    <view class="barrage-item" animation="{{animationData}}">
+      <view class="barrage-content">
+        <image
+          class="task-completion-icon"
+          src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1y0c73.png"
+          alt
+        />
+        <view wx:if="{{taskMsg.live_task.task_type === 1}}" class="task-type">观看时长</view>
+        <view>{{ rewardValue }}</view>
+        <image class="prize-icon" src="{{taskIconImg}}" alt="奖励" />
+        <view class="prize-num">+{{ prizeNum }}</view>
+        <image
+          class="right-arrow-icon"
+          src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopitz1k0dzj.png"
+          alt
+        />
       </view>
     </view>
   </view>
 </view>
-

package/miniprogram_dist/Task/TaskBubble/index.wxss

@@ -1,7 +1,6 @@
 .barrage-container {
   color: #fff;
   font-size: 2.66667vmin;
-  margin-bottom: 10.13333vmin;
 }
 .barrage-container .barrage-wrap {
   display: flex;
@@ -25,12 +24,13 @@
   height: 6.4vmin;
   border-radius: 50%;
   margin-left: 1.33333vmin;
+  margin-right: 1.06667vmin;
   flex-shrink: 0;
 }
 .barrage-container .barrage-wrap .barrage-item .task-type {
   display: flex;
   flex-direction: column;
-  margin-left: 1.06667vmin;
+  margin-right: 1.06667vmin;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -97,7 +97,6 @@
   .barrage-container {
     color: #fff;
     font-size: 1.30208vmin;
-    margin-bottom: 4.94792vmin;
   }
   .barrage-container .barrage-wrap {
     display: flex;
@@ -121,12 +120,13 @@
     height: 3.125vmin;
     border-radius: 50%;
     margin-left: 0.65104vmin;
+    margin-right: 0.52083vmin;
     flex-shrink: 0;
   }
   .barrage-container .barrage-wrap .barrage-item .task-type {
     display: flex;
     flex-direction: column;
-    margin-left: 0.52083vmin;
+    margin-right: 0.52083vmin;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -194,7 +194,6 @@
   .barrage-container {
     color: #fff;
     font-size: 1.30208vmin;
-    margin-bottom: 4.94792vmin;
   }
   .barrage-container .barrage-wrap {
     display: flex;
@@ -218,12 +217,13 @@
     height: 3.125vmin;
     border-radius: 50%;
     margin-left: 0.65104vmin;
+    margin-right: 0.52083vmin;
     flex-shrink: 0;
   }
   .barrage-container .barrage-wrap .barrage-item .task-type {
     display: flex;
     flex-direction: column;
-    margin-left: 0.52083vmin;
+    margin-right: 0.52083vmin;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/miniprogram_dist/Task/TaskIcon/index.js

@@ -2,17 +2,28 @@ Component({
   /**
    * 组件的属性列表
    */
-  properties: {},
+  properties: {
+    aliveMode:{
+      type: Number,
+      value: 1
+    },
+    iconText:{
+      type: String,
+      value: '得奖励'
+    },
+  },
 
   /**
    * 组件的初始数据
    */
-  data: {
-    alive_mode: 1,
-  },
+  data: {},
 
   /**
    * 组件的方法列表
    */
-  methods: {},
+  methods: {
+    iconClick(){
+      this.triggerEvent("iconClick")
+    }
+  },
 })

package/miniprogram_dist/Task/TaskIcon/index.scss

@@ -19,6 +19,7 @@ $deviceWidth: 750;
   height: 100%;
   border-radius: vmin(16);
   margin: 0 vmin(32) vmin(24) 0;
+  pointer-events: auto;
   .task-icon {
       flex-shrink: 0;
       display: block;

package/miniprogram_dist/Task/TaskIcon/index.wxml

@@ -1,5 +1,5 @@
-<view class="taskIcon {{alive_mode === 1? 'verticalStyle' : ''}}">
+<view class="taskIcon {{aliveMode === 1? 'verticalStyle' : ''}}" catch:tap="iconClick">
   <view class="task-icon" />
-  <view class="task-text">得奖励</view>
+  <view class="task-text">{{iconText}}</view>
 </view>
 

package/miniprogram_dist/Task/TaskIcon/index.wxss

@@ -13,6 +13,7 @@
   height: 100%;
   border-radius: 2.13333vmin;
   margin: 0 4.26667vmin 3.2vmin 0;
+  pointer-events: auto;
 }
 .taskIcon .task-icon {
   flex-shrink: 0;
@@ -55,6 +56,7 @@
     height: 100%;
     border-radius: 1.04167vmin;
     margin: 0 2.08333vmin 1.5625vmin 0;
+    pointer-events: auto;
   }
   .taskIcon .task-icon {
     flex-shrink: 0;
@@ -98,6 +100,7 @@
     height: 100%;
     border-radius: 1.04167vmin;
     margin: 0 2.08333vmin 1.5625vmin 0;
+    pointer-events: auto;
   }
   .taskIcon .task-icon {
     flex-shrink: 0;

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

@@ -8,6 +8,10 @@ Component({
         return []
       }
     },
+    refreshStatus:{
+      type:Boolean,
+      value: false
+    }
   },
   data: {
     activeNames:["1"],
@@ -21,7 +25,15 @@ Component({
     detached: function () { },
   },
   methods: {
-    onChange(){}
+    btnClick(e){
+      this.triggerEvent("btnClick",e.detail)
+    },
+    onLoad(){
+      this.triggerEvent("onLoad","rewardList")
+    },
+    getMoreList(){
+      this.triggerEvent("getMoreList","rewardList")
+    }
   },
   observers: {},
 })

package/miniprogram_dist/Task/TaskPopup/component/RewardList/index.scss

@@ -0,0 +1,40 @@
+$deviceWidth: 750;
+
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin reward-list{
+  height: 100%;
+}
+
+.reward-list {
+  @include reward-list;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .reward-list {
+    @include reward-list;
+  }
+}
+
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .reward-list {
+    @include reward-list;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .reward-list {
+    @include reward-list;
+  }
+}

package/miniprogram_dist/Task/TaskPopup/component/RewardList/index.wxml

@@ -1,4 +1,11 @@
-<scroll-view class="goods-list" scroll-y="true" bindrefresherrefresh="onLoad" refresher-enabled="{{true}}">
+<scroll-view
+  class="reward-list"
+  scroll-y="true"
+  bindrefresherrefresh="onLoad"
+  refresher-enabled="{{true}}"
+  refresher-triggered="{{ refreshStatus }}"
+  bindscrolltolower="getMoreList"
+>
   <task-item
     wx:for="{{rewardList}}"
     wx:for-item="item"
@@ -6,5 +13,7 @@
     listType="reward"
     isRadius="{{true}}"
     taskItem="{{item}}"
+    bind:btnClick="btnClick"
+    isMb="{{true}}"
   />
 </scroll-view>

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

@@ -0,0 +1,18 @@
+.reward-list {
+  height: 100%;
+}
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .reward-list {
+    height: 100%;
+  }
+}
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  .reward-list {
+    height: 100%;
+  }
+}
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .reward-list {
+    height: 100%;
+  }
+}

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

@@ -25,6 +25,13 @@ const TASK_TYPE_TEXT = {
   4: "去点赞",
 };
 
+const taskType = {
+  1: "view",
+  2: "input",
+  3: "share",
+  4: "like"
+}
+
 Component({
   behaviors: [computedBehavior],
   properties: {
@@ -45,6 +52,10 @@ Component({
     itemIndex:{
       type: Number,
       value: 0
+    },
+    isMb:{
+      type: Boolean,
+      value: false
     }
   },
   data: {
@@ -61,15 +72,15 @@ Component({
           taskBelongType = 1
         }else if(task_type === 2){
           switch(task_condition){
-            case 1:
+            case "1":
               // 评论
               taskBelongType = 2
               break;
-            case 2:
+            case "2":
               // 转发
               taskBelongType = 3
               break;
-            case 3:
+            case "3":
               // 点赞
               taskBelongType = 4
               break
@@ -87,7 +98,7 @@ Component({
       let title = ""
       switch(data.taskBelongType){
         case 1:
-          let task_condition = data.listType === LIST_TYPE.REWARD?data.taskItem.live_task.task_condition:data.taskItem.task_condition
+          let task_condition = data.taskItem.task_condition
           title = `观看时长${getHoursMinutes(task_condition)}`
           break;
         case 2:
@@ -115,19 +126,28 @@ Component({
         return "领奖励"
       }
 
-      // 任务状态 join_state 0-未开始 2-已完成 3-已结束
-      if (JOIN_STATE_TEXT[data.taskItem.join_state]) {
-        return JOIN_STATE_TEXT[data.taskItem.join_state];
+      // 任务状态已结束
+      if(data.taskItem.join_state === 2){
+        return "已完成"
+      }
+
+      // 任务状态已结束
+      if(data.taskItem.state === 2){
+        return "已结束"
       }
 
+      if(data.taskItem.join_state === 0){
+        return "未开始"
+      }     
+
       // 正常参与任务
       return TASK_TYPE_TEXT[data.taskBelongType] || "去参与"
     },
 
     // 奖励内容
     rewardText(data){
-      const { reward_type, reward_value } = data.listType === LIST_TYPE.REWARD?data.taskItem.live_task:data.taskItem
-      return `+${reward_value} ${reward_type===1?'积分':'优惠券'}`
+      const { reward_type, reward_value } = data.taskItem
+      return `+${reward_type===1?reward_value:1} ${reward_type===1?'积分':'优惠券'}`
     },
     
     // 奖励图标
@@ -151,16 +171,27 @@ Component({
       return `${hours>0?hours+'小时':''}${remainingMinutes>0?remainingMinutes+'分钟':''}`
     },
     btnClick(){
+      const { reward_type } = this.data.taskItem
       if(this.data.btnText === TASK_TYPE_TEXT[2]){
         // 去评论
+        this.triggerEvent("btnClick","toComment")
+        return
+      }else if(this.data.btnText === TASK_TYPE_TEXT[3]){
+        // 去转发
+        this.triggerEvent("btnClick","toShare")
+        return
+      }else if(this.data.btnText === "去使用"){
+        // 去使用
         this.triggerEvent("btnClick",{
-          data: "toComment"
+          type:"reward",
+          reward_type
         })
         return
-      }else if(this.data.btnText === TASK_TYPE_TEXT[3]){
+      }else if(this.data.btnText === "领奖励"){
         // 去转发
         this.triggerEvent("btnClick",{
-          data: "toShare"
+          type:"toRetry",
+          taskBelongType: taskType[this.data.taskBelongType] 
         })
         return
       }

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

@@ -31,8 +31,11 @@ $deviceWidth: 750;
   &.radius{
     border-radius: vmin(16);
   }
+  &.mb{
+    margin-bottom: vmin(24);
+  }
   .left{
-    max-width: vmin(462);
+    max-width: vmin(485);
     .first{
       line-height: vmin(40);
       display: flex;
@@ -41,6 +44,9 @@ $deviceWidth: 750;
         font-size: vmin(28);
         font-weight: 500;
         color: #333333;
+        word-wrap: break-word;
+        word-break: break-all;
+        max-width: vmin(290);
       }
       .reward{
         margin-left: vmin(16);
@@ -54,6 +60,8 @@ $deviceWidth: 750;
         }
         .reward-text{
           margin-left: vmin(8);
+          word-wrap: break-word;
+        word-break: break-all;
         }
       }
     }

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

@@ -1,7 +1,7 @@
 <wxs src="./index.wxs" module="filter" />
 
 <view
-  class="item-box {{lineClass?'line-class':''}} {{listType === 'error' && itemIndex === 0?'bg-change':''}} {{isRadius?'radius':''}}"
+  class="item-box {{lineClass?'line-class':''}} {{listType === 'error' && itemIndex === 0?'bg-change':''}} {{isRadius?'radius':''}} {{isMb?'mb':''}}"
 >
   <!-- 左侧任务详情 -->
   <view class="left">
@@ -22,7 +22,7 @@
     <view
       class="time"
       wx:if="{{listType === 'task' || listType === 'error'}}"
-    >任务时间：{{taskItem.start_at}} 至 {{taskItem.end_at}}</view>
+    >任务时间：{{taskItem.show_start_at}} 至 {{taskItem.show_end_at}}</view>
 
     <view class="time" wx:if="{{listType === 'reward'}}">获得方式：{{ taskTitle }}</view>
 
@@ -31,13 +31,13 @@
     <!-- 观看剩余时间 -->
     <view
       class="residue-time"
-      wx:if="{{taskBelongType === 1 && listType === 'task' && taskItem.residue_time}}"
-    >再观看 {{filter.secondsToMinutes(taskItem.residue_time)}}分钟 获得奖励</view>
+      wx:if="{{taskItem.task_type === 1 && listType === 'task' && taskItem.join_state === 1 && taskItem.residue_time && taskItem.state !==2}}"
+    >{{taskItem.residue_time > 60 ? '再观看 '+ filter.secondsToMinutes(taskItem.residue_time) + '分钟 '+ '获得奖励':'即将获得奖励'}}</view>
   </view>
 
   <!-- 右侧按钮 -->
   <view
-    class="btn {{listType === 'reward'?'reward-btn':''}} {{listType==='task' && (taskItem.join_state === 2 || taskItem.join_state === 3 || taskItem.join_state === 0)?'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':''}}"
     catch:tap="btnClick"
   >{{btnText}}</view>
 </view>