xiaoe_mp_npm 1.1.21 → 1.1.22-test02

package/src/ShoppingCartBubble/index.js

@@ -1,156 +1,336 @@
-const TYPE_MAP = {
-  BUYING: 1,
-  BUY_SUCCESS: 2,
-}
-const INTERVAL_TIME = 3000 // 单次动画间隔时间
-const DURATION_TIME = 2500 // 动画总时间
-const DEFAULT_ANIMATION_TIME = 400 // 动画时间
-
-import { getSensitiveState } from '../common/utils/index'
-import { getShoppingBarrage } from '../common/api/liveGoodsList'
-
-Component({
-  properties: {
-    aliveInfo: {
-      type: Object,
-      value: {}
-    },
-  },
-  data: {
-    goodsAnimationData: {},
-    bubbleList: [],
-    bubbleInterval: null,
-    animationTimer: null,
-    currentBubbleIndex: 0,
-    isInit: false
-  },
-  lifetimes: {
-    attached() {
-      setTimeout(() => {
-        this.handleInit()
-      }, 0)
-    },
-    detached() {
-      this.resetOptions()
-    },
-  },
-  methods: {
-    handleInit() {
-      const { alive_id, app_id, user_id} = this.properties.aliveInfo;
-      const params = {
-        alive_id,
-        app_id,
-        user_id
-      }
-      getShoppingBarrage(params, false).then(res => {
-        if (res.data.code === 0 && res.data.data.length > 0) {
-          this.setData({
-            bubbleList: res.data.data
-          })
-
-          if (this.data.bubbleList.length <= 0) {
-            this.resetOptions()
-            return
-          }
-    
-          if (this.data.bubbleList.length > 1) {
-            this.startBubbleRotation()
-          } else if (this.data.bubbleList.length === 1) {
-            this.displayBubble(this.data.bubbleList[0])
-          }
-        }
-      }).catch(err => {
-        this.resetOptions()
-        console.log(err)
-        return;
-      }) 
-    },
-    /**
-     * 启动一个定时器定期更新气泡
-     * 
-     * @method startBubbleRotation
-     * @memberof ShoppingCartBubble
-     * @instance
-     */
-    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({
-        bubbleUser: bubble.user_name,
-        bubbleDesc: bubble.goods_type === TYPE_MAP.BUYING ? '正在购买' : '购买了',
-        bubbleNum: bubble.order_weight,
-        bubbleSensitiveState: this.handleSensitiveState(bubble.user_id),
-      })
-      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({
-        goodsAnimationData: 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({
-          goodsAnimationData: slideOutAnimation.export(),
-        });
-
-        setTimeout(() => {
-          const resetAnimation = wx.createAnimation({
-            duration: 0,
-            timingFunction: 'ease',
-          })
-          resetAnimation.translateY(0).opacity(0).step() // 恢复到初始位置
-          this.setData({
-            goodsAnimationData: resetAnimation.export(),
-          })
-        }, DEFAULT_ANIMATION_TIME + 20)
-
-        }, DURATION_TIME);
-
-        this.setData({
-          animationTimer
-        })
-      }
-    },
-    resetOptions() {
-      this.setData({
-        isInit: false,
-      })
-      clearInterval(this.data.bubbleInterval)
-      clearTimeout(this.data.animationTimer)
-    },
-    // 昵称脱敏处理
-    handleSensitiveState(id) {
-      const userType = this.properties.aliveInfo.user_type
-      const isMeOrTeacher = this.properties.aliveInfo.user_id === id || userType
-      const isNeedPrivacy = !isMeOrTeacher && getSensitiveState(userType, this.properties.aliveInfo.alive_conf)
-      return isNeedPrivacy ? getSensitiveState(userType, this.properties.aliveInfo.alive_conf) : 0
-    },
-  },
-})
+const TYPE_MAP = {
+  BUYING: 1,
+  BUY_SUCCESS: 2,
+}
+const INTERVAL_TIME = 3000 // 单次动画间隔时间
+const DURATION_TIME = 2500 // 动画总时间
+const DEFAULT_ANIMATION_TIME = 400 // 动画时间
+
+import { getGoodsState } from '../common/api/liveGoodsList';
+import { getSensitiveState, rpxToVmin } from '../common/utils/index'
+const { utils } = require("live-mp-tools");
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  properties: {
+    aliveInfo: {
+      type: Object,
+      value: {}
+    },
+    hotSalesConf: {
+      type: Object,
+      value: {}
+    },
+    // 是否展示列表弹幕气泡
+    showShoppingCart: {
+      type: Boolean,
+      value: false
+    },
+  },
+  data: {
+    goodsAnimationData: {},
+    bubbleList: [], // 气泡展示数组
+    bubbleObj: {
+      '1': { goods_list: [] }, // 正在购买商品数组
+      '2': { goods_list: [] }, // 抢购了商品数组
+    }, // im数据获取气泡数据（含拼接操作
+    bubbleInterval: null,
+    animationTimer: null,
+    isInit: false,
+    bubbleItem: {
+      bubble_desc: '', // 描述 正在购买/抢购了
+      bubble_sensitive_state: '', // 敏感状态
+      resource_id: "",
+      spu_id: "",
+      target_url: "",
+      order_weight: 0,
+      goods_name: "",
+      img_url: "",
+      nums: 0,
+      goods_type: 1,
+      user_id: "",
+      wx_nickname: ""
+    },
+    imageRadius: rpxToVmin(12),
+  },
+  computed: {
+    filterSrc(data) {
+      return utils.replaceCDN(data.bubbleItem.img_url, '?imageMogr2/thumbnail/400x400>/ignore-error/1')
+    },
+    params_url(data) {
+      // 后端规则拼接参数规则：$ => ?、@ => &
+      // 商品带货链接需拼接多一个aliveId
+      const aliveId = data.aliveInfo.alive_id
+      if (!data.bubbleItem.target_url) return
+      const url = data?.bubbleItem?.target_url.replaceAll('&', "@")
+      const link = url.replaceAll('?', "$")
+      const pages = getCurrentPages();
+      const currentPage = pages[pages.length - 1];
+      const page_path = `/${currentPage.route}`;
+      // 判断后端返回链接是否已拼接（如：?type= ）参数，兼容 aliveId 拼接符
+      const symbol = url.indexOf('?') !== -1 ? '@' : '$'
+      return `${page_path}?type=1&link=${link}${symbol}aliveId=${aliveId}&title=${data.bubbleItem.goods_name}`
+    },
+  },
+  lifetimes: {
+    attached() {
+      // 初始化商品动画数据
+      const resetAnimation = wx.createAnimation({
+        duration: 0,
+        timingFunction: 'ease',
+      })
+      resetAnimation.translateY(0).opacity(0).step() // 恢复到初始位置
+      this.setData({
+        goodsAnimationData: resetAnimation.export(),
+      })
+      this.initEventListener()
+    },
+    detached() {
+      this.resetOptions()
+    },
+  },
+  methods: {
+    // 初始化事件监听
+    initEventListener() {
+      // 带货列表弹幕监听
+      getApp().globalData.$im.on('LIST_BUBBLE_BARRAGE', (res) => {
+        if (res.sync_barrage_im && this.data.hotSalesConf.hot_conf.barrage_switch) {
+          this.initHandler(res.sync_barrage_im)
+        }
+      })
+    },
+    // 点击跳转商品详情页
+    cardToDetails() {
+      const { app_id, alive_id, user_id, user_type } = this.data.aliveInfo;
+      // 讲师点击拦截
+      if (user_type === 1) return;
+      const { spu_id, resource_id, goods_name, img_url, target_url } = this.data.bubbleItem;
+      const toDetail = () => {
+        // 直播商品-去详情页，其他商品-拉起客服
+        let goodsParams = encodeURIComponent(`img_url=${img_url}&title=${goods_name}&params_url=${this.data.params_url}`)
+        console.log("urlurlurl", `/page/customerService/customerService?params=${params}`)
+        if (this.data.bubbleItem.resource_type === 4) {
+          wx && wx.redirectTo({
+            url: `/pages/webView/webView?appId=${app_id}&aliveId=${resource_id}&refreshAliveId=${alive_id}`,
+          })
+        } else {
+          // PC 复制链接
+          const { isPC, isDevtools } = getApp().globalData.system
+          if (isPC || isDevtools) {
+            wx.setClipboardData({
+              data: target_url,
+              success() {
+                wx.showToast({
+                  title: '商品链接已复制，请用浏览器打开',
+                  icon: 'none',
+                })
+              },
+            })
+            return
+          }
+          // 暂时屏蔽内嵌H5详情页，拉起客服
+          wx && wx.navigateTo({
+            url: '/page/customerService/customerService' + `?params=${goodsParams}`
+          })
+        }
+      }
+      const params = { 
+        app_id,
+        alive_id,
+        user_id,
+        spu_id,
+        resource_id,
+        token: wx.getStorageSync('login_data').token,
+      }
+      getGoodsState(params).then((res) => {
+          console.log("getGoodsState", res);
+          const { data, code } = res.data;
+          if (code === 0) {
+            const { is_sell_out, row_state, auth_state, is_display_package, is_deleted } = data;
+            // 商品本身删除
+            if (is_deleted) {
+              wx.showToast({
+                title: '商品消失了',
+                icon: 'none'
+              });
+              return;
+            } else if (is_sell_out === 1) {
+              // 商品售罄
+              wx.showToast({
+                title: '商品已抢光',
+                icon: 'none'
+              });
+              return;
+            } else if (row_state === 0) {
+              // 商品移除
+              wx.showToast({
+                title: '商品已下架',
+                icon: 'none'
+              });
+              return;
+            } else if (auth_state === 1) {
+              // 已有权限
+              wx.showModal({
+                content: '您已拥有该商品，即将前往课程详情页查看',
+                showCancel: true,
+                confirmText: '确认',
+                cancelText: '取消',
+                success: (res) => {
+                  if (res.confirm) {
+                    toDetail()
+                  } else if (res.cancel) {
+                    console.log('用户点击取消')
+                  }
+                },
+              })
+              return;
+            } else if (is_display_package === 0) {
+              // 商品隐藏
+              wx.showToast({
+                title: '商品消失了',
+                icon: 'none'
+              });
+              return;
+            } else {
+              toDetail()
+            }
+          } else {
+            wx.showToast({
+              title: '活动太火爆了，请稍后再试',
+              icon: 'none'
+            });
+          }
+      })
+      .catch(() => {
+          wx.showToast({
+            title: '活动太火爆了，请稍后再试',
+            icon: 'none'
+          });
+      })
+    },
+    // 处理气泡队列数组
+    initHandler(data) {
+      // 没有数据不处理
+      if (!(data?.['1']?.goods_list?.length > 0 || data?.['2']?.goods_list?.length > 0)) return;
+      // 根据batch_tag决定是追加还是替换，1为追加，0为替换
+      const batchTag = data.batch_tag || 0;
+      const imData = JSON.parse(JSON.stringify(data));
+      if (batchTag === 0) {
+        // 替换模式：清空现有队列，重新准备
+        this.data.bubbleObj = imData;
+      } else {
+        // 追加模式：将新消息加入队列, 合并2个数组
+        this.data.bubbleObj['2'].goods_list = [...this.data.bubbleObj['2']?.goods_list || [], ...imData['2']?.goods_list || []];
+        this.data.bubbleObj['1'].goods_list = [...this.data.bubbleObj['1']?.goods_list || [], ...imData['1']?.goods_list || []];
+      }
+      this.data.bubbleList = [...this.data.bubbleObj['2']?.goods_list || [], ...this.data.bubbleObj['1']?.goods_list || []];
+      // 启动气泡轮播
+      const needStart = !this.data.bubbleInterval && !this.data.animationTimer
+      if (this.data.bubbleList.length > 0 && needStart) {
+        this.startBubbleRotation()
+      }
+      // 通知外面清空数据
+      this.triggerEvent('clearData', {})
+    },
+    /**
+     * 启动一个定时器定期更新气泡
+     * 
+     * @method startBubbleRotation
+     * @memberof ShoppingCartBubble
+     * @instance
+     */
+    startBubbleRotation() {
+      // 获取第一个气泡数据
+      const getCurrentBubbleItem = () => {
+        const currentBubble = this.data.bubbleList[0]
+        this.data.bubbleList?.shift()
+        return currentBubble
+      }
+      this.displayBubble(getCurrentBubbleItem())
+      // 轮询出现气泡弹幕
+      this.data.bubbleInterval = setInterval(() => {
+        this.displayBubble(getCurrentBubbleItem())
+      }, INTERVAL_TIME)
+    },
+    displayBubble(bubble) {
+      // 如果已经没有数据了，重置定时器
+      if (!bubble) {
+        this.resetOptions()
+        return
+      }
+      const bubbleItem = {
+        bubble_desc: bubble.goods_type === TYPE_MAP.BUYING ? '正在购买' : '抢购了', // 描述 正在购买/抢购了
+        bubble_sensitive_state: this.handleSensitiveState(bubble.user_id), // 敏感状态
+        ...bubble
+      }
+      this.setData({bubbleItem})
+      this.handleInitAnimation()
+    },
+    handleInitAnimation() {
+      const animationFunc = () => {
+        const animation = wx.createAnimation({
+          duration: DEFAULT_ANIMATION_TIME,
+          timingFunction: 'ease',
+        })
+        animation.translateY(-30).opacity(1).step();
+        this.setData({
+          goodsAnimationData: animation.export(),
+        }, () => {
+          let animationTimer = setTimeout(() => {
+            const slideOutAnimation = wx.createAnimation({
+              duration: DEFAULT_ANIMATION_TIME,
+              timingFunction: 'ease',
+            })
+            slideOutAnimation.translateY(-35).opacity(0).step();
+            this.setData({
+              goodsAnimationData: slideOutAnimation.export(),
+            });
+    
+            setTimeout(() => {
+              const resetAnimation = wx.createAnimation({
+                duration: 0,
+                timingFunction: 'ease',
+              })
+              resetAnimation.translateY(0).opacity(0).step() // 恢复到初始位置
+              this.setData({
+                goodsAnimationData: resetAnimation.export(),
+              })
+            }, DEFAULT_ANIMATION_TIME + 20)
+    
+          }, DURATION_TIME);
+    
+          this.setData({
+            animationTimer
+          })
+        });
+      }
+      if (!this.data.isInit) {
+        this.setData({
+          isInit: true,
+        }, () => {
+          animationFunc();
+        })
+      } else {
+        animationFunc();
+      }
+    },
+    resetOptions() {
+      this.setData({
+        isInit: false,
+      })
+      clearInterval(this.data.bubbleInterval)
+      clearTimeout(this.data.animationTimer)
+      this.data.bubbleInterval = null
+      this.data.animationTimer = null
+      console.error('jer======err 动画定时器已经清楚', this.data);
+    },
+    // 昵称脱敏处理
+    handleSensitiveState(id) {
+      const userType = this.properties.aliveInfo.user_type
+      const isMeOrTeacher = this.properties.aliveInfo.user_id === id || userType
+      const isNeedPrivacy = !isMeOrTeacher && getSensitiveState(userType, this.properties.aliveInfo.alive_conf)
+      return isNeedPrivacy ? getSensitiveState(userType, this.properties.aliveInfo.alive_conf) : 0
+    },
+  },
+})

package/src/ShoppingCartBubble/index.scss

@@ -1,55 +1,94 @@
-$deviceWidth: 750;
-@function vmin($rpx) {
-  @return #{$rpx * 100 / $deviceWidth}vmin;
-}
-
-@mixin shopping-cart-bubble {
-  position: absolute;
-  left: vmin(22);
-  width: auto;
-  opacity: 1;
-  transform: translateY(vmin(-56));
-  
-  .shopping-cart-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);
-  }
-  .goods-info-num {
-    color: #FCC600;
-  }
-}
-
-.shopping-cart-bubble {
-  @include shopping-cart-bubble
-}
-// 竖屏pad
-@media screen and (min-width: 768px) and (orientation: portrait) {
-  $deviceWidth: 1536 !global;
-
-  .shopping-cart-bubble {
-      @include shopping-cart-bubble
-  }
-}
-// PC 放大适配
-@media screen and (min-height: 630px) and (orientation: landscape) {
-  $deviceWidth: 1260 !global;
-
-  .shopping-cart-bubble {
-    @include shopping-cart-bubble;
-  }
-}
-// 横屏pad
-@media screen and (min-height: 768px) and (orientation: landscape) {
-  $deviceWidth: 1536 !global;
-
-  .shopping-cart-bubble {
-      @include shopping-cart-bubble;
-  }
-}
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin shopping-cart-bubble {
+  position: absolute;
+  left: vmin(26);
+  top: vmin(-26);
+  width: auto;
+  opacity: 1;
+  transform: translateY(vmin(-56));
+  height: vmin(64);
+  color: #fff;
+  border-radius: vmin(16);
+  font-size: vmin(26);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  .shopping-cart-bubble-info {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: vmin(4) vmin(4);
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: vmin(16);
+    line-height: vmin(34);
+    image{
+      width: vmin(56);
+      height: vmin(56);
+    }
+    view {
+      max-width: vmin(200);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .nickname {
+      margin-left: vmin(8);
+    }
+    .desc {
+      white-space: nowrap;
+      margin: 0 vmin(8);
+    }
+    .color-orange {
+      white-space: nowrap;
+      color: #FFD500;
+    }
+    .color-white {
+      color: #FFFFFF;
+    }
+    .arrow-img {
+      width: vmin(32);
+      height: vmin(32);
+    }
+  }
+  .special-background {
+    background-color: transparent;
+    background: linear-gradient(270deg, #ff740266 0%, #ff410266 100%);
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    /* 不重复图片 */
+    background-position: left center;
+  }
+}
+
+.shopping-cart-bubble {
+  @include shopping-cart-bubble
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .shopping-cart-bubble {
+      @include shopping-cart-bubble
+  }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .shopping-cart-bubble {
+    @include shopping-cart-bubble;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .shopping-cart-bubble {
+      @include shopping-cart-bubble;
+  }
+}

package/src/ShoppingCartBubble/index.wxml

@@ -1,11 +1,14 @@
-<view   
-  class="shopping-cart-bubble" 
-  wx:if="{{ isInit }}" 
-  animation="{{goodsAnimationData}}"
->
-  <view class="shopping-cart-bubble-info">
-    <nickname nickname="{{ bubbleUser }}" sensitiveState="{{ bubbleSensitiveState }}" />
-    <text>{{ bubbleDesc }}</text>
-    <text class="goods-info-num">{{ bubbleNum }}号商品</text>
-  </view>
-</view>
+<view   
+  class="shopping-cart-bubble" 
+  wx:if="{{ isInit }}" 
+  animation="{{goodsAnimationData}}"
+>
+  <view class="shopping-cart-bubble-info {{bubbleItem.nums >= 10 && 'special-background'}}" catchtap="cardToDetails">
+    <imagePoster borderRadius="{{imageRadius}}" src="{{filterSrc}}" />
+    <view wx:if="{{bubbleItem.nums > 1}}" class="nickname">{{bubbleItem.nums}}人</view>
+    <nickname wx:else class="nickname" nickname="{{ bubbleItem.wx_nickname }}" sensitiveState="{{ bubbleItem.bubble_sensitive_state }}" />
+    <text class="desc">{{ bubbleItem.bubble_desc }}</text>
+    <text class="color-orange {{bubbleItem.nums >= 10 && 'color-white'}}">{{ bubbleItem.order_weight }}号商品</text>
+    <image class="arrow-img" src="{{bubbleItem.nums >= 10 ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/mhnajpp00bbn.svg' : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/mhllre4x09c5.svg'}}" />
+  </view>
+</view>