48 直播与购物袋联动系列五直播与画中画 · 第 8 篇对应工程features/multishoppinglivefeatures/multishoppingpayLiveUtil.ets、LiveBroadCastPage.ets、ShopBag.ets、PayCard.ets引言直播带货的闭环是看 → 点 → 买。前几篇把看做完了这篇打通点和买直播页底部购物袋入口LiveUtil→ 打开购物袋面板ShopBag→ 展示直播商品live_bag_product_1-4→ 点击「立即购买」拉起支付卡PayCard。整个联动横跨multishoppinglive与multishoppingpay两个特性模块靠LiveBroadCastPage的Event回调和panelType状态机串成一条完整的购买链路。入口LiveUtil 的购物袋按钮LiveUtil是直播页底部操作栏评论输入 分享/点赞/购物袋。购物袋按钮是红色圆钮点击通过Event上报父级Row(){SymbolGlyph($r(sys.symbol.bag_fill)).fontSize(24).fontColor([$r(sys.color.font_on_primary)])}.height(40).width(40).borderRadius(20).backgroundColor(#CF0A2C).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).onClick((){this.onOpenShopBag();})Event public onOpenShopBag: () void是 V2 组件的事件出口组件只负责我点了购物袋至于打开面板还是跳页面由父级决定。LiveBroadCast把它一路转发最终LiveBroadCastPage接住并打开面板。打开购物袋panelType 状态机LiveBroadCastPage用三个Local字段管理面板状态LocalpublicisDialogOpen:booleanfalse;// 面板是否显示LocalpublicisMoreDetail:booleantrue;// 是否展开更多详情LocalpublicpanelType:stringShopBag;// 当前面板类型购物袋入口统一走到同一段逻辑LiveBroadCast({onOpenShopBag:(){this.panelTypeShopBag;this.isMoreDetailtrue;this.isDialogOpentrue;}})这里做了三件事切换到购物袋面板、重置为更多详情态、打开面板。panelType是面板内容的状态机——只有两个值ShopBag购物袋与detailPayCard支付卡。面板内容区按panelType用visibility互斥显示Column(){ShopBag({...}).visibility(this.panelTypeShopBag?Visibility.Visible:Visibility.None)PayCard({...}).visibility(this.panelTypedetailPayCard?Visibility.Visible:Visibility.None)}面板呈现bindSheet 与侧栏同样的面板内容在不同断点下用不同容器承载小屏XS/SMColumn上挂bindSheet($$this.isDialogOpen, this.panelContent(), { height: 620vp, preferType: SheetType.CENTER, ... })620vp 的半屏居中弹窗$$双向绑定让面板收起时自动同步isDialogOpen false。大屏MD/LG/XLif (this.isDialogOpen) { this.sidePanel() }把面板作为右侧栏宽 37.5%直接嵌入页面左侧直播舞台压缩到 62.5%。小屏的bindSheet还配了enableOutsideInteractive: false禁止点击外部交互保证直播画面不被误操作与showClose: false用面板内部的关闭按钮。购物袋列表ShopBag 与 ShopListShopBag是购物袋容器头部ShopBagHeaderTabs分类 ShopList商品列表。头部图标来自ShopBagModel.getHeaderIcons正是资源文件icon_bag.svg购物袋、icon_search.svg搜索、icon_order.svg订单staticgetHeaderIcons(context:Context):ShopBagHeaderIconConfig[]{return[{icon:$r(app.media.icon_bag),name:...},{icon:$r(app.media.icon_search),name:...},{icon:$r(app.media.icon_order),name:...}];}ShopList渲染购物袋商品图片正是直播专属的live_bag_product_1-4.png与直播商品的live_product_1-8是两套资源购物袋是已加购的精选集合{image:$r(app.media.live_bag_product_1),name:iPad Air 5,remark:g($r(app.string.SHOP_BAG_P1_REMARK)),discounts:[g($r(app.string.SHOP_BAG_DISCOUNT_POINTS)),g($r(app.string.SHOP_BAG_DISCOUNT_FLAGSHIP))],price:2199}每件商品卡片尾部是立即购买按钮——它来自ShopBag向下注入的BuilderParam payCardButtonBuilderParampublicpayCardButton:()voidthis.payCardBuilder;// ShopList 内Row(){Text(this.currencyPrefixJSON.stringify(item.getPrice()))...Blank()this.payCardButton()// 渲染父级注入的按钮}BuilderParam让按钮成为可注入的插槽LiveBroadCastPage注入的正是payCardButton构建器——点击后panelType detailPayCard、打开支付卡面板BuilderprivatepayCardButton(){Text($r(app.string.LIVE_PAGE_BUY_NOW)).height(28).borderRadius(14).fontSize(12).backgroundColor(#CF0A2C).onClick((){this.panelTypedetailPayCard;this.isDialogOpentrue;})}购买流程从直播发起立即购买后链路变为ShopBag→PayCard。PayCard是支付卡组件通过两个Event与页面双向同步PayCard({isOpen:this.isDialogOpen,detailType:this.panelType,onIsOpenChange:(value:boolean){this.isDialogOpenvalue;},onDetailTypeChange:(value:string){this.panelTypevalue;if(valueShopBag){this.isDialogOpentrue;// 从支付卡返回购物袋}}})PayCard内部用SelectItem/SelectProjectItem提供支付方式选择getPayCardSelectList头部有关闭/返回按钮detailType detailPayCard时关闭面板否则onDetailTypeChange(ShopBag)退回购物袋。至此从直播页发起的看 → 点 → 买闭环完成。注意事项与总结事件只传意图onOpenShopBag是纯事件出口打开什么面板、怎么呈现由页面根据断点决定——小屏弹窗、大屏侧栏同一事件两套承载。panelType 互斥渲染ShopBag与PayCard用visibility互斥显示而非条件渲染两个组件常驻内存、切换零重建真实项目组件重时可改为if/else。BuilderParam 注入按钮payCardButton作为插槽从页面注入ShopBag再注入ShopList按钮的样式与行为可以完全自定义组件不感知。**双向绑定∗∗‘bindSheet( 双向绑定**bindSheet(双向绑定∗∗‘bindSheet(this.isDialogOpen, …)让面板关闭事件自动回写状态不用手动监听onDisappear 之外的回调。购买链路在直播页内部闭环入口按钮 → 购物袋 → 支付卡。接下来两篇回到视频本身播放控制与异常处理、以及 rawfile 资源管理。
48 直播与购物袋联动系列五直播与画中画 · 第 8 篇对应工程features/multishoppinglivefeatures/multishoppingpayLiveUtil.ets、LiveBroadCastPage.ets、ShopBag.ets、PayCard.ets引言直播带货的闭环是看 → 点 → 买。前几篇把看做完了这篇打通点和买直播页底部购物袋入口LiveUtil→ 打开购物袋面板ShopBag→ 展示直播商品live_bag_product_1-4→ 点击「立即购买」拉起支付卡PayCard。整个联动横跨multishoppinglive与multishoppingpay两个特性模块靠LiveBroadCastPage的Event回调和panelType状态机串成一条完整的购买链路。入口LiveUtil 的购物袋按钮LiveUtil是直播页底部操作栏评论输入 分享/点赞/购物袋。购物袋按钮是红色圆钮点击通过Event上报父级Row(){SymbolGlyph($r(sys.symbol.bag_fill)).fontSize(24).fontColor([$r(sys.color.font_on_primary)])}.height(40).width(40).borderRadius(20).backgroundColor(#CF0A2C).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).onClick((){this.onOpenShopBag();})Event public onOpenShopBag: () void是 V2 组件的事件出口组件只负责我点了购物袋至于打开面板还是跳页面由父级决定。LiveBroadCast把它一路转发最终LiveBroadCastPage接住并打开面板。打开购物袋panelType 状态机LiveBroadCastPage用三个Local字段管理面板状态LocalpublicisDialogOpen:booleanfalse;// 面板是否显示LocalpublicisMoreDetail:booleantrue;// 是否展开更多详情LocalpublicpanelType:stringShopBag;// 当前面板类型购物袋入口统一走到同一段逻辑LiveBroadCast({onOpenShopBag:(){this.panelTypeShopBag;this.isMoreDetailtrue;this.isDialogOpentrue;}})这里做了三件事切换到购物袋面板、重置为更多详情态、打开面板。panelType是面板内容的状态机——只有两个值ShopBag购物袋与detailPayCard支付卡。面板内容区按panelType用visibility互斥显示Column(){ShopBag({...}).visibility(this.panelTypeShopBag?Visibility.Visible:Visibility.None)PayCard({...}).visibility(this.panelTypedetailPayCard?Visibility.Visible:Visibility.None)}面板呈现bindSheet 与侧栏同样的面板内容在不同断点下用不同容器承载小屏XS/SMColumn上挂bindSheet($$this.isDialogOpen, this.panelContent(), { height: 620vp, preferType: SheetType.CENTER, ... })620vp 的半屏居中弹窗$$双向绑定让面板收起时自动同步isDialogOpen false。大屏MD/LG/XLif (this.isDialogOpen) { this.sidePanel() }把面板作为右侧栏宽 37.5%直接嵌入页面左侧直播舞台压缩到 62.5%。小屏的bindSheet还配了enableOutsideInteractive: false禁止点击外部交互保证直播画面不被误操作与showClose: false用面板内部的关闭按钮。购物袋列表ShopBag 与 ShopListShopBag是购物袋容器头部ShopBagHeaderTabs分类 ShopList商品列表。头部图标来自ShopBagModel.getHeaderIcons正是资源文件icon_bag.svg购物袋、icon_search.svg搜索、icon_order.svg订单staticgetHeaderIcons(context:Context):ShopBagHeaderIconConfig[]{return[{icon:$r(app.media.icon_bag),name:...},{icon:$r(app.media.icon_search),name:...},{icon:$r(app.media.icon_order),name:...}];}ShopList渲染购物袋商品图片正是直播专属的live_bag_product_1-4.png与直播商品的live_product_1-8是两套资源购物袋是已加购的精选集合{image:$r(app.media.live_bag_product_1),name:iPad Air 5,remark:g($r(app.string.SHOP_BAG_P1_REMARK)),discounts:[g($r(app.string.SHOP_BAG_DISCOUNT_POINTS)),g($r(app.string.SHOP_BAG_DISCOUNT_FLAGSHIP))],price:2199}每件商品卡片尾部是立即购买按钮——它来自ShopBag向下注入的BuilderParam payCardButtonBuilderParampublicpayCardButton:()voidthis.payCardBuilder;// ShopList 内Row(){Text(this.currencyPrefixJSON.stringify(item.getPrice()))...Blank()this.payCardButton()// 渲染父级注入的按钮}BuilderParam让按钮成为可注入的插槽LiveBroadCastPage注入的正是payCardButton构建器——点击后panelType detailPayCard、打开支付卡面板BuilderprivatepayCardButton(){Text($r(app.string.LIVE_PAGE_BUY_NOW)).height(28).borderRadius(14).fontSize(12).backgroundColor(#CF0A2C).onClick((){this.panelTypedetailPayCard;this.isDialogOpentrue;})}购买流程从直播发起立即购买后链路变为ShopBag→PayCard。PayCard是支付卡组件通过两个Event与页面双向同步PayCard({isOpen:this.isDialogOpen,detailType:this.panelType,onIsOpenChange:(value:boolean){this.isDialogOpenvalue;},onDetailTypeChange:(value:string){this.panelTypevalue;if(valueShopBag){this.isDialogOpentrue;// 从支付卡返回购物袋}}})PayCard内部用SelectItem/SelectProjectItem提供支付方式选择getPayCardSelectList头部有关闭/返回按钮detailType detailPayCard时关闭面板否则onDetailTypeChange(ShopBag)退回购物袋。至此从直播页发起的看 → 点 → 买闭环完成。注意事项与总结事件只传意图onOpenShopBag是纯事件出口打开什么面板、怎么呈现由页面根据断点决定——小屏弹窗、大屏侧栏同一事件两套承载。panelType 互斥渲染ShopBag与PayCard用visibility互斥显示而非条件渲染两个组件常驻内存、切换零重建真实项目组件重时可改为if/else。BuilderParam 注入按钮payCardButton作为插槽从页面注入ShopBag再注入ShopList按钮的样式与行为可以完全自定义组件不感知。**双向绑定∗∗‘bindSheet( 双向绑定**bindSheet(双向绑定∗∗‘bindSheet(this.isDialogOpen, …)让面板关闭事件自动回写状态不用手动监听onDisappear 之外的回调。购买链路在直播页内部闭环入口按钮 → 购物袋 → 支付卡。接下来两篇回到视频本身播放控制与异常处理、以及 rawfile 资源管理。
