保利威文档中心

幫助中心

4_4-带货场景-商品

更新時間：2023-04-17 15:27:57

1 功能概述

商品模組是在直播帶貨中可根據直播即時情況，由後台配置操作新增、刪除、修改資訊、排序商品，並有商品推播功能即時同步展示到觀看端上，主要三個頁面分別有：商品推播PLVECCommodityPushView、商品列表PLVECCommodityViewController和商品詳情PLVECGoodsDetailViewController，三個頁面展示和商品即時訊息功能是在PLVECHomePageView中實現的。

2 接收商品即時訊息

接收商品即時訊息能夠及時同步後台商品配置操作到觀看端，以確保觀眾看到的商品資料是最新的。商品即時訊息目前包括兩大類：配置操作商品和推播商品。

PLVECHomePageView.m

- (void)productMessageEvent:(NSDictionary *)jsonDict {
    NSString *subEvent = PLV_SafeStringForDictKey(jsonDict, @"EVENT");
    if (![subEvent isEqualToString:@"PRODUCT_MESSAGE"]) {
        return;
    }
    
    if (self.shoppingCardButton.isHidden) {
        return; // 未开启商品功能
    }
    
    NSInteger status = PLV_SafeIntegerForDictKey(jsonDict, @"status");
    
    // 配置操作商品
    if (self.commodityVC) {
        [self.commodityVC receiveProductMessage:status content:jsonDict[@"content"]];
    }
    
    // 处理推送商品
    if (9 == status) {
        NSDictionary *content = PLV_SafeDictionaryForDictKey(jsonDict, @"content");
        PLVCommodityModel *model = [PLVCommodityModel commodityModelWithDict:content];
        [self.pushView setModel:model];
    }
}

3 商品推播

商品推播是保利威雲直播後台中「觀看頁管理-商品庫-操作」列的「推播」按鈕功能，點擊「推播」按鈕直播帶貨場景會接收到商品即時訊息，彈出單個商品視圖PLVECCommodityPushView，5秒後自動消失。

3.1 PLVECCommodityPushView類別介紹

商品視圖PLVECCommodityPushView類別是UI佈局類別，類別定義如下：

@protocol PLVECCommodityPushViewDelegate <NSObject>

/// 点击跳转详情页回调
- (void)jumpToGoodsDetail:(NSURL *)goodsURL;

@end

@interface PLVECCommodityPushView : UIView

/// 商品图片
@property (nonatomic, strong) UIImageView *coverImageView;

/// 序号Id
@property (nonatomic, strong) UILabel *showIdLabel;

/// 商品名称
@property (nonatomic, strong) UILabel *nameLabel;

/// 商品价格
@property (nonatomic, strong) UILabel *realPriceLabel;

/// 购买价格
@property (nonatomic, strong) UILabel *priceLabel;

/// 关闭按钮
@property (nonatomic, strong) UIButton *closeButton;

/// 跳转详情按钮
@property (nonatomic, strong) UIButton *jumpButton;

/// 商品数据模型
@property (nonatomic, strong) PLVCommodityModel *model;

@property (nonatomic, weak) id<PLVECCommodityPushViewDelegate> delegate;

/// 销毁
- (void)destroy;

@end

3.2 PLVECCommodityPushView類別使用

PLVECCommodityPushView類別初始化、顯示、銷毀等操作是在PLVECHomePageView中實現管理的，具體使用程式碼可以查看Demo中PLVECHomePageView類別。

4 商品列表

商品列表功能以PLVECCommodityViewController為入口控制商品列表視圖PLVECCommodityPushView類別和資料管理PLVECCommodityModelsManager類別。

  • 類別定義介紹
@protocol PLVECCommodityDelegate <NSObject>

/// 商品跳转代理方法
- (void)jumpToGoodsDetail:(NSURL *)goodsURL;

@end

@interface PLVECCommodityViewController : UIViewController

@property (nonatomic, weak) id<PLVECCommodityDelegate> delegate;

/// 处理socket商品信息
///
/// @param status 商品操作信息类型
/// @param content 商品信息
- (void)receiveProductMessage:(NSInteger)status content:(id)content;

@end

  • 主要功能介紹

    • 初始化商品列表視圖類別並顯示；
    • 初始化資料管理類別，載入介面資料並綁定資料到商品列表；
    • 傳遞配置操作商品即時到資料管理類別；
    • 將跳轉商品詳情事件傳遞到PLVECHomePageView；

PLVECCommodityViewController類別的使用程式碼可以查看Demo中PLVECHomePageView類別。

5 核心Common和SDK

商品列表資料是呼叫Common層 6_2 核心common-資料中PLVRoomData定義的中間介面，Common呼叫SDK中PLVLiveVideoAPI定義介面來獲取的。

  • 商品列表資料實現介面
PLVECCommodityModelsManager.m

- (void)requestCommodityInfo:(NSInteger)rank completion:(void (^)(NSError *))completion {
    if (self.loading || self.totalItems == self.models.count) {
        return;
    }
    
    _loading = YES;
    
    PLVRoomData *roomData = [PLVRoomDataManager sharedManager].roomData;
    if (rank == 0) {
        [self.models removeAllObjects];
    }
    
    __weak typeof(self)weakSelf = self;
    [roomData requestCommodityList:roomData.channelId.integerValue
                              rank:rank
                             count:20
                        completion:^(NSUInteger total, NSArray<PLVCommodityModel *> *commoditys) {
        weakSelf.loading = NO;
        weakSelf.totalItems = total;
        
        [weakSelf.models addObjectsFromArray:commoditys];
        
        if (completion) {
            completion(nil);
        }
    } failure:^(NSError * _Nonnull error) {
        weakSelf.loading = NO;
        NSLog(@"requestCommodityInfo error description: %@",error.localizedDescription);
        if (completion) {
            completion(error);
        }
    }];
}
  • Common層介面定義
PLVRoomData.h

/**
 获取商品列表
 
 @param channelId 频道号
 @param rank 排序号 （加载序号以前的商品）
 @param count 获取列表数据大小，默认10条，最大20
 @param completion 加载成功 total：商品总数，commoditys：当前拉取的数据列表
（返回商品列表顺序与后台显示顺序一致）
 @param failure 加载失败
 */
- (void)requestCommodityList:(NSUInteger)channelId rank:(NSUInteger)rank count:(NSUInteger)count completion:(void (^)(NSUInteger total, NSArray<PLVCommodityModel *> *commoditys))completion failure:(void (^)(NSError *))failure;
  • SDK層介面定義
/**
PLVLiveVideoAPI.h

 获取商品列表
 
 @param channelId 频道号
 @param rank 排序号 （加载序号以前的商品）
 @param count 获取列表数据大小，默认10条，最大20
 @param completion 加载成功 total：商品总数，commoditys：当前拉取的数据列表
（返回商品列表顺序与后台显示顺序一致）
 @param failure 加载失败
 */
+ (void)loadCommodityList:(NSUInteger)channelId rank:(NSUInteger)rank count:(NSUInteger)count completion:(void (^)(NSUInteger, NSArray<PLVCommodityModel *> *))completion failure:(void (^)(NSError *))failure;

6 商品詳情

商品詳情功能是點擊推播頁或者商品列表購買按鈕，開啟保利威後台配置的商品通用連結Url地址。

商品詳情頁是PLVECGoodsDetailViewController類別來實現的，主要是WKWebView載入商品通用連結地址。

類別定義如下：

@interface PLVECGoodsDetailViewController : UIViewController

- (instancetype)initWithGoodsURL:(NSURL *)URL;

@end

具體實作程式碼可以查看Demo中PLVECGoodsDetailViewController

联系客服，在线咨询