feat(动态)：图片视频处理

张善主
Commit 520755feea5c7dcaaf284bc683ba780f515717b2 520755fe 1 parent 13162de2
Showing 1 changed file with 161 additions and 214 deletions
sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
View file @520755f
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/DynamicDetailComponent.ets
View file @520755f
@@ -12,7 +12,8 @@ import { ProcessUtils } from 'wdRouter';
 import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils';
 import display from '@ohos.display';
 import { BusinessError } from '@ohos.base';
- 
+ import { CommonConstants } from 'wdConstant/Index';
+ import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
 const TAG = 'DynamicDetailComponent'
 @Preview
 @Component
@@ -44,7 +45,7 @@ export struct DynamicDetailComponent {
   promise: Promise<Array<display.Display>> = display.getAllDisplays()
 
   // 屏幕宽度（单位px）
-   screenWidth: number = 0;
+   @State screenWidth: number = 0;
 
   async aboutToAppear() {
     await this.getContentDetailData()
@@ -156,25 +157,131 @@ export struct DynamicDetailComponent {
           ,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){
+           //附件内容：图片/视频
+           if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
+             // 图片-从无图到9图展示
             GridRow({
-               columns: { sm: this.contentDetailData.photoList.length
-               , md: this.contentDetailData.photoList.length == 1?1:
-                   this.contentDetailData.photoList.length == 4?2:
-                     3 },
-               breakpoints: { value: ['320vp', '520vp', '840vp'] }
+               gutter: { x: 2, y: 2 }
             }) {
               ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
-                 GridCol() {
-                   this.buildItemCard(item.picPath,this.contentDetailData.photoList.length, index);
+                 if (this.contentDetailData.photoList.length === 1) {
+                   if (this.getPicType(item) !== 3) {
+                     GridCol({
+                       span: this.getPicType(item) === 1 ? 12 : 8
+                     }){
+                       Stack({
+                         alignContent: Alignment.BottomEnd
+                       }) {
+                         if (this.getPicType(item) === 1) {
+                           Image(item.picPath)
+                             .width('100%')
+                             .height(172)
+                             .autoResize(true)
+                             .borderRadius(this.caclImageRadius(index))
+                         } else if (this.getPicType(item) === 2) {
+                           Image(item.picPath)
+                             .width('100%')
+                             .height(305)
+                             .autoResize(true)
+                             .borderRadius(this.caclImageRadius(index))
+                         }
+                         Flex({ direction: FlexDirection.Row }) {
+                           Image($r('app.media.icon_long_pic'))
+                             .width(14)
+                             .height(14)
+                             .margin({right: 4})
+                           Text('长图')
+                             .fontSize(12)
+                             .fontWeight(400)
+                             .fontColor(0xffffff)
+                             .fontFamily('PingFang SC')
+                         }
+                         .width(48)
+                         .padding({bottom: 9})
+ 
+                       }
+                     }
+                     .onClick((event: ClickEvent) => {
+                       ProcessUtils.processPage(this.mJumpInfo)
+                     })
+                   } else {
+                     GridCol({
+                       span: { xs: 8 }
+                     }) {
+                       Image(item.picPath)
+                         .width('100%')
+                         .borderRadius(this.caclImageRadius(index))
+                         .autoResize(true)
+                         .opacity(!item.width && !item.height ? 0 : 1)
+                         .onComplete(callback => {
+                           item.width = callback?.width || 0;
+                           item.height = callback?.height || 0;
+                         })
+                     }
+                   }
+                 } else if (this.contentDetailData.photoList.length === 4) {
+                   GridCol({
+                     span: { xs: 4 }
+                   }) {
+                     Image(item.picPath)
+                       .aspectRatio(1)
+                       .borderRadius(this.caclImageRadius(index))
+                   }
+                 } else {
+                   GridCol({
+                     span: { sm: 4, lg: 3 }
+                   }) {
+                     Image(item.picPath)
+                       .aspectRatio(1)
+                       .borderRadius(this.caclImageRadius(index))
+                   }
                 }
-                 // .onClick()
               })
             }
+             .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
+           }
         }else{
-               this.buildItemCard(this.contentDetailData.videoInfo[0].firstFrameImageUri, 1, 0);
+           if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
+             GridRow() {
+               if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
+                 // 横屏
+                 GridCol({
+                   span: { xs: 12 }
+                 }) {
+                   Stack() {
+                     Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
+                             this.contentDetailData.fullColumnImgUrls[0].url:
+                     this.contentDetailData.videoInfo[0].firstFrameImageUri)
+                       .width(CommonConstants.FULL_WIDTH)
+                       .aspectRatio(16 / 9)
+                       .borderRadius($r('app.float.image_border_radius'))
+                     CardMediaInfo({ contentDTO: this.mJumpInfo })
+                   }
+                   .align(Alignment.BottomEnd)
+                 }
+               } else {
+                 // 竖图显示，宽度占50%，高度自适应
+                 GridCol({
+                   span: { xs: 6 }
+                 }) {
+                   Stack() {
+                     Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
+                     this.contentDetailData.fullColumnImgUrls[0].url:
+                     this.contentDetailData.videoInfo[0].firstFrameImageUri)
+                       .width(CommonConstants.FULL_WIDTH)
+                       .borderRadius($r('app.float.image_border_radius'))
+                     CardMediaInfo({ contentDTO: this.mJumpInfo })
+                   }
+                   .align(Alignment.BottomEnd)
+                 }
+               }
+             }
+             .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
+             .onClick((event: ClickEvent) => {
+               this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
+               ProcessUtils.processPage(this.mJumpInfo)
+             })
           }
         }
         //特别声明
@@ -231,14 +338,13 @@ export struct DynamicDetailComponent {
     try {
       let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
       this.contentDetailData = data[0];
-       this.makeJumpInfo
       console.log('动态详情',JSON.stringify(this.contentDetailData))
     } catch (exception) {
     console.log('请求失败',JSON.stringify(exception))
     }
-     this.getBatchAttentionStatus
-     this.getInteractDataStatus
-     this.getScreenWidth
+     this.getBatchAttentionStatus()
+     this.getInteractDataStatus()
+     this.makeJumpInfo()
   }
 
   // 查询当前登录用户点赞状态
@@ -281,64 +387,6 @@ export struct DynamicDetailComponent {
 
     }
   }
-   @Builder
-   setItemImageStyle(picPath: string,topLeft: number,topRight: number,bottomLeft: number,bottomRight: number){
-     //四角圆角
-     Image(picPath)
-       .width('100%')
-       .height('100%')
-       .borderRadius({topLeft: topLeft, topRight: topRight,
-         bottomLeft: bottomLeft, bottomRight: bottomRight})
-   }
-   /**
-    * 组件项
-    *
-    * @param programmeBean item 组件项, 上面icon,下面标题
-    */
-   @Builder
-   buildItemCard(item: string,len: number,index: number) {
-     Column() {
-       this.setItemImageRoundCorner(len, item, index)
-       Flex({ direction: FlexDirection.Row }) {
-         Image($r('app.media.icon_long_pic'))
-           .width(14)
-           .height(14)
-           .margin({right: 4})
-         Text('长图')
-           .fontSize(12)
-           .fontWeight(400)
-           .fontColor(0xffffff)
-           .fontFamily('PingFang SC')
-       }
-       .width(48)
-       .padding({bottom: 9})
-     }
-     .width(
-       //图片类型
-       this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN?'100%'
-             //视频横屏 横版16:9
-       :this.contentDetailData.videoInfo[0].videoLandScape == 1?this.screenWidth-32
-               //视频竖屏 竖版3:4
-         :(this.screenWidth-32)/2)
-     .height(
-       //图片类型
-       this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN?'100%'
-         //视频横屏 横版16:9
-         :this.contentDetailData.videoInfo[0].videoLandScape == 1?(this.screenWidth-32)*9/16
-         //视频竖屏 竖版3:4
-         :(this.screenWidth-32)/2*4/3)
-     .onClick((event: ClickEvent) => {
-       if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
-         //fixme 跳转到查看图片页面（带页脚/下载按钮）
-         // this.mJumpInfo.objectType = ContentConstants.TYPE_
-         ProcessUtils.processPage(this.mJumpInfo)
-       }else{
-         //fixme 跳转到播放视频页面（点播）
-         this.mJumpInfo.objectType = ContentConstants.TYPE_VOD
-         ProcessUtils.processPage(this.mJumpInfo)
-       }
-     })
-   }
 
   //创建跳转信息
   makeJumpInfo(){
@@ -347,152 +395,51 @@ export struct DynamicDetailComponent {
     this.mJumpInfo.objectId = this.contentDetailData.newsId+"";
     this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+"";
     this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+"";
+     // this.mJumpInfo.objectType = this.contentDetailData.newsType+"";
   }
 
-   //设置图片圆角
-   @Builder
-   setItemImageRoundCorner(len: number, picPath: string, index: number) {
-     if (len == 1) {
-       //四角圆角
-       this.setItemImageStyle(picPath, 4, 4, 4, 4);
-     } else if (len == 2) {
-       if (index == 0) {
-         //左边圆角
-         this.setItemImageStyle(picPath, 4, 0, 4, 0);
-       } else {
-         //右边圆角
-         this.setItemImageStyle(picPath, 0, 4, 0, 4);
-       }
-     } else if (3 == len) {
-       if (index == 0) {
-         //左边圆角
-         this.setItemImageStyle(picPath, 4, 0, 4, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else {
-         //右边圆角
-         this.setItemImageStyle(picPath, 0, 4, 0, 4);
-       }
-     } else if (4 == len) {
-       if (index == 0) {
-         //左边圆角
-         this.setItemImageStyle(picPath, 4, 0, 4, 0);
-       } else if (index == 1) {
-         //右边圆角
-         this.setItemImageStyle(picPath, 0, 4, 0, 4);
-       } else if (index = 2) {
-         //左边圆角
-         this.setItemImageStyle(picPath, 4, 0, 4, 0);
-       } else {
-         //右边圆角
-         this.setItemImageStyle(picPath, 0, 4, 0, 4);
-       }
-     } else if (5 == len) {
-       if (index == 0) {
-         this.setItemImageStyle(picPath, 4, 0, 0, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 2) {
-         this.setItemImageStyle(picPath, 4, 4, 4, 4);
-       } else if (index = 3) {
-         this.setItemImageStyle(picPath, 0, 0, 4, 0);
-       } else {
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
-       }
-     } else if (6 == len) {
-       if (index == 0) {
-         this.setItemImageStyle(picPath, 4, 0, 0, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 2) {
-         this.setItemImageStyle(picPath, 0, 4, 0, 0);
-       } else if (index = 3) {
-         this.setItemImageStyle(picPath, 0, 0, 4, 0);
-       } else if (index = 4) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else {
-         //右边圆角
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
-       }
-     } else if (7 == len) {
-       if (index == 0) {
-         this.setItemImageStyle(picPath, 4, 0, 0, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 2) {
-         this.setItemImageStyle(picPath, 0, 4, 0, 0);
-       } else if (index = 3) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 4) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 5) {
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
-       } else {
-         this.setItemImageStyle(picPath, 0, 0, 4, 4);
-       }
-     } else if (8 == len) {
-       if (index == 0) {
-         this.setItemImageStyle(picPath, 4, 0, 0, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 2) {
-         this.setItemImageStyle(picPath, 0, 4, 0, 0);
-       } else if (index = 3) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 4) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index = 5) {
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
-       } else if (index = 6) {
-         this.setItemImageStyle(picPath, 0, 0, 4, 0);
+ 
+   caclImageRadius(index: number) {
+     let radius: radiusType = {
+       topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+       topRight: 0,
+       bottomLeft: 0,
+       bottomRight: 0,
+     }
+     if (this.contentDetailData.photoList.length === 1) {
+       radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
+       radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
+       radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
+     } else if (this.contentDetailData.photoList.length === 5 && !this.contentDetailData.photoList[2].fullUrl) {
+       radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
+       radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
+       radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
     } else {
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
+       radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
+       radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
+       radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
     }
+     return radius
+   }
+ 
+   getPicType(item: PhotoListBean){
+     if (item.width && item.width) {
+       if (item.width / item.height > 343/172) {
+         return 1; //横长图
+       } else if (item.height / item.width > 305/228) {
+         return 2; //竖长图
       } else {
-       if (index == 0) {
-         this.setItemImageStyle(picPath, 4, 0, 0, 0);
-       } else if (index == 1) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index == 2) {
-         this.setItemImageStyle(picPath, 0, 4, 0, 0);
-       } else if (index == 3) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index == 4) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index == 5) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else if (index == 6) {
-         this.setItemImageStyle(picPath, 0, 0, 4, 0);
-       } else if (index == 7) {
-         //直角
-         this.setItemImageStyle(picPath, 0, 0, 0, 0);
-       } else {
-         this.setItemImageStyle(picPath, 0, 0, 0, 4);
+         return 3
       }
+     } else {
+       return 3; //普通图
     }
   }
+ }
 
-   getScreenWidth(){
-     this.promise.then((data: Array<display.Display>) => {
-       console.log(`所有的屏幕信息：${JSON.stringify(data)}`)
-       //单位为像素
-       this.screenWidth = data[0]["width"]
-     }).catch((err: BusinessError) => {
-       console.error(`Failed to obtain all the display objects. Code: ${JSON.stringify(err)}`)
-     })
-   }
+ interface radiusType {
+   topLeft: number | Resource;
+   topRight: number | Resource;
+   bottomLeft: number | Resource;
+   bottomRight: number | Resource;
 }
\ No newline at end of file