xiaoe_mp_npm 0.5.48 → 1.0.0-live10

package/miniprogram_dist/GoodsItem/index.json

@@ -1,6 +1,6 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-switch": "@vant/weapp/switch/index"
-  }
-}
+{
+  "component": true,
+  "usingComponents": {
+    "van-switch": "@vant/weapp/switch/index"
+  }
+}

package/miniprogram_dist/Task/TaskBubble/index.js

@@ -0,0 +1,117 @@
+const computedBehavior = require('miniprogram-computed').behavior
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    taskMsg: {
+      type: Object,
+      value: {},
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  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: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 气泡点击事件
+    bubbleClick(){
+      this.triggerEvent("bubbleClick")
+    },
+  
+    // 显示气泡动画
+    showBubble() {
+      const animation = wx.createAnimation({
+        duration: 1500,
+        timingFunction: 'ease',
+      })
+
+      animation.translateX(0).step()
+
+      this.setData({
+        animationData: animation.export(),
+      })
+      setTimeout(() => {
+        this.triggerEvent('afterEnter')
+      }, 1500)
+    },
+
+    // 隐藏气泡动画
+    hideBubble() {
+      const animation = wx.createAnimation({
+        duration: 1500,
+        timingFunction: 'ease',
+      })
+
+      animation.opacity(0).step()
+
+      this.setData({
+        animationData: animation.export(),
+      })
+      // 在动画结束后调用还原元素位置的函数
+      setTimeout(() => {
+        this.restoreElement()
+        this.triggerEvent('afterLeave')
+      }, 1500) // 设置延时与动画时长一致
+    },
+
+    // 重置气泡位置
+    restoreElement() {
+      const animation = wx.createAnimation({
+        duration: 0, // 立即执行，无过渡效果
+      })
+
+      animation.translateX(-500).opacity(1).step()
+
+      this.setData({
+        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.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/Task/TaskBubble/index.scss

@@ -0,0 +1,125 @@
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+$deviceWidth: 750;
+
+@mixin barrage-container {
+  color: #fff;
+  font-size: vmin(20);
+  .barrage-wrap {
+    display: flex;
+    .barrage-item {
+      position: relative;
+      background: linear-gradient(270deg, #ff781f00 0%, #ff8619c7 21.42%, #ff9a0feb 46.71%, #FC0 100%);
+      height: vmin(64);
+      font-size: vmin(24);
+      line-height: vmin(64);
+      border-radius: vmin(92);
+      transition: 0.3s;
+      transform: translateX(vmin(-500));
+
+      .barrage-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .task-completion-icon {
+        width: vmin(48);
+        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-right: vmin(8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        view {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      .prize-icon {
+        width: vmin(56);
+        height: vmin(56);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 vmin(8);
+      }
+      .prize-num {
+        color: #FFF5CC;
+        font-weight: 500;
+        margin-right: vmin(8);
+      }
+      .right-arrow-icon{
+        height: vmin(40);
+        width: vmin(40);
+        margin-right: vmin(52);
+      }
+      &.barrage-item-show {
+        animation: taskFadeInLeft 1.5s both;
+      }
+      &.barrage-item-hide {
+        animation: taskFadeOut 1.5s both;
+      }
+    }
+    @keyframes taskFadeInLeft {
+      0% {
+        transform: translateX(vmin(-500));
+        opacity: 1;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    @keyframes taskFadeOut {
+      0% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 0;
+      }
+    }
+    @keyframes moveRight {
+      from {
+        transform: translateX(-100%);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.barrage-container {
+  @include barrage-container;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .barrage-container {
+    @include barrage-container;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .barrage-container {
+    @include barrage-container;
+  }
+}

package/miniprogram_dist/Task/TaskBubble/index.wxml

@@ -0,0 +1,27 @@
+<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>
+</view>
+

package/miniprogram_dist/Task/TaskBubble/index.wxss

@@ -0,0 +1,289 @@
+.barrage-container {
+  color: #fff;
+  font-size: 2.66667vmin;
+}
+.barrage-container .barrage-wrap {
+  display: flex;
+}
+.barrage-container .barrage-wrap .barrage-item {
+  position: relative;
+  background: linear-gradient(270deg, #ff781f00 0%, #ff8619c7 21.42%, #ff9a0feb 46.71%, #FC0 100%);
+  height: 8.53333vmin;
+  font-size: 3.2vmin;
+  line-height: 8.53333vmin;
+  border-radius: 12.26667vmin;
+  transition: 0.3s;
+  transform: translateX(-66.66667vmin);
+}
+.barrage-container .barrage-wrap .barrage-item .barrage-content {
+  display: flex;
+  align-items: center;
+}
+.barrage-container .barrage-wrap .barrage-item .task-completion-icon {
+  width: 6.4vmin;
+  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-right: 1.06667vmin;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.barrage-container .barrage-wrap .barrage-item .task-type view {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.barrage-container .barrage-wrap .barrage-item .prize-icon {
+  width: 7.46667vmin;
+  height: 7.46667vmin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 1.06667vmin;
+}
+.barrage-container .barrage-wrap .barrage-item .prize-num {
+  color: #FFF5CC;
+  font-weight: 500;
+  margin-right: 1.06667vmin;
+}
+.barrage-container .barrage-wrap .barrage-item .right-arrow-icon {
+  height: 5.33333vmin;
+  width: 5.33333vmin;
+  margin-right: 6.93333vmin;
+}
+.barrage-container .barrage-wrap .barrage-item.barrage-item-show {
+  animation: taskFadeInLeft 1.5s both;
+}
+.barrage-container .barrage-wrap .barrage-item.barrage-item-hide {
+  animation: taskFadeOut 1.5s both;
+}
+@keyframes taskFadeInLeft {
+  0% {
+    transform: translateX(-66.66667vmin);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes taskFadeOut {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+}
+@keyframes moveRight {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .barrage-container {
+    color: #fff;
+    font-size: 1.30208vmin;
+  }
+  .barrage-container .barrage-wrap {
+    display: flex;
+  }
+  .barrage-container .barrage-wrap .barrage-item {
+    position: relative;
+    background: linear-gradient(270deg, #ff781f00 0%, #ff8619c7 21.42%, #ff9a0feb 46.71%, #FC0 100%);
+    height: 4.16667vmin;
+    font-size: 1.5625vmin;
+    line-height: 4.16667vmin;
+    border-radius: 5.98958vmin;
+    transition: 0.3s;
+    transform: translateX(-32.55208vmin);
+  }
+  .barrage-container .barrage-wrap .barrage-item .barrage-content {
+    display: flex;
+    align-items: center;
+  }
+  .barrage-container .barrage-wrap .barrage-item .task-completion-icon {
+    width: 3.125vmin;
+    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-right: 0.52083vmin;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .barrage-container .barrage-wrap .barrage-item .task-type view {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .barrage-container .barrage-wrap .barrage-item .prize-icon {
+    width: 3.64583vmin;
+    height: 3.64583vmin;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0.52083vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item .prize-num {
+    color: #FFF5CC;
+    font-weight: 500;
+    margin-right: 0.52083vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item .right-arrow-icon {
+    height: 2.60417vmin;
+    width: 2.60417vmin;
+    margin-right: 3.38542vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item.barrage-item-show {
+    animation: taskFadeInLeft 1.5s both;
+  }
+  .barrage-container .barrage-wrap .barrage-item.barrage-item-hide {
+    animation: taskFadeOut 1.5s both;
+  }
+  @keyframes taskFadeInLeft {
+    0% {
+      transform: translateX(-32.55208vmin);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes taskFadeOut {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 0;
+    }
+  }
+  @keyframes moveRight {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .barrage-container {
+    color: #fff;
+    font-size: 1.30208vmin;
+  }
+  .barrage-container .barrage-wrap {
+    display: flex;
+  }
+  .barrage-container .barrage-wrap .barrage-item {
+    position: relative;
+    background: linear-gradient(270deg, #ff781f00 0%, #ff8619c7 21.42%, #ff9a0feb 46.71%, #FC0 100%);
+    height: 4.16667vmin;
+    font-size: 1.5625vmin;
+    line-height: 4.16667vmin;
+    border-radius: 5.98958vmin;
+    transition: 0.3s;
+    transform: translateX(-32.55208vmin);
+  }
+  .barrage-container .barrage-wrap .barrage-item .barrage-content {
+    display: flex;
+    align-items: center;
+  }
+  .barrage-container .barrage-wrap .barrage-item .task-completion-icon {
+    width: 3.125vmin;
+    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-right: 0.52083vmin;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .barrage-container .barrage-wrap .barrage-item .task-type view {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .barrage-container .barrage-wrap .barrage-item .prize-icon {
+    width: 3.64583vmin;
+    height: 3.64583vmin;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0.52083vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item .prize-num {
+    color: #FFF5CC;
+    font-weight: 500;
+    margin-right: 0.52083vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item .right-arrow-icon {
+    height: 2.60417vmin;
+    width: 2.60417vmin;
+    margin-right: 3.38542vmin;
+  }
+  .barrage-container .barrage-wrap .barrage-item.barrage-item-show {
+    animation: taskFadeInLeft 1.5s both;
+  }
+  .barrage-container .barrage-wrap .barrage-item.barrage-item-hide {
+    animation: taskFadeOut 1.5s both;
+  }
+  @keyframes taskFadeInLeft {
+    0% {
+      transform: translateX(-32.55208vmin);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes taskFadeOut {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 0;
+    }
+  }
+  @keyframes moveRight {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}

package/miniprogram_dist/Task/TaskIcon/index.js

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

package/miniprogram_dist/Task/TaskIcon/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/Task/TaskIcon/index.scss

@@ -0,0 +1,70 @@
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+$deviceWidth: 750;
+
+@mixin taskIcon {
+  z-index: 9;
+  box-sizing: border-box;
+  width: vmin(72);
+  height: vmin(72);
+  text-align: center;
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: vmin(16);
+  height: 100%;
+  border-radius: vmin(16);
+  margin: 0 vmin(32) vmin(24) 0;
+  pointer-events: auto;
+  .task-icon {
+      flex-shrink: 0;
+      display: block;
+      width: vmin(64);
+      height: vmin(64);
+      background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lopok62p0l77.png');
+      background-size: 100% 100%;
+  }
+  .task-text {
+      width: vmin(64);
+      height: vmin(24);
+      line-height: vmin(24);
+      border-radius: vmin(12);
+      font-size: vmin(16);
+      background: rgba($color: #000000, $alpha: 0.4);
+      color: #fff;
+  }
+  &.verticalStyle{
+    margin: 0;
+    background: rgba($color: #000000, $alpha: 0.2);
+    .task-text{
+      position: absolute;
+      bottom: vmin(-2);
+    }
+  }
+}
+
+.taskIcon {
+  @include taskIcon;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .taskIcon {
+    @include taskIcon;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .taskIcon {
+    @include taskIcon;
+  }
+}

package/miniprogram_dist/Task/TaskIcon/index.wxml

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