developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
张善主
520755fe 1 parent 13162de2

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

Inline Side-by-side
Showing 1 changed file with 161 additions and 214 deletions
@@ -12,7 +12,8 @@ import { ProcessUtils } from 'wdRouter'; @@ -12,7 +12,8 @@ import { ProcessUtils } from 'wdRouter';
12 import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils'; 12 import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils';
13 import display from '@ohos.display'; 13 import display from '@ohos.display';
14 import { BusinessError } from '@ohos.base'; 14 import { BusinessError } from '@ohos.base';
15 - 15 +import { CommonConstants } from 'wdConstant/Index';
  16 +import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
16 const TAG = 'DynamicDetailComponent' 17 const TAG = 'DynamicDetailComponent'
17 @Preview 18 @Preview
18 @Component 19 @Component
@@ -44,7 +45,7 @@ export struct DynamicDetailComponent { @@ -44,7 +45,7 @@ export struct DynamicDetailComponent {
44 promise: Promise<Array<display.Display>> = display.getAllDisplays() 45 promise: Promise<Array<display.Display>> = display.getAllDisplays()
45 46
46 // 屏幕宽度（单位px） 47 // 屏幕宽度（单位px）
47 - screenWidth: number = 0; 48 + @State screenWidth: number = 0;
48 49
49 async aboutToAppear() { 50 async aboutToAppear() {
50 await this.getContentDetailData() 51 await this.getContentDetailData()
@@ -156,25 +157,131 @@ export struct DynamicDetailComponent { @@ -156,25 +157,131 @@ export struct DynamicDetailComponent {
156 ,left: $r('app.float.margin_16') 157 ,left: $r('app.float.margin_16')
157 ,right: $r('app.float.margin_16') }) 158 ,right: $r('app.float.margin_16') })
158 .alignSelf(ItemAlign.Start) 159 .alignSelf(ItemAlign.Start)
159 - if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){  
160 - //附件内容：图片/视频  
161 if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){ 160 if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
  161 + //附件内容：图片/视频
  162 + if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
  163 + // 图片-从无图到9图展示
162 GridRow({ 164 GridRow({
163 - columns: { sm: this.contentDetailData.photoList.length  
164 - , md: this.contentDetailData.photoList.length == 1?1:  
165 - this.contentDetailData.photoList.length == 4?2:  
166 - 3 },  
167 - breakpoints: { value: ['320vp', '520vp', '840vp'] } 165 + gutter: { x: 2, y: 2 }
168 }) { 166 }) {
169 ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => { 167 ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
170 - GridCol() {  
171 - this.buildItemCard(item.picPath,this.contentDetailData.photoList.length, index); 168 + if (this.contentDetailData.photoList.length === 1) {
  169 + if (this.getPicType(item) !== 3) {
  170 + GridCol({
  171 + span: this.getPicType(item) === 1 ? 12 : 8
  172 + }){
  173 + Stack({
  174 + alignContent: Alignment.BottomEnd
  175 + }) {
  176 + if (this.getPicType(item) === 1) {
  177 + Image(item.picPath)
  178 + .width('100%')
  179 + .height(172)
  180 + .autoResize(true)
  181 + .borderRadius(this.caclImageRadius(index))
  182 + } else if (this.getPicType(item) === 2) {
  183 + Image(item.picPath)
  184 + .width('100%')
  185 + .height(305)
  186 + .autoResize(true)
  187 + .borderRadius(this.caclImageRadius(index))
  188 + }
  189 + Flex({ direction: FlexDirection.Row }) {
  190 + Image($r('app.media.icon_long_pic'))
  191 + .width(14)
  192 + .height(14)
  193 + .margin({right: 4})
  194 + Text('长图')
  195 + .fontSize(12)
  196 + .fontWeight(400)
  197 + .fontColor(0xffffff)
  198 + .fontFamily('PingFang SC')
  199 + }
  200 + .width(48)
  201 + .padding({bottom: 9})
  202 +
  203 + }
  204 + }
  205 + .onClick((event: ClickEvent) => {
  206 + ProcessUtils.processPage(this.mJumpInfo)
  207 + })
  208 + } else {
  209 + GridCol({
  210 + span: { xs: 8 }
  211 + }) {
  212 + Image(item.picPath)
  213 + .width('100%')
  214 + .borderRadius(this.caclImageRadius(index))
  215 + .autoResize(true)
  216 + .opacity(!item.width && !item.height ? 0 : 1)
  217 + .onComplete(callback => {
  218 + item.width = callback?.width || 0;
  219 + item.height = callback?.height || 0;
  220 + })
  221 + }
  222 + }
  223 + } else if (this.contentDetailData.photoList.length === 4) {
  224 + GridCol({
  225 + span: { xs: 4 }
  226 + }) {
  227 + Image(item.picPath)
  228 + .aspectRatio(1)
  229 + .borderRadius(this.caclImageRadius(index))
  230 + }
  231 + } else {
  232 + GridCol({
  233 + span: { sm: 4, lg: 3 }
  234 + }) {
  235 + Image(item.picPath)
  236 + .aspectRatio(1)
  237 + .borderRadius(this.caclImageRadius(index))
  238 + }
172 } 239 }
173 - // .onClick()  
174 }) 240 })
175 } 241 }
  242 + .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
  243 + }
176 }else{ 244 }else{
177 - this.buildItemCard(this.contentDetailData.videoInfo[0].firstFrameImageUri, 1, 0); 245 + if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
  246 + GridRow() {
  247 + if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
  248 + // 横屏
  249 + GridCol({
  250 + span: { xs: 12 }
  251 + }) {
  252 + Stack() {
  253 + Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
  254 + this.contentDetailData.fullColumnImgUrls[0].url:
  255 + this.contentDetailData.videoInfo[0].firstFrameImageUri)
  256 + .width(CommonConstants.FULL_WIDTH)
  257 + .aspectRatio(16 / 9)
  258 + .borderRadius($r('app.float.image_border_radius'))
  259 + CardMediaInfo({ contentDTO: this.mJumpInfo })
  260 + }
  261 + .align(Alignment.BottomEnd)
  262 + }
  263 + } else {
  264 + // 竖图显示，宽度占50%，高度自适应
  265 + GridCol({
  266 + span: { xs: 6 }
  267 + }) {
  268 + Stack() {
  269 + Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
  270 + this.contentDetailData.fullColumnImgUrls[0].url:
  271 + this.contentDetailData.videoInfo[0].firstFrameImageUri)
  272 + .width(CommonConstants.FULL_WIDTH)
  273 + .borderRadius($r('app.float.image_border_radius'))
  274 + CardMediaInfo({ contentDTO: this.mJumpInfo })
  275 + }
  276 + .align(Alignment.BottomEnd)
  277 + }
  278 + }
  279 + }
  280 + .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
  281 + .onClick((event: ClickEvent) => {
  282 + this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
  283 + ProcessUtils.processPage(this.mJumpInfo)
  284 + })
178 } 285 }
179 } 286 }
180 //特别声明 287 //特别声明
@@ -231,14 +338,13 @@ export struct DynamicDetailComponent { @@ -231,14 +338,13 @@ export struct DynamicDetailComponent {
231 try { 338 try {
232 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType) 339 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
233 this.contentDetailData = data[0]; 340 this.contentDetailData = data[0];
234 - this.makeJumpInfo  
235 console.log('动态详情',JSON.stringify(this.contentDetailData)) 341 console.log('动态详情',JSON.stringify(this.contentDetailData))
236 } catch (exception) { 342 } catch (exception) {
237 console.log('请求失败',JSON.stringify(exception)) 343 console.log('请求失败',JSON.stringify(exception))
238 } 344 }
239 - this.getBatchAttentionStatus  
240 - this.getInteractDataStatus  
241 - this.getScreenWidth 345 + this.getBatchAttentionStatus()
  346 + this.getInteractDataStatus()
  347 + this.makeJumpInfo()
242 } 348 }
243 349
244 // 查询当前登录用户点赞状态 350 // 查询当前登录用户点赞状态
@@ -281,64 +387,6 @@ export struct DynamicDetailComponent { @@ -281,64 +387,6 @@ export struct DynamicDetailComponent {
281 387
282 } 388 }
283 } 389 }
284 - @Builder  
285 - setItemImageStyle(picPath: string,topLeft: number,topRight: number,bottomLeft: number,bottomRight: number){  
286 - //四角圆角  
287 - Image(picPath)  
288 - .width('100%')  
289 - .height('100%')  
290 - .borderRadius({topLeft: topLeft, topRight: topRight,  
291 - bottomLeft: bottomLeft, bottomRight: bottomRight})  
292 - }  
293 - /**  
294 - * 组件项  
295 - *  
296 - * @param programmeBean item 组件项, 上面icon,下面标题  
297 - */  
298 - @Builder  
299 - buildItemCard(item: string,len: number,index: number) {  
300 - Column() {  
301 - this.setItemImageRoundCorner(len, item, index)  
302 - Flex({ direction: FlexDirection.Row }) {  
303 - Image($r('app.media.icon_long_pic'))  
304 - .width(14)  
305 - .height(14)  
306 - .margin({right: 4})  
307 - Text('长图')  
308 - .fontSize(12)  
309 - .fontWeight(400)  
310 - .fontColor(0xffffff)  
311 - .fontFamily('PingFang SC')  
312 - }  
313 - .width(48)  
314 - .padding({bottom: 9})  
315 - }  
316 - .width(  
317 - //图片类型  
318 - this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN?'100%'  
319 - //视频横屏 横版16:9  
320 - :this.contentDetailData.videoInfo[0].videoLandScape == 1?this.screenWidth-32  
321 - //视频竖屏 竖版3:4  
322 - :(this.screenWidth-32)/2)  
323 - .height(  
324 - //图片类型  
325 - this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN?'100%'  
326 - //视频横屏 横版16:9  
327 - :this.contentDetailData.videoInfo[0].videoLandScape == 1?(this.screenWidth-32)*9/16  
328 - //视频竖屏 竖版3:4  
329 - :(this.screenWidth-32)/2*4/3)  
330 - .onClick((event: ClickEvent) => {  
331 - if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){  
332 - //fixme 跳转到查看图片页面（带页脚/下载按钮）  
333 - // this.mJumpInfo.objectType = ContentConstants.TYPE_  
334 - ProcessUtils.processPage(this.mJumpInfo)  
335 - }else{  
336 - //fixme 跳转到播放视频页面（点播）  
337 - this.mJumpInfo.objectType = ContentConstants.TYPE_VOD  
338 - ProcessUtils.processPage(this.mJumpInfo)  
339 - }  
340 - })  
341 - }  
342 390
343 //创建跳转信息 391 //创建跳转信息
344 makeJumpInfo(){ 392 makeJumpInfo(){
@@ -347,152 +395,51 @@ export struct DynamicDetailComponent { @@ -347,152 +395,51 @@ export struct DynamicDetailComponent {
347 this.mJumpInfo.objectId = this.contentDetailData.newsId+""; 395 this.mJumpInfo.objectId = this.contentDetailData.newsId+"";
348 this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+""; 396 this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+"";
349 this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+""; 397 this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+"";
  398 + // this.mJumpInfo.objectType = this.contentDetailData.newsType+"";
350 } 399 }
351 400
352 - //设置图片圆角  
353 - @Builder  
354 - setItemImageRoundCorner(len: number, picPath: string, index: number) {  
355 - if (len == 1) {  
356 - //四角圆角  
357 - this.setItemImageStyle(picPath, 4, 4, 4, 4);  
358 - } else if (len == 2) {  
359 - if (index == 0) {  
360 - //左边圆角  
361 - this.setItemImageStyle(picPath, 4, 0, 4, 0);  
362 - } else {  
363 - //右边圆角  
364 - this.setItemImageStyle(picPath, 0, 4, 0, 4);  
365 - }  
366 - } else if (3 == len) {  
367 - if (index == 0) {  
368 - //左边圆角  
369 - this.setItemImageStyle(picPath, 4, 0, 4, 0);  
370 - } else if (index == 1) {  
371 - //直角  
372 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
373 - } else {  
374 - //右边圆角  
375 - this.setItemImageStyle(picPath, 0, 4, 0, 4);  
376 - }  
377 - } else if (4 == len) {  
378 - if (index == 0) {  
379 - //左边圆角  
380 - this.setItemImageStyle(picPath, 4, 0, 4, 0);  
381 - } else if (index == 1) {  
382 - //右边圆角  
383 - this.setItemImageStyle(picPath, 0, 4, 0, 4);  
384 - } else if (index = 2) {  
385 - //左边圆角  
386 - this.setItemImageStyle(picPath, 4, 0, 4, 0);  
387 - } else {  
388 - //右边圆角  
389 - this.setItemImageStyle(picPath, 0, 4, 0, 4);  
390 - }  
391 - } else if (5 == len) {  
392 - if (index == 0) {  
393 - this.setItemImageStyle(picPath, 4, 0, 0, 0);  
394 - } else if (index == 1) {  
395 - //直角  
396 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
397 - } else if (index = 2) {  
398 - this.setItemImageStyle(picPath, 4, 4, 4, 4);  
399 - } else if (index = 3) {  
400 - this.setItemImageStyle(picPath, 0, 0, 4, 0);  
401 - } else {  
402 - this.setItemImageStyle(picPath, 0, 0, 0, 4);  
403 - }  
404 - } else if (6 == len) {  
405 - if (index == 0) {  
406 - this.setItemImageStyle(picPath, 4, 0, 0, 0);  
407 - } else if (index == 1) {  
408 - //直角  
409 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
410 - } else if (index = 2) {  
411 - this.setItemImageStyle(picPath, 0, 4, 0, 0);  
412 - } else if (index = 3) {  
413 - this.setItemImageStyle(picPath, 0, 0, 4, 0);  
414 - } else if (index = 4) {  
415 - //直角  
416 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
417 - } else {  
418 - //右边圆角  
419 - this.setItemImageStyle(picPath, 0, 0, 0, 4);  
420 - }  
421 - } else if (7 == len) {  
422 - if (index == 0) {  
423 - this.setItemImageStyle(picPath, 4, 0, 0, 0);  
424 - } else if (index == 1) {  
425 - //直角  
426 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
427 - } else if (index = 2) {  
428 - this.setItemImageStyle(picPath, 0, 4, 0, 0);  
429 - } else if (index = 3) {  
430 - //直角  
431 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
432 - } else if (index = 4) {  
433 - //直角  
434 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
435 - } else if (index = 5) {  
436 - this.setItemImageStyle(picPath, 0, 0, 0, 4);  
437 - } else {  
438 - this.setItemImageStyle(picPath, 0, 0, 4, 4);  
439 - }  
440 - } else if (8 == len) {  
441 - if (index == 0) {  
442 - this.setItemImageStyle(picPath, 4, 0, 0, 0);  
443 - } else if (index == 1) {  
444 - //直角  
445 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
446 - } else if (index = 2) {  
447 - this.setItemImageStyle(picPath, 0, 4, 0, 0);  
448 - } else if (index = 3) {  
449 - //直角  
450 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
451 - } else if (index = 4) {  
452 - //直角  
453 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
454 - } else if (index = 5) {  
455 - this.setItemImageStyle(picPath, 0, 0, 0, 4);  
456 - } else if (index = 6) {  
457 - this.setItemImageStyle(picPath, 0, 0, 4, 0); 401 +
  402 + caclImageRadius(index: number) {
  403 + let radius: radiusType = {
  404 + topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
  405 + topRight: 0,
  406 + bottomLeft: 0,
  407 + bottomRight: 0,
  408 + }
  409 + if (this.contentDetailData.photoList.length === 1) {
  410 + radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
  411 + radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
  412 + radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
  413 + } else if (this.contentDetailData.photoList.length === 5 && !this.contentDetailData.photoList[2].fullUrl) {
  414 + radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
  415 + radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
  416 + radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
458 } else { 417 } else {
459 - this.setItemImageStyle(picPath, 0, 0, 0, 4); 418 + radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
  419 + radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
  420 + radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
460 } 421 }
  422 + return radius
  423 + }
  424 +
  425 + getPicType(item: PhotoListBean){
  426 + if (item.width && item.width) {
  427 + if (item.width / item.height > 343/172) {
  428 + return 1; //横长图
  429 + } else if (item.height / item.width > 305/228) {
  430 + return 2; //竖长图
461 } else { 431 } else {
462 - if (index == 0) {  
463 - this.setItemImageStyle(picPath, 4, 0, 0, 0);  
464 - } else if (index == 1) {  
465 - //直角  
466 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
467 - } else if (index == 2) {  
468 - this.setItemImageStyle(picPath, 0, 4, 0, 0);  
469 - } else if (index == 3) {  
470 - //直角  
471 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
472 - } else if (index == 4) {  
473 - //直角  
474 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
475 - } else if (index == 5) {  
476 - //直角  
477 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
478 - } else if (index == 6) {  
479 - this.setItemImageStyle(picPath, 0, 0, 4, 0);  
480 - } else if (index == 7) {  
481 - //直角  
482 - this.setItemImageStyle(picPath, 0, 0, 0, 0);  
483 - } else {  
484 - this.setItemImageStyle(picPath, 0, 0, 0, 4); 432 + return 3
485 } 433 }
  434 + } else {
  435 + return 3; //普通图
486 } 436 }
487 } 437 }
  438 +}
488 439
489 - getScreenWidth(){  
490 - this.promise.then((data: Array<display.Display>) => {  
491 - console.log(`所有的屏幕信息：${JSON.stringify(data)}`)  
492 - //单位为像素  
493 - this.screenWidth = data[0]["width"]  
494 - }).catch((err: BusinessError) => {  
495 - console.error(`Failed to obtain all the display objects. Code: ${JSON.stringify(err)}`)  
496 - })  
497 - } 440 +interface radiusType {
  441 + topLeft: number | Resource;
  442 + topRight: number | Resource;
  443 + bottomLeft: number | Resource;
  444 + bottomRight: number | Resource;
498 } 445 }