xiaoe_mp_npm 1.1.21-test01 → 1.1.21-test02

package/miniprogram_dist/MsgBubble/index.js

@@ -0,0 +1,312 @@
+const TYPE_MAP = {
+  BUYING: 1,
+  BUY_SUCCESS: 2,
+}
+const INTERVAL_TIME = 3000 // 单次动画间隔时间
+const DURATION_TIME = 2500 // 动画总时间
+// const DEFAULT_ANIMATION_TIME = 400 // 动画时间
+const ENTER_ANIMATION_TIME = 1000 // 进入动画时间
+const WAIT_ANIMATION_TIME = 500 // 停留动画时间
+const LEAVE_ANIMATION_TIME = 1000 // 离开动画时间
+
+import { getSensitiveState } from '../common/utils/index'
+const computedBehavior = require('miniprogram-computed').behavior
+// 消息类型 Map
+const MSG_TYPE_MAP = {
+    BUY_SUCCESS: 2, // 购买成功
+    GO_BUY: 1, // 去购买
+    SHARE_LIVE: 21, // 分享直播间
+    SOMEONE_COME: 22, // 进入直播间
+    SALES_BUBBLE: 23// 中控台气泡氛围
+};
+
+Component({
+  behaviors: [computedBehavior],
+  properties: {
+    aliveInfo: {
+      type: Object,
+      value: {}
+    },
+    aliveConf: {
+      type: Object,
+      value: {}
+    },
+    // 商品配置
+    goodsConf: {
+      type: Object,
+      value: {}
+    },
+  },
+  data: {
+    goodsAnimationData: {},
+    bubbleList: [], // 气泡展示数组
+    bubbleObj: {
+      '1': [], // 正在购买商品数组
+      '2': [], // 抢购了商品数组
+      '21': [], // 分享
+      '22': [], // 来了
+      '23': [], // 中控台气泡氛围
+    }, // im数据获取气泡数据（含拼接操作
+    bubbleInterval: null,
+    animationTimer: null,
+    isInit: false,
+    currMsg: {}, // 当前消息源数据
+    bubbleItem: {
+      bubble_desc: '', // 描述 正在购买/抢购了
+      bubble_sensitive_state: '', // 敏感状态
+      msg_content: "",
+      goods_type: 0,
+      content_type: 1,
+      user_type: 0,
+      user_id: "",
+      wx_nickname: "",
+      orders: 1
+    },
+  },
+  computed: {
+    // 只有类目一才有icon
+    showIcon(data) {
+      return ![MSG_TYPE_MAP.SOMEONE_COME, MSG_TYPE_MAP.SALES_BUBBLE].includes(data.bubbleItem.content_type);
+    },
+    iconSrc(data) {
+      return data.bubbleItem.content_type === MSG_TYPE_MAP.SHARE_LIVE
+        ? 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/miwm77xe0ogc.svg'
+        : 'https://commonresource-1252524126.cdn.xiaoeknow.com/image/miwm77xb0eqx.svg';
+    },
+    isShowNickName(data) {
+      if (data.bubbleItem.nums > 1 && data.bubbleItem.content_type !== MSG_TYPE_MAP.SOMEONE_COME) {
+        return false;
+      }
+      if (data.bubbleItem.content_type === MSG_TYPE_MAP.SALES_BUBBLE) {
+        return false;
+      }
+      return true;
+    },
+    // 类型定制背景
+    elBackground(data) {
+      const MSG_BGC_MAP = {
+        [MSG_TYPE_MAP.BUY_SUCCESS]:
+            "linear-gradient(90deg, rgba(255, 51, 0, 0.80) 0%, rgba(255, 102, 0, 0.80) 100%)", // 已购买
+        [MSG_TYPE_MAP.GO_BUY]: "linear-gradient(90deg, rgba(255, 51, 0, 0.80) 0%, rgba(255, 102, 0, 0.80) 100%)", // 去购买
+        [MSG_TYPE_MAP.SHARE_LIVE]: "rgba(233, 47, 115, 0.8)", // 分享
+        [MSG_TYPE_MAP.SOMEONE_COME]: "rgba(93, 93, 255, 0.8)", // 来了
+        [MSG_TYPE_MAP.SALES_BUBBLE]: "rgba(255,120,31,0.9)" // 中控台气泡氛围
+      };
+      return MSG_BGC_MAP[data.bubbleItem.content_type];
+    },
+  },
+  lifetimes: {
+    attached() {
+      try {
+        // 初始化动画位置
+        const resetAnimation = wx.createAnimation({
+          duration: 0,
+          timingFunction: 'ease',
+        })
+        resetAnimation.translateX(-200).opacity(1).step() // 恢复到初始位置
+        this.setData({
+          goodsAnimationData: resetAnimation.export(),
+        }, () => {
+          // 初始化监听逻辑
+          this.initEventListener();
+        })
+      } catch (error) {
+        this.initEventListener();
+      }
+    },
+    detached() {
+      this.resetOptions()
+    },
+  },
+  methods: {
+    // 初始化事件监听
+    initEventListener() {
+      // 购买消息气泡
+      getApp().globalData.$im.on('BUY_BUBBLE_EVENT', (res) => {
+        res.content_type = res.goods_type;
+        this.initHandler(res);
+      })
+      // 消息气泡
+      getApp().globalData.$im.on('BUBBLE_EVENT', (res) => {
+        this.initHandler(res);
+      })
+      // 假消息
+      getApp().globalData.$im.on('GET_FAKE_MSG', (res) => {
+        this.initHandler(res);
+      })
+    },
+    // 处理气泡数据(主要聚合除了购买消息气泡外的其他消息气泡)
+    bubbleDataHandlder() {
+      const { bubbleObj } = this.data;
+      for (const key in bubbleObj) {
+        const data = bubbleObj[key];
+        if ([MSG_TYPE_MAP.SALES_BUBBLE, MSG_TYPE_MAP.SHARE_LIVE, MSG_TYPE_MAP.SOMEONE_COME].includes(+key) && data.length > 0) {
+          const userMsg = data[data.length - 1]; // 返回最后一次进栈的用户的消息
+
+          let bubble = userMsg;
+          
+          bubble.orders = [...new Set(data.map((item) => item.user_id))].length;// 过滤同一个人触发的次数，获得真实人次
+          bubble.wx_nickname = userMsg.wx_nickname || userMsg.msg_content.user_name;
+          bubble.user_id = userMsg.user_id;
+          bubble.user_type = userMsg.user_type;
+          bubble.msg_content = userMsg.msg_content;
+          // 最后更改当前消息内容
+          bubbleObj[key] = [bubble];
+        };
+      }
+    },
+    // 处理气泡队列数组
+    initHandler(msg) {
+      msg.uuid = `uuid_${msg.user_id}_${new Date().getTime()}`; // 用于后面清楚数据的唯一标识
+      const normalMsgTypes = [MSG_TYPE_MAP.SHARE_LIVE, MSG_TYPE_MAP.SOMEONE_COME, MSG_TYPE_MAP.SALES_BUBBLE];
+      const buyMsgTypes = [MSG_TYPE_MAP.GO_BUY, MSG_TYPE_MAP.BUY_SUCCESS];
+      // 普通消息气泡开关
+      const isNormalBubbleOn =
+          this.data.aliveConf?.is_open_msg_bubble === 1 && normalMsgTypes.includes(msg.content_type);
+      // 走带货气泡的开关
+      const isBuyBubbleOn = this.data.goodsConf.is_open_msg_bubble && buyMsgTypes.includes(msg.content_type);
+      // 普通消息气泡开关 && 带货消息气泡开关
+      if (!isNormalBubbleOn && !isBuyBubbleOn) return;
+      // 如果数据超过1000条，不入队列
+      if (this.data.bubbleList.length > 1000) return;
+      // 优先展示自己来了
+      if (msg.content_type === MSG_TYPE_MAP.SOMEONE_COME && this.data.aliveConf?.user_id === msg.user_id) {
+        this.data.bubbleList.unshift(msg);
+      } else {
+        this.data.bubbleObj[msg.content_type].push(msg);
+        this.bubbleDataHandlder();
+        // 根据优先级别展示消息 购买成功 > 去购买 > 分享 > 中控台气泡氛围 > 来了
+        this.data.bubbleList = [...this.data.bubbleObj['2'] || [], ...this.data.bubbleObj['1'] || [], ...this.data.bubbleObj['21'] || [], ...this.data.bubbleObj['23'] || [], ...this.data.bubbleObj['22'] || []];
+      }
+      // 启动气泡轮播
+      const needStart = !this.data.bubbleInterval && !this.data.animationTimer
+      if (this.data.bubbleList.length > 0 && needStart) {
+        this.startBubbleRotation()
+      }
+    },
+    /**
+     * 启动一个定时器定期更新气泡
+     * 
+     * @method startBubbleRotation
+     * @memberof ShoppingCartBubble
+     * @instance
+     */
+    startBubbleRotation() {
+      // 获取第一个气泡数据
+      const getCurrentBubbleItem = () => {
+        const currentBubble = this.data.bubbleList[0]
+        if (currentBubble?.content_type) {
+          this.data.bubbleList?.shift() // 清除列表中的数据
+          // 清除bubbleObj中的数据
+          this.data.bubbleObj[currentBubble.content_type] = this.data.bubbleObj[currentBubble.content_type]?.filter((item) => item.uuid !== currentBubble.uuid) || []
+        } 
+        return currentBubble
+      }
+      this.displayBubble(getCurrentBubbleItem())
+      // 轮询出现气泡弹幕
+      this.data.bubbleInterval = setInterval(() => {
+        this.displayBubble(getCurrentBubbleItem())
+      }, INTERVAL_TIME)
+    },
+    displayBubble(bubble) {
+      // 如果已经没有数据了，重置定时器
+      if (!bubble) {
+        this.resetOptions()
+        return
+      }
+      const typeText = {
+        [MSG_TYPE_MAP.SOMEONE_COME]: '加入了直播间',
+        [MSG_TYPE_MAP.SHARE_LIVE]: '分享了直播间',
+        [MSG_TYPE_MAP.GO_BUY]: '正在去购买',
+        [MSG_TYPE_MAP.BUY_SUCCESS]: '已购买'
+      }
+      const bubbleItem = {
+        bubble_desc: typeText[bubble.content_type] || bubble.msg_content, // 描述
+        bubble_sensitive_state: this.handleSensitiveState(bubble.user_id), // 敏感状态
+        ...bubble
+      }
+      this.setData({ bubbleItem, currMsg: bubble }, () => {
+        this.handleInitAnimation()
+      })
+    },
+    handleInitAnimation() {
+      const animationFunc = () => {
+        // 1s进入动画
+        const animation = wx.createAnimation({
+          duration: ENTER_ANIMATION_TIME,
+          timingFunction: 'ease',
+        })
+        animation.translateX(0).opacity(1).step();
+        this.setData({
+          goodsAnimationData: animation.export(),
+        }, () => {
+          // 1.5s等待时间（1s进入动画+0.5s停留时间）
+          let animationTimer = setTimeout(() => {
+            // 1s离开动画
+            const slideOutAnimation = wx.createAnimation({
+              duration: LEAVE_ANIMATION_TIME,
+              timingFunction: 'ease',
+            })
+            slideOutAnimation.translateX(0).opacity(0).step();
+            this.setData({
+              goodsAnimationData: slideOutAnimation.export(),
+            }, () => {
+              // 离开完成后，重置位置
+              setTimeout(() => {
+                const resetAnimation = wx.createAnimation({
+                  duration: 0,
+                  timingFunction: 'ease',
+                })
+                resetAnimation.translateX(-200).opacity(1).step() // 恢复到初始位置
+                this.setData({
+                  isInit: false,
+                  goodsAnimationData: resetAnimation.export(),
+                })
+              }, LEAVE_ANIMATION_TIME + 20)
+            });
+          }, WAIT_ANIMATION_TIME + ENTER_ANIMATION_TIME);
+          this.setData({
+            animationTimer
+          })
+        });
+      }
+      if (!this.data.isInit) {
+        this.setData({
+          isInit: true,
+        }, () => {
+          animationFunc();
+        })
+      } else {
+        animationFunc();
+      }
+    },
+    resetOptions() {
+      this.setData({
+        isInit: false,
+        currMsg: {},
+        bubbleItem: {
+          bubble_desc: '', // 描述 正在购买/抢购了
+          bubble_sensitive_state: '', // 敏感状态
+          msg_content: "",
+          goods_type: 0,
+          content_type: 1,
+          user_type: 0,
+          user_id: "",
+          wx_nickname: "",
+          orders: 1
+        }
+      })
+      clearInterval(this.data.bubbleInterval)
+      clearTimeout(this.data.animationTimer)
+      this.data.bubbleInterval = null
+      this.data.animationTimer = null
+    },
+    // 昵称脱敏处理
+    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/miniprogram_dist/MsgBubble/index.json

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

package/miniprogram_dist/MsgBubble/index.scss

@@ -0,0 +1,81 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin msg-bubble {
+  display: inline-flex;
+  align-items: center;
+  border-radius: vmin(22);
+  margin-top: vmin(8);
+  max-width: 100%;
+  height: vmin(44);
+  opacity: 1;
+  padding: vmin(4) vmin(16);
+  box-sizing: border-box;
+  z-index: 20;
+  .msg-bubble-info {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: vmin(26);
+    color: #fff;
+    font-weight: 500;
+    font-family: "PingFang SC";
+    .icon {
+      object-fit: cover;
+      margin-right: vmin(8);
+      width: vmin(28);
+      height: vmin(28);
+    }
+    .membership-icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .nickname {
+      flex: 1;
+      display: flex;
+      margin-right: vmin(8);
+      view {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+      }
+    }
+    .content, .more {
+      white-space: nowrap;
+      margin: 0 vmin(8);
+    }
+  }
+}
+
+.msg-bubble {
+  @include msg-bubble
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+
+  .msg-bubble {
+      @include msg-bubble
+  }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .msg-bubble {
+    @include msg-bubble;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+
+  .msg-bubble {
+      @include msg-bubble;
+  }
+}

package/miniprogram_dist/MsgBubble/index.wxml

@@ -0,0 +1,19 @@
+<view   
+  wx:if="{{ isInit }}"
+  class="msg-bubble" 
+  style="background: {{ elBackground }};"
+  animation="{{goodsAnimationData}}"
+>
+  <view class="msg-bubble-info">
+    <image wx:if="{{showIcon}}" class="icon" src="{{iconSrc}}"></image>
+    <!-- 用户名称 -->
+    <block wx:if="{{ isShowNickName }}">
+      <membership-icon class="membership-icon" msg="{{currMsg}}" />
+      <nickname class="nickname" nickname="{{ bubbleItem.wx_nickname }}" sensitiveState="{{ bubbleItem.bubble_sensitive_state }}" />
+    </block>
+    <!-- 多个用户 -->
+    <text wx:if="{{bubbleItem.orders > 1}}" class="more">等{{bubbleItem.orders}}人</text>
+    <!-- 气泡内容 -->
+    <text class="content">{{ bubbleItem.bubble_desc }}</text>
+  </view>
+</view>

package/miniprogram_dist/MsgBubble/index.wxss

@@ -0,0 +1,202 @@
+.msg-bubble {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 2.93333vmin;
+  margin-top: 1.06667vmin;
+  max-width: 100%;
+  height: 5.86667vmin;
+  opacity: 1;
+  padding: 0.53333vmin 2.13333vmin;
+  box-sizing: border-box;
+  z-index: 20;
+}
+.msg-bubble .msg-bubble-info {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 3.46667vmin;
+  color: #fff;
+  font-weight: 500;
+  font-family: "PingFang SC";
+}
+.msg-bubble .msg-bubble-info .icon {
+  object-fit: cover;
+  margin-right: 1.06667vmin;
+  width: 3.73333vmin;
+  height: 3.73333vmin;
+}
+.msg-bubble .msg-bubble-info .membership-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.msg-bubble .msg-bubble-info .nickname {
+  flex: 1;
+  display: flex;
+  margin-right: 1.06667vmin;
+}
+.msg-bubble .msg-bubble-info .nickname view {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.msg-bubble .msg-bubble-info .content,
+.msg-bubble .msg-bubble-info .more {
+  white-space: nowrap;
+  margin: 0 1.06667vmin;
+}
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .msg-bubble {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 1.43229vmin;
+    margin-top: 0.52083vmin;
+    max-width: 100%;
+    height: 2.86458vmin;
+    opacity: 1;
+    padding: 0.26042vmin 1.04167vmin;
+    box-sizing: border-box;
+    z-index: 20;
+  }
+  .msg-bubble .msg-bubble-info {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.69271vmin;
+    color: #fff;
+    font-weight: 500;
+    font-family: "PingFang SC";
+  }
+  .msg-bubble .msg-bubble-info .icon {
+    object-fit: cover;
+    margin-right: 0.52083vmin;
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+  }
+  .msg-bubble .msg-bubble-info .membership-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .msg-bubble .msg-bubble-info .nickname {
+    flex: 1;
+    display: flex;
+    margin-right: 0.52083vmin;
+  }
+  .msg-bubble .msg-bubble-info .nickname view {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+  .msg-bubble .msg-bubble-info .content,
+  .msg-bubble .msg-bubble-info .more {
+    white-space: nowrap;
+    margin: 0 0.52083vmin;
+  }
+}
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  .msg-bubble {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 1.74603vmin;
+    margin-top: 0.63492vmin;
+    max-width: 100%;
+    height: 3.49206vmin;
+    opacity: 1;
+    padding: 0.31746vmin 1.26984vmin;
+    box-sizing: border-box;
+    z-index: 20;
+  }
+  .msg-bubble .msg-bubble-info {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.06349vmin;
+    color: #fff;
+    font-weight: 500;
+    font-family: "PingFang SC";
+  }
+  .msg-bubble .msg-bubble-info .icon {
+    object-fit: cover;
+    margin-right: 0.63492vmin;
+    width: 2.22222vmin;
+    height: 2.22222vmin;
+  }
+  .msg-bubble .msg-bubble-info .membership-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .msg-bubble .msg-bubble-info .nickname {
+    flex: 1;
+    display: flex;
+    margin-right: 0.63492vmin;
+  }
+  .msg-bubble .msg-bubble-info .nickname view {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+  .msg-bubble .msg-bubble-info .content,
+  .msg-bubble .msg-bubble-info .more {
+    white-space: nowrap;
+    margin: 0 0.63492vmin;
+  }
+}
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .msg-bubble {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 1.43229vmin;
+    margin-top: 0.52083vmin;
+    max-width: 100%;
+    height: 2.86458vmin;
+    opacity: 1;
+    padding: 0.26042vmin 1.04167vmin;
+    box-sizing: border-box;
+    z-index: 20;
+  }
+  .msg-bubble .msg-bubble-info {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.69271vmin;
+    color: #fff;
+    font-weight: 500;
+    font-family: "PingFang SC";
+  }
+  .msg-bubble .msg-bubble-info .icon {
+    object-fit: cover;
+    margin-right: 0.52083vmin;
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+  }
+  .msg-bubble .msg-bubble-info .membership-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .msg-bubble .msg-bubble-info .nickname {
+    flex: 1;
+    display: flex;
+    margin-right: 0.52083vmin;
+  }
+  .msg-bubble .msg-bubble-info .nickname view {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+  .msg-bubble .msg-bubble-info .content,
+  .msg-bubble .msg-bubble-info .more {
+    white-space: nowrap;
+    margin: 0 0.52083vmin;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiaoe_mp_npm",
-  "version": "1.1.21-test01",
+  "version": "1.1.21-test02",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "scripts": {