vhall-mini-sdk 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -4,33 +4,28 @@
 
 格式遵循 [Keep a Changelog](https://keepachangelog.com/)，版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
-## [0.3.1] - 2026-08-13
-
-### 修复
-
-- 修复公告关闭事件定义重复问题。
-
-## [0.3.0] - 2026-08-13
-
-### 新增
+## [0.4.0] - 2026-08-20
 
-- 直播和回放场景下新增 <span style="color:red">公告</span> 能力。
+- [A]&nbsp;&nbsp;新增 **口令抽奖** 功能。
+- [A]&nbsp;&nbsp;新增 **聊天精选** 功能。
+- [A]&nbsp;&nbsp;新增 **商品消息在聊天区展示** 功能。
+- [A]&nbsp;&nbsp;新增 **暖场视频** 功能。
+- [F]&nbsp;&nbsp;修复了一些已知的缺陷。
 
-- VhallMiniSdk增加 <span style="color:red">VERSION</span> 属性，实例增加 <span style="color:red">version</span> 属性， 方便获取当前SDK版本号。
-
-### 变更
+## [0.3.1] - 2026-08-13
 
-- SDK 错误页支持直播模式（mode，0：竖屏，1：横屏）初始0或1，不用空值，业务侧无需额外调用 setData 即可正常展示。
+- [F]&nbsp;&nbsp;修复公告关闭事件定义重复问题。
 
-### 修复
+## [0.3.0] - 2026-08-13
 
-- 修复某些场景下商城奖励计时不动以及计时不准确的问题。
+- [A]&nbsp;&nbsp;新增直播和回放场景下 **公告** 能力。
+- [A]&nbsp;&nbsp;VhallMiniSdk增加 **VERSION** 属性，实例增加 **version** 属性， 方便获取当前SDK版本号。
+- [C]&nbsp;&nbsp;SDK 错误页支持直播模式（mode，0：竖屏，1：横屏）初始0或1，不用空值，业务侧无需额外调用 setData 即可正常展示。
+- [F]&nbsp;&nbsp;修复某些场景下商城奖励计时不动以及计时不准确的问题。
 
 ## [0.2.1] - 2026-08-06
 
-### 变更
-
-- SDK和几个插件都去掉了具名导出，避免默认导出和具名导出混用带来的问题。
+- [C]&nbsp;&nbsp;SDK和几个插件都去掉了具名导出，避免默认导出和具名导出混用带来的问题。
 
 ```js
 // 旧
@@ -39,6 +34,4 @@ import { MallRewardServer } from ...
 import MallRewardServer from ...
 ```
 
-### 修复
-
-- 修复某些场景下收不到消息的问题。
+- [F]&nbsp;&nbsp;修复某些场景下收不到消息的问题。

package/lib/components/announcement/announ-banner/index.js

@@ -17,6 +17,11 @@ Component({
       type: Number,
       value: 0,
     },
+    // 横屏下与聊天精选重叠时的层级
+    zIndex: {
+      type: Number,
+      value: 99,
+    },
   },
 
   data: {

package/lib/components/announcement/announ-banner/index.wxml

@@ -1,4 +1,4 @@
-<view wx:if="{{show }}" class="announ-banner {{static ? 'announ-banner--static' : ''}} mode-{{mode}}">
+<view wx:if="{{show }}" class="announ-banner {{static ? 'announ-banner--static' : ''}} mode-{{mode}}" style="z-index:{{zIndex}};">
   <view class="announ-banner-icon">
     <view class="announ-banner-icon__box"></view>
     <view class="announ-banner-icon__body"></view>

package/lib/components/announcement/announ-banner/index.wxss

@@ -1 +1 @@
-.announ-banner{align-items:center;background:rgba(0,0,0,.5);border-radius:40rpx;box-sizing:border-box;color:#fff;display:flex;font-size:24rpx;left:12rpx;padding:0 12rpx;position:fixed;right:12rpx;top:180rpx;z-index:99}.announ-banner-icon{color:#fff;flex-shrink:0;height:32rpx;margin-right:16rpx;position:relative;width:34rpx}.mode-1 .announ-banner-icon{color:#fb3a32}.announ-banner-icon__box{background:currentColor;border-bottom-left-radius:4rpx;border-top-left-radius:4rpx;height:14rpx;left:3rpx;position:absolute;top:9rpx;width:7rpx;z-index:2}.announ-banner-icon__body{background:currentColor;border-radius:4rpx 6rpx 6rpx 4rpx;-webkit-clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);height:28rpx;left:8rpx;position:absolute;top:2rpx;width:15rpx}.announ-banner-icon__wave{background:currentColor;border-radius:4rpx;position:absolute}.announ-banner-icon__wave--top{height:4rpx;right:4rpx;top:5rpx;transform:rotate(-32deg);width:9rpx}.announ-banner-icon__wave--mid{height:4rpx;right:1rpx;top:14rpx;width:11rpx}.announ-banner-icon__wave--bottom{bottom:5rpx;height:4rpx;right:4rpx;transform:rotate(32deg);width:9rpx}.announ-banner-text-wrap{align-items:center;display:flex;flex:1;height:100%;overflow:hidden;padding:6rpx 0}.announ-banner-text{animation:announ-banner-scroll linear infinite;display:inline-block;padding-left:100%;white-space:nowrap}.announ-banner--static .announ-banner-text{animation:none;padding-left:0}.announ-banner-close{flex-shrink:0;font-size:32rpx;margin-left:16rpx}.announ-banner.mode-1{background:linear-gradient(59.32deg,#ffebe9,#edecff 107.06%);border-radius:0;color:#262626;font-size:28rpx;left:0;max-width:none;padding:16rpx 12rpx;right:0;top:calc(56.25vw + 85rpx);transform:none;width:100%}@keyframes announ-banner-scroll{0%{transform:translateX(0)}to{transform:translateX(-100%)}}
+.announ-banner{align-items:center;background:rgba(0,0,0,.5);border-radius:40rpx;box-sizing:border-box;color:#fff;display:flex;font-size:24rpx;left:12rpx;padding:0 12rpx;position:fixed;right:12rpx;top:180rpx;z-index:99}.announ-banner-icon{color:#fff;flex-shrink:0;height:32rpx;margin-right:16rpx;position:relative;width:34rpx}.mode-1 .announ-banner-icon{color:#fb3a32}.announ-banner-icon__box{background:currentColor;border-bottom-left-radius:4rpx;border-top-left-radius:4rpx;height:14rpx;left:3rpx;position:absolute;top:9rpx;width:7rpx;z-index:2}.announ-banner-icon__body{background:currentColor;border-radius:4rpx 6rpx 6rpx 4rpx;-webkit-clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);height:28rpx;left:8rpx;position:absolute;top:2rpx;width:15rpx}.announ-banner-icon__wave{background:currentColor;border-radius:4rpx;position:absolute}.announ-banner-icon__wave--top{height:4rpx;right:4rpx;top:5rpx;transform:rotate(-32deg);width:9rpx}.announ-banner-icon__wave--mid{height:4rpx;right:1rpx;top:14rpx;width:11rpx}.announ-banner-icon__wave--bottom{bottom:5rpx;height:4rpx;right:4rpx;transform:rotate(32deg);width:9rpx}.announ-banner-text-wrap{align-items:center;display:flex;flex:1;height:100%;overflow:hidden;padding:6rpx 0}.announ-banner-text{animation:announ-banner-scroll linear infinite;display:inline-block;padding-left:100%;white-space:nowrap}.announ-banner--static .announ-banner-text{animation:none;padding-left:0}.announ-banner-close{flex-shrink:0;font-size:32rpx;margin-left:16rpx}.announ-banner.mode-1{background:linear-gradient(59.32deg,#ffebe9,#edecff 107.06%);border-radius:0;color:#262626;font-size:28rpx;left:0;max-width:none;padding:16rpx 24rpx;right:0;top:calc(56.25vw + 85rpx);transform:none;width:100%}@keyframes announ-banner-scroll{0%{transform:translateX(0)}to{transform:translateX(-100%)}}

package/lib/components/announcement/announ-icon/index.wxml

@@ -1,8 +1,8 @@
 <movable-area class="drag-area">
   <movable-view wx:if="{{showIcon}}" class="drag-view" direction="all" x="{{x}}" y="{{y}}" damping="{{40}}" out-of-bounds="{{false}}" bindchange="onDragChange" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd">
     <view class="announ-icon mode-{{mode}}" bindtap="onTapIcon">
-      <image wx:if="{{mode === 1}}" class="announ-icon-img" src="https://t-alistatic01.e.vhall.com/common-static/saas-wap/static/img/notice-icon.a86f1993.png" mode="aspectFit" />
-      <image wx:else class="announ-icon-img" src="https://t-alistatic01.e.vhall.com/common-static/images/mp/announ_icon.png" mode="aspectFit" />
+      <image wx:if="{{mode === 1}}" class="announ-icon-img" src="https://cnstatic01.e.vhall.com/common-static/images/mp/announ_icon_2.png" mode="aspectFit" />
+      <image wx:else class="announ-icon-img" src="https://cnstatic01.e.vhall.com/common-static/images/mp/announ_icon_1.png" mode="aspectFit" />
       <text wx:if="{{mode !== 1}}" class="announ-icon-text">公告</text>
       <view wx:if="{{badge > 0}}" class="announ-icon-badge">{{badge > 99 ? '99+' : badge}}</view>
     </view>

package/lib/components/announcement/index.js

@@ -20,6 +20,7 @@ Component({
     isStatic: false, // 公告banner内容是否静止不滚动（display_type==1）
     curNoticeId: '', // 当前展示的公告 id
     badge: 0, // 公告未读角标数字（收到推送 +1，打开弹窗清零）
+    bannerZIndex: 99, // 横屏下与聊天精选重叠时的层级（来自 store.zIndex.announBanner）
   },
 
   observers: {
@@ -37,6 +38,9 @@ Component({
 
           this.applyAnnouncement(val);
         },
+        'zIndex.announBanner': (val) => {
+          this.setData({ bannerZIndex: val });
+        },
       });
 
       this.initEventListener();
@@ -85,7 +89,10 @@ Component({
         const list = (prev.list || []).filter((it) => it.id !== item.id);
         list.unshift(item);
 
+        // 设置公告内容
         this.sdkInstance.store.set('announcement', { list, total: list.length });
+        //  公告置顶（层级最高）
+        this.sdkInstance.store.setZIndex('announBanner');
         // 收到推送公告，未读角标 +1
         this.setData({ badge: this.data.badge + 1 });
       };

package/lib/components/announcement/index.wxml

@@ -1,5 +1,5 @@
 <!-- 公告顶部滚动条 -->
-<announ-banner show="{{showBanner}}" text="{{bannerText}}" static="{{isStatic}}" mode="{{mode}}" bind:close="handleBannerClose" />
+<announ-banner show="{{showBanner}}" text="{{bannerText}}" static="{{isStatic}}" mode="{{mode}}" zIndex="{{bannerZIndex}}" bind:close="handleBannerClose" />
 <!-- 公告浮动小图标 -->
 <announ-icon wx:if="{{showIcon}}" showIcon="{{showIcon}}" badge="{{badge}}" mode="{{mode}}" bind:onTapIcon="handleIconClick" />
 <!-- 公告弹窗 -->

package/lib/components/chat/chat-item/chat-item.js

@@ -104,7 +104,7 @@ Component({
     memberLevel: {
       type: Object,
       value: null,
-  },
+    },
   },
   data: {
     roleName: {
@@ -130,6 +130,12 @@ Component({
     },
   },
   methods: {
+    // 点击商品推送消息，向上抛出事件由父组件弹出商品详情
+    onTapGoods() {
+      if (this.data.chatItem?.type === 'push_goods_change') {
+        this.triggerEvent('tapgoods', this.data.chatItem);
+      }
+    },
     _updateContent() {
       if (!['text', 'image'].includes(this.data.chatItem?.type || this.data.chatItem?.data?.type))
         return;
@@ -152,11 +158,11 @@ Component({
         const item = (memberLevel.custom_list || []).find((item) => item.level == level);
         icon = item?.icon || '';
       } else {
-        icon = `https://t-alistatic01.e.vhall.com/common-static/images/mp/vip/vip${level}.png`;
+        icon = `https://cnstatic01.e.vhall.com/common-static/images/mp/vip/vip${level}.png`;
       }
 
       this.setData({ memberLevelIcon: icon });
-  },
+    },
     preview(event) {
       const index = event.currentTarget.dataset.index;
       const imgList = this.data.chatItem.data.image_urls;
@@ -186,8 +192,8 @@ Component({
       // 构建正则表达式来匹配 @ 昵称和表情
       const atPattern =
         atNames.length > 0 ?
-        atNames.map((name) => this._escapeRegExp(name)).join('|') :
-        '';
+          atNames.map((name) => this._escapeRegExp(name)).join('|') :
+          '';
       const facePattern = Object.keys(faceArr)
         .map(this._escapeRegExp)
         .join('|');

package/lib/components/chat/chat-item/chat-item.wxml

@@ -8,6 +8,25 @@
         <image class="gift-img" src="{{chatItem.gift_image_url}}" />
       </view>
     </block>
+    <!-- 商品推送 -->
+    <block wx:elif="{{chatItem.type=='push_goods_change'}}">
+      <view class="chat-item-goods" bindtap="onTapGoods">
+        <view wx:if="{{chatItem.roleTag}}" class="role-tag">{{chatItem.roleTag}}</view>
+        <text class="chat-item-goods-user">{{chatItem.nickname}}</text>
+        <text class="chat-item-goods-text">推送了 商品</text>
+        <text class="chat-item-goods-text" style="color:#0a7ff5">点击查看</text>
+        <text class="chat-item-goods-name">{{chatItem.goods_name}}</text>
+      </view>
+    </block>
+    <!-- 商品购买中 -->
+    <block wx:elif="{{chatItem.type=='popup_buy'|| chatItem.type=='popup_click'}}">
+      <view class="chat-item-goods">
+        <image class="icon-img" src="https://t-alistatic01.e.vhall.com/common-static/images/mp/cart.png" />
+        <text class="chat-item-goods-user">{{chatItem.nickname}}</text>
+        <text class="text-buying">正在买</text>
+        <text class="chat-item-goods-name">{{chatItem.goods_name}}</text>
+      </view>
+    </block>
     <block wx:else>
       <view class="chat-item_left">
         <image class="chat-item_left_avatar" src="{{chatItem.context.avatar ||'https://cnstatic01.e.vhall.com/common-static/images/default_avatar.png'}}"></image>
@@ -57,6 +76,25 @@
         <image class="gift-img" src="{{chatItem.gift_image_url}}" />
       </view>
     </block>
+    <!-- 商品推送 -->
+    <block wx:elif="{{chatItem.type=='push_goods_change'}}">
+      <view class="chat-item-goods" bindtap="onTapGoods">
+        <view wx:if="{{chatItem.roleTag}}" class="role-tag">{{chatItem.roleTag}}</view>
+        <text class="chat-item-goods-user">{{chatItem.nickname}}</text>
+        <text class="chat-item-goods-text">推送了商品</text>
+        <text class="chat-item-goods-text" style="color:#0a7ff5">点击查看</text>
+        <text class="chat-item-goods-name">{{chatItem.goods_name}}</text>
+      </view>
+    </block>
+    <!-- 商品购买中 -->
+    <block wx:elif="{{chatItem.type=='popup_buy'|| chatItem.type=='popup_click'}}">
+      <view class="chat-item-goods">
+        <image class="icon-img" src="https://t-alistatic01.e.vhall.com/common-static/images/mp/cart.png" />
+        <text class="chat-item-goods-user">{{chatItem.nickname}}</text>
+        <text class="text-buying">正在买</text>
+        <text class="chat-item-goods-name">{{chatItem.goods_name}}</text>
+      </view>
+    </block>
     <block wx:else>
       <view class="chat-item_content_reply" wx:if="{{ chatItem.context.replyMsg.content }}">
         <view class="chat-item_content_reply_username">

package/lib/components/chat/chat-item/chat-item.wxss

@@ -1 +1 @@
-.chat-item{display:flex;margin-bottom:24rpx}.chat-item_left{margin-right:16rpx}.chat-item_left_avatar{border-radius:50%;height:2rem;width:2rem}.chat-item_right{flex:1}.chat-item_right_user{align-items:center;display:flex;line-height:2rem}.chat-item_right_user_level{align-items:center;display:flex;margin-right:8rpx}.chat-item_right_user_level .chat-item_vip-icon{height:1rem;width:auto}.chat-item_right_user_name{align-items:center;color:#8c8c8c;display:flex;font-size:1rem;margin-right:8rpx;max-width:340rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.chat-item_right_user_role{align-items:center;border-radius:.6rem;display:flex;font-size:.8rem;height:1.2rem;line-height:1;padding:0 .3rem}.chat-item_right_user_role.role_1{background-color:rgba(251,38,38,.15);color:#fb2626}.chat-item_right_user_role.role_3,.chat-item_right_user_role.role_4{background-color:rgba(10,127,245,.15);color:#0a7ff5}.chat-item_right_content{background-color:#fff;border-radius:0 16rpx 16rpx 16rpx;font-size:1rem;line-height:1.25rem;margin-top:10rpx;max-width:460rpx;overflow-wrap:break-word;padding:12rpx 16rpx;width:-webkit-fit-content;width:fit-content;word-break:break-word}.chat-item_right_content .chat-item_reply_text{vertical-align:middle}.chat-item_right_content .face_img{height:1.2rem;vertical-align:middle;width:1.2rem}.chat-item_right_content_img{border-radius:12rpx;height:100rpx;margin-right:10rpx;object-fit:contain;width:100rpx}.chat-item_right_content_img:last-child{margin-right:0}.chat-item .chat-item_content_reply{color:#999;font-size:.93rem;padding-left:20rpx;position:relative}.chat-item .chat-item_content_reply:before{background:#bfbfbf;border-radius:3rpx;content:" ";height:100%;left:0;position:absolute;top:0;width:6rpx}.chat-item .chat-item_content_reply_username{color:#8c8c8c;display:inline}.chat-item .relpy_icon{color:#fc9600;margin-right:8rpx}.chat-item.mode0{background:rgba(0,0,0,.35);border-radius:26rpx;color:#fff;display:block;font-size:1rem;margin-bottom:16rpx;max-width:520rpx;padding:8rpx 24rpx;width:-webkit-fit-content;width:fit-content;word-break:break-all}.chat-item.mode0 .chat-item_right_user{align-items:baseline;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.chat-item.mode0 .chat-item_right_user .chat-item_right_user_level{align-items:center;align-self:center;display:flex;flex:none;margin-right:8rpx}.chat-item.mode0 .chat-item_right_user .chat-item_right_user_level .chat-item_vip-icon{height:1.1rem;width:auto}.chat-item.mode0 .chat-item_right_user .chat-item_user_name{color:#8ce7ff;flex:none;font-size:1rem;line-height:1.25rem;margin-right:0;white-space:nowrap}.chat-item.mode0 .chat-item_right_user .chat-item_role{flex:none}.chat-item.mode0 .chat-item_role{border-radius:.5rem;display:inline-block;font-size:.68rem;height:1rem;line-height:1rem;margin-right:12rpx;padding:0 10rpx;vertical-align:middle}.chat-item.mode0 .chat-item_role.role_1{background-color:rgba(251,38,38,.15);color:#fb2626}.chat-item.mode0 .chat-item_role.role_3,.chat-item.mode0 .chat-item_role.role_4{background-color:rgba(10,127,245,.15);color:#0a7ff5}.chat-item.mode0 .chat-item_content{display:inline-block;font-size:1rem;line-height:1.25rem;vertical-align:top}.chat-item.mode0 .gift-msg{background:transparent;color:#fff;height:auto;margin:0}.chat-item .highlight{color:#0a7ff5}.chat-item .gift-msg{background-color:hsla(9,100%,89%,.2);border-radius:24rpx;color:#262626;height:48rpx;margin:0 auto;padding:0 50rpx 0 24rpx;width:-webkit-fit-content;width:fit-content}.chat-item .gift-msg .gift-img{display:inline-block;height:40rpx;transform:scale(1.8);transform-origin:left center;vertical-align:text-bottom;width:40rpx}.face_img{display:inline-block;height:1.25rem;vertical-align:middle;width:1.25rem}
+.chat-item{display:flex;margin-bottom:24rpx}.chat-item_left{margin-right:16rpx}.chat-item_left_avatar{border-radius:50%;height:2rem;width:2rem}.chat-item_right{flex:1}.chat-item_right_user{align-items:center;display:flex;line-height:2rem}.chat-item_right_user_level{align-items:center;display:flex;margin-right:8rpx}.chat-item_right_user_level .chat-item_vip-icon{height:1rem;width:auto}.chat-item_right_user_name{align-items:center;color:#8c8c8c;display:flex;font-size:1rem;margin-right:8rpx;max-width:340rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.chat-item_right_user_role{align-items:center;border-radius:.6rem;display:flex;font-size:.8rem;height:1.2rem;line-height:1;padding:0 .3rem}.chat-item_right_user_role.role_1{background-color:rgba(251,38,38,.15);color:#fb2626}.chat-item_right_user_role.role_3,.chat-item_right_user_role.role_4{background-color:rgba(10,127,245,.15);color:#0a7ff5}.chat-item_right_content{background-color:#fff;border-radius:0 16rpx 16rpx 16rpx;font-size:1rem;line-height:1.25rem;margin-top:10rpx;max-width:460rpx;overflow-wrap:break-word;padding:12rpx 16rpx;width:-webkit-fit-content;width:fit-content;word-break:break-word}.chat-item_right_content .chat-item_reply_text{vertical-align:middle}.chat-item_right_content .face_img{height:1.2rem;vertical-align:middle;width:1.2rem}.chat-item_right_content_img{border-radius:12rpx;height:100rpx;margin-right:10rpx;object-fit:contain;width:100rpx}.chat-item_right_content_img:last-child{margin-right:0}.chat-item .chat-item_content_reply{color:#999;font-size:.93rem;padding-left:20rpx;position:relative}.chat-item .chat-item_content_reply:before{background:#bfbfbf;border-radius:3rpx;content:" ";height:100%;left:0;position:absolute;top:0;width:6rpx}.chat-item .chat-item_content_reply_username{color:#8c8c8c;display:inline}.chat-item .relpy_icon{color:#fc9600;margin-right:8rpx}.chat-item.mode0{background:rgba(0,0,0,.35);border-radius:26rpx;color:#fff;display:block;font-size:1rem;margin-bottom:16rpx;max-width:440rpx;padding:8rpx 24rpx;width:-webkit-fit-content;width:fit-content;word-break:break-all}.chat-item.mode0 .chat-item_right_user{align-items:baseline;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.chat-item.mode0 .chat-item_right_user .chat-item_right_user_level{align-items:center;align-self:center;display:flex;flex:none;margin-right:8rpx}.chat-item.mode0 .chat-item_right_user .chat-item_right_user_level .chat-item_vip-icon{height:1.1rem;width:auto}.chat-item.mode0 .chat-item_right_user .chat-item_user_name{color:#8ce7ff;flex:none;font-size:1rem;line-height:1.25rem;margin-right:0;white-space:nowrap}.chat-item.mode0 .chat-item_right_user .chat-item_role{flex:none}.chat-item.mode0 .chat-item_role{border-radius:.5rem;display:inline-block;font-size:.68rem;height:1rem;line-height:1rem;margin-right:12rpx;padding:0 10rpx;vertical-align:middle}.chat-item.mode0 .chat-item_role.role_1{background-color:rgba(251,38,38,.15);color:#fb2626}.chat-item.mode0 .chat-item_role.role_3,.chat-item.mode0 .chat-item_role.role_4{background-color:rgba(10,127,245,.15);color:#0a7ff5}.chat-item.mode0 .chat-item_content{display:inline-block;font-size:1rem;line-height:1.25rem;vertical-align:top}.chat-item.mode0 .gift-msg{background:transparent;color:#fff;height:auto;margin:0}.chat-item .highlight{color:#0a7ff5}.chat-item .gift-msg{background-color:hsla(9,100%,89%,.2);border-radius:24rpx;color:#262626;height:48rpx;margin:0 auto;padding:0 50rpx 0 24rpx;width:-webkit-fit-content;width:fit-content}.chat-item .gift-msg .gift-img{display:inline-block;height:40rpx;transform:scale(1.8);transform-origin:left center;vertical-align:text-bottom;width:40rpx}.chat-item .chat-item-goods{-webkit-box-orient:vertical;-webkit-line-clamp:2;background:hsla(9,100%,89%,.2);border-radius:24rpx;color:#fff;display:-webkit-box;font-size:30rpx;margin:0 auto;overflow:hidden;overflow-wrap:anywhere;word-break:break-all}.chat-item .chat-item-goods .role-tag{background-color:rgba(251,38,38,.15);border-radius:24rpx;color:#fb2626;display:inline-block;font-size:24rpx;margin-right:12rpx;padding:0 16rpx}.chat-item .chat-item-goods .icon-img{display:inline-block;height:32rpx;margin-right:8rpx;vertical-align:middle;width:32rpx}.chat-item .chat-item-goods .chat-item-goods-user{color:hsla(0,0%,100%,.65);max-width:200rpx}.chat-item .chat-item-goods .text-buying{color:#fb2626;padding:0 8rpx}.chat-item .chat-item-goods .btn-view{color:#0a7ff5;padding:0 8rpx}.chat-item .chat-item-goods .chat-item-goods-text{padding:0 8rpx}.chat-item .chat-item-goods .chat-item-goods-name{color:#f78c0c}.chat-item.mode1 .chat-item-goods{color:#262626;padding:6rpx 48rpx}.chat-item.mode1 .chat-item-goods .chat-item-goods-user{color:#262626}.chat-item.mode0{margin-bottom:0}.chat-item.mode0 .chat-item-goods{background:rgba(0,0,0,.35);padding:6rpx}.face_img{display:inline-block;height:1.25rem;vertical-align:middle;width:1.25rem}

package/lib/components/chat/chat-list/chat-list.js

@@ -3,6 +3,13 @@ const MSGQUEUE = []; //消息队列，缓存500ms内的消息, 然后批量加
 let LastMsgList = []; //最新的50-100条消息，用于查看最新消息
 let count = 0; //缓存新消息数量
 let clientMsgId = 0; //消息id,定增,用于前端渲染消息列表，防止消息重复导致key重复
+
+const _ROLE_TAG_Map = {
+  1: '主持人',
+  2: '观众',
+  3: '助理',
+  4: '嘉宾'
+}
 Component({
   properties: {
     sdkInstance: {
@@ -74,6 +81,17 @@ Component({
     },
   },
   methods: {
+    // 商品推送消息点击：从商品列表中取完整商品数据后向上抛出，由上层弹出商品详情
+    onTapGoods(e) {
+      const chatItem = e.detail || {};
+      const goodsId = chatItem.goods_id || chatItem.goodsId;
+      if (!goodsId) return;
+      const productList = (this.sdkInstance?.store.get('productList') || []);
+      const product = productList.find((item) => item.goods_id === goodsId);
+      if (product) {
+        this.triggerEvent('tapgoods', product);
+      }
+    },
     async listenerMsg() {
       this.unChatListener && this.unChatListener();
       const user = this.sdkInstance.store.get('user');
@@ -84,8 +102,8 @@ Component({
         }
         this._handleMsg(message);
       };
-      eventObj[this.sdkInstance.EVENT.GIFT_MSG] = (message) => {
-        this._handleMsg(message);
+      eventObj[this.sdkInstance.EVENT.GIFT_MSG] = (messageData) => {
+        this._handleMsg(messageData);
       };
       eventObj[this.sdkInstance.EVENT.DELETE_MSG] = (message) => {
         const msgIds = message.msg_ids.split(',');
@@ -94,6 +112,26 @@ Component({
           chatList: this.data.chatList.filter((item) => !msgIds.includes(item.msg_id)),
         });
       };
+      eventObj[this.sdkInstance.EVENT.CUSTOM_MSG] = (message) => {
+        //  console.log('CUSTOM_MSG:', message);
+        const dataType = message.data?.type || '';
+        if (['popup_buy', 'popup_click'].includes(dataType)) {
+          // 商品购买
+          this._handleMsg({
+            nickname: (message.data.user_name || '').substring(0, 1) + '**',
+            ...message.data
+          });
+        } else if (dataType === "push_goods_change") {
+          // 商品推送
+          if (message.data.push_status == 2) return; //取消推送，不加入聊天列表
+          let nn = message.data.pusher_nickname || '';
+          this._handleMsg({
+            nickname: nn.length > 5 ? nn.substring(0, 5) + '...' : nn,
+            roleTag: _ROLE_TAG_Map[message.data.role_name] || '',
+            ...message.data
+          });
+        }
+      };
       this.unChatListener = this.sdkInstance.on(eventObj);
     },
     _handleMsg(message) {

package/lib/components/chat/chat-list/chat-list.wxml

@@ -1,6 +1,6 @@
 <scroll-view id="chat-scrollview" reverse="{{ true }}" enable-flex="{{ true }}" class="chat-scroll-view" scroll-y enhanced scroll-with-animation="{{ animationFlag }}" scroll-into-view="{{ scrollIntoViewId }}" show-scrollbar="{{ false }}" bindscroll="bindscroll" bindscrolltolower="bindscrolltolower" bindscrolltoupper="getHistoryList">
   <view id="chat-list-list" class="chat-list-list mode{{ mode }}">
-    <chat-item mode="{{ mode }}" memberLevel="{{ memberLevel }}" id="view{{ item.id }}" wx:for="{{ chatList }}" wx:for-index="index" wx:for-item="item" wx:key="id" chatItem="{{ item }}"></chat-item>
+    <chat-item mode="{{ mode }}" memberLevel="{{ memberLevel }}" id="view{{ item.id }}" wx:for="{{ chatList }}" wx:for-index="index" wx:for-item="item" wx:key="id" chatItem="{{ item }}" bind:tapgoods="onTapGoods"></chat-item>
   </view>
   <view id="chat-bottom"></view>
 </scroll-view>

package/lib/components/chat/chat.js

@@ -47,6 +47,10 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    // 商品推送消息点击：上抛 productClick 事件，复用直播间 handleProductClick 弹出详情
+    onTapGoods(e) {
+      this.triggerEvent('productClick', e.detail);
+    },
     // 显示接收到的消息
     showMessage(type, message) {
       const newMessage = {

package/lib/components/chat/chat.wxml

@@ -1,7 +1,6 @@
 <view class="chat-wrap mode{{mode}}">
-  <chat-list class="chat-list" mode="{{mode}}" id="chatList" sdkInstance="{{sdkInstance}}" chat-list="{{ chatList }}" />
+  <chat-list class="chat-list" mode="{{mode}}" id="chatList" sdkInstance="{{sdkInstance}}" chat-list="{{ chatList }}" bind:tapgoods="onTapGoods" />
   <chat-edit class="chat-edit" sdkInstance="{{sdkInstance}}">
     <slot></slot>
   </chat-edit>
-</view>
-
+</view>

package/lib/components/chat/chat.wxss

@@ -1 +1 @@
-.chat-wrap{display:flex;flex-direction:column;font-family:PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;height:100%;width:100%}.chat-wrap .chat-edit{height:3.2rem;padding-bottom:env(safe-area-inset-bottom);width:100%}.chat-wrap.mode1 .chat-edit{background-color:#fff}.chat-wrap.mode0 .comment-wrapper .chat-edit-input-box{flex:1;width:auto}.chat-wrap.mode0 .comment-wrapper .chat-edit-input,.chat-wrap.mode0 .comment-wrapper .chat-edit-input-placeholder{color:#fff}.chat-list{flex:1;height:0;position:relative}
+.chat-wrap{display:flex;flex-direction:column;font-family:PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;height:100%;position:relative;width:100%}.chat-wrap .featured-message{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4rpx 12rpx rgba(102,126,234,.3);display:flex;justify-content:space-between;left:0;padding:16rpx 60rpx 16rpx 16rpx;position:absolute;right:0;top:0;z-index:10}.chat-wrap .featured-message-content{flex:1;overflow:hidden}.chat-wrap .featured-message-header{align-items:center;display:flex;margin-bottom:8rpx}.chat-wrap .featured-message-label{background:hsla(0,0%,100%,.3);border-radius:4rpx;color:#fff;font-size:.75rem;margin-right:12rpx;padding:2rpx 12rpx}.chat-wrap .featured-message-nickname{color:hsla(0,0%,100%,.9);font-size:.85rem;font-weight:500}.chat-wrap .featured-message-text{color:#fff;font-size:.95rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-wrap .featured-message-close{align-items:center;color:hsla(0,0%,100%,.8);cursor:pointer;display:flex;font-size:1.5rem;height:44rpx;justify-content:center;line-height:1;position:absolute;right:16rpx;top:50%;transform:translateY(-50%);width:44rpx}.chat-wrap .featured-message-close:active{color:#fff}.chat-wrap .chat-edit{height:3.2rem;padding-bottom:env(safe-area-inset-bottom);width:100%}.chat-wrap.mode1 .chat-edit{background-color:#fff}.chat-wrap.mode0 .comment-wrapper .chat-edit-input-box{flex:1;width:auto}.chat-wrap.mode0 .comment-wrapper .chat-edit-input,.chat-wrap.mode0 .comment-wrapper .chat-edit-input-placeholder{color:#fff}.chat-list{flex:1;height:0;position:relative}

package/lib/components/chat-recommend/index.js

@@ -0,0 +1,113 @@
+import { isEmpty } from '../../shared/utils.js'
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+    // 直播间模式：0=竖屏，1=横屏（样式区分）
+    mode: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    showBanner: false, // 是否展示聊天精选 banner
+    nickName: '', // 发送者昵称
+    content: '', // 聊天精选内容
+    bannerZIndex: 100, // 横屏下与公告重叠时的层级（来自 store.zIndex.chatMsgRecommend）
+  },
+
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      this.sdkInstance = _sdkInstance;
+      this.unsub = this.sdkInstance.store.get({
+        chatMsgRecommend: (val) => {
+          this.applyRecommend(val);
+        },
+        'zIndex.chatMsgRecommend': (val) => {
+          this.setData({ bannerZIndex: val });
+        },
+      });
+
+      this.initEventListener();
+    },
+  },
+
+  lifetimes: {
+    detached() {
+      this.unsub && this.unsub();
+      this.unlistener?.();
+    },
+  },
+
+  methods: {
+    initEventListener() {
+      this.unlistener?.();
+      const EVENT = this.sdkInstance.EVENT;
+      const obj = {};
+      // 推送聊天精选（单条）：直接覆盖 store 中的聊天精选
+      obj[EVENT.CHAT_MSG_SET_RECOMMEND] = (msg) => {
+        const data = msg?.data || msg;
+        if (!data) return;
+        const item = {
+          id: data.msg_id,
+          content: data.msg_content,
+          nick_name: data.msg_account_nickname,
+          created_at: data.created_at,
+        };
+        // 设置精选内容
+        this.sdkInstance.store.set('chatMsgRecommend', item);
+        // 精选置顶
+        this.sdkInstance.store.setZIndex('chatMsgRecommend');
+      };
+
+      // 删除聊天精选：清空
+      obj[EVENT.CHAT_MSG_DEL_RECOMMEND] = (msg) => {
+        this.sdkInstance.store.set('chatMsgRecommend', null);
+      };
+
+      // 直播结束：自动关闭
+      obj[EVENT.LIVE_END] = () => {
+        this.closeRecommend();
+      };
+
+      this.unlistener = this.sdkInstance.on(obj);
+    },
+
+    // 根据 store 数据统一处理展示逻辑（单条）
+    // 兼容两种字段来源：
+    // 1) 接口初始值 / 推送原始结构：msg_content / msg_account_nickname / msg_id
+    // 2) 推送事件已归一化结构：content / nick_name / id
+    applyRecommend(val) {
+      if (isEmpty(val)) {
+        this.setData({ showBanner: false, nickName: '', content: '' });
+        return;
+      }
+
+      const id = val.id ?? val.msg_id;
+      const content = val.content ?? val.msg_content ?? '';
+      const nickName = val.nick_name ?? val.msg_account_nickname ?? '';
+
+      this.setData({
+        showBanner: true,
+        nickName,
+        content,
+        curMsgId: id,
+      });
+    },
+
+    // 被动关闭（删除/直播结束）：关闭当前 banner
+    closeRecommend() {
+      this.sdkInstance?.store.set('chatMsgRecommend', null);
+      this.setData({ showBanner: false, nickName: '', content: '' });
+    },
+
+    // 关闭顶部 banner（用户手动关闭）
+    handleClose() {
+      this.closeRecommend();
+    },
+  },
+});

package/lib/components/chat-recommend/index.json

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

package/lib/components/chat-recommend/index.wxml

@@ -0,0 +1,10 @@
+<view wx:if="{{showBanner}}" class="chat-recommend mode-{{mode}}" style="z-index:{{bannerZIndex}};">
+  <view class="chat-recommend-body">
+    <view class="chat-recommend-text">
+      <text class="chat-recommend-tag">「精选」</text>
+      <text class="chat-recommend-nick" wx:if="{{nickName}}">{{nickName}}：</text>
+      <text class="chat-recommend-content">{{content}}</text>
+    </view>
+  </view>
+  <view class="chat-recommend-close" catchtap="handleClose">&#10005;</view>
+</view>

package/lib/components/chat-recommend/index.wxss

@@ -0,0 +1 @@
+.chat-recommend{align-items:center;background:rgba(0,0,0,.5);border-radius:16rpx;box-sizing:border-box;color:#fff;display:flex;padding:12rpx 12rpx 12rpx 16rpx;position:fixed;z-index:100}.chat-recommend-body{align-items:flex-start;display:flex;flex:1;overflow:hidden}.chat-recommend-tag{color:#fb3a32;flex-shrink:0;font-size:28rpx;margin-right:8rpx}.chat-recommend-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;flex:1;font-size:28rpx;line-height:40rpx;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.chat-recommend-nick{color:hsla(0,0%,100%,.8);flex-shrink:0;font-size:28rpx}.chat-recommend-close{align-items:center;color:inherit;display:flex;font-size:32rpx;justify-content:center;position:absolute;right:12rpx;top:12rpx}.chat-recommend.mode-0{background:hsla(0,0%,100%,.8);border-radius:16rpx;bottom:calc(32vh + 32rpx);box-shadow:0 2rpx 12rpx rgba(0,0,0,.08);color:#262626;left:28rpx;max-width:520rpx;top:auto}.chat-recommend.mode-0 .chat-recommend-body{padding-right:32rpx}.chat-recommend.mode-0 .chat-recommend-nick{color:rgba(38,38,38,.6)}.chat-recommend.mode-1{background:linear-gradient(59.32deg,#ffebe9,#edecff 107.06%);border-radius:0;color:#262626;left:0;padding:16rpx 24rpx;right:0;top:calc(56.25vw + 85rpx)}.chat-recommend.mode-1 .chat-recommend-nick{color:rgba(38,38,38,.6)}.chat-recommend.mode-1 .chat-recommend-close{margin-left:16rpx;position:static}

package/lib/components/live-landscape/live-landscape.js

@@ -178,10 +178,18 @@ Component({
     },
     // 处理商品点击
     handleProductClick(e) {
+      console.log('handleProductClick:', e.detail);
       this.setData({
         selectedProduct: e.detail,
         showProductDetail: true,
       });
+
+      this.sdkInstance.get('productServer')?.reportGoodsView({
+        goods_id: e.detail.goods_id,
+        third_goods_id: e.detail.third_goods_id,
+        act: 'popup_click',
+        notice_type: 'buy'
+      });
     },
     // 关闭商品详情
     closeProductDetail() {
@@ -199,6 +207,13 @@ Component({
         showProductDetail: false,
         showOrder: true,
       });
+
+      this.sdkInstance.get('productServer')?.reportGoodsView({
+        goods_id: product.goods_id,
+        third_goods_id: product.third_goods_id,
+        act: 'popup_buy',
+        notice_type: 'buy'
+      });
     },
     // 关闭下单弹窗
     closeOrder() {

package/lib/components/live-landscape/live-landscape.json

@@ -14,6 +14,7 @@
     "vhall-lottery": "../lottery/lottery",
     "vhall-mall-reward":"../mall-reward/index",
     "vhall-announcement":"../announcement/index",
+    "vhall-chat-recommend":"../chat-recommend/index",
     "start-countdown": "../../pubComponents/countdown/countdown",
     "signin-dialog": "../signin/signin-dialog",
     "my-invite-detail": "../invite-rank/my-invite-detail",
@@ -33,6 +34,7 @@
     "vhall-lottery": "view",
     "vhall-mall-reward":"view",
     "vhall-announcement":"view",
+    "vhall-chat-recommend":"view",
     "vhall-invite-rank": "view"
   },
   "permissiion": {

package/lib/components/live-landscape/live-landscape.wxml

@@ -9,7 +9,7 @@
       <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}-{{id}}" wx:if="{{activeTab==index}}">
         <!-- 礼物显示组件 -->
         <vhall-gift-display wx:if="{{item.type == '3'}}" sdkInstance="{{sdkInstance}}" />
-        <vhall-chat class="tab-chat" wx:if="{{item.type == '3'}}" mode="{{1}}" bind:commentCheck="commentCheck" sdkInstance="{{sdkInstance}}">
+        <vhall-chat class="tab-chat" wx:if="{{item.type == '3'}}" mode="{{1}}" bind:commentCheck="commentCheck" bind:productClick="handleProductClick" sdkInstance="{{sdkInstance}}">
           <view class="gift-button" wx:if="{{giftAuth}}" bindtap="showGiftList">
             <image class="gift-icon" src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/icon_gift.020803f8.png" mode="aspectFit"></image>
           </view>
@@ -73,4 +73,6 @@
   <vhall-mall-reward wx:if="{{webinarStatus==1||webinarStatus==5}}" sdkInstance="{{sdkInstance}}" />
   <!-- 公告组件 -->
   <vhall-announcement wx:if="{{webinarStatus==1||webinarStatus==5}}" sdkInstance="{{sdkInstance}}" mode="{{1}}" />
+  <!-- 聊天精选 -->
+  <vhall-chat-recommend wx:if="{{webinarStatus==1||webinarStatus==5}}" sdkInstance="{{sdkInstance}}" mode="{{1}}" />
 </view>

package/lib/components/live-portrait/live-portrait.js

@@ -232,6 +232,13 @@ Component({
         showProductDetail: true,
         showProductList: false // 点击商品时关闭商品列表弹窗
       });
+
+      this.sdkInstance.get('productServer')?.reportGoodsView({
+        goods_id: e.detail.goods_id,
+        third_goods_id: e.detail.third_goods_id,
+        act: 'popup_click',
+        notice_type: 'buy'
+      });
     },
 
     // 关闭商品详情
@@ -270,6 +277,13 @@ Component({
         showProductDetail: false,
         showOrder: true,
       });
+
+      this.sdkInstance.get('productServer')?.reportGoodsView({
+        goods_id: product.goods_id,
+        third_goods_id: product.third_goods_id,
+        act: 'popup_buy',
+        notice_type: 'buy'
+      });
     },
 
     // 关闭下单弹窗

package/lib/components/live-portrait/live-portrait.json

@@ -14,6 +14,7 @@
     "vhall-lottery": "../lottery/lottery",
     "vhall-mall-reward": "../mall-reward/index",
     "vhall-announcement": "../announcement/index",
+    "vhall-chat-recommend": "../chat-recommend/index",
     "product-detail": "../product/product-detail/product-detail",
     "start-countdown": "../../pubComponents/countdown/countdown",
     "signin-dialog": "../signin/signin-dialog",
@@ -35,6 +36,7 @@
     "vhall-gift-sender": "view",
     "vhall-lottery": "view",
     "vhall-invite-rank": "view",
-    "vhall-announcement": "view"
+    "vhall-announcement": "view",
+    "vhall-chat-recommend": "view"
   }
 }

package/lib/components/live-portrait/live-portrait.wxml

@@ -6,8 +6,10 @@
   <view class="count_down_cover" wx:if="{{webinarStatus==2}}">
     <start-countdown class="count_down" sdkInstance="{{sdkInstance}}"></start-countdown>
   </view>
+  <!-- 聊天精选 -->
+  <vhall-chat-recommend wx:if="{{showChat && (webinarStatus==1||webinarStatus==5)}}" sdkInstance="{{sdkInstance}}" mode="{{0}}" />
   <!-- 聊天及其它菜单展示处理 -->
-  <vhall-chat class="live_portrait_chat {{webinarStatus==5?'live_back':''}}" wx:if="{{showChat}}" mode="{{0}}" bind:commentCheck="commentCheck" sdkInstance="{{sdkInstance}}">
+  <vhall-chat class="live_portrait_chat {{webinarStatus==5?'live_back':''}}" wx:if="{{showChat}}" mode="{{0}}" bind:commentCheck="commentCheck" bind:productClick="handleProductClick" sdkInstance="{{sdkInstance}}">
     <view class="gift-button" wx:if="{{giftAuth}}" bindtap="showGiftList">
       <image class="gift-icon" src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/icon_gift.020803f8.png" mode="aspectFit"></image>
     </view>
@@ -77,7 +79,7 @@
   <!-- 签到组件 -->
   <signin-dialog sdkInstance="{{ sdkInstance }}"></signin-dialog>
   <!-- 商品卡片 -->
-  <vhall-product-card sdkInstance="{{sdkInstance}}" bind:cardClick="handleProductClick"></vhall-product-card>
+  <vhall-product-card sdkInstance="{{sdkInstance}}" bind:cardClick="handleProductClick" bind:buyClick="showOrderDialog"></vhall-product-card>
   <!-- 商品详情 -->
   <vh-popup visible="{{showProductDetail}}" mode="bottom" maskClosable="true" bind:close="closeProductDetail">
     <vhall-product-detail product="{{selectedProduct}}" show="{{showProductDetail}}" sdkInstance="{{sdkInstance}}" bind:close="closeProductDetail" bind:buy="showOrderDialog" />