直播结束页面

@@ -172,9 +172,10 @@ export interface LiveDetailsBean {
 export interface LiveInfo {
   //直播新闻-直播状态  wait 待开播 running 直播中 end 已结束cancel已取消paused暂停
   liveState: string
-
   //2024-04-12 15:00:00 直播开始时间
   planStartTime: string
+  startTime: string
+  endTime: string
   //直播样式 0-正常模式 ， 1-隐藏直播间，2-隐藏大家聊 【人民号发布是竖屏的，为空】
   liveStyle: number;
   vlive: Array<Vlive>

@@ -7,5 +7,7 @@ export { PlayError } from './src/main/ets/view/PlayError'
 
 export { devicePLSensorManager } from './src/main/ets/utils/devicePortLandSensor'
 
+export { postInteractAccentionOperateParams } from './src/main/ets/request/ContentDetailRequest'
+
 
 

@@ -7,6 +7,7 @@ import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
 import { WDPlayerController } from 'wdPlayer/Index';
 import { DisplayDirection } from 'wdConstant/Index';
 import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index';
+import { PlayerEndView } from '../widgets/vertical/PlayerEndView';
 
 const storage = LocalStorage.getShared();
 const TAG = 'DetailPlayVLivePage'
@@ -29,6 +30,7 @@ export struct DetailPlayVLivePage {
   @State contentId: string = ''
   @State relType: string = ''
   @State swiperIndex: number = 1
+  @State imgUrl: string = ''
 
   aboutToAppear(): void {
     console.log(TAG, 'aboutToAppear')
@@ -51,50 +53,52 @@ export struct DetailPlayVLivePage {
   }
 
   build() {
-    Column() {
+
+    Stack() {
+      Image(this.imgUrl)
+        .height('100%')
+        .width('100%')
+        .blur(100)
+        .renderFit(RenderFit.RESIZE_COVER)
       // 直播结束且无回看
       if (this.liveState === 'end' && !this.playUrl) {
-        LiveEmptyComponent({
-          emptyType: WDLiveViewDefaultType.WDViewDefaultType_NoLiveEnd
-        })
+        PlayerEndView()
       } else {
-        Stack() {
-          // 直播暂停，仍然可以评论
-          if (this.liveState === 'pause') {
-            LiveEmptyComponent({
-              emptyType: WDLiveViewDefaultType.WDViewDefaultType_NoLiveSuspend
-            })
-          } else {
-            PlayerComponent({
-              playerController: this.playerController
-            })
-          }
-
-          PlayerInfoComponent({
-            playerController: this.playerController,
-            swiperController: this.swiperController,
-            swiperIndex: $swiperIndex
+        // 直播暂停，仍然可以评论
+        if (this.liveState === 'pause') {
+          LiveEmptyComponent({
+            emptyType: WDLiveViewDefaultType.WDViewDefaultType_NoLiveSuspend
+          })
+            .height('60%')
+        } else {
+          PlayerComponent({
+            playerController: this.playerController
           })
-
-          Image($r('app.media.icon_live_more'))
-            .width(40)
-            .aspectRatio(1)
-            .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
-            .animation({ duration: 500 })
-            .position({ x: '100%', y: '100%' })
-            .markAnchor({ x: 56, y: 56 })
-            .onClick(() => {
-              this.swiperController.showNext()
-            })
         }
-        .height('100%')
-        .width('100%')
+
+        PlayerInfoComponent({
+          playerController: this.playerController,
+          swiperController: this.swiperController,
+          swiperIndex: $swiperIndex
+        })
+
+        Image($r('app.media.icon_live_more'))
+          .width(40)
+          .aspectRatio(1)
+          .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
+          .animation({ duration: 500 })
+          .position({ x: '100%', y: '100%' })
+          .markAnchor({ x: 56, y: 56 })
+          .onClick(() => {
+            this.swiperController.showNext()
+          })
       }
 
 
     }
     .height('100%')
     .width('100%')
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
 
   getLiveDetails() {
@@ -103,7 +107,11 @@ export struct DetailPlayVLivePage {
         (data) => {
           if (data.length > 0) {
             this.liveDetailsBean = data[0]
-            this.liveState = this.liveDetailsBean.liveInfo?.liveState //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+            this.liveState = 'end' // this.liveDetailsBean.liveInfo?.liveState //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+            if (this.liveDetailsBean.fullColumnImgUrls && this.liveDetailsBean.fullColumnImgUrls.length > 0) {
+              this.imgUrl = this.liveDetailsBean.fullColumnImgUrls[0].url
+            }
+
             if (this.liveDetailsBean.liveInfo.liveState == 'end') {
               this.playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
             }

@@ -66,12 +66,7 @@ export struct PlayerComponent {
   build() {
     Column() {
       Stack() {
-        Image(this.imgUrl)
-          .height('100%')
-          .width('100%')
-          .blur(100)
-          .renderFit(RenderFit.RESIZE_COVER)
-
+      
         // TODO:判断横竖屏，liveStreamType=1竖屏铺满屏幕,裁剪不拉伸，liveStreamType=0横屏正常展示
         if (this.liveStreamType == null) {
           WDPlayerRenderVLiveView({

+import { LiveDetailsBean, LiveRoomDataBean, postBatchAttentionStatusParams, } from 'wdBean/Index'
+import { MultiPictureDetailViewModel } from 'wdComponent/src/main/ets/viewmodel/MultiPictureDetailViewModel'
+import { SpConstants } from 'wdConstant/Index'
+import { ContentDetailRequest, postInteractAccentionOperateParams } from 'wdDetailPlayApi/Index'
+import { NumberFormatterUtils, DateTimeUtils, SPHelper } from 'wdKit/Index'
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
+
+const TAG = 'PlayerEndView'
+
+@Preview
+@Component
+export struct PlayerEndView {
+  @Consume liveDetailsBean: LiveDetailsBean
+  @Consume liveRoomDataBean: LiveRoomDataBean
+  @State duration: string = ''
+  @State followStatus: String = '0';
+
+  aboutToAppear(): void {
+    const sn = DateTimeUtils.parseDate(this.liveDetailsBean.liveInfo.startTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
+    const en = DateTimeUtils.parseDate(this.liveDetailsBean.liveInfo.endTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
+    const sd = DateTimeUtils.getDuration(sn, en)
+    this.duration = DateTimeUtils.secondToTime(sd / 1000)
+    this.getBatchAttentionStatus()
+  }
+
+  /**
+   * 查询当前登录用户是否关注作品号主
+   * */
+  async getBatchAttentionStatus() {
+    try {
+      const params: postBatchAttentionStatusParams = {
+        creatorIds: [{ creatorId: this.liveDetailsBean?.rmhInfo?.rmhId ?? '' }]
+      }
+      let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
+      this.followStatus = data[0]?.status;
+      console.log(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
+    } catch (exception) {
+
+    }
+  }
+
+  /**
+   * 关注号主
+   */
+  async handleAccention() {
+    // 未登录，跳转登录
+    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
+    if (!user_id) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+    // TODO:直播间没有携带人民号信息
+    const params2: postInteractAccentionOperateParams = {
+      attentionUserType: this.liveDetailsBean?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: this.liveDetailsBean?.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: this.liveDetailsBean?.rmhInfo?.rmhId || '', // 被关注用户号主id
+      status: this.followStatus == '0' ? 1 : 0,
+    }
+
+
+    ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
+      console.log('关注号主==', JSON.stringify(res.data))
+      if (this.followStatus == '1') {
+        this.followStatus = '0'
+      } else {
+        this.followStatus = '1'
+      }
+    }).catch(() => {
+      AlertDialog.show({ message: '关注失败' })
+    })
+  }
+
+  build() {
+    Column() {
+      Text('直播已结束').fontWeight(500)
+        .fontSize(20)
+        .fontColor(Color.White)
+        .padding({ bottom: 40, top: 120 })
+
+      Stack() {
+        Column() {
+          Text(this.liveDetailsBean?.rmhInfo?.rmhName)
+            .fontWeight(400)
+            .fontSize(18)
+            .fontColor(Color.White)
+            .padding({ top: 52 })
+          Text(this.liveDetailsBean?.rmhInfo?.rmhDesc || '')
+            .fontWeight(400)
+            .fontSize(13)
+            .fontColor('#B2FFFFFF')
+            .padding({ top: 8 })
+
+          Row() {
+            Column() {
+              Text(this.duration).fontWeight(600).fontSize(24).fontColor(Color.White)
+              Text('时长').fontWeight(400).fontSize(13).fontColor(Color.White)
+            }
+
+            Text('').width(1).height(32).margin({ left: 36, right: 36 }).backgroundColor('#33FFFFFF')
+            Column() {
+              Text(NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean?.pv || ''))
+                .fontWeight(600)
+                .fontSize(24)
+                .fontColor(Color.White)
+              Text('观看人数').fontWeight(400).fontSize(13).fontColor(Color.White)
+            }
+          }
+          .padding({ top: 16 })
+
+          Row() {
+            Text(this.followStatus == '0' ? '关注' : '已关注')
+              .fontWeight(400)
+              .fontSize(16)
+              .fontColor(Color.White)
+              .padding({ top: 8, bottom: 8, left: 122, right: 122 })
+              .backgroundColor(this.followStatus == '0' ? '#FFED2800' : Color.Grey)
+              .borderRadius(4)
+              .onClick(() => {
+                this.handleAccention()
+              })
+          }
+          .padding({ top: 24 })
+
+        }
+        .width(307)
+        .height(254)
+        .backgroundColor('#999999')
+        .borderRadius(4)
+
+        Image(this.liveDetailsBean?.fullColumnImgUrls[0]?.url)
+          .width(80)
+          .height(80)
+          .borderRadius(40)
+          .borderWidth(1)
+          .borderColor(Color.White)
+          .borderStyle(BorderStyle.Solid)
+          .position({ x: '50%', y: 0 })
+          .markAnchor({ x: '50%', y: '50%' })
+      }
+      .width(307)
+      .padding({ top: 40 })
+    }
+    .height('100%')
+
+  }
+}
\ No newline at end of file

@@ -44,29 +44,30 @@ export struct PlayerTitleComponent {
 
     }
 
+    if (this.liveRoomDataBean.liveId) {
+      Row() {
+        if (this.liveState == 'running') {
+          Image($r('app.media.icon_live_status_running'))
+            .width(22)
+            .height(18)
+            .margin({ right: 1 })
+        }
 
-    Row() {
-      if (this.liveState == 'running') {
-        Image($r('app.media.icon_live_status_running'))
-          .width(22)
-          .height(18)
-          .margin({ right: 1 })
+        Text(this.liveState == 'running' ? '直播中' : '回看')
+          .fontSize(11)
+          .fontWeight(400)
+          .fontColor(Color.White)
+        Image($r('app.media.icon_live_player_status_end'))
+          .width(12)
+          .height(12)
+        Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
+          .fontSize('11fp')
+          .fontWeight(400)
+          .fontColor(Color.White)
       }
-
-      Text(this.liveState == 'running' ? '直播中' : '回看')
-        .fontSize(11)
-        .fontWeight(400)
-        .fontColor(Color.White)
-      Image($r('app.media.icon_live_player_status_end'))
-        .width(12)
-        .height(12)
-      Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
-        .fontSize('11fp')
-        .fontWeight(400)
-        .fontColor(Color.White)
+      .backgroundColor('#4D000000')
+      .borderRadius(2)
+      .padding(this.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
     }
-    .backgroundColor('#4D000000')
-    .borderRadius(2)
-    .padding(this.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
   }
 }