带货场景 商品

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Introduction
  • 3.1 Product Push Layout - PLVECCommodityPushLayout
  • 3.2 Product Popup View - PLVECCommodityPopupView

1 Feature Overview

The product module includes the product push layout PLVECCommodityPushLayout and the product popup view PLVECCommodityPopupView. During live streaming sales, products can be configured from the backend and pushed to the viewer side based on real-time conditions.

2 Usage Demo

Real-time updates of the product module rely on event listening in the chat room. Therefore, product-related interfaces must be implemented when constructing the chat room MVP view.

Example code for product control events is as follows:

// PLVECLiveHomeFragment.java
private IPLVChatroomContract.IChatroomView chatroomView = new PLVAbsChatroomView() {
    // 商品控制事件监听
    @Override
    public void onProductControlEvent(@NonNull PLVProductControlEvent productControlEvent) {
        super.onProductControlEvent(productControlEvent);
        acceptProductControlEvent(productControlEvent);
    }

    // 其它接口实现...
}

// 商品控制事件的处理
private void acceptProductControlEvent(final PLVProductControlEvent productControlEvent) {
    if (!isOpenCommodityMenu) {
        return;
    }
    handler.post(new Runnable() {
        @Override
        public void run() {
            final PLVProductContentBean contentBean = productControlEvent.getContent();
            if (productControlEvent.getContent() == null) {
                return;
            }
            if (productControlEvent.isPush()) {//商品推送
                commodityPushLayout.setViewActionListener(new PLVECCommodityPushLayout.ViewActionListener() {
                    @Override
                    public void onEnterClick() {
                        acceptBuyCommodityClick(contentBean);
                    }
                });
                // 更新推送布局的商品内容
                commodityPushLayout.updateView(contentBean.getProductId(), contentBean.getShowId(), contentBean.getCover(), contentBean.getName(), contentBean.getRealPrice(), contentBean.getPrice());
                // 显示推送布局
                commodityPushLayout.show();
            } else if (productControlEvent.isNewly()) {//新增
                commodityPopupView.add(contentBean, true);
            } else if (productControlEvent.isRedact()) {//编辑
                commodityPopupView.update(contentBean);
            } else if (productControlEvent.isPutOnShelves()) {//上架
                commodityPopupView.add(contentBean, false);
            }
        }
    });
}

3 Implementation Introduction

3.1 Product Push Layout - PLVECCommodityPushLayout

The product push layout is displayed when the backend sends a product control push event. It supports displaying a single product and is used to push a specific product during live sales.

The usage example of the product push layout is as follows:

// PLVECLiveHomeFragment.java
// 设置进入商品按钮点击回调
commodityPushLayout.setViewActionListener(new PLVECCommodityPushLayout.ViewActionListener() {
    @Override
    public void onEnterClick() {
        // 在点击进入商品按钮后，跳转到指定的购物页面
        acceptBuyCommodityClick(contentBean);
    }
});
// 更新推送布局显示的商品
commodityPushLayout.updateView(contentBean.getProductId(), contentBean.getShowId(), contentBean.getCover(), contentBean.getName(), contentBean.getRealPrice(), contentBean.getPrice());
// 显示推送布局，会在5秒后自动隐藏
commodityPushLayout.show();

3.2 Product Popup View - PLVECCommodityPopupView

The product popup view is displayed when the viewer clicks the shopping cart button on the homepage. It uses a list to display multiple products.

The usage example of the product popup view is as follows:

// PLVECLiveHomeFragment.java
private void showCommodityLayout(View v) {
    // 清空旧数据
    commodityPopupView.setCommodityVO(null);
    // 每次弹出都调用一次接口获取商品信息
    liveRoomDataManager.requestProductList();
    // 显示商品弹层
    commodityPopupView.showCommodityLayout(v, new PLVECCommodityAdapter.OnViewActionListener() {
        @Override
        public void onBuyCommodityClick(View view, PLVProductContentBean contentsBean) {
            acceptBuyCommodityClick(contentsBean);
        }

        @Override
        public void onLoadMoreData(int rank) {
            liveRoomDataManager.requestProductList(rank);
        }
    });
}

private void acceptProductControlEvent(final PLVProductControlEvent productControlEvent) {
    // 其它部分代码...
    if (productControlEvent.isPush()) {
        // 商品推送...
    } else if (productControlEvent.isNewly()) {
        // 商品弹层 新增商品
        commodityPopupView.add(contentBean, true);
    } else if (productControlEvent.isRedact()) {
        // 商品弹层 更新编辑商品
        commodityPopupView.update(contentBean);
    } else if (productControlEvent.isPutOnShelves()) {
        // 商品弹层 上架商品
        commodityPopupView.add(contentBean, false);
    }
}