developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
3aec1bf2 1 parent d25d91c2

feat：优化动态详情页图片展示，优化头像展示

Inline Side-by-side
Showing 4 changed files with 468 additions and 211 deletions
@@ -48,6 +48,8 @@ import { viewBlogItemInsightIntentShare } from '../utils/InsightIntentShare' @@ -48,6 +48,8 @@ import { viewBlogItemInsightIntentShare } from '../utils/InsightIntentShare'
48 import { common } from '@kit.AbilityKit'; 48 import { common } from '@kit.AbilityKit';
49 import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index'; 49 import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index';
50 import { componentUtils, window } from '@kit.ArkUI'; 50 import { componentUtils, window } from '@kit.ArkUI';
  51 +import { onlyWifiLoadImg } from '../utils/lazyloadImg';
  52 +
51 const TAG = 'DynamicDetailComponent' 53 const TAG = 'DynamicDetailComponent'
52 const PATTERN_DATE_CN_RN: string = 'yyyy年MM月dd日 HH:mm'; 54 const PATTERN_DATE_CN_RN: string = 'yyyy年MM月dd日 HH:mm';
53 55
@@ -124,6 +126,7 @@ export struct DynamicDetailComponent { @@ -124,6 +126,7 @@ export struct DynamicDetailComponent {
124 } 126 }
125 aboutToDisappear() { 127 aboutToDisappear() {
126 this.viewBlogInsightIntentShare() 128 this.viewBlogInsightIntentShare()
  129 +
127 } 130 }
128 onPageHide() { 131 onPageHide() {
129 132
@@ -308,214 +311,215 @@ export struct DynamicDetailComponent { @@ -308,214 +311,215 @@ export struct DynamicDetailComponent {
308 //附件内容：图片/视频 311 //附件内容：图片/视频
309 if (this.contentDetailData.photoList != null && this.contentDetailData.photoList.length > 0) { 312 if (this.contentDetailData.photoList != null && this.contentDetailData.photoList.length > 0) {
310 // 图片-从无图到9图展示 313 // 图片-从无图到9图展示
311 - GridRow({  
312 - gutter: { x: 2, y: 2 }  
313 - }) {  
314 - ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {  
315 - if (this.contentDetailData.photoList.length === 1) {  
316 - if (this.getPicType(item) !== 3) {  
317 - GridCol({  
318 - span: this.getPicType(item) === 1 ? 12 : 8  
319 - }) {  
320 - Stack({  
321 - alignContent: Alignment.BottomEnd  
322 - }) {  
323 - if (this.getPicType(item) === 1) {  
324 - Image(item.picPath)  
325 - .width('100%')  
326 - .height(172)  
327 - .autoResize(true)  
328 - .borderRadius(this.caclImageRadius(index))  
329 - } else if (this.getPicType(item) === 2) {  
330 - Image(item.picPath)  
331 - .width('100%')  
332 - .height(305)  
333 - .autoResize(true)  
334 - .borderRadius(this.caclImageRadius(index))  
335 - }  
336 - Flex({ direction: FlexDirection.Row }) {  
337 - Image($r('app.media.icon_long_pic'))  
338 - .width(12)  
339 - .height(12)  
340 - .margin({ right: 4 })  
341 - Text('长图')  
342 - .fontSize(10)  
343 - .fontWeight(400)  
344 - .textShadow({  
345 - radius: 1,  
346 - color: `rgba(0,0,0,0.5)`,  
347 - offsetY:1,  
348 - offsetX:1  
349 - })  
350 - .fontColor(0xffffff)  
351 - .fontFamily('PingFang SC')  
352 - }  
353 - .width(48)  
354 - .padding({ bottom: 9 })  
355 - }  
356 -  
357 - }  
358 - .onClick(async (event: ClickEvent) => {  
359 - let retvalue = await FastClickUtil.isMinDelayTime()  
360 - if(retvalue){  
361 - return  
362 - }  
363 - ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)  
364 - })  
365 - } else {  
366 - // GridCol({  
367 - // span: { xs: 8 }  
368 - // }) {  
369 - // Image(item.picPath)  
370 - // .width('100%')  
371 - // .borderRadius(this.caclImageRadius(index))  
372 - // .autoResize(true)  
373 - // .opacity(!item.width && !item.height ? 0 : 1)  
374 - // .onComplete(callback => {  
375 - // item.width = callback?.width || 0;  
376 - // item.height = callback?.height || 0;  
377 - // })  
378 - // }  
379 - GridCol({  
380 - span: this.onePicW > this.onePicH ? 12 : 8  
381 - }) {  
382 - Stack({alignContent: Alignment.BottomEnd}) {  
383 - Image(item.picPath)  
384 - .backgroundColor(0xf5f5f5)  
385 - .width('100%')  
386 - .autoResize(true)  
387 - .objectFit(ImageFit.Cover)  
388 - .autoResize(true)  
389 - .aspectRatio(3/4)  
390 - .borderRadius(this.caclImageRadius(index))  
391 - .borderStyle(BorderStyle.Solid)  
392 - .borderWidth(0.5)  
393 - .borderColor($r('app.color.color_0D000000'))  
394 - .opacity(!item.width && !item.height ? 0 : 1)  
395 - .onComplete((event?) => {  
396 - this.onePicW = event?.width || 0;  
397 - this.onePicH = event?.height || 0;  
398 - })  
399 - if(this.getPicType(item) !== 3){  
400 - Flex({ direction: FlexDirection.Row }) {  
401 - Image($r('app.media.icon_long_pic'))  
402 - .width(12)  
403 - .height(12)  
404 - .margin({ right: 4 })  
405 - Text('长图')  
406 - .fontSize(10)  
407 - .fontWeight(400)  
408 - .textShadow({  
409 - radius: 1,  
410 - color: `rgba(0,0,0,0.5)`,  
411 - offsetY:1,  
412 - offsetX:1  
413 - })  
414 - .fontColor(0xffffff)  
415 - .fontFamily('PingFang SC')  
416 - }  
417 - .width(48)  
418 - .align(Alignment.BottomEnd)  
419 - .padding({ bottom: 3 })  
420 - }  
421 - }  
422 - }  
423 - .onClick(async (event: ClickEvent) => {  
424 - let retvalue = await FastClickUtil.isMinDelayTime()  
425 - if(retvalue){  
426 - return  
427 - }  
428 - ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)  
429 - })  
430 - }  
431 - }  
432 - // else if (this.contentDetailData.photoList.length === 4) {  
433 - // GridCol({  
434 - // span: { xs: 4 }  
435 - // }) {  
436 - // Stack({alignContent: Alignment.BottomEnd}) {  
437 - // Image(item.picPath)  
438 - // .aspectRatio(1)  
439 - // .borderRadius(this.caclImageRadius(index))  
440 - // if(this.getPicType(item) !== 3){  
441 - // Flex({ direction: FlexDirection.Row }) {  
442 - // Image($r('app.media.icon_long_pic'))  
443 - // .width(12)  
444 - // .height(12)  
445 - // .margin({ right: 4 })  
446 - // Text('长图')  
447 - // .fontSize(10)  
448 - // .fontWeight(400)  
449 - // .textShadow({  
450 - // radius: 1,  
451 - // color: `rgba(0,0,0,0.5)`,  
452 - // offsetY:1,  
453 - // offsetX:1  
454 - // })  
455 - // .fontColor(0xffffff)  
456 - // .fontFamily('PingFang SC')  
457 - // }  
458 - // .width(48)  
459 - // .align(Alignment.BottomEnd)  
460 - // .padding({ bottom: 3 })  
461 - // }  
462 - // }  
463 - // }  
464 - // .onClick(async (event: ClickEvent) => {  
465 - // let retvalue = await FastClickUtil.isMinDelayTime()  
466 - // if(retvalue){  
467 - // return  
468 - // }  
469 - // ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)  
470 - // })  
471 - // }  
472 - else {  
473 - GridCol({  
474 - span: { sm: 4, lg: 3 }  
475 - }) {  
476 - Stack({alignContent: Alignment.BottomEnd}) {  
477 - Image(item.picPath)  
478 - .aspectRatio(1)  
479 - .borderRadius(this.caclImageRadius(index))  
480 - if(this.getPicType(item) !== 3){  
481 - Flex({ direction: FlexDirection.Row }) {  
482 - Image($r('app.media.icon_long_pic'))  
483 - .width(12)  
484 - .height(12)  
485 - .margin({ right: 4 })  
486 - Text('长图')  
487 - .fontSize(10)  
488 - .fontWeight(400)  
489 - .textShadow({  
490 - radius: 1,  
491 - color: `rgba(0,0,0,0.5)`,  
492 - offsetY:1,  
493 - offsetX:1  
494 - })  
495 - .fontColor(0xffffff)  
496 - .fontFamily('PingFang SC')  
497 - }  
498 - .width(48)  
499 - .align(Alignment.BottomEnd)  
500 - .padding({ bottom: 3})  
501 - }  
502 - }  
503 - }  
504 - .onClick(async (event: ClickEvent) => {  
505 - let retvalue = await FastClickUtil.isMinDelayTime()  
506 - if(retvalue){  
507 - return  
508 - }  
509 - ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)  
510 - })  
511 - }  
512 - })  
513 - }  
514 - .margin({  
515 - left: $r('app.float.margin_16'),  
516 - right: $r('app.float.margin_16'),  
517 - top: $r('app.float.margin_8')  
518 - }) 314 + createImg({fullColumnImgUrls:this.contentDetailData.photoList})
  315 + // GridRow({
  316 + // gutter: { x: 2, y: 2 }
  317 + // }) {
  318 + // ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
  319 + // if (this.contentDetailData.photoList.length === 1) {
  320 + // if (this.getPicType(item) !== 3) {
  321 + // GridCol({
  322 + // span: this.getPicType(item) === 1 ? 12 : 8
  323 + // }) {
  324 + // Stack({
  325 + // alignContent: Alignment.BottomEnd
  326 + // }) {
  327 + // if (this.getPicType(item) === 1) {
  328 + // Image(item.picPath)
  329 + // .width('100%')
  330 + // .height(172)
  331 + // .autoResize(true)
  332 + // .borderRadius(this.caclImageRadius(index))
  333 + // } else if (this.getPicType(item) === 2) {
  334 + // Image(item.picPath)
  335 + // .width('100%')
  336 + // .height(305)
  337 + // .autoResize(true)
  338 + // .borderRadius(this.caclImageRadius(index))
  339 + // }
  340 + // Flex({ direction: FlexDirection.Row }) {
  341 + // Image($r('app.media.icon_long_pic'))
  342 + // .width(12)
  343 + // .height(12)
  344 + // .margin({ right: 4 })
  345 + // Text('长图')
  346 + // .fontSize(10)
  347 + // .fontWeight(400)
  348 + // .textShadow({
  349 + // radius: 1,
  350 + // color: `rgba(0,0,0,0.5)`,
  351 + // offsetY:1,
  352 + // offsetX:1
  353 + // })
  354 + // .fontColor(0xffffff)
  355 + // .fontFamily('PingFang SC')
  356 + // }
  357 + // .width(48)
  358 + // .padding({ bottom: 9 })
  359 + // }
  360 + //
  361 + // }
  362 + // .onClick(async (event: ClickEvent) => {
  363 + // let retvalue = await FastClickUtil.isMinDelayTime()
  364 + // if(retvalue){
  365 + // return
  366 + // }
  367 + // ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
  368 + // })
  369 + // } else {
  370 + // // GridCol({
  371 + // // span: { xs: 8 }
  372 + // // }) {
  373 + // // Image(item.picPath)
  374 + // // .width('100%')
  375 + // // .borderRadius(this.caclImageRadius(index))
  376 + // // .autoResize(true)
  377 + // // .opacity(!item.width && !item.height ? 0 : 1)
  378 + // // .onComplete(callback => {
  379 + // // item.width = callback?.width || 0;
  380 + // // item.height = callback?.height || 0;
  381 + // // })
  382 + // // }
  383 + // GridCol({
  384 + // span: this.onePicW > this.onePicH ? 12 : 8
  385 + // }) {
  386 + // Stack({alignContent: Alignment.BottomEnd}) {
  387 + // Image(item.picPath)
  388 + // .backgroundColor(0xf5f5f5)
  389 + // .width('100%')
  390 + // .autoResize(true)
  391 + // .objectFit(ImageFit.Cover)
  392 + // .autoResize(true)
  393 + // .aspectRatio(3/4)
  394 + // .borderRadius(this.caclImageRadius(index))
  395 + // .borderStyle(BorderStyle.Solid)
  396 + // .borderWidth(0.5)
  397 + // .borderColor($r('app.color.color_0D000000'))
  398 + // .opacity(!item.width && !item.height ? 0 : 1)
  399 + // .onComplete((event?) => {
  400 + // this.onePicW = event?.width || 0;
  401 + // this.onePicH = event?.height || 0;
  402 + // })
  403 + // if(this.getPicType(item) !== 3){
  404 + // Flex({ direction: FlexDirection.Row }) {
  405 + // Image($r('app.media.icon_long_pic'))
  406 + // .width(12)
  407 + // .height(12)
  408 + // .margin({ right: 4 })
  409 + // Text('长图')
  410 + // .fontSize(10)
  411 + // .fontWeight(400)
  412 + // .textShadow({
  413 + // radius: 1,
  414 + // color: `rgba(0,0,0,0.5)`,
  415 + // offsetY:1,
  416 + // offsetX:1
  417 + // })
  418 + // .fontColor(0xffffff)
  419 + // .fontFamily('PingFang SC')
  420 + // }
  421 + // .width(48)
  422 + // .align(Alignment.BottomEnd)
  423 + // .padding({ bottom: 3 })
  424 + // }
  425 + // }
  426 + // }
  427 + // .onClick(async (event: ClickEvent) => {
  428 + // let retvalue = await FastClickUtil.isMinDelayTime()
  429 + // if(retvalue){
  430 + // return
  431 + // }
  432 + // ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
  433 + // })
  434 + // }
  435 + // }
  436 + // else if (this.contentDetailData.photoList.length === 4) {
  437 + // GridCol({
  438 + // span: { xs: 4 }
  439 + // }) {
  440 + // Stack({alignContent: Alignment.BottomEnd}) {
  441 + // Image(item.picPath)
  442 + // .aspectRatio(1)
  443 + // .borderRadius(this.caclImageRadius(index))
  444 + // if(this.getPicType(item) !== 3){
  445 + // Flex({ direction: FlexDirection.Row }) {
  446 + // Image($r('app.media.icon_long_pic'))
  447 + // .width(12)
  448 + // .height(12)
  449 + // .margin({ right: 4 })
  450 + // Text('长图')
  451 + // .fontSize(10)
  452 + // .fontWeight(400)
  453 + // .textShadow({
  454 + // radius: 1,
  455 + // color: `rgba(0,0,0,0.5)`,
  456 + // offsetY:1,
  457 + // offsetX:1
  458 + // })
  459 + // .fontColor(0xffffff)
  460 + // .fontFamily('PingFang SC')
  461 + // }
  462 + // .width(48)
  463 + // .align(Alignment.BottomEnd)
  464 + // .padding({ bottom: 3 })
  465 + // }
  466 + // }
  467 + // }
  468 + // .onClick(async (event: ClickEvent) => {
  469 + // let retvalue = await FastClickUtil.isMinDelayTime()
  470 + // if(retvalue){
  471 + // return
  472 + // }
  473 + // ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
  474 + // })
  475 + // }
  476 + // else {
  477 + // GridCol({
  478 + // span: { sm: 4, lg: 3 }
  479 + // }) {
  480 + // Stack({alignContent: Alignment.BottomEnd}) {
  481 + // Image(item.picPath)
  482 + // .aspectRatio(1)
  483 + // .borderRadius(this.caclImageRadius(index))
  484 + // if(this.getPicType(item) !== 3){
  485 + // Flex({ direction: FlexDirection.Row }) {
  486 + // Image($r('app.media.icon_long_pic'))
  487 + // .width(12)
  488 + // .height(12)
  489 + // .margin({ right: 4 })
  490 + // Text('长图')
  491 + // .fontSize(10)
  492 + // .fontWeight(400)
  493 + // .textShadow({
  494 + // radius: 1,
  495 + // color: `rgba(0,0,0,0.5)`,
  496 + // offsetY:1,
  497 + // offsetX:1
  498 + // })
  499 + // .fontColor(0xffffff)
  500 + // .fontFamily('PingFang SC')
  501 + // }
  502 + // .width(48)
  503 + // .align(Alignment.BottomEnd)
  504 + // .padding({ bottom: 3})
  505 + // }
  506 + // }
  507 + // }
  508 + // .onClick(async (event: ClickEvent) => {
  509 + // let retvalue = await FastClickUtil.isMinDelayTime()
  510 + // if(retvalue){
  511 + // return
  512 + // }
  513 + // ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
  514 + // })
  515 + // }
  516 + // })
  517 + // }
  518 + // .margin({
  519 + // left: $r('app.float.margin_16'),
  520 + // right: $r('app.float.margin_16'),
  521 + // top: $r('app.float.margin_8')
  522 + // })
519 } 523 }
520 } else { 524 } else {
521 if (this.contentDetailData.videoInfo != null && this.contentDetailData.videoInfo.length > 0) { 525 if (this.contentDetailData.videoInfo != null && this.contentDetailData.videoInfo.length > 0) {
@@ -955,6 +959,259 @@ export struct DynamicDetailComponent { @@ -955,6 +959,259 @@ export struct DynamicDetailComponent {
955 } 959 }
956 } 960 }
957 961
  962 +@Component
  963 +struct createImg {
  964 + @State fullColumnImgUrls: PhotoListBean[] = []
  965 + @State loadImg: boolean = false;
  966 + @State onePicW: number = 0; // 只有一张图时候图片的宽度
  967 + @State onePicH: number = 0; // 只有一张图时候图片的高度
  968 +
  969 + async aboutToAppear(): Promise<void> {
  970 + if (this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
  971 + this.fullColumnImgUrls.splice(2, 0, {
  972 + picPath: ''
  973 + } as PhotoListBean)
  974 + }
  975 + this.loadImg = await onlyWifiLoadImg();
  976 + console.log('card19-this.fullColumnImgUrls',JSON.stringify(this.fullColumnImgUrls))
  977 + }
  978 +
  979 + caclImageRadius(index: number) {
  980 + let radius: radiusType = {
  981 + topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
  982 + topRight: 0,
  983 + bottomLeft: 0,
  984 + bottomRight: 0,
  985 + }
  986 + if (this.fullColumnImgUrls.length === 1) {
  987 + radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
  988 + radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
  989 + radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
  990 + } else if (this.fullColumnImgUrls.length === 2) {
  991 + radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
  992 + radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
  993 + radius.bottomRight = index === 1 ? $r('app.float.image_border_radius') : 0
  994 + } else if (this.fullColumnImgUrls.length === 3) {
  995 + radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
  996 + radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
  997 + radius.bottomRight = index === 2 ? $r('app.float.image_border_radius') : 0
  998 + } else if (this.fullColumnImgUrls.length === 6) {
  999 + radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
  1000 + radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
  1001 + radius.bottomRight = index === 5 ? $r('app.float.image_border_radius') : 0
  1002 + } else if (this.fullColumnImgUrls.length === 5 && !this.fullColumnImgUrls[2].picPath) {
  1003 + radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
  1004 + radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
  1005 + radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
  1006 + } else {
  1007 + radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
  1008 + radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
  1009 + radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
  1010 + }
  1011 + return radius
  1012 + }
  1013 +
  1014 + getPicType(picWidth: number, picHeight: number) {
  1015 + //console.info(`cj2024 getPicType picWidth = ${picWidth} picHeight = ${picHeight} picWidth / picHeight = ${picWidth / picHeight}`)
  1016 + if (picWidth && picHeight) {
  1017 + if (picWidth / picHeight > 2/1) {
  1018 + return 1; //横长图
  1019 + } else if (picWidth/picHeight > 1/2 && picWidth/picHeight < 3/4) { //截取图片
  1020 + return 4;
  1021 + } else if (picWidth/picHeight < 1/2) {
  1022 + return 2; //竖长图
  1023 + } else {
  1024 + return 3
  1025 + }
  1026 + } else {
  1027 + return 3; //普通图
  1028 + }
  1029 + }
  1030 +
  1031 + @Builder
  1032 + longPicTip(weight: number, height: number) {
  1033 + Flex({ direction: FlexDirection.Row }) {
  1034 + Image($r('app.media.icon_long_pic'))
  1035 + .width(12)
  1036 + .height(12)
  1037 + .margin({ right: 4 })
  1038 + Text('长图')
  1039 + .fontSize(10)
  1040 + .fontWeight(400)
  1041 + .textShadow({
  1042 + radius: 1,
  1043 + color: `rgba(0,0,0,0.5)`,
  1044 + offsetY:1,
  1045 + offsetX:1
  1046 + })
  1047 + .fontColor(0xffffff)
  1048 + .fontFamily('PingFang SC')
  1049 + .visibility(
  1050 + weight / height > 2 || height / weight > 2
  1051 + ? Visibility.Visible : Visibility.None
  1052 + )
  1053 + }
  1054 + .width(48)
  1055 + .align(Alignment.BottomEnd)
  1056 + .padding({ bottom: 8 })
  1057 + }
  1058 +
  1059 + build() {
  1060 + GridRow({
  1061 + gutter: { x: 2, y: 2 }
  1062 + }) {
  1063 + ForEach(this.fullColumnImgUrls, (item: PhotoListBean, index: number) => {
  1064 + if (this.fullColumnImgUrls.length === 1) {
  1065 + if (this.getPicType(item.width, item.height) < 3) {
  1066 + GridCol({
  1067 + span: this.getPicType(item.width, item.height) === 1 ? 12 : 8
  1068 + }){
  1069 + Stack({
  1070 + alignContent: Alignment.BottomEnd
  1071 + }) {
  1072 + if (this.getPicType(item.width, item.height) === 1) {
  1073 + Image(this.loadImg ? item.picPath : '')
  1074 + .backgroundColor(0xf5f5f5)
  1075 + .width('100%')
  1076 + .height(198)
  1077 + .autoResize(true)
  1078 + .borderRadius(this.caclImageRadius(index))
  1079 + .borderStyle(BorderStyle.Solid)
  1080 + .borderWidth(0.5)
  1081 + .borderColor($r('app.color.color_0D000000'))
  1082 + .onClick(() => {
  1083 + ProcessUtils.gotoMultiPictureListPage(this.fullColumnImgUrls, index)
  1084 + })
  1085 + } else if (this.getPicType(item.width, item.height) === 2) {
  1086 + Image(this.loadImg ? item.picPath : '')
  1087 + .width('100%')
  1088 + .height(305)
  1089 + .autoResize(true)
  1090 + .borderRadius(this.caclImageRadius(index))
  1091 + .borderStyle(BorderStyle.Solid)
  1092 + .borderWidth(0.5)
  1093 + .borderColor($r('app.color.color_0D000000'))
  1094 + .onClick(() => {
  1095 + ProcessUtils.gotoMultiPictureListPage(this.fullColumnImgUrls, index)
  1096 + })
  1097 + }
  1098 + this.longPicTip(item.width, item.height)
  1099 +
  1100 + }
  1101 + }
  1102 + } else if (this.getPicType(item.width, item.height) === 4) {
  1103 + GridCol({
  1104 + span: this.onePicW > this.onePicH ? 12 : 8
  1105 + }) {
  1106 + Image(this.loadImg ? item.picPath : '')
  1107 + .backgroundColor(0xf5f5f5)
  1108 + // .aspectRatio(this.onePicW > this.onePicH ? 343 / 198 : 228 / 305)
  1109 + .width('100%')
  1110 + .autoResize(true)
  1111 + .objectFit(ImageFit.Cover)
  1112 + .autoResize(true)
  1113 + .aspectRatio(3/4)
  1114 + .borderRadius(this.caclImageRadius(index))
  1115 + .borderStyle(BorderStyle.Solid)
  1116 + .borderWidth(0.5)
  1117 + .borderColor($r('app.color.color_0D000000'))
  1118 + .opacity(!item.width && !item.height ? 0 : 1)
  1119 + .onComplete((event?) => {
  1120 + this.onePicW = event?.width || 0;
  1121 + this.onePicH = event?.height || 0;
  1122 + })
  1123 + .onClick(() => {
  1124 + ProcessUtils.gotoMultiPictureListPage(this.fullColumnImgUrls, index)
  1125 + })
  1126 + }
  1127 + } else {
  1128 + GridCol({
  1129 + span: this.onePicW > this.onePicH ? 12 : 8
  1130 + }) {
  1131 + Stack({alignContent: Alignment.BottomEnd}) {
  1132 + Image(this.loadImg ? item.picPath : '')
  1133 + .backgroundColor(0xf5f5f5)
  1134 + // .aspectRatio(this.onePicW > this.onePicH ? 343 / 198 : 228 / 305)
  1135 + .width('100%')
  1136 + .constraintSize({
  1137 + maxHeight: this.onePicW > this.onePicH ? 198 : 305
  1138 + })
  1139 + .autoResize(true)
  1140 + .borderRadius(this.caclImageRadius(index))
  1141 + .borderStyle(BorderStyle.Solid)
  1142 + .borderWidth(0.5)
  1143 + .borderColor($r('app.color.color_0D000000'))
  1144 + .opacity(!item.width && !item.height ? 0 : 1)
  1145 + .onComplete((event?) => {
  1146 + this.onePicW = event?.width || 0;
  1147 + this.onePicH = event?.height || 0;
  1148 + })
  1149 + if (this.onePicW && this.onePicH) {
  1150 + this.longPicTip(this.onePicW, this.onePicH)
  1151 + }
  1152 + }
  1153 + .onClick(() => {
  1154 + ProcessUtils.gotoMultiPictureListPage(this.fullColumnImgUrls, index)
  1155 + })
  1156 + }
  1157 + }
  1158 + } else if (this.fullColumnImgUrls.length === 5) {
  1159 + // 四图卡里面塞了一张补位卡
  1160 + GridCol({
  1161 + span: { xs: 4 }
  1162 + }) {
  1163 + Stack({alignContent: Alignment.BottomEnd}) {
  1164 + Image(this.loadImg ? item.picPath : '')
  1165 + .backgroundColor(index === 2 ? 0xffffff : 0xf5f5f5)
  1166 + .aspectRatio(1)
  1167 + .width('226lvp')
  1168 + .height('226lvp')
  1169 + .borderRadius(this.caclImageRadius(index))
  1170 + .borderStyle(BorderStyle.Solid)
  1171 + .borderWidth(0.5)
  1172 + .borderColor($r('app.color.color_0D000000'))
  1173 + if(this.getPicType(item.width, item.height) !== 3){
  1174 + this.longPicTip(item.width, item.height)
  1175 + }
  1176 + }
  1177 + .onClick(() => {
  1178 + const photoList: PhotoListBean[] = []
  1179 + this.fullColumnImgUrls.forEach((element,index) => {
  1180 + if (index !== 2) {
  1181 + photoList.push(element)
  1182 + }
  1183 + })
  1184 + ProcessUtils.gotoMultiPictureListPage(photoList, index>2?index-1:index)
  1185 + })
  1186 + }
  1187 + } else {
  1188 + GridCol({
  1189 + span: { sm: 4, lg: 3 }
  1190 + }) {
  1191 + Stack({ alignContent: Alignment.BottomEnd }) {
  1192 + Image(this.loadImg ? item.picPath : '')
  1193 + .backgroundColor(0xf5f5f5)
  1194 + .aspectRatio(1)
  1195 + .borderRadius(this.caclImageRadius(index))
  1196 + .borderStyle(BorderStyle.Solid)
  1197 + .borderWidth(0.5)
  1198 + .borderColor($r('app.color.color_0D000000'))
  1199 + .width('100%')
  1200 + .autoResize(true)
  1201 + if (this.getPicType(item.width, item.height) !== 3) {
  1202 + this.longPicTip(item.width, item.height)
  1203 + }
  1204 + }
  1205 + .onClick(() => {
  1206 + ProcessUtils.gotoMultiPictureListPage(this.fullColumnImgUrls, index)
  1207 + })
  1208 + }
  1209 + }
  1210 + })
  1211 + }
  1212 + }
  1213 +}
  1214 +
958 interface radiusType { 1215 interface radiusType {
959 topLeft: number | Resource; 1216 topLeft: number | Resource;
960 topRight: number | Resource; 1217 topRight: number | Resource;
@@ -58,7 +58,7 @@ export default struct MinePageUserSimpleInfoUI { @@ -58,7 +58,7 @@ export default struct MinePageUserSimpleInfoUI {
58 .alt(this.userType === "1"?$r('app.media.default_head_userPage'):$r('app.media.AccountOwner_DefaultIcon')) 58 .alt(this.userType === "1"?$r('app.media.default_head_userPage'):$r('app.media.AccountOwner_DefaultIcon'))
59 .width(63.21) 59 .width(63.21)
60 .height(63.21) 60 .height(63.21)
61 - .objectFit(ImageFit.Fill) 61 + .objectFit(ImageFit.Cover)
62 .borderRadius(50) 62 .borderRadius(50)
63 63
64 if(StringUtils.isNotEmpty(this.levelHead)){ 64 if(StringUtils.isNotEmpty(this.levelHead)){
@@ -358,7 +358,7 @@ export struct FollowChildComponent{ @@ -358,7 +358,7 @@ export struct FollowChildComponent{
358 358
359 jumpCreatorHomePage() { 359 jumpCreatorHomePage() {
360 if(this.data.mainControl === 0){ 360 if(this.data.mainControl === 0){
361 - ToastUtils.shortToast("无法查看此用户主页") 361 + ToastUtils.shortToast("暂时无法查看该创作者主页")
362 }else if(this.data.banControl === 1){ 362 }else if(this.data.banControl === 1){
363 ToastUtils.shortToast("该账号已封禁，不予访问") 363 ToastUtils.shortToast("该账号已封禁，不予访问")
364 }else{ 364 }else{
@@ -69,7 +69,7 @@ export struct SearchCreatorComponent{ @@ -69,7 +69,7 @@ export struct SearchCreatorComponent{
69 69
70 jumpCreatorHomePage() { 70 jumpCreatorHomePage() {
71 if(Number.parseInt(this.item.mainControl) === 0){ 71 if(Number.parseInt(this.item.mainControl) === 0){
72 - ToastUtils.shortToast("无法查看此用户主页") 72 + ToastUtils.shortToast("暂时无法查看该创作者主页")
73 }else if(Number.parseInt(this.item.banControl) === 1){ 73 }else if(Number.parseInt(this.item.banControl) === 1){
74 ToastUtils.shortToast("该账号已封禁，不予访问") 74 ToastUtils.shortToast("该账号已封禁，不予访问")
75 }else{ 75 }else{