feat(动态)：动态详情处理

张善主
Commit 7f3cbecdc68d2dd0dadc04bb707435bcbc204ba6 7f3cbecd 1 parent be4b26d4
Showing 5 changed files with 92 additions and 68 deletions
sight_harmony/features/wdComponent/Index.ets
sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
sight_harmony/features/wdComponent/src/main/ets/utils/ProcessUtils.ets
sight_harmony/features/wdComponent/src/main/resources/base/element/float.json
sight_harmony/products/phone/src/main/ets/pages/detail/DynamicDetailPage.ets
--- a/sight_harmony/features/wdComponent/Index.ets
View file @7f3cbec
+++ b/sight_harmony/features/wdComponent/Index.ets
View file @7f3cbec
@@ -51,6 +51,8 @@ export { MultiPictureDetailPageComponent } from "./src/main/ets/components/Multi
 export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailComponent"
+export { DynamicDetailComponent } from "./src/main/ets/components/DynamicDetailComponent"
+
 export { AudioSuspensionModel } from "./src/main/ets/viewmodel/AudioSuspensionModel"
 export { BroadcastPageComponent } from "./src/main/ets/components/broadcast/BroadcastPageComponent"
--- a/sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
View file @7f3cbec
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
View file @7f3cbec
@@ -2,12 +2,14 @@ import { AccountManagerUtils, Logger } from 'wdKit';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { ContentDetailDTO,batchLikeAndCollectResult,batchLikeAndCollectParams,postBatchAttentionStatusParams,
   PhotoListBean,
-  ContentDTO, } from 'wdBean';
+  ContentDTO,
+  RmhInfoDTO, } from 'wdBean';
 import media from '@ohos.multimedia.media';
 import { OperRowListView } from './view/OperRowListView';
 import { WDPlayerController } from 'wdPlayer/Index';
 import { ContentConstants } from '../constants/ContentConstants';
 import { ProcessUtils } from '../utils/ProcessUtils';
+import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils';
 const TAG = 'DynamicDetailComponent'
 @Preview
@@ -17,8 +19,15 @@ export struct DynamicDetailComponent {
   private relId: string = ''
   private contentId: string = ''
   private relType: string = ''
-  //出参
-  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
+  //出参 fixme 模拟数据用json转换
+  @State contentDetailData: ContentDetailDTO = {
+    publishTime: "2023年03月14日 08:16",
+    rmhInfo:{rmhHeadUrl:"",rmhName:"人民号名称",rmhDesc:"人民号描述单行展示"},
+    newsContent:"优先展示这个内容",
+    newsSummary:"其次展示这个内容",
+    newsTitle:"上面两个都没有再展示这个内容",
+    newsType:15
+  } as ContentDetailDTO
   //变量
   /**
    * 默认未关注 点击去关注
@@ -46,7 +55,7 @@ export struct DynamicDetailComponent {
             .height($r('app.float.margin_28'))
             .margin({ left: $r('app.float.margin_16') })
           Blank()
-          Text("2023年03月14日 08:16")
+          Text(this.contentDetailData.publishTime)
             .fontColor($r('app.color.color_B0B0B0'))
             .fontSize($r('app.float.font_size_12'))
             .lineHeight($r('app.float.margin_28'))
@@ -80,22 +89,27 @@ export struct DynamicDetailComponent {
           .alignContent(Alignment.Center)
           Column(){
             //昵称
-            Text("this.contentDetailData.rmhInfo?.rmhName")
+            Text(this.contentDetailData.rmhInfo?.rmhName)
               .fontSize($r('app.float.font_size_14'))
               .fontColor($r('app.color.color_222222'))
               .fontWeight(FontWeight.Medium)
               .margin({ left: $r('app.float.margin_5') })
+              .alignSelf(ItemAlign.Start)
             //简介
-            Text("this.contentDetailData.rmhInfo?.rmhDesc")
+            Text(this.contentDetailData.rmhInfo?.rmhDesc)
               .fontSize($r('app.float.font_size_14'))
               .fontColor($r('app.color.color_B0B0B0'))
               .fontWeight(FontWeight.Medium)
+              .maxLines(1)
               .margin({ left: $r('app.float.margin_5') })
+              .alignSelf(ItemAlign.Start)
           }
+          .width('63%')
+          .margin({right: $r('app.float.margin_6')})
           if (this.followStatus == '0') {
             Text('关注')
-              .width(60)
-              .height($r('app.float.margin_48'))
+              .width($r('app.float.margin_54'))
+              .height($r('app.float.margin_24'))
               .textAlign(TextAlign.Center)
               .fontSize($r('app.float.font_size_12'))
               .borderRadius($r('app.float.vp_3'))
@@ -120,14 +134,20 @@ export struct DynamicDetailComponent {
           }
         }
         .width('100%')
+        .margin({ left: $r('app.float.margin_16')})
         //内容
-        Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
+        Text(StringUtils.isEmpty(this.contentDetailData.newsContent)
+          ?StringUtils.isEmpty(this.contentDetailData.newsSummary)
+            ?this.contentDetailData.newsTitle
+            :this.contentDetailData.newsSummary
+          :this.contentDetailData.newsContent)
           .fontColor($r('app.color.color_222222'))
           .fontSize($r('app.float.font_size_18'))
           .lineHeight($r('app.float.margin_25'))
           .margin({ top: $r('app.float.margin_6')
           ,left: $r('app.float.margin_16')
           ,right: $r('app.float.margin_16') })
+          .alignSelf(ItemAlign.Start)
         if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
           //附件内容：图片/视频
           if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
@@ -140,17 +160,13 @@ export struct DynamicDetailComponent {
             }) {
               ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
                 GridCol() {
-                  this.buildItemCard(this.contentDetailData.photoList[index],this.contentDetailData.photoList.length, index);
+                  this.buildItemCard(item.picPath,this.contentDetailData.photoList.length, index);
                 }
+                // .onClick()
               })
             }
           }else{
-            //附件内容：视频，只有一个
-            ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
-              GridCol() {
-                this.buildItemCard(this.contentDetailData.photoList[index],this.contentDetailData.photoList.length, index);
-              }
-            })
+              this.buildItemCard(this.contentDetailData.videoInfo[0].firstFrameImageUri, this.contentDetailData.photoList.length, 0);
           }
         }
         //特别声明
@@ -194,8 +210,11 @@ export struct DynamicDetailComponent {
         //评论组件/底部组件
       }
+      .alignSelf(ItemAlign.Start)
     }
     .backgroundColor('#FFFFFFFF')
+    .width('100%')
+    .height('100%')
   }
   /**
    * 请求（动态）详情页数据
@@ -265,7 +284,7 @@ export struct DynamicDetailComponent {
    * @param programmeBean item 组件项, 上面icon,下面标题
    */
   @Builder
-  buildItemCard(item: PhotoListBean,len: number,index: number) {
+  buildItemCard(item: string,len: number,index: number) {
     Column() {
       this.setItemImageRoundCorner(len, item, index)
       Flex({ direction: FlexDirection.Row }) {
@@ -307,137 +326,137 @@ export struct DynamicDetailComponent {
   //设置图片圆角
   @Builder
-  setItemImageRoundCorner(len: number, item: PhotoListBean, index: number) {
+  setItemImageRoundCorner(len: number, picPath: string, index: number) {
     if (len == 1) {
       //四角圆角
-      this.setItemImageStyle(item.picPath, 4, 4, 4, 4);
+      this.setItemImageStyle(picPath, 4, 4, 4, 4);
     } else if (len == 2) {
       if (index == 0) {
         //左边圆角
-        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+        this.setItemImageStyle(picPath, 4, 0, 4, 0);
       } else {
         //右边圆角
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+        this.setItemImageStyle(picPath, 0, 4, 0, 4);
       }
     } else if (3 == len) {
       if (index == 0) {
         //左边圆角
-        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+        this.setItemImageStyle(picPath, 4, 0, 4, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else {
         //右边圆角
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+        this.setItemImageStyle(picPath, 0, 4, 0, 4);
       }
     } else if (4 == len) {
       if (index == 0) {
         //左边圆角
-        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+        this.setItemImageStyle(picPath, 4, 0, 4, 0);
       } else if (index == 1) {
         //右边圆角
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+        this.setItemImageStyle(picPath, 0, 4, 0, 4);
       } else if (index = 2) {
         //左边圆角
-        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+        this.setItemImageStyle(picPath, 4, 0, 4, 0);
       } else {
         //右边圆角
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+        this.setItemImageStyle(picPath, 0, 4, 0, 4);
       }
     } else if (5 == len) {
       if (index == 0) {
-        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+        this.setItemImageStyle(picPath, 4, 0, 0, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 2) {
-        this.setItemImageStyle(item.picPath, 4, 4, 4, 4);
+        this.setItemImageStyle(picPath, 4, 4, 4, 4);
       } else if (index = 3) {
-        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+        this.setItemImageStyle(picPath, 0, 0, 4, 0);
       } else {
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       }
     } else if (6 == len) {
       if (index == 0) {
-        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+        this.setItemImageStyle(picPath, 4, 0, 0, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 2) {
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+        this.setItemImageStyle(picPath, 0, 4, 0, 0);
       } else if (index = 3) {
-        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+        this.setItemImageStyle(picPath, 0, 0, 4, 0);
       } else if (index = 4) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else {
         //右边圆角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       }
     } else if (7 == len) {
       if (index == 0) {
-        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+        this.setItemImageStyle(picPath, 4, 0, 0, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 2) {
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+        this.setItemImageStyle(picPath, 0, 4, 0, 0);
       } else if (index = 3) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 4) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 5) {
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       } else {
-        this.setItemImageStyle(item.picPath, 0, 0, 4, 4);
+        this.setItemImageStyle(picPath, 0, 0, 4, 4);
       }
     } else if (8 == len) {
       if (index == 0) {
-        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+        this.setItemImageStyle(picPath, 4, 0, 0, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 2) {
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+        this.setItemImageStyle(picPath, 0, 4, 0, 0);
       } else if (index = 3) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 4) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index = 5) {
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       } else if (index = 6) {
-        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+        this.setItemImageStyle(picPath, 0, 0, 4, 0);
       } else {
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       }
     } else {
       if (index == 0) {
-        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+        this.setItemImageStyle(picPath, 4, 0, 0, 0);
       } else if (index == 1) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index == 2) {
-        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+        this.setItemImageStyle(picPath, 0, 4, 0, 0);
       } else if (index == 3) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index == 4) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index == 5) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else if (index == 6) {
-        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+        this.setItemImageStyle(picPath, 0, 0, 4, 0);
       } else if (index == 7) {
         //直角
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+        this.setItemImageStyle(picPath, 0, 0, 0, 0);
       } else {
-        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+        this.setItemImageStyle(picPath, 0, 0, 0, 4);
       }
     }
   }
--- a/sight_harmony/features/wdComponent/src/main/ets/utils/ProcessUtils.ets
View file @7f3cbec
+++ b/sight_harmony/features/wdComponent/src/main/ets/utils/ProcessUtils.ets
View file @7f3cbec
@@ -57,10 +57,9 @@ export class ProcessUtils {
         break;
     //动态详情页（动态图文）
       case ContentConstants.TYPE_FOURTEEN:
-        break;
     //动态详情页（动态视频）
       case ContentConstants.TYPE_FIFTEEN:
-        ProcessUtils.gotoWeb(content);
+        ProcessUtils.gotoDynamicDetailPage(content);
         break;
       default:
         break;
@@ -75,7 +74,7 @@ export class ProcessUtils {
     let taskAction: Action = {
       type: 'JUMP_DETAIL_PAGE',
       params: {
-        detailPageType: 14,
+        detailPageType: Number.parseInt(content.objectType),
         contentID: content?.objectId,
         extra: {
           relType: content?.relType,
--- a/sight_harmony/features/wdComponent/src/main/resources/base/element/float.json
View file @7f3cbec
+++ b/sight_harmony/features/wdComponent/src/main/resources/base/element/float.json
View file @7f3cbec
@@ -121,6 +121,10 @@
       "value": "48vp"
     },
     {
+      "name": "margin_54",
+      "value": "54vp"
+    },
+    {
       "name": "margin_60",
       "value": "60vp"
     },
--- a/sight_harmony/products/phone/src/main/ets/pages/detail/DynamicDetailPage.ets
View file @7f3cbec
+++ b/sight_harmony/products/phone/src/main/ets/pages/detail/DynamicDetailPage.ets
View file @7f3cbec
 import { Logger } from 'wdKit';
-import { AudioDetailComponent } from 'wdComponent';
+import { DynamicDetailComponent } from 'wdComponent';
 import router from '@ohos.router';
 import { Params, Action } from 'wdBean';
 const TAG = 'DynamicDetailPage';
@@ -13,7 +13,7 @@ struct DynamicDetailPage {
   build() {
     Column() {
-      AudioDetailComponent({
+      DynamicDetailComponent({
         relId: this.relId,
         contentId: this.contentId,
         relType: this.relType