xiaoe_mp_npm 1.0.46 → 1.0.47

package/miniprogram_dist/ConfirmOrder/components/Header/index.wxss

@@ -8,6 +8,7 @@
   position: sticky;
   top: 0;
   left: 0;
+  border-radius: 24rpx 24rpx 0 0 !important;
   background-color: #ffffff;
 }
 .header-content .header-back {

package/miniprogram_dist/ConfirmOrder/components/OrderBubble/index.js

@@ -0,0 +1,247 @@
+const computedBehavior = require('miniprogram-computed').behavior
+import { getOrderBarrage } from '../../../common/api/liveGoodsList'
+
+const TYPE_MAP = {
+  LOOKING_AT: 'looking_at',
+  REPURCHASE: 'repurchase',
+  HOT_SALES: 'hot_sales',
+  RETURN_GOODS: 'return_goods',
+}
+const INTERVAL_TIME = 3000 // 单次动画间隔时间
+const DURATION_TIME = 2500 // 动画总时间
+const DEFAULT_ANIMATION_TIME = 400 // 动画时间
+
+Component({
+  behaviors: [computedBehavior],
+  properties: {
+    aliveInfo: {
+      type: Object,
+      value: {}
+    },
+    baseInfoQuery: {
+      type: Object,
+      value: {
+        id: "SPU_ENT_1729059559e6mMMc9fTL4Gq",
+        spu_id: "SPU_ENT_1729059559e6mMMc9fTL4Gq",
+        resource_type: 21, 
+        resource_id: "g_670f5ae705e71_mJ3uBJF424",
+        spu_type: "ENT",
+        sku: "SKU_ENT_17290595593NTuSgczj9",
+        isCollectCoupons: true,
+        count: 1,
+        isAlive: 1,
+        aliveId: 'l_670f5b28e4b0694c94ebec6f'
+      }
+    },
+    isShowViewCount: {
+      type: Boolean,
+      value: false,
+    },
+    // 区分商品变化处理
+    goodsId: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    isInit: false,
+    bubbleList: [], // 气泡数组
+    currentBubbleIndex: 0,
+    bubbleInterval: null,
+    animationTimer: null,
+    orderAnimationData: {},
+    snap_up_nums: 0,
+    sales: 0,
+    repurchase_count: 0,
+    alipay_insure_eligible: null,
+    resourceType: null
+  },
+  lifetimes: {
+    attached() {
+      setTimeout(() => {
+        this.handleInit()
+      }, 1500)
+    },
+  },
+  computed: {
+    // 爆卖
+    displaySalesMessage(data) {
+      const hotSalesNum = data.sales;
+      const thresholds = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];
+      let maxThreshold = thresholds[0];
+      for (let threshold of thresholds) {
+          if (hotSalesNum >= threshold) {
+              maxThreshold = threshold; // 更新最大阈值
+          }
+      }
+        return `爆卖 ${maxThreshold}+ 件`;
+    },
+    orderBubbleMap(data) {
+      return {
+        [TYPE_MAP.LOOKING_AT]: {
+          icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/m7czx1m70ckd.png',
+          txt: `${data.snap_up_nums} 人正在看`,
+        },
+        [TYPE_MAP.HOT_SALES]: {
+          icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/m7czx1lz0b1a.png',
+          txt: data.displaySalesMessage,
+        },
+        [TYPE_MAP.REPURCHASE]: {
+          icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/m7czx1m60wex.png',
+          txt: `超 ${data.repurchase_count} 用户回购`,
+        },
+        // [TYPE_MAP.RETURN_GOODS]: {
+        //   icon: 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/m7czx1m50afi.png',
+        //   txt: '退货包运费',
+        // },
+      }
+    }
+  },
+  watch: {
+    goodsId() {
+      if (!this.data.initialized) return
+      this.handleInitGood()
+    },
+  },
+  methods: {
+    handleInitGood() {
+      this.resetAll(() => {
+        this.handleInit()
+      })
+    },
+    handleInit() {
+      console.log("this.properties.baseInfoQuery;", this.properties.baseInfoQuery)
+      let bubbleList = []
+      const { app_id, user_id, alive_id } = this.properties.aliveInfo;
+      const { spu_type, spu_id, resource_type, distributionPattern } = this.properties.baseInfoQuery;
+      const params = { app_id, user_id, alive_id, spu_type, spu_id }
+      getOrderBarrage(params).then(res => {
+        // 弹幕开关是否开启
+        if (res.data.code === 0 && res.data.data?.state === true) {
+          const { snap_up_nums, sales, repurchase_count, alipay_insure_eligible } = res.data.data
+          this.setData({
+            snap_up_nums ,
+            sales,
+            repurchase_count,
+            alipay_insure_eligible,
+          })
+
+          // 正在看 观看配置开启即可
+          if (this.properties.isShowViewCount && +snap_up_nums > 0) {
+            bubbleList.push(this.data.orderBubbleMap[TYPE_MAP.LOOKING_AT])
+          }
+          // 超出1000就展示爆卖
+          if (this.data.sales > 1000) {
+            bubbleList.push(this.data.orderBubbleMap[TYPE_MAP.HOT_SALES])
+          }
+          // 超出100 展示回购
+          if (this.data.repurchase_count >= 100) {
+            bubbleList.push(this.data.orderBubbleMap[TYPE_MAP.REPURCHASE])
+          }
+
+          // 退货包运费
+          // if (this.data.alipay_insure_eligible && resource_type === 21 && [-1, 1].includes(distributionPattern)) {
+          //   bubbleList.push(this.data.orderBubbleMap[TYPE_MAP.RETURN_GOODS])
+          // }
+
+          this.setData({
+            bubbleList,
+          })
+
+          if (bubbleList.length <= 0) {
+            this.resetAll()
+            return
+          }
+          if (bubbleList.length > 1) {
+            this.startBubbleRotation()
+          } else {
+            this.displayBubble(bubbleList[0])
+          }
+        }
+      }).catch(err => {
+        this.resetAll()
+      })
+    },
+    startBubbleRotation() {
+      this.displayBubble(this.data.bubbleList[this.data.currentBubbleIndex])
+      let bubbleInterval = setInterval(() => {
+        this.setData({
+          currentBubbleIndex: (this.data.currentBubbleIndex + 1) % this.data.bubbleList.length,
+        })
+        this.displayBubble(this.data.bubbleList[this.data.currentBubbleIndex])
+      }, INTERVAL_TIME)
+      this.setData({
+        bubbleInterval,
+      })
+    },
+    displayBubble(bubble) {
+      this.setData({
+        bubbleIcon: bubble.icon,
+        bubbleDesc: bubble.txt
+      })
+      this.handleInitAnimation()
+    },
+    handleInitAnimation() {
+      if (!this.data.isInit) {
+        this.setData({
+          isInit: true,
+        })
+      }
+      const animation = wx.createAnimation({
+        duration: DEFAULT_ANIMATION_TIME,
+        timingFunction: 'ease',
+      })
+      animation.translateY(-30).opacity(1).step();
+      this.setData({
+        orderAnimationData: animation.export(),
+      });
+
+      if (this.data.bubbleList.length > 1) {
+        let animationTimer = setTimeout(() => {
+          const slideOutAnimation = wx.createAnimation({
+            duration: DEFAULT_ANIMATION_TIME,
+            timingFunction: 'ease',
+          })
+          slideOutAnimation.translateY(-35).opacity(0).step();
+          this.setData({
+            orderAnimationData: slideOutAnimation.export(),
+          });
+  
+          setTimeout(() => {
+            const resetAnimation = wx.createAnimation({
+              duration: 0,
+              timingFunction: 'ease',
+            })
+            resetAnimation.translateY(0).opacity(0).step() // 恢复到初始位置
+            this.setData({
+              orderAnimationData: resetAnimation.export(),
+            })
+          }, DEFAULT_ANIMATION_TIME + 20)
+  
+        }, DURATION_TIME);
+        this.setData({
+          animationTimer
+        })
+      }
+    },
+    resetAll(cb = () => {}) {
+      clearInterval(this.data.bubbleInterval)
+      clearTimeout(this.data.animationTimer)
+      this.setData(
+        {
+          bubbleInterval: null,
+          animationTimer: null,
+          showBubble: false,
+          currentBubbleIndex: 0,
+        },
+        () => {
+          cb()
+        },
+      )
+    },
+    detached() {
+      clearInterval(this.data.bubbleInterval)
+      clearTimeout(this.data.animationTimer)
+    },
+  },
+})

package/miniprogram_dist/ConfirmOrder/components/OrderBubble/index.json

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

package/miniprogram_dist/ConfirmOrder/components/OrderBubble/index.scss

@@ -0,0 +1,57 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin order-bubble {
+  position: absolute;
+  left: vmin(22);
+  width: auto;
+  opacity: 1;
+  transform: translateY(vmin(-56));
+  
+  .order-bubble-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: vmin(28);
+    color: rgba(255, 255, 255, 1);
+    font-weight: 700;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: vmin(50);
+    padding: vmin(4) vmin(16);
+  }
+
+  .order-info-img {
+    width: vmin(40);
+    height: vmin(40);
+  }
+}
+
+.order-bubble {
+  @include order-bubble
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .order-bubble {
+      @include order-bubble
+  }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .order-bubble {
+    @include order-bubble;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .order-bubble {
+      @include order-bubble;
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/OrderBubble/index.wxml

@@ -0,0 +1,10 @@
+<view   
+  class="order-bubble" 
+  wx:if="{{ isInit }}" 
+  animation="{{ orderAnimationData }}"
+>
+  <view class="order-bubble-info">
+    <image class="order-info-img" src="{{ bubbleIcon }}" />
+    <text class="order-info-desc">{{ bubbleDesc }}</text>
+  </view>
+</view>

package/miniprogram_dist/ConfirmOrder/components/OrderBubble/index.wxss

@@ -0,0 +1,94 @@
+.order-bubble {
+  position: absolute;
+  left: 2.93333vmin;
+  width: auto;
+  opacity: 1;
+  transform: translateY(-7.46667vmin);
+}
+.order-bubble .order-bubble-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.73333vmin;
+  color: #fff;
+  font-weight: 700;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 6.66667vmin;
+  padding: 0.53333vmin 2.13333vmin;
+}
+.order-bubble .order-info-img {
+  width: 5.33333vmin;
+  height: 5.33333vmin;
+}
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .order-bubble {
+    position: absolute;
+    left: 1.43229vmin;
+    width: auto;
+    opacity: 1;
+    transform: translateY(-3.64583vmin);
+  }
+  .order-bubble .order-bubble-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.82292vmin;
+    color: #fff;
+    font-weight: 700;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3.25521vmin;
+    padding: 0.26042vmin 1.04167vmin;
+  }
+  .order-bubble .order-info-img {
+    width: 2.60417vmin;
+    height: 2.60417vmin;
+  }
+}
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  .order-bubble {
+    position: absolute;
+    left: 1.74603vmin;
+    width: auto;
+    opacity: 1;
+    transform: translateY(-4.44444vmin);
+  }
+  .order-bubble .order-bubble-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.22222vmin;
+    color: #fff;
+    font-weight: 700;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3.96825vmin;
+    padding: 0.31746vmin 1.26984vmin;
+  }
+  .order-bubble .order-info-img {
+    width: 3.1746vmin;
+    height: 3.1746vmin;
+  }
+}
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .order-bubble {
+    position: absolute;
+    left: 1.43229vmin;
+    width: auto;
+    opacity: 1;
+    transform: translateY(-3.64583vmin);
+  }
+  .order-bubble .order-bubble-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.82292vmin;
+    color: #fff;
+    font-weight: 700;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3.25521vmin;
+    padding: 0.26042vmin 1.04167vmin;
+  }
+  .order-bubble .order-info-img {
+    width: 2.60417vmin;
+    height: 2.60417vmin;
+  }
+}

package/miniprogram_dist/ConfirmOrder/index.js

@@ -259,7 +259,7 @@ Component({
   },
   computed:{
     customStyle(properties){
-      return properties.popPosition === "bottom" ? "height: 80%;background: rgba(245,245,245,1)" : "height: 100%;width: 100vmin;background: rgba(245,245,245,1)"
+      return properties.popPosition === "bottom" ? "height: 80%;background: rgba(245,245,245,1);overflow-y: unset !important" : "height: 100%;width: 100vmin;background: rgba(245,245,245,1);"
     },
   }
-})
+})

package/miniprogram_dist/ConfirmOrder/index.json

@@ -7,4 +7,4 @@
     "CustomPopup": "../CustomPopup",
     "van-dialog": "@vant/weapp/dialog/index"
   }
-}
+}

package/miniprogram_dist/ConfirmOrder/index.wxml

@@ -1,5 +1,5 @@
 <!--src/ConfirmOrder/index.wxml-->
-<view class="confirm-order">
+<view class="confirm-order" style="{{ popPosition === 'bottom' ? 'position: relative;' : ''  }}">
   <view>{{countdown}}</view>
   <button bindtap="openPopup">显示确认订单</button>
   <van-dialog id="van-dialog" />
@@ -20,7 +20,13 @@
     z-index="{{zIndex}}"
     overlay="{{popPosition === 'right' ? false : true}}"
     hasHeader="{{showHeader}}"
+    popupHeaderStyle="{{ popPosition === 'bottom' ? popupHeaderStyle : '' }}"
+    contentStyle="{{ popPosition === 'bottom' ? contentStyle : '' }}"
   >
+    <!-- 气泡 -->
+    <view slot="custom" wx:if="{{ showOrderBubble && showPopup }}">
+      <order-bubble id="orderBubble" aliveInfo="{{ aliveInfo }}" baseInfoQuery="{{ baseInfoQuery }}" isShowViewCount="{{ isShowViewCount }}" />
+    </view>
     <view slot="header" wx:if="{{ showPopup }}" >
       <Header id="header" bindonClose="onClose" bind:backClick="backClick" wx:if="{{ showPopup }}" showClose="{{showClose}}" isFullscreen="{{ popPosition === 'right' }}" zIndex="{{zIndex}}"></Header>
     </view>
@@ -46,4 +52,4 @@
       </ConfirmOrderContent>
     </view>
   </CustomPopup>
-</view>
+</view>