# 4\_1-带货场景（页面）

* [1 功能概述](#_1-功能概述)
* [2 使用介绍](#_2-使用介绍)
* [3 页面介绍](#_3-页面介绍)
  * [3.1 页面 UI](#_31-页面-ui)
  * [3.2 直播间数据监听](#_32-直播间数据监听)

#### 1 功能概述

带货场景的页面实现为 **PLVECWatchRoomViewController**

带货场景下定义的 直播模式、回放模式 的 共用界面。 直播支持的功能有：播放器、聊天室、商品、打赏、互动应用。 回放支持的功能有：播放器。

#### 2 使用介绍

由于频道信息、登录用户账号信息等带货页面所需要的初始化参数，在登录时已经通过类 `PLVRoomLoginClient` 进行了配置，并在 `PLVRoomLoginClient` 内部使用 `PLVRoomDataManager` 类的单例对这些直播间数据信息进行了管理，进入带货场景的页面只需要以下代码：

```objective-c
PLVECWatchRoomViewController *vctrl = [[PLVECWatchRoomViewController alloc] init];
[self.navigationController pushViewController:vctrl animated:YES];
```

离开带货页面除了把页面从页面堆栈移出，务必调用 `PLVRoomLoginClient` 的登出接口，移除 `PLVRoomDataManager` 单例对当前直播间数据的持有和监听：

```objective-c
[PLVRoomLoginClient logout];
[self.navigationController popViewControllerAnimated:YES];
```

#### 3 页面介绍

**3.1 页面 UI**

带货场景页面，不管是直播还是回放，都由以下页面 UI 控件组成：

```objective-c
@property (nonatomic, strong) PLVECPlayerViewController *playerVC; // 页面底部播放控制器
@property (nonatomic, strong) UIScrollView *scrollView; // 播放器顶部横行透明滚动视图
@property (nonatomic, strong) PLVECLiveDetailPageView *liveDetailPageView; // 滚动视图第一屏
@property (nonatomic, strong) PLVECHomePageView *homePageView; // 滚动视图第二屏
@property (nonatomic, strong) UIButton *closeButton; // 右上角关闭按钮
```

其中，`scrollView` 有三屏，第一屏 `liveDetailPageView` 是显示公告信息、直播介绍，第二屏 `homePageView` 如果是直播，显示聊天室、点赞按钮、商品按钮、购物车按钮、礼物按钮等互动控件，如果是回放，显示回放视频进度条和切换视频播放速率等按钮等互动控件，第三屏为空白，用于用户希望无干扰观看时使用。进入页面默认显示第二屏。播放器位于 `scrollView` 底部，关闭按钮位于`scrollView` 上方。

视图结构如下：

```
.
└── PLVECWatchRoomViewController
	├── PLVECPlayerViewController
	├──	UIScrollView
	│	├── PLVECLiveDetailPageView
	│	└── PLVECHomePageView
	└── UIButton
```

其次，带货场景页面不支持横屏，只支持竖屏，因此需对父类 `UIViewController` 的以下方法进行覆写：

```objective-c
- (BOOL)shouldAutorotate {
    return NO;
}

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
    return UIInterfaceOrientationPortrait;
}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskPortrait;
}
```

**3.2 直播间数据监听**

页面需要对直播间数据 `PLVRoomData` 进行实时监听并作出相应的 UI 更新，首先，需要导入头文件 `#import "PLVRoomDataManager.h"`，并让 `PLVECWatchRoomViewController` 遵循协议 `PLVRoomDataManagerProtocol`，然后添加监听，代码示例如下：

```objective-c
[[PLVRoomDataManager sharedManager] addDelegate:self delegateQueue:dispatch_get_main_queue()];
```

代码示例中，`delegateQueue` 参数传入 `dispatch_get_main_queue()` 表示希望回调方法从主线程执行，这是由于当前页面相关回调里执行的操作都是更新 UI。

关于 `PLVRoomDataManager` 的更多介绍，详见文档《6\_2 核心common-数据》。

带货场景页面需要监听的 delegate 方法如下：

```objective-c
#pragma mark PLVRoomDataManager Protocol

/// 在线人数 onlineCount 更新
- (void)roomDataManager_didOnlineCountChanged:(NSUInteger)onlineCount {
    
}

/// 点赞数 likeCount 更新
- (void)roomDataManager_didLikeCountChanged:(NSUInteger)likeCount {
    
}

/// 播放状态 playing 更新
- (void)roomDataManager_didPlayingStatusChanged:(BOOL)playing {
    
}

/// 菜单信息 menuInfo 更新
- (void)roomDataManager_didMenuInfoChanged:(PLVLiveVideoChannelMenuInfo *)menuInfo {
    
}

/// 直播状态 liveState 更新
- (void)roomDataManager_didLiveStateChanged:(PLVChannelLiveStreamState)liveState {
    
}
```

监听的移除在 [2 使用介绍](/document/docs/live/ios/41-dai-huo-chang-jing-ye-mian.md) 里面提到的 `PLVRoomLoginClient` 的登出方法 `+logout` 内部进行，所以无需额外做移除监听的操作。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/live/ios/41-dai-huo-chang-jing-ye-mian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.