xiaoe_mp_npm 1.0.0-live6 → 1.0.0-live8

package/miniprogram_dist/Task/TaskBubble/index.js

@@ -1,9 +1,11 @@
+const computedBehavior = require('miniprogram-computed').behavior
 Component({
+  behaviors: [computedBehavior],
   /**
    * 组件的属性列表
    */
   properties: {
-    messageContent: {
+    taskMsg: {
       type: Object,
       value: {},
     },
@@ -14,6 +16,25 @@ 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){
+        return data.taskMsg.live_task?.task_type === 1? this.convertMinutesToHoursAndMinutes(data.taskMsg.live_task?.reward_value) : ['', '发表评论', '转发直播间', '完成点赞'][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 +43,12 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    // 气泡点击事件
+    bubbleClick(){
+      this.triggerEvent("bubbleClick")
+    },
+  
+    // 显示气泡动画
     showBubble() {
       const animation = wx.createAnimation({
         duration: 1500,
@@ -38,6 +65,7 @@ Component({
       }, 1500)
     },
 
+    // 隐藏气泡动画
     hideBubble() {
       const animation = wx.createAnimation({
         duration: 1500,
@@ -56,6 +84,7 @@ Component({
       }, 1500) // 设置延时与动画时长一致
     },
 
+    // 重置气泡位置
     restoreElement() {
       const animation = wx.createAnimation({
         duration: 0, // 立即执行，无过渡效果
@@ -67,5 +96,22 @@ Component({
         animationData: animation.export(),
       })
     },
+
+    convertMinutesToHoursAndMinutes(minutes) {
+      if (isNaN(minutes) || minutes < 0) {
+          return;
+      }
+
+      const hours = Math.floor(minutes / 60);
+      const remainingMinutes = minutes % 60;
+
+      if (hours === 0) {
+          return `达${remainingMinutes}分钟`;
+      } else if (remainingMinutes === 0) {
+          return `达${hours}小时`;
+      } else {
+          return `达${hours}小时${remainingMinutes}分钟`;
+      }
+  },
   },
 })

package/miniprogram_dist/Task/TaskBubble/index.scss

@@ -29,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,27 +1,25 @@
-<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">
+  <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>

package/miniprogram_dist/Task/TaskBubble/index.wxss

@@ -24,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;
@@ -119,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;
@@ -215,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

@@ -6,7 +6,11 @@ Component({
     aliveMode:{
       type: Number,
       value: 1
-    }
+    },
+    iconText:{
+      type: String,
+      value: '得奖励'
+    },
   },
 
   /**

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 {{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/taskReceivePopup/coupon/index.js

@@ -1,4 +1,6 @@
+const computedBehavior = require('miniprogram-computed').behavior
 Component({
+  behaviors: [computedBehavior],
   /**
    * 组件的属性列表
    */
@@ -12,12 +14,29 @@ Component({
       type: Boolean,
       value: false,
     },
+    rewardData: {
+      type: Object,
+      value: {},
+    }
   },
 
   /**
    * 组件的初始数据
    */
   data: {},
+  computed: {
+    receiveCouponNowMsg(data){
+        return data.rewardData.coupon_list[0]
+    },
+    isShowPoint(data) {
+        let tempPrice = data.receiveCouponNowMsg.price;
+        if (tempPrice % 100 == 0) {
+            return false;
+        } else {
+            return true;
+        }
+    },
+},
 
   /**
    * 组件的方法列表

package/miniprogram_dist/Task/taskReceivePopup/coupon/index.scss

@@ -28,12 +28,20 @@ $deviceWidth: 750;
               color: #fd2b54;
               font-size: vmin(40);
               line-height: vmin(40);
+              margin-right: vmin(4);
           }
           .boldIcon {
               color: #fd2b54;
               font-size: vmin(80);
               line-height: vmin(80);
           }
+          .discountFont{
+            color: #fd2b54;
+            font-size: vmin(32);
+            line-height: vmin(32);
+            margin-left: vmin(4);
+            font-weight: 600;
+          }
       }
       &__content-describe {
           color: #333333;

package/miniprogram_dist/Task/taskReceivePopup/coupon/index.wxml

@@ -1,3 +1,4 @@
+<wxs src="./index.wxs" module="couponReceivePopup" />
 <van-popup
   show="{{showCouponReceivePopup}}"
   round
@@ -9,39 +10,41 @@
     <view class="receive-container">
       <view class="receive-container__content">
         <view class="receive-container__content-price">
-          <text class="smallIcon">¥</text>
-          <text class="boldIcon">6257</text>
-          <text class="smallIcon">.50</text>
+          <view wx:if="{{receiveCouponNowMsg.discount_way === 1}}">
+            <text class="smallIcon">¥</text>
+            <text class="boldIcon">{{ couponReceivePopup.filterPrice(receiveCouponNowMsg.price) }}</text>
+            <text class="smallIcon" wx:if="{{isShowPoint}}">.{{ couponReceivePopup.fixedFont(receiveCouponNowMsg.price) }}</text>
+          </view>
+          <text wx:if="{{receiveCouponNowMsg.discount_way === 2}}">
+            <text class="boldIcon">{{ couponReceivePopup.filterPrice(receiveCouponNowMsg.discount_percent, false) }}</text>
+          <text class="boldIcon" wx:if="{{receiveCouponNowMsg.discount_percent % 10 !== 0}}">.{{ couponReceivePopup.fixedFont(receiveCouponNowMsg.discount_percent, false) }}</text>
+          <text class="discountFont">折</text>
+          </text>
         </view>
         <view class="receive-container__content-describe">
           <!-- 无门槛 -->
-          <!-- <text v-if="receiveCouponNowMsg.require_price == 0">{{ $t("coupon.no_threshold") }}</text> -->
-          <view>无门槛</view>
+          <view wx:if="{{receiveCouponNowMsg.require_price == 0}}">无门槛</view>
           <!-- 满xx元可用 -->
-          <!-- <text v-else>{{
-                        $t("coupon.over_available", { num: receiveCouponNowMsg.require_price / 100 })
-                    }}</text> -->
+          <view wx:else>满{{ receiveCouponNowMsg.require_price / 100 }}元可用</view>
           <!-- 全部商品可用 -->
-          <!-- <text v-if="receiveCouponNowMsg.type == 1">{{ $t("coupon.all_available") }}</text> -->
+          <view wx:if="{{receiveCouponNowMsg.type == 1}}">全部商品可用</view>
           <!-- 部分商品可用 -->
-          <!-- <text v-else>{{ $t("coupon.part_available") }}</text> -->
+          <view wx:else>部分商品可用</view>
           <!-- 领取次日x天内有效 / 自领取起x天内有效-->
-          <!-- <text v-if="+receiveCouponNowMsg.valid_day">{{
-                        receiveCouponNowMsg.valid_after == 1
-                            ? $t("coupon.receive_next", { num: receiveCouponNowMsg.valid_day })
-                            : $t("coupon.since_receive", { num: receiveCouponNowMsg.valid_day })
-                    }}</text> -->
-          <view>限指定商品使用</view>
+          <view wx:if="{{receiveCouponNowMsg.valid_day}}">
+            <view wx:if="{{receiveCouponNowMsg.valid_after == 1}}">领取次日{{receiveCouponNowMsg.valid_day}}天内有效</view>
+            <view wx:else>自领取起{{receiveCouponNowMsg.valid_day}}天内有效</view>
+          </view>
           <!-- 有效期至 -->
-          <view>
-            有效期至：2023-08-31 16:00
+          <view wx:if="{{!receiveCouponNowMsg.valid_day && receiveCouponNowMsg.valid_at && receiveCouponNowMsg.invalid_at}}">
+            有效期至：{{ couponReceivePopup.formatDateToMinte(receiveCouponNowMsg.invalid_at) }}
           </view>
         </view>
       </view>
     </view>
     <image
       src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lmimm9mb0q88.png"
-      alt=""
+      alt
       class="receive-container__close"
       catchtap="closePopup"
     />

package/miniprogram_dist/Task/taskReceivePopup/coupon/index.wxs

@@ -0,0 +1,48 @@
+/*
+  使用目的：
+    这里定义的函数，用在页面中, 类似于 Vue 里的 computed
+
+  注意点：
+    1. wxs中不支持 let , const
+    2. 导出的时候，即使 key 和 value 相同， 也不能简写。
+*/
+
+// 做数值过滤，value-要处理的数字 ToFix2-默认保留两位，默认转分转元，除以100。其他除以10(如折扣)
+var filterPrice = function (value, ToFix2 = true) {
+  var result = (value / 100).toString();
+  if (!ToFix2) {
+      result = (value / 10).toString();
+  }
+  if (result.indexOf(".") > 0) {
+    return result.split(".")[0];
+  } else {
+    return result;
+  }
+}
+
+// 小数点后的样式补充 ToFix2-默认保留2位,其他保留1位
+var fixedFont = function (value, ToFix2 = true) {
+  if (value) {
+    var result = (value / 100).toString();
+    if (!ToFix2) {
+      result = (value / 10).toString();
+    }
+    if (result.toString().indexOf(".") > -1) {
+      return result.split(".")[1];
+    } else {
+      return "";
+    }
+  }
+}
+
+// 时间精确到分
+var formatDateToMinte = function (date) {
+  var lastIndex = date.lastIndexOf(":");
+  return date.substring(0, lastIndex).replace(getRegExp('-', 'g'), ".");
+}
+
+module.exports = {
+  filterPrice: filterPrice,
+  fixedFont: fixedFont,
+  formatDateToMinte: formatDateToMinte
+}

package/miniprogram_dist/Task/taskReceivePopup/coupon/index.wxss

@@ -23,12 +23,20 @@
   color: #fd2b54;
   font-size: 5.33333vmin;
   line-height: 5.33333vmin;
+  margin-right: 0.53333vmin;
 }
 .coupon-receive-popup .receive-container__content-price .boldIcon {
   color: #fd2b54;
   font-size: 10.66667vmin;
   line-height: 10.66667vmin;
 }
+.coupon-receive-popup .receive-container__content-price .discountFont {
+  color: #fd2b54;
+  font-size: 4.26667vmin;
+  line-height: 4.26667vmin;
+  margin-left: 0.53333vmin;
+  font-weight: 600;
+}
 .coupon-receive-popup .receive-container__content-describe {
   color: #333333;
   font-size: 3.73333vmin;
@@ -77,12 +85,20 @@
     color: #fd2b54;
     font-size: 2.60417vmin;
     line-height: 2.60417vmin;
+    margin-right: 0.26042vmin;
   }
   .coupon-receive-popup .receive-container__content-price .boldIcon {
     color: #fd2b54;
     font-size: 5.20833vmin;
     line-height: 5.20833vmin;
   }
+  .coupon-receive-popup .receive-container__content-price .discountFont {
+    color: #fd2b54;
+    font-size: 2.08333vmin;
+    line-height: 2.08333vmin;
+    margin-left: 0.26042vmin;
+    font-weight: 600;
+  }
   .coupon-receive-popup .receive-container__content-describe {
     color: #333333;
     font-size: 1.82292vmin;
@@ -132,12 +148,20 @@
     color: #fd2b54;
     font-size: 2.60417vmin;
     line-height: 2.60417vmin;
+    margin-right: 0.26042vmin;
   }
   .coupon-receive-popup .receive-container__content-price .boldIcon {
     color: #fd2b54;
     font-size: 5.20833vmin;
     line-height: 5.20833vmin;
   }
+  .coupon-receive-popup .receive-container__content-price .discountFont {
+    color: #fd2b54;
+    font-size: 2.08333vmin;
+    line-height: 2.08333vmin;
+    margin-left: 0.26042vmin;
+    font-weight: 600;
+  }
   .coupon-receive-popup .receive-container__content-describe {
     color: #333333;
     font-size: 1.82292vmin;

package/miniprogram_dist/Task/taskReceivePopup/index.js

@@ -8,14 +8,10 @@ Component({
       type: Boolean,
       value: false,
     },
-    showCouponReceivePopup: {
-      type: Boolean,
-      value: false,
-    },
-    showIntegralReceivePopup: {
-      type: Boolean,
-      value: false,
-    },
+    rewardData: {
+      type: Object,
+      value: {},
+    }
   },
 
   /**

package/miniprogram_dist/Task/taskReceivePopup/index.wxml

@@ -1,15 +1,17 @@
 <view>
-  <!-- 优惠券奖励弹窗 -->
-  <coupon-popup
-    showCouponReceivePopup="{{showCouponReceivePopup}}"
-    isFullScreen="{{isFullcreen}}"
-    bind:close="handleClose"
-  ></coupon-popup>
   <!-- 积分奖励弹窗 -->
   <integral-popup
-    showIntegralReceivePopup="{{showIntegralReceivePopup}}"
+    rewardData="{{rewardData}}"
+    showIntegralReceivePopup="{{rewardData.live_task.reward_type === 1}}"
     isFullScreen="{{isFullScreen}}"
     bind:close="handleClose"
   ></integral-popup>
+  <!-- 优惠券奖励弹窗 -->
+  <coupon-popup
+    rewardData="{{rewardData}}"
+    showCouponReceivePopup="{{rewardData.live_task.reward_type === 2}}"
+    isFullScreen="{{isFullScreen}}"
+    bind:close="handleClose"
+  ></coupon-popup>
 </view>
 

package/miniprogram_dist/Task/taskReceivePopup/integral/index.js

@@ -12,6 +12,10 @@ Component({
       type: Boolean,
       value: false,
     },
+    rewardData: {
+      type: Object,
+      value: {},
+    }
   },
 
   /**

package/miniprogram_dist/Task/taskReceivePopup/integral/index.wxml

@@ -7,7 +7,7 @@
 >
   <view class="receive-container">
     <view class="receive-container__content-number">
-      +6257
+      +{{rewardData.live_task.reward_value}}
     </view>
   </view>
   <view class="receive-container__btn" catchtap="closePopup">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiaoe_mp_npm",
-  "version": "1.0.0-live6",
+  "version": "1.0.0-live8",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "scripts": {