> For the complete documentation index, see [llms.txt](https://polyv.gitbook.io/document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://polyv.gitbook.io/document/docs/live/ios/41-dai-huo-chang-jing-ye-mian.md).

# 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` 内部进行，所以无需额外做移除监听的操作。