ref |> 类型是图文的外链页面详情开发

@@ -97,6 +97,8 @@ export function registerRouter() {
       return WDRouterPage.reserveMorePage
       return WDRouterPage.reserveMorePage
     } else if (action.params?.pageID == "FeedBackActivity") {
     } else if (action.params?.pageID == "FeedBackActivity") {
       return WDRouterPage.feedBackActivity
       return WDRouterPage.feedBackActivity
+    } else if (action.params?.pageID == "H5_NEWS_PAGE") {
+      return WDRouterPage.h5NewsWebPage
     }
     }
     return undefined
     return undefined
   })
   })

@@ -38,6 +38,8 @@ export class WDRouterPage {
   static defaultWebPage = new WDRouterPage("phone", "ets/pages/web/DefaultWebPage");
   static defaultWebPage = new WDRouterPage("phone", "ets/pages/web/DefaultWebPage");
   // H5提示页面
   // H5提示页面
   static h5TipsPage = new WDRouterPage("phone", "ets/pages/web/H5TipsPage");
   static h5TipsPage = new WDRouterPage("phone", "ets/pages/web/H5TipsPage");
+  // H5外链展示页面
+  static h5NewsWebPage = new WDRouterPage("phone", "ets/pages/web/H5NewsWebPage");
   // 电子报页面
   // 电子报页面
   static eNewspaper = new WDRouterPage("phone", "ets/pages/ENewspaper")
   static eNewspaper = new WDRouterPage("phone", "ets/pages/ENewspaper")
   // 早晚报页面
   // 早晚报页面

@@ -48,7 +48,11 @@ export class ProcessUtils {
       // 内链
       // 内链
       let content: ContentDTO = new ContentDTO();
       let content: ContentDTO = new ContentDTO();
       content.linkUrl = linkUrl;
       content.linkUrl = linkUrl;
+      if (content.linkUrl) {
+        ProcessUtils.gotoH5NewsWeb(content);
+      }else {
         ProcessUtils.gotoWeb(content);
         ProcessUtils.gotoWeb(content);
+      }
     } else if ('2' == type) {
     } else if ('2' == type) {
       // 外链
       // 外链
       ProcessUtils.jumpExternalWebPage(linkUrl);
       ProcessUtils.jumpExternalWebPage(linkUrl);
@@ -206,7 +210,9 @@ export class ProcessUtils {
       case ContentConstants.TYPE_TELETEXT:
       case ContentConstants.TYPE_TELETEXT:
 
 
         if (content?.linkUrl) {
         if (content?.linkUrl) {
-          ProcessUtils.gotoDefaultWebPage(content?.linkUrl);
+          // let bean={url:content?.linkUrl} as Params
+          // WDRouterRule.jumpWithPage(WDRouterPage.h5TipsPage,bean);
+          ProcessUtils.gotoH5NewsWeb(content);
         }else {
         }else {
           ProcessUtils.gotoWeb(content);
           ProcessUtils.gotoWeb(content);
         }
         }
@@ -407,6 +413,28 @@ export class ProcessUtils {
     // Logger.debug(TAG, `commentGotoWeb, ${content.newsId}`);
     // Logger.debug(TAG, `commentGotoWeb, ${content.newsId}`);
   }
   }
 
 
+  public static gotoH5NewsWeb(content: ContentDTO) {
+    let taskAction: Action = {
+      type: 'JUMP_INNER_NEW_PAGE',
+      params: {
+        contentID: content?.objectId,
+        url:content?.linkUrl,
+        pageID: 'H5_NEWS_PAGE',
+        extra: {
+          relType: content?.relType,
+          relId: content?.relId,
+          channelId: content?.channelId,
+          sourcePage: '5',
+          commentId: content?.commentInfo?.commentId,
+          title: content?.newsTitle
+        } as ExtraDTO,
+        targetLayout: content.customParamTargetLayout
+      } as Params,
+    };
+    WDRouterRule.jumpWithAction(taskAction)
+    Logger.debug(TAG, `gotoH5NewsWeb, ${content.objectId}`);
+  }
+
   public static gotoWeb(content: ContentDTO) {
   public static gotoWeb(content: ContentDTO) {
     let taskAction: Action = {
     let taskAction: Action = {
       type: 'JUMP_INNER_NEW_PAGE',
       type: 'JUMP_INNER_NEW_PAGE',
@@ -414,7 +442,7 @@ export class ProcessUtils {
         contentID: content?.objectId,
         contentID: content?.objectId,
         //fixme 图文外链，需要单独处理
         //fixme 图文外链，需要单独处理
         url:content?.linkUrl,
         url:content?.linkUrl,
-        pageID: 'IMAGE_TEXT_DETAIL',
+        pageID:'IMAGE_TEXT_DETAIL',
         extra: {
         extra: {
           relType: content?.relType,
           relType: content?.relType,
           relId: content?.relId,
           relId: content?.relId,

@@ -67,13 +67,14 @@ export { LottieView } from './src/main/ets/components/lottie/LottieView'
 
 
 export { SpacialTopicPageComponent } from './src/main/ets/components/SpacialTopicPageComponent'
 export { SpacialTopicPageComponent } from './src/main/ets/components/SpacialTopicPageComponent'
 
 
+export { H5NewsWebPageComponent } from './src/main/ets/components/H5NewsWebPageComponent'
+
 export { LogoutViewModel } from "./src/main/ets/viewmodel/LogoutViewModel"
 export { LogoutViewModel } from "./src/main/ets/viewmodel/LogoutViewModel"
 
 
 export { newsSkeleton } from "./src/main/ets/components/skeleton/newsSkeleton"
 export { newsSkeleton } from "./src/main/ets/components/skeleton/newsSkeleton"
 
 
 export { LiveCommentComponent } from "./src/main/ets/components/comment/view/LiveCommentComponent"
 export { LiveCommentComponent } from "./src/main/ets/components/comment/view/LiveCommentComponent"
 
 
-
 export { PermissionDesComponent } from "./src/main/ets/components/view/PermissionDesComponent"
 export { PermissionDesComponent } from "./src/main/ets/components/view/PermissionDesComponent"
 
 
 export { AudioRowComponent } from "./src/main/ets/components/live/AudioRowComponent"
 export { AudioRowComponent } from "./src/main/ets/components/live/AudioRowComponent"

+import {
+  Logger,
+  NumberFormatterUtils,
+  DateTimeUtils,
+  EmitterUtils,
+  EmitterEventId,
+  NetworkUtil,
+} from 'wdKit';
+import {
+  Action,
+  ContentDetailDTO,
+  ContentDTO,
+  postRecommendListParams,
+  postExecuteLikeParams,
+  batchLikeAndCollectResult,
+  batchLikeAndCollectParams,
+  InteractDataDTO,
+  contentListParams,
+} from 'wdBean';
+import { WdWebComponent } from 'wdWebComponent';
+import DetailViewModel from '../viewmodel/DetailViewModel';
+import router from '@ohos.router';
+import { CommonConstants } from 'wdConstant'
+import { BridgeWebViewControl } from 'wdJsBridge';
+import { publishCommentModel } from '../components/comment/model/PublishCommentModel';
+import { HttpUtils } from 'wdNetwork/Index';
+import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { PageRepository } from '../repository/PageRepository';
+import { OperRowListView } from './view/OperRowListView';
+import { CommentDialogView } from './CommentDialogView';
+import { CustomTitleUI } from 'wdcomponent/ets/components/reusable/CustomTitleUI';
+
+const TAG = 'H5NewsWebPageComponent'
+
+@Component
+export struct H5NewsWebPageComponent {
+  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
+  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
+  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
+  scroller: Scroller = new Scroller();
+  action: Action = {} as Action
+  @State webUrl: string = '';
+  @Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
+  @State recommendList: ContentDTO[] = []
+  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
+  @State interactData: InteractDataDTO = {} as InteractDataDTO
+  @State isPageEnd: boolean = false
+  @State publishTime: string = ''
+  @State publishCommentModel: publishCommentModel = new publishCommentModel()
+  @State isNetConnected: boolean = true
+  @State emptyType: number = 1 // 缺省图类型
+  @State detailContentEmpty: boolean = false
+  @State info: Area | null = null
+  @State likeNum: number = 0
+  @State operationButtonList: string[] = []
+  @State showComment: boolean = false
+  @State showCommentList: boolean = false
+  @State index: number = 0
+  @State currentIndex: number = 0
+  private navTitle = '人民日报';
+
+  build() {
+    Column() {
+      Blank().height(`${this.topSafeHeight}px`)
+      //标题栏目
+      CustomTitleUI({ titleName: this.navTitle })
+      Stack({ alignContent: Alignment.Bottom }) {
+        Column() {
+          WdWebComponent({
+            webviewControl: this.webviewControl,
+            webUrl: this.webUrl,
+            isPageEnd: $isPageEnd
+          })
+        }
+        .width(CommonConstants.FULL_WIDTH)
+        .height(CommonConstants.FULL_HEIGHT)
+        .padding({ bottom: 150})
+
+        //底部交互区
+        OperRowListView({
+          contentDetailData: this.contentDetailData,
+          publishCommentModel: this.publishCommentModel,
+          operationButtonList: this.operationButtonList,
+          styleType: 1,
+          onCommentIconClick: () => {
+            this.showCommentList = true
+          }
+        })
+          .width(CommonConstants.FULL_WIDTH)
+          .backgroundColor(Color.White)
+          .height(150)
+
+        //全部评论
+        CommentDialogView({
+          index: $index,
+          currentIndex: $currentIndex,
+          showCommentList: $showCommentList,
+          publishCommentModel: $publishCommentModel,
+          interactData: $interactData,
+        }).visibility(this.showComment ? Visibility.Visible : Visibility.Hidden)
+      }
+
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .height(CommonConstants.FULL_HEIGHT)
+  }
+
+  private async getDetail() {
+    this.isNetConnected = NetworkUtil.isNetConnected()
+    if (!this.isNetConnected) {
+      this.emptyType = 1
+    }
+    let contentId: string = ''
+    let relId: string = ''
+    let relType: string = ''
+    if (this.action && this.action.params) {
+      if (this.action.params.contentID) {
+        contentId = this.action.params.contentID;
+      }
+      if (this.action && this.action.params && this.action.params.extra) {
+        this.navTitle = this.action.params.extra.title
+        if (this.action.params.extra.relId) {
+          relId = this.action.params.extra.relId;
+        }
+        if (this.action.params.extra.relType) {
+          relType = this.action.params.extra.relType
+        }
+
+      }
+      let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
+      // 判断内容是否已下线，空数组表示下线
+      this.detailContentEmpty = detailBeans.length === 0 ? true : false
+      if (this.detailContentEmpty) {
+        this.emptyType = 18
+      }
+      console.log(TAG, "dl1111111111", JSON.stringify(detailBeans[0]))
+      if (detailBeans && detailBeans.length > 0) {
+        this.contentDetailData = detailBeans[0];
+        let dateTime =
+          DateTimeUtils.parseDate(this.contentDetailData?.publishTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN);
+        // let _publishTime = DateTimeUtils.formatDate(dateTime, PATTERN_DATE_CN_RN)
+        // this.publishTime = DateTimeUtils.removeTrailingZeros(_publishTime)
+        if (this.contentDetailData?.recommendShow === 1) {
+          this.getRecommend()
+        }
+        if (this.contentDetailData?.openLikes === 1) {
+          console.log(TAG, '点赞this.getInteractDataStatus()')
+          this.getInteractDataStatus()
+          this.queryContentInteractCount()
+        }
+        if (this.contentDetailData?.openComment) {
+          this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')
+          this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId || '')
+          this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle
+          this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType || '')
+          this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId || '')
+          this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle || '')
+          this.publishCommentModel.targetType = String(this.contentDetailData?.newsType || '')
+          this.publishCommentModel.visitorComment = String(this.contentDetailData?.visitorComment || '')
+        }
+        if (this.contentDetailData?.openAudio && this.contentDetailData?.audioList?.length &&
+        this.contentDetailData?.audioList[0].audioUrl) {
+          this.operationButtonList = ['comment', 'collect', 'listen', 'share']
+        } else {
+          this.operationButtonList = ['comment', 'collect', 'share']
+        }
+      }
+    }
+  }
+
+  private async getRecommend() {
+    let params: postRecommendListParams = {
+      imei: HttpUtils.getImei(),
+      userId: HttpUtils.getUserId(),
+      contentId: String(this.contentDetailData?.newsId),
+      recType: 1,
+      contentType: this.contentDetailData?.newsType,
+      relId: this.contentDetailData?.reLInfo?.relId,
+      // channelId: String(this.contentDetailData?.reLInfo?.channelId)
+    }
+    let recommendList = await DetailViewModel.postRecommendList(params)
+    if (recommendList.length > 0) {
+      //推荐列表过滤音频和活动入口
+      this.recommendList = recommendList.filter(item => item.objectType !== '3' && item.objectType !== '13');
+    }
+
+  }
+
+  // 已登录->查询用户对作品点赞、收藏状态
+  private async getInteractDataStatus() {
+    try {
+      const params: batchLikeAndCollectParams = {
+        contentList: [
+          {
+            contentId: this.contentDetailData?.newsId + '',
+            contentType: this.contentDetailData?.newsType + '',
+            contentRelId: this.contentDetailData?.reLInfo?.relId || '' + '',
+          }
+        ]
+      }
+      // console.log(TAG,'contentDetailData', JSON.stringify(params.contentList))
+      let data = await MultiPictureDetailViewModel.getInteractDataStatus(params)
+      console.log(TAG, '查询用户对作品点赞、收藏状态', JSON.stringify(data))
+      this.newsStatusOfUser = data[0];
+      // console.log(TAG, `newsStatusOfUser：${JSON.stringify(this.newsStatusOfUser)}`)
+    } catch (exception) {
+      console.error(TAG,'exception', JSON.stringify(exception))
+    }
+  }
+
+  /**
+   * 点赞、取消点赞
+   */
+  toggleLikeStatus() {
+    // 未登录，跳转登录
+    if (!HttpUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+    const params: postExecuteLikeParams = {
+      status: this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1',
+      contentId: this.contentDetailData?.newsId + '',
+      contentType: this.contentDetailData?.newsType + '',
+      contentRelId: this.contentDetailData?.reLInfo?.relId || '' + '',
+    }
+    console.log(TAG, '点赞、取消点赞params', JSON.stringify(params))
+    PageRepository.postExecuteLike(params).then(res => {
+      // console.log(TAG, '点赞、res', JSON.stringify(res))
+      console.log(TAG, '点赞、取消点赞 this.newsStatusOfUser', JSON.stringify(this.newsStatusOfUser))
+      if (this.newsStatusOfUser) {
+        //内容点赞、取消点赞Tracking 1点赞  0取消点赞
+        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1'
+        if (this.newsStatusOfUser.likeStatus === '1') {
+          this.likeNum = Number(this.likeNum) + 1
+        } else {
+          this.likeNum = Number(this.likeNum) - 1
+        }
+        console.log(TAG, '点赞newsStatusOfUser.likeStatus ', this.newsStatusOfUser.likeStatus)
+        // this.queryContentInteractCount()
+        // TrackingContent.like(this.newsStatusOfUser?.likeStatus == '1', TrackConstants.PageName.My, TrackConstants.PageName.My)
+      } else {
+        // 初次进入详情页偶现获取失败，重新获取newsStatusOfUser对象
+        this.getInteractDataStatus()
+      }
+
+    })
+  }
+
+  /**
+   * 查询点赞、收藏数量
+   */
+  queryContentInteractCount() {
+    console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
+    const params: contentListParams = {
+      contentList: [{
+        contentId: this.contentDetailData?.newsId + '',
+        contentType: this.contentDetailData?.newsType,
+      }]
+    }
+    PageRepository.getContentInteract(params).then(res => {
+      console.error(TAG, 'queryContentInteractCount', JSON.stringify(res))
+      if (res.data) {
+        this.interactData = res.data[0]
+        this.likeNum = Number(res.data[0]?.likeNum) || 0
+      }
+    })
+  }
+
+  aboutToAppear() {
+    let action: Action = router.getParams() as Action
+    if (action) {
+      this.webUrl = action.params?.url || ''
+    }
+    this.getDetail()
+
+    // 登录成功
+    EmitterUtils.receiveEvent(EmitterEventId.LOGIN_SUCCESS, () => {
+      this.getInteractDataStatus()
+    })
+  }
+}

+import { Action } from 'wdBean';
+import { H5NewsWebPageComponent  } from 'wdComponent'
+import router from '@ohos.router';
+import { TrackConstants } from 'wdTracking/Index';
+
+const TAG = 'H5NewsWebPage'
+
+@Entry
+@Component
+struct H5NewsWebPage {
+  action: Action = {} as Action
+
+  @Provide pageShow: number = -1
+  @Provide pageHide: number = -1
+
+  @Provide pageName: string = TrackConstants.PageName.Article_Detail
+  @Provide pageId: string = TrackConstants.PageName.Article_Detail
+
+  build() {
+    Column() {
+      H5NewsWebPageComponent({action: this.action})
+    }
+  }
+
+  aboutToAppear() {
+    let action: Action = router.getParams() as Action
+    this.action = action
+  }
+}

@@ -3,6 +3,7 @@
     "pages/MainPage",
     "pages/MainPage",
     "pages/web/DefaultWebPage",
     "pages/web/DefaultWebPage",
     "pages/web/H5TipsPage",
     "pages/web/H5TipsPage",
+    "pages/web/H5NewsWebPage",
     "pages/ENewspaper",
     "pages/ENewspaper",
     "pages/ImageAndTextDetailPage",
     "pages/ImageAndTextDetailPage",
     "pages/MorningEveningPaperPage",
     "pages/MorningEveningPaperPage",