直播详情页互动改造

@@ -207,6 +207,14 @@ export class HttpUrlUtils {
    */
    */
   static readonly LIVE_ROOM_DATA_PATH: string = "/api/live-center-message/zh/a/live/room/number/all";
   static readonly LIVE_ROOM_DATA_PATH: string = "/api/live-center-message/zh/a/live/room/number/all";
   /**
   /**
+   * 直播详情-C端点赞接口
+   */
+  static readonly LIVE_ROOM_NUMBER_LIKE: string = "/api/live-center-message/zh/c/live/room/number/like";
+  /**
+   * 直播详情-查询是否点赞接口
+   */
+  static readonly LIVE_LIKE: string = "/api/live-center-message/zh/a/live/like";
+  /**
    * 直播详情-预约直播状态
    * 直播详情-预约直播状态
    */
    */
   static readonly LIVE_APPOINTMENT_STATUS_PATH: string = "/api/live-center-message/zh/c/live/subscribe/query";
   static readonly LIVE_APPOINTMENT_STATUS_PATH: string = "/api/live-center-message/zh/c/live/subscribe/query";
@@ -633,11 +641,21 @@ export class HttpUrlUtils {
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_CHAT_LIST_PATH
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_CHAT_LIST_PATH
     return url
     return url
   }
   }
-
+  // 直播详情-直播数据
   static getLiveRoomDataUrl() {
   static getLiveRoomDataUrl() {
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_ROOM_DATA_PATH
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_ROOM_DATA_PATH
     return url
     return url
   }
   }
+  // 直播详情-C端点赞接口
+  static getLiveRoomNumberLikeUrl() {
+    let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_ROOM_NUMBER_LIKE
+    return url
+  }
+  // 直播详情-查询是否点赞接口
+  static getLiveLikeUrl() {
+    let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_LIKE
+    return url
+  }
 
 
   static getLiveAppointmentStatusUrl() {
   static getLiveAppointmentStatusUrl() {
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_APPOINTMENT_STATUS_PATH
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.LIVE_APPOINTMENT_STATUS_PATH

@@ -122,7 +122,7 @@ export { appStyleImagesDTO } from './src/main/ets/bean/content/appStyleImagesDTO
 
 
 export { LiveRoomBean, LiveRoomItemBean } from './src/main/ets/bean/live/LiveRoomBean';
 export { LiveRoomBean, LiveRoomItemBean } from './src/main/ets/bean/live/LiveRoomBean';
 
 
-export { LiveRoomDataBean } from './src/main/ets/bean/live/LiveRoomDataBean';
+export { LiveRoomDataBean, ValueType } from './src/main/ets/bean/live/LiveRoomDataBean';
 
 
 export { ReserveBean } from './src/main/ets/bean/live/ReserveBean';
 export { ReserveBean } from './src/main/ets/bean/live/ReserveBean';
 
 

@@ -4,4 +4,6 @@ export interface LiveRoomDataBean {
   liveId: number,
   liveId: number,
   pv: number,
   pv: number,
   subscribeNum: number,
   subscribeNum: number,
-}
+}
+
+export type ValueType = number | string | boolean | Array<number> | Array<string> | Array<boolean> | Uint8Array | object | bigint;

@@ -90,6 +90,8 @@ export { MultiPictureDetailItemComponent } from './src/main/ets/components/Multi
 
 
 export { OperRowListView } from './src/main/ets/components/view/OperRowListView';
 export { OperRowListView } from './src/main/ets/components/view/OperRowListView';
 
 
+export { LiveOperRowListView } from './src/main/ets/components/view/LiveOperRowListView';
+
 export { ImageDownloadComponent } from './src/main/ets/components/ImageDownloadComponent';
 export { ImageDownloadComponent } from './src/main/ets/components/ImageDownloadComponent';
 
 
 export { PageRepository } from './src/main/ets/repository/PageRepository';
 export { PageRepository } from './src/main/ets/repository/PageRepository';

+import { DisplayUtils, NumberFormatterUtils } from 'wdKit/Index'
+import { SPHelper } from 'wdKit';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { SpConstants } from 'wdConstant/Index';
+import measure from '@ohos.measure'
+import {
+  ContentDetailRequest,
+  postExecuteLikeParams,
+} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
+import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index';
+import {
+  ContentDetailDTO,
+  contentListParams,
+} from 'wdBean';
+import { PageRepository } from '../../repository/PageRepository';
+import { LiveModel } from '../../viewmodel/LiveModel';
+import { HttpUtils } from 'wdNetwork/Index';
+
+const TAG = 'LiveLikeComponent';
+
+interface ILikeStyleResp {
+  url: Resource;
+  name: string;
+}
+
+@Component
+export struct LiveLikeComponent {
+  private LiveModel: LiveModel = new LiveModel()
+  @Consume contentDetailData: ContentDetailDTO
+  @Prop pageComponentType: number
+  @State likesStyle: string = "love" // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
+  @State likeStatus: boolean = false
+  @State openLikes: boolean = false // 是否可以点赞  1：可以 0：不可以
+  @Prop @Watch('onDataUpdated') data: Record<string, string>
+  enableBtn = true
+  styleType: number = 1 //1: 白色背景（图文底部栏）    2: 黑色背景（图集底部栏） 3 透明背景
+  @State likeCount: number = 0 //点赞数
+  pageParam: ParamType = {}
+  PageName: string = ''
+
+  //上层传值  样例
+  // this.data['contentId'] = '30035444649' //必须
+  // this.data['userName'] = '人民日报网友2kD2xW'
+  // this.data['contentType'] = '8'  //必须
+  // this.data['title'] = '开创两校交流先河！克罗地亚教育代表团访问同济大学'
+  // this.data['userHeaderUrl'] = ""
+  // this.data['channelId'] = "2059"  //必须
+  // this.data['status'] = "1"
+  // 内容用 是否开启点赞 1是 0否;
+  // this.contentDetailData.openLikes == 1
+  async aboutToAppear() {
+    // 2：竖屏直播页  4：横屏直播页
+    // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
+    this.likesStyle = this.contentDetailData?.liveInfo?.likesStyle
+    this.openLikes = this.contentDetailData?.liveInfo?.likeEnable == 1 ? true : false
+    console.log(TAG, 'this.contentDetailData', JSON.stringify(this.contentDetailData))
+    console.log(TAG, 'this.likesStyle', this.likesStyle)
+    console.log(TAG, 'this.openLikes', this.openLikes)
+    this.onDataUpdated()
+    this.contentTrackingDict()
+  }
+
+  onDataUpdated() {
+    console.log(TAG, '点赞点击')
+    if (this.data) {
+      if (this.data['contentType'] !== 'undefined') {
+        //获取点赞状态
+        this.getLikeStatus()
+        //获取点赞数
+        this.getLikeCount()
+      }
+    }
+  }
+
+  contentTrackingDict(){
+    this.pageParam = {
+      'contentType': `${this.contentDetailData.newsType}`,
+      'contentId': `${this.contentDetailData.newsId}`,
+      'contentName': `${this.contentDetailData.newsTitle || ''}`,
+    }
+    if(this.contentDetailData.newsType == 2) {
+      this.PageName = TrackConstants.PageName.Live_Detail // 直播
+    }
+  }
+
+  build() {
+    // 直播，点赞按钮底测有灰色圆角背景+右上点赞数量
+    this.likeCompStyle()
+  }
+
+  /**
+   * 将点赞样式转换为icon
+   */
+  transLikeStyle(): ILikeStyleResp {
+    if (this.likesStyle === 'love' || this.likesStyle === 'thumb') {
+      return {
+        url: this.likeStatus ? $r(`app.media.ic_like_check`) :
+          this.styleType == 1 ? $r('app.media.icon_like_default') : $r(`app.media.ic_like_uncheck`),
+        name: '赞'
+      }
+    } else if (this.likesStyle === 'pray') {
+      return {
+        url: this.likeStatus ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`),
+        name: '祈祷'
+      }
+    } else if (this.likesStyle === 'mourning') {
+      return {
+        url: this.likeStatus ? $r(`app.media.ic_candle_check`) :
+        $r(`app.media.ic_candle_uncheck`),
+        name: '默哀'
+      }
+    }
+    return {
+      url: this.likeStatus ? $r(`app.media.ic_like_check`) :
+        this.styleType == 1 ? $r('app.media.icon_like_default') : $r(`app.media.ic_like_uncheck`),
+      name: '点赞'
+    }
+  }
+
+  @Builder
+  likeCompStyle() {
+    Stack({ alignContent: Alignment.Bottom }) {
+      Column() {
+        Image(this.transLikeStyle().url)
+          .width(24)
+          .height(24)
+          .onClick(() => {
+            this.clickButtonEvent()
+          })
+      }
+      .justifyContent(FlexAlign.Center)
+      .width(36)
+      .height(36)
+      .borderRadius(18)
+      .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5')
+      Row() {
+        Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))
+          .fontSize(8)
+          .fontColor(Color.White)
+          .padding({ left: 8, right: 2 })
+      }
+      .height(12)
+      .alignItems(VerticalAlign.Center)
+      .position({ x: '100%', y: 10 })
+      .markAnchor({ x: '100%' })
+      .backgroundImage($r('app.media.ic_like_back'))
+      .backgroundImageSize({height: 13})
+      .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
+        12)
+      .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
+    }
+    .width(36)
+    .height(42)
+    .visibility(this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
+
+  }
+
+  async clickButtonEvent() {
+    console.log(TAG, '点赞点击')
+    // 未登录，跳转登录
+    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
+    if (!user_id) {
+      console.log(TAG, '点赞点击,未登录')
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    // if (!this.enableBtn) {
+    //   return
+    // }
+    this.executeLike(this.likeStatus ? '0' : '1')
+
+  }
+
+  executeLike(status: string) {
+    console.log(TAG, '点赞接口调用', status)
+
+    const params: postExecuteLikeParams = {
+      status: Number(status),
+      contentId: this.data['contentId'],
+      contentType: this.data['contentType']
+    }
+    if(this.data['relType']) {
+      params.relType = this.data['relType']
+    }
+    if(this.data['contentRelId']) {
+      params.contentRelId = this.data['contentRelId']
+    }
+    if(this.data['channelId']) {
+      params.channelId = this.data['channelId']
+    }
+
+    console.log(TAG, "点赞 params", JSON.stringify(params))
+    ContentDetailRequest.postExecuteLike(params).then((data) => {
+
+      console.log(TAG, '点赞接口调用成功', JSON.stringify(data))
+
+      // 直播点赞一直增加
+      if (this.contentDetailData.liveInfo) {
+        this.likeStatus = true
+        this.likeCount++
+        TrackingContent.like(true,this.PageName,this.PageName,this.pageParam)
+      }
+
+      if (this.likeCount <= 0) {
+        this.likeCount = 0
+      }
+
+      this.enableBtn = true
+    }).catch(() => {
+      this.enableBtn = true
+    })
+  }
+
+  async getLikeStatus() {
+    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
+    if (!user_id) {
+      console.log(TAG, '查询点赞状态,未登录')
+      return
+    }
+    this.LiveModel.getLiveLike(this.data['contentId'], user_id, HttpUtils.getDeviceId()).then(data => {
+      console.log(TAG, '查询点赞、收藏状态==', JSON.stringify(data))
+      this.likeStatus = data
+    }).catch(() => {
+      this.likeStatus = false
+    })
+  }
+
+  /**
+   * 获取点赞数
+   */
+  getLikeCount() {
+    // console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
+    const params: contentListParams = {
+      contentList: [{
+        contentId: this.contentDetailData?.newsId + '',
+        contentType: this.contentDetailData?.newsType,
+      }]
+    }
+    console.log(TAG, '查询点赞、收藏数量', JSON.stringify(params))
+    PageRepository.getContentInteract(params).then(res => {
+      console.log(TAG, '查询点赞、收藏数量 res', JSON.stringify(res))
+      if (res.data) {
+        this.likeCount = Number(res.data[0]?.likeNum)
+      } else {
+        this.likeCount = 0
+      }
+    }).catch(() => {
+      this.likeCount = 0
+    })
+  }
+  private getMeasureText(text: string) {
+    let width = measure.measureText({
+      textContent: text,
+      fontSize: 8,
+      lineHeight: 12,
+      constraintWidth: DisplayUtils.getDeviceWidth(),
+    })
+    width = px2vp(width)
+    return width
+  }
+}

+import { NumberFormatterUtils, SPHelper } from 'wdKit';
+import promptAction from '@ohos.promptAction';
+import {
+  batchLikeAndCollectResult,
+  batchLikeAndCollectParams,
+  ContentDetailDTO,
+  contentListParams,
+  InteractDataDTO,
+  postExecuteCollectRecordParams
+} from 'wdBean';
+import router from '@ohos.router';
+import { MultiPictureDetailViewModel } from '../../viewmodel/MultiPictureDetailViewModel';
+import { LiveLikeComponent } from './LiveLikeComponent';
+import { CommentTabComponent, CommentIconComponent, } from '../comment/view/CommentTabComponent';
+import { publishCommentModel } from '../comment/model/PublishCommentModel'
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { PageRepository } from '../../repository/PageRepository';
+import { SpConstants } from 'wdConstant/Index';
+import { WDShare } from 'wdShare/Index';
+import { EmitterEventId, EmitterUtils } from 'wdKit/Index'
+import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index';
+
+const TAG = 'LiveOperRowListView';
+
+/**
+ * 直播详情页底部通栏组件：包含返回、评论、点赞、收藏、分享
+ * 上层传值：
+ * 1、（必传）    contentDetailData---直播详情
+ * 2、（非必传）  operationButtonList---组件展示条件，
+ * ['comment', 'like', 'collect', 'share']，需要展示什么传什么
+ * comment--评论；like--点赞；collect--收藏；share--分享；
+ * 注意：外层需注册 @Provide contentDetailData:contentDetailData = {} as contentDetailData
+ * 传值示例：
+ LiveOperRowListView({
+
+ contentDetailData: this.contentDetailData[0],
+ operationButtonList: ['comment', 'like', 'collect', 'share']
+ })
+ */
+
+@Preview
+@Component
+export struct LiveOperRowListView {
+  private onBack: () => void = () => {
+  }
+  private onCommentFocus: () => void = () => {
+  }
+  private onCommentIconClick: () => void = () => {
+  }
+
+  @Provide inDialog: boolean = false
+
+  @Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO // 稿件详情
+  /**
+   * 用于区分页面类型，在哪个页面嵌套就传相应的值
+   * 2：竖屏直播页 4：横屏直播页
+   * 8: 评论弹框内
+   */
+  @Prop pageComponentType?: number = -1
+  @Prop showBackIcon?: boolean = true
+  @Prop operationButtonList?: string[] = ['comment', 'collect', 'share'] // 组件展示条件
+  @State needLike: boolean = true
+  @ObjectLink publishCommentModel: publishCommentModel
+  @State styleType: number = -1
+  @State showCommentIcon: boolean = true // 评论图标
+  @State bgColor: ResourceColor = Color.White
+  @State interactData: InteractDataDTO = {} as InteractDataDTO
+  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
+  @State likeBean: Record<string, string> = {}
+  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
+  @State dialogController: CustomDialogController | null = null;
+  pageParam: ParamType = {}
+  PageName: string = ''
+  @State likesStyle: number | string = "love" // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
+  @State openLikes: boolean = false // 是否可以点赞  1：可以 0：不可以
+
+  async aboutToAppear() {
+    console.info(TAG, 'this.needLike', this.needLike)
+    this.handleStyle()
+    this.onDetailUpdated()
+    //注册通知，来自别的组件的评论成功通知
+    EmitterUtils.receiveEvent(EmitterEventId.COMMENT_PUBLISH, (targetId?: string) => {
+      if (targetId) {
+        if (targetId == this.publishCommentModel.targetId) {
+          //新增评论
+          this.queryContentInteractCount()
+        }
+      }
+    })
+    this.contentTrackingDict()
+  }
+
+  contentTrackingDict(){
+    this.pageParam = {
+      'contentType': `${this.contentDetailData.newsType}`,
+      'contentId': `${this.contentDetailData.newsId}`,
+      'contentName': `${this.contentDetailData.newsTitle || ''}`,
+    }
+    if(this.contentDetailData.newsType == 2) {
+      this.PageName = TrackConstants.PageName.Live_Detail // 直播
+    }
+  }
+
+  async onDetailUpdated() {
+    console.info(TAG, 'this.styleType', this.styleType)
+    this.handleStyle()
+    if (!this.contentDetailData) {
+      return
+    }
+    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
+    if (user_id) {
+      this.getInteractDataStatus()
+    }
+    await this.queryContentInteractCount()
+    // 点赞需要数据
+    this.likeBean['contentId'] = this.contentDetailData.newsId + ''
+    if(this.contentDetailData.userInfo?.userName) {
+      this.likeBean['userName'] = this.contentDetailData.userInfo?.userName + ''
+    }
+    this.likeBean['contentType'] = this.contentDetailData.newsType + ''
+    if(this.contentDetailData.newsTitle) {
+      this.likeBean['title'] = this.contentDetailData.newsTitle + ''
+    }
+    if(this.contentDetailData.userInfo?.headPhotoUrl) {
+      this.likeBean['userHeaderUrl'] = this.contentDetailData.userInfo?.headPhotoUrl  + ''
+    }
+    if(this.contentDetailData.reLInfo?.channelId) {
+      this.likeBean['channelId'] = this.contentDetailData.reLInfo?.channelId  + ''
+    }
+    if(this.contentDetailData?.reLInfo?.relType) {
+      this.likeBean['relType'] = this.contentDetailData?.reLInfo?.relType   + ''
+    }
+    if(this.contentDetailData?.reLInfo?.relId) {
+      this.likeBean['contentRelId'] = this.contentDetailData?.reLInfo?.relId   + ''
+    }
+    console.info(TAG, 'contentDetailData----', JSON.stringify(this.contentDetailData))
+    console.info(TAG, 'likeBean----', JSON.stringify(this.likeBean))
+    console.info(TAG, 'this.operationButtonList', JSON.stringify(this.operationButtonList))
+    // 评论需要数据
+    /*  this.publishCommentModel.targetId = this.contentDetailData.newsId + ''
+      this.publishCommentModel.targetRelId = this.contentDetailData.reLInfo?.relId + ''
+      this.publishCommentModel.targetTitle = this.contentDetailData.newsTitle + ''
+      this.publishCommentModel.targetRelType = this.contentDetailData.reLInfo?.relType + ''
+      this.publishCommentModel.targetRelObjectId = this.contentDetailData.reLInfo?.relObjectId + ''
+      this.publishCommentModel.keyArticle = this.contentDetailData.keyArticle + ''
+      this.publishCommentModel.targetType = this.contentDetailData.newsType + ''*/
+    // 2：竖屏直播页 3：图集 4：横屏直播页
+    // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
+    this.likesStyle = this.contentDetailData?.liveInfo?.likesStyle
+    this.openLikes = this.contentDetailData?.liveInfo?.likeEnable == 1 ? true : false
+  }
+
+  build() {
+    // 直播详情页
+
+    Column() {
+      if(this.styleType != 3) {
+        Divider().strokeWidth(1).color(this.styleType == 1 ? '#F5F5F5' : this.styleType == 2 ? '#262626' : 'rgba(0,0,0,0)')
+      }
+
+      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+        Row() {
+          Column() {
+            Image(this.styleType == 1 ? $r('app.media.icon_arrow_left') :
+            $r('app.media.icon_arrow_left_white'))
+              .width(24)
+              .height(24)
+              .aspectRatio(1)
+              .interpolation(ImageInterpolation.High)
+          }
+          .width(48)
+          .hoverEffect(HoverEffect.Scale)
+          .visibility(this.showBackIcon ? Visibility.Visible : Visibility.None)
+          .onClick(() => {
+            if (this.onBack) {
+              this.onBack()
+            }
+            router.back();
+          })
+
+
+          if (this.contentDetailData?.newsId) {
+            ForEach(this.operationButtonList, (item: string, index: number) => {
+              if (item == 'comment') {
+                this.builderComment()
+              } else if (item == 'like' && this.needLike) {
+                this.builderLike()
+              } else if (item == 'collect') {
+                this.builderCollect()
+              } else if (item == 'share') {
+                this.builderShare()
+              } else {
+              }
+            })
+          }
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.Start)
+      }
+      .width('100%')
+      .backgroundColor(this.bgColor)
+      .padding({
+        top: 10,
+        // bottom: 10
+        bottom: `${this.bottomSafeHeight}px`
+        // bottom: 50
+      })
+    }
+
+  }
+
+  /**
+   * 评论组件
+   */
+  @Builder
+  builderComment() {
+    Column() {
+      if (this.contentDetailData.openComment == 1
+        && this.contentDetailData.commentDisplay == 1
+        && this.publishCommentModel?.targetId) {
+        CommentTabComponent({
+          publishCommentModel: this.publishCommentModel,
+          contentDetail: this.contentDetailData,
+          onCommentFocus: this.onCommentFocus,
+          pageComponentType: this.pageComponentType,
+          onLoad: (dialogController: CustomDialogController | null) => {
+            this.dialogController = dialogController
+          }
+        })
+      } else {
+        Blank()
+      }
+    }
+    .layoutWeight(1)
+    .margin({
+      right: this.pageComponentType === 1 ? 20 : 0,
+      left: 16
+    })
+
+    if (this.showCommentIcon  // 页面控制开关，直播传false
+      && this.contentDetailData.openComment == 1  // 内容开关
+      && this.publishCommentModel?.targetId) {
+      Column() {
+        CommentIconComponent({
+          publishCommentModel: this.publishCommentModel,
+          styleType: this.styleType,
+          contentDetail: this.contentDetailData
+        })
+          .onClick(() => {
+            this.onCommentIconClick()
+
+            console.log(JSON.stringify(this.dialogController?.open))
+
+            // 评论弹框内部嵌入
+            !this.showBackIcon && this.dialogController?.open()
+          })
+      }
+      .width(48)
+    }
+
+  }
+
+  /**
+   * 点赞组件
+   */
+  @Builder
+  builderLike() {
+    Column() {
+      LiveLikeComponent({
+        data: this.likeBean,
+        styleType: this.styleType,
+        pageComponentType: this.pageComponentType
+      })
+    }
+    .width(48)
+    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
+  }
+
+  /**
+   * 收藏组件
+   */
+  @Builder
+  builderCollect() {
+
+    Stack() {
+      Image(this.newsStatusOfUser?.collectStatus == 1 ? $r('app.media.ic_collect_check1') :
+        this.styleType == 1 ? $r('app.media.iv_live_comment_collect_un') :
+        $r('app.media.iv_live_comment_collect_un_white'))
+        .width(24)
+        .height(24)
+        .interpolation(ImageInterpolation.High)
+      /*Text(`${this.interactData?.collectNum}`)
+        .fontSize(8)
+        .fontColor(Color.White)
+        .height(12)
+        .margin({ left: 6 })
+        .backgroundImage($r('app.media.comment_icon_number'))
+        .offset({
+          x: 12
+        })*/
+    }
+    .height(36)
+    .width(48)
+    .borderRadius(18)
+    .backgroundColor(this.pageComponentType === 2 ? '#4D000000' : Color.Transparent)
+    .onClick(() => {
+      this.toggleCollectStatus()
+    })
+
+  }
+
+  /**
+   * 分享组件
+   */
+  @Builder
+  builderShare() {
+    Column() {
+      Image(this.styleType == 1 ? $r('app.media.iv_live_comment_share') :
+      $r('app.media.iv_live_comment_share_white'))
+        .width(24)
+        .height(24)
+        .aspectRatio(1)
+        .interpolation(ImageInterpolation.High)
+        .onClick((event: ClickEvent) => {
+          // ToastUtils.showToast('分享为公共方法，待开发', 1000);
+          this.share()
+        })
+    }
+    .justifyContent(FlexAlign.Center)
+    .height(36)
+    .width(48)
+    .borderRadius(18)
+    .backgroundColor(this.pageComponentType === 2 ? '#4D000000' : Color.Transparent)
+  }
+
+  handleStyle() {
+    if (this.styleType == 1) {
+      this.bgColor = Color.White
+    } else if (this.styleType == 2) {
+      this.bgColor = Color.Black
+    } else if (this.styleType == 3) {
+      this.bgColor = Color.Transparent
+    }
+  }
+
+  share() {
+    WDShare.shareContent(this.contentDetailData)
+  }
+
+  // 已登录->查询用户对作品收藏状态
+  private async getInteractDataStatus() {
+    try {
+      const params: batchLikeAndCollectParams = {
+        contentList: [
+          {
+            contentId: this.contentDetailData?.newsId + '',
+            contentType: this.contentDetailData?.newsType + '',
+            contentRelId: this.contentDetailData?.reLInfo?.relId || ''  + '',
+          }
+        ]
+      }
+      console.info(TAG, '查询用户对作品收藏1', JSON.stringify(params))
+      // console.info(TAG, '查询用户对作品收藏11', JSON.stringify(params))
+      let data = await MultiPictureDetailViewModel.getInteractDataStatus(params)
+      console.info(TAG, '查询用户对作品收藏22', JSON.stringify(data))
+      this.newsStatusOfUser = data[0];
+    } catch (exception) {
+      // console.error(TAG, JSON.stringify(exception))
+    }
+  }
+
+  /**
+   * 收藏、取消收藏
+   */
+  async toggleCollectStatus() {
+    // 未登录，跳转登录
+    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
+    console.log(TAG, '收藏点击，登录', user_id)
+    if (!user_id) {
+      console.log(TAG, '收藏点击，用户未登录')
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+    const params: postExecuteCollectRecordParams = {
+      status: this.newsStatusOfUser?.collectStatus === 1 ? '0' : '1',
+      contentList: [{
+        contentId: this.contentDetailData?.newsId + '',
+        contentType: this.contentDetailData?.newsType + '',
+        relType: this.contentDetailData?.reLInfo?.relType || '' + '',
+        contentRelId: this.contentDetailData?.reLInfo?.relId || '' + '',
+      }],
+
+    }
+    console.log(TAG, '收藏点击', JSON.stringify(params))
+    PageRepository.postExecuteCollectRecord(params).then(res => {
+      if (this.newsStatusOfUser) {
+        this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
+        if (this.newsStatusOfUser.collectStatus === 1) {
+          promptAction.showToast({ message: '收藏成功' })
+          TrackingContent.collect(true,this.PageName,this.PageName,this.pageParam)
+        } else {
+          TrackingContent.collect(false,this.PageName,this.PageName,this.pageParam)
+        }
+        this.queryContentInteractCount()
+      }
+      console.log(TAG, '收藏点击 this.newsStatusOfUser', JSON.stringify(this.newsStatusOfUser))
+    })
+
+  }
+
+  /**
+   * 查询点赞、收藏数量
+   */
+  queryContentInteractCount() {
+    // console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
+    const params: contentListParams = {
+      contentList: [{
+        contentId: this.contentDetailData?.newsId + '',
+        contentType: this.contentDetailData?.newsType,
+      }]
+    }
+    console.log(TAG, '查询点赞、收藏数量', JSON.stringify(params))
+    PageRepository.getContentInteract(params).then(res => {
+      console.log(TAG, '查询点赞、收藏数量 res', JSON.stringify(res))
+      if (res.data) {
+        this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum)
+        this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum)
+        this.interactData.commentNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.commentNum)
+        // 评论组件需要数据
+        if (Number.parseInt(this.interactData.commentNum) >
+        Number.parseInt(this.publishCommentModel.totalCommentNumer)) {
+          this.publishCommentModel.totalCommentNumer = this.interactData.commentNum + '' || '0'
+        }
+      }
+      // console.log(TAG, '获取互动点赞等数据===', JSON.stringify(res))
+      console.log(TAG, 'this.interactData44', JSON.stringify(this.interactData))
+      console.log(TAG, 'this.publishCommentModel', JSON.stringify(this.publishCommentModel))
+    })
+  }
+}

 import { HttpUrlUtils, ResponseDTO } from 'wdNetwork';
 import { HttpUrlUtils, ResponseDTO } from 'wdNetwork';
 import { HttpRequest } from 'wdNetwork/src/main/ets/http/HttpRequest';
 import { HttpRequest } from 'wdNetwork/src/main/ets/http/HttpRequest';
 import { Logger, ToastUtils, EmitterEventId, EmitterUtils  } from 'wdKit';
 import { Logger, ToastUtils, EmitterEventId, EmitterUtils  } from 'wdKit';
-import { LiveDetailsBean, ReserveBean, ReserveItemBean, joinPeopleNum } from 'wdBean/Index';
+import { LiveDetailsBean, ReserveBean, ReserveItemBean, joinPeopleNum, LiveRoomDataBean, ValueType } from 'wdBean/Index';
 
 
 const TAG = 'LiveModel'
 const TAG = 'LiveModel'
 
 
@@ -73,6 +73,88 @@ export class LiveModel {
   }
   }
 
 
   /**
   /**
+   * 获取直播数据
+   * @param liveId
+   * @returns
+   */
+  getLiveRoomData(liveId: string) {
+    return new Promise<LiveRoomDataBean>((success, fail) => {
+      HttpRequest.get<ResponseDTO<LiveRoomDataBean>>(
+        HttpUrlUtils.getLiveRoomDataUrl() + `?liveId=${liveId}`,
+      ).then((data: ResponseDTO<LiveRoomDataBean>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        success(data.data)
+      }, (error: Error) => {
+        fail(error.message)
+        Logger.debug(TAG + ":error ", error.toString())
+      })
+    })
+  }
+
+  /**
+   * 直播详情-C端点赞接口
+   * @param liveId
+   * @param number
+   * @param deviceId
+   * @returns
+   */
+  getLiveRoomNumberLike(liveId: string, number: number, deviceId: string | number) {
+    return new Promise<number>((success, fail) => {
+      HttpRequest.get<ResponseDTO<number>>(
+        HttpUrlUtils.getLiveRoomNumberLikeUrl() + `?liveId=${liveId}&number=${number}&deviceId=${deviceId}`,
+      ).then((data: ResponseDTO<number>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        success(data.data)
+      }, (error: Error) => {
+        fail(error.message)
+        Logger.debug(TAG + ":error ", error.toString())
+      })
+    })
+  }
+
+  /**
+   * 直播详情-查询是否点赞接口
+   * @param liveId
+   * @param userId
+   * @param deviceId
+   * @returns
+   */
+  getLiveLike(liveId: string, userId: ValueType, deviceId: string | number) {
+    return new Promise<boolean>((success, fail) => {
+      HttpRequest.get<ResponseDTO<boolean>>(
+        HttpUrlUtils.getLiveLikeUrl() + `?liveId=${liveId}&userId=${userId}&deviceId=${deviceId}`,
+      ).then((data: ResponseDTO<boolean>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        success(data.data)
+      }, (error: Error) => {
+        fail(error.message)
+        Logger.debug(TAG + ":error ", error.toString())
+      })
+    })
+  }
+
+  /**
    * 查询预约状态
    * 查询预约状态
    *
    *
    [{"relationId":"500002824823","liveId":"20000120522"},{"relationId":"500002845517","liveId":"20000120782"}]
    [{"relationId":"500002824823","liveId":"20000120522"},{"relationId":"500002845517","liveId":"20000120782"}]

@@ -7,9 +7,8 @@ import mediaquery from '@ohos.mediaquery';
 import { Logger, WindowModel } from 'wdKit/Index';
 import { Logger, WindowModel } from 'wdKit/Index';
 import { router, window } from '@kit.ArkUI';
 import { router, window } from '@kit.ArkUI';
 import { devicePLSensorManager } from 'wdDetailPlayApi/Index';
 import { devicePLSensorManager } from 'wdDetailPlayApi/Index';
-import { LiveCommentComponent } from 'wdComponent/Index';
+import { LiveCommentComponent, LiveOperRowListView } from 'wdComponent/Index';
 import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index';
 import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index';
-import { OperRowListView } from 'wdComponent/src/main/ets/components/view/OperRowListView';
 import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel';
 import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel';
 import { ResponseDTO } from 'wdNetwork/Index';
 import { ResponseDTO } from 'wdNetwork/Index';
 
 
@@ -70,8 +69,8 @@ export struct DetailPlayLivePage {
       TabComponent({ tabs: this.tabs, changeToTab: this.changeToTab })
       TabComponent({ tabs: this.tabs, changeToTab: this.changeToTab })
         .layoutWeight(1)
         .layoutWeight(1)
         .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
         .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
-      OperRowListView({
-        componentType: 4,
+      LiveOperRowListView({
+        pageComponentType: 4, // 4：横屏直播页
         operationButtonList: ['comment', 'collect', 'share', 'like'],
         operationButtonList: ['comment', 'collect', 'share', 'like'],
         styleType: 1,
         styleType: 1,
         contentDetailData: this.contentDetailData,
         contentDetailData: this.contentDetailData,

 import { HttpUrlUtils, ResponseDTO } from 'wdNetwork';
 import { HttpUrlUtils, ResponseDTO } from 'wdNetwork';
 import { HttpRequest } from 'wdNetwork/src/main/ets/http/HttpRequest';
 import { HttpRequest } from 'wdNetwork/src/main/ets/http/HttpRequest';
 import { Logger, ToastUtils, EmitterEventId, EmitterUtils } from 'wdKit';
 import { Logger, ToastUtils, EmitterEventId, EmitterUtils } from 'wdKit';
-import { ContentDetailDTO, LiveDetailsBean, LiveRoomBean, LiveRoomDataBean, ReserveItemBean } from 'wdBean/Index';
+import { ContentDetailDTO, LiveDetailsBean, LiveRoomBean, LiveRoomDataBean, ReserveItemBean, ValueType } from 'wdBean/Index';
 import { ContentDetailRequest } from 'wdDetailPlayApi/Index';
 import { ContentDetailRequest } from 'wdDetailPlayApi/Index';
 
 
 const TAG = 'LiveModel'
 const TAG = 'LiveModel'
@@ -151,6 +151,62 @@ export class LiveModel {
   }
   }
 
 
   /**
   /**
+   * 直播详情-C端点赞接口
+   * @param liveId
+   * @param number
+   * @param deviceId
+   * @returns
+   */
+  getLiveRoomNumberLike(liveId: string, number: number, deviceId: string | number) {
+    return new Promise<number>((success, fail) => {
+      HttpRequest.get<ResponseDTO<number>>(
+        HttpUrlUtils.getLiveRoomNumberLikeUrl() + `?liveId=${liveId}&number=${number}&deviceId=${deviceId}`,
+      ).then((data: ResponseDTO<number>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        success(data.data)
+      }, (error: Error) => {
+        fail(error.message)
+        Logger.debug(TAG + ":error ", error.toString())
+      })
+    })
+  }
+
+  /**
+   * 直播详情-查询是否点赞接口
+   * @param liveId
+   * @param userId
+   * @param deviceId
+   * @returns
+   */
+  getLiveLike(liveId: string, userId: ValueType, deviceId: string | number) {
+    return new Promise<boolean>((success, fail) => {
+      HttpRequest.get<ResponseDTO<boolean>>(
+        HttpUrlUtils.getLiveLikeUrl() + `?liveId=${liveId}&userId=${userId}&deviceId=${deviceId}`,
+      ).then((data: ResponseDTO<boolean>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        success(data.data)
+      }, (error: Error) => {
+        fail(error.message)
+        Logger.debug(TAG + ":error ", error.toString())
+      })
+    })
+  }
+
+  /**
    * 获取直播预约状态
    * 获取直播预约状态
    * @param relationId
    * @param relationId
    * @param liveId
    * @param liveId

-import { ContentDetailDTO, LiveDetailsBean, LiveRoomBean, LiveRoomDataBean } from 'wdBean/Index'
+import { ContentDetailDTO, LiveDetailsBean, LiveRoomBean, LiveRoomDataBean, ValueType } from 'wdBean/Index'
 
 
 import { ResponseDTO } from 'wdNetwork/Index'
 import { ResponseDTO } from 'wdNetwork/Index'
 import { LiveModel } from './LiveModel'
 import { LiveModel } from './LiveModel'
@@ -68,6 +68,26 @@ export class LiveViewModel {
       })
       })
     })
     })
   }
   }
+  // 直播详情-C端点赞接口
+  getLiveRoomNumberLike(liveId: string, number: number, deviceId: string | number) {
+    return new Promise<number>((success, fail) => {
+      this.liveModel.getLiveRoomNumberLike(liveId, number, deviceId).then((data) => {
+        success(data)
+      }).catch((message: string) => {
+        fail(message)
+      })
+    })
+  }
+  // 直播详情-查询是否点赞接口
+  getLiveLike(liveId: string, userId: ValueType, deviceId: string | number) {
+    return new Promise<boolean>((success, fail) => {
+      this.liveModel.getLiveLike(liveId, userId, deviceId).then((data) => {
+        success(data)
+      }).catch((message: string) => {
+        fail(message)
+      })
+    })
+  }
 
 
   //直播预约状态查询
   //直播预约状态查询
   getLiveAppointmentStatus(relationId: string, liveId: string) {
   getLiveAppointmentStatus(relationId: string, liveId: string) {

 import { Action, ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
 import { Action, ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
 import { LiveCommentComponent } from 'wdComponent/Index'
 import { LiveCommentComponent } from 'wdComponent/Index'
 import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
 import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
-import { OperRowListView } from 'wdComponent/src/main/ets/components/view/OperRowListView'
+import { LiveOperRowListView } from 'wdComponent'
 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
 import { DisplayDirection, SpConstants, ViewType } from 'wdConstant/Index'
 import { DisplayDirection, SpConstants, ViewType } from 'wdConstant/Index'
 import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
 import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
@@ -113,9 +113,8 @@ export struct PlayerCommentComponent {
       .margin({ bottom: 20 })
       .margin({ bottom: 20 })
 
 
       // 收藏、分享、点赞是否需要根据字段显隐
       // 收藏、分享、点赞是否需要根据字段显隐
-      OperRowListView({
+      LiveOperRowListView({
         styleType: 3,
         styleType: 3,
-        componentType: 4,
         pageComponentType: 2, // 竖屏直播页
         pageComponentType: 2, // 竖屏直播页
         operationButtonList: ['comment', 'collect', 'share', 'like'],
         operationButtonList: ['comment', 'collect', 'share', 'like'],
         contentDetailData: this.contentDetailData,
         contentDetailData: this.contentDetailData,