feat: 17449 UI还原问题--地方频道下的人民号动态长图无法显示长图信息

@@ -103,11 +103,14 @@ interface radiusType {
   bottomRight: number | Resource;
   bottomRight: number | Resource;
 }
 }
 
 
+interface picProps {
+  width: number,
+  height: number
+}
+
 @Component
 @Component
 struct createImg {
 struct createImg {
   @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
   @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
-  @State picWidth: number = 0;
-  @State picHeight: number = 0;
   @State loadImg: boolean = false;
   @State loadImg: boolean = false;
 
 
   async aboutToAppear(): Promise<void> {
   async aboutToAppear(): Promise<void> {
@@ -143,11 +146,11 @@ struct createImg {
     return radius
     return radius
   }
   }
 
 
-  getPicType(){
-    if (this.picWidth && this.picHeight) {
-      if (this.picWidth / this.picHeight > 2/1) {
+  getPicType(picWidth: number, picHeight: number) {
+    if (picWidth && picHeight) {
+      if (picWidth / picHeight > 2/1) {
         return 1; //横长图
         return 1; //横长图
-      } else if ( this.picWidth/this.picHeight < 1/2) {
+      } else if (picWidth/picHeight < 1/2) {
         return 2; //竖长图
         return 2; //竖长图
       } else {
       } else {
         return 3
         return 3
@@ -163,21 +166,21 @@ struct createImg {
     }) {
     }) {
       ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
       ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
         if (this.fullColumnImgUrls.length === 1) {
         if (this.fullColumnImgUrls.length === 1) {
-          if (this.getPicType() !== 3) {
+          if (this.getPicType(item.weight, item.height) !== 3) {
             GridCol({
             GridCol({
-              span: this.getPicType() === 1 ? 12 : 8
+              span: this.getPicType(item.weight, item.height) === 1 ? 12 : 8
             }){
             }){
               Stack({
               Stack({
                 alignContent: Alignment.BottomEnd
                 alignContent: Alignment.BottomEnd
               }) {
               }) {
-                if (this.getPicType() === 1) {
+                if (this.getPicType(item.weight, item.height) === 1) {
                   Image(this.loadImg ? item.fullUrl || item.url : '')
                   Image(this.loadImg ? item.fullUrl || item.url : '')
                     .backgroundColor(0xf5f5f5)
                     .backgroundColor(0xf5f5f5)
                     .width('100%')
                     .width('100%')
                     .height(172)
                     .height(172)
                     .autoResize(true)
                     .autoResize(true)
                     .borderRadius(this.caclImageRadius(index))
                     .borderRadius(this.caclImageRadius(index))
-                } else if (this.getPicType() === 2) {
+                } else if (this.getPicType(item.weight, item.height) === 2) {
                   Image(this.loadImg ? item.fullUrl ||  item.url : '')
                   Image(this.loadImg ? item.fullUrl ||  item.url : '')
                     .width('100%')
                     .width('100%')
                     .height(305)
                     .height(305)
@@ -200,6 +203,10 @@ struct createImg {
                     })
                     })
                     .fontColor(0xffffff)
                     .fontColor(0xffffff)
                     .fontFamily('PingFang SC')
                     .fontFamily('PingFang SC')
+                    .visibility(
+                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
+                        ? Visibility.Visible : Visibility.None
+                    )
                 }
                 }
                 .width(48)
                 .width(48)
                 .padding({bottom: 9})
                 .padding({bottom: 9})
@@ -215,11 +222,7 @@ struct createImg {
                 .width('100%')
                 .width('100%')
                 .autoResize(true)
                 .autoResize(true)
                 .borderRadius(this.caclImageRadius(index))
                 .borderRadius(this.caclImageRadius(index))
-                .opacity(!this.picWidth && !this.picHeight ? 0 : 1)
-                .onComplete(callback => {
-                  this.picWidth = callback?.width || 0;
-                  this.picHeight = callback?.height || 0;
-                })
+                .opacity(!item.weight && !item.height ? 0 : 1)
             }
             }
           }
           }
         } else if (this.fullColumnImgUrls.length === 4) {
         } else if (this.fullColumnImgUrls.length === 4) {
@@ -231,11 +234,7 @@ struct createImg {
                 .backgroundColor(0xf5f5f5)
                 .backgroundColor(0xf5f5f5)
                 .aspectRatio(1)
                 .aspectRatio(1)
                 .borderRadius(this.caclImageRadius(index))
                 .borderRadius(this.caclImageRadius(index))
-                .onComplete(callback => {
-                  this.picWidth = callback?.width || 0;
-                  this.picHeight = callback?.height || 0;
-                })
-              if(this.getPicType() !== 3){
+              if(this.getPicType(item.weight, item.height) !== 3){
                 Flex({ direction: FlexDirection.Row }) {
                 Flex({ direction: FlexDirection.Row }) {
                   Image($r('app.media.icon_long_pic'))
                   Image($r('app.media.icon_long_pic'))
                     .width(12)
                     .width(12)
@@ -252,6 +251,10 @@ struct createImg {
                     })
                     })
                     .fontColor(0xffffff)
                     .fontColor(0xffffff)
                     .fontFamily('PingFang SC')
                     .fontFamily('PingFang SC')
+                    .visibility(
+                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
+                        ? Visibility.Visible : Visibility.None
+                    )
                 }
                 }
                 .width(48)
                 .width(48)
                 .align(Alignment.BottomEnd)
                 .align(Alignment.BottomEnd)
@@ -268,11 +271,7 @@ struct createImg {
                 .backgroundColor(0xf5f5f5)
                 .backgroundColor(0xf5f5f5)
                 .aspectRatio(1)
                 .aspectRatio(1)
                 .borderRadius(this.caclImageRadius(index))
                 .borderRadius(this.caclImageRadius(index))
-                .onComplete(callback => {
-                  this.picWidth = callback?.width || 0;
-                  this.picHeight = callback?.height || 0;
-                })
-              if (this.getPicType() !== 3) {
+              if (this.getPicType(item.weight, item.height) !== 3) {
                 Flex({ direction: FlexDirection.Row }) {
                 Flex({ direction: FlexDirection.Row }) {
                   Image($r('app.media.icon_long_pic'))
                   Image($r('app.media.icon_long_pic'))
                     .width(12)
                     .width(12)
@@ -289,6 +288,10 @@ struct createImg {
                     })
                     })
                     .fontColor(0xffffff)
                     .fontColor(0xffffff)
                     .fontFamily('PingFang SC')
                     .fontFamily('PingFang SC')
+                    .visibility(
+                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
+                        ? Visibility.Visible : Visibility.None
+                    )
                 }
                 }
                 .width(48)
                 .width(48)
                 .align(Alignment.BottomEnd)
                 .align(Alignment.BottomEnd)