Showing
1 changed file
with
28 additions
and
25 deletions
| @@ -103,11 +103,14 @@ interface radiusType { | @@ -103,11 +103,14 @@ interface radiusType { | ||
| 103 | bottomRight: number | Resource; | 103 | bottomRight: number | Resource; |
| 104 | } | 104 | } |
| 105 | 105 | ||
| 106 | +interface picProps { | ||
| 107 | + width: number, | ||
| 108 | + height: number | ||
| 109 | +} | ||
| 110 | + | ||
| 106 | @Component | 111 | @Component |
| 107 | struct createImg { | 112 | struct createImg { |
| 108 | @Prop fullColumnImgUrls: FullColumnImgUrlDTO[] | 113 | @Prop fullColumnImgUrls: FullColumnImgUrlDTO[] |
| 109 | - @State picWidth: number = 0; | ||
| 110 | - @State picHeight: number = 0; | ||
| 111 | @State loadImg: boolean = false; | 114 | @State loadImg: boolean = false; |
| 112 | 115 | ||
| 113 | async aboutToAppear(): Promise<void> { | 116 | async aboutToAppear(): Promise<void> { |
| @@ -143,11 +146,11 @@ struct createImg { | @@ -143,11 +146,11 @@ struct createImg { | ||
| 143 | return radius | 146 | return radius |
| 144 | } | 147 | } |
| 145 | 148 | ||
| 146 | - getPicType(){ | ||
| 147 | - if (this.picWidth && this.picHeight) { | ||
| 148 | - if (this.picWidth / this.picHeight > 2/1) { | 149 | + getPicType(picWidth: number, picHeight: number) { |
| 150 | + if (picWidth && picHeight) { | ||
| 151 | + if (picWidth / picHeight > 2/1) { | ||
| 149 | return 1; //横长图 | 152 | return 1; //横长图 |
| 150 | - } else if ( this.picWidth/this.picHeight < 1/2) { | 153 | + } else if (picWidth/picHeight < 1/2) { |
| 151 | return 2; //竖长图 | 154 | return 2; //竖长图 |
| 152 | } else { | 155 | } else { |
| 153 | return 3 | 156 | return 3 |
| @@ -163,21 +166,21 @@ struct createImg { | @@ -163,21 +166,21 @@ struct createImg { | ||
| 163 | }) { | 166 | }) { |
| 164 | ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => { | 167 | ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => { |
| 165 | if (this.fullColumnImgUrls.length === 1) { | 168 | if (this.fullColumnImgUrls.length === 1) { |
| 166 | - if (this.getPicType() !== 3) { | 169 | + if (this.getPicType(item.weight, item.height) !== 3) { |
| 167 | GridCol({ | 170 | GridCol({ |
| 168 | - span: this.getPicType() === 1 ? 12 : 8 | 171 | + span: this.getPicType(item.weight, item.height) === 1 ? 12 : 8 |
| 169 | }){ | 172 | }){ |
| 170 | Stack({ | 173 | Stack({ |
| 171 | alignContent: Alignment.BottomEnd | 174 | alignContent: Alignment.BottomEnd |
| 172 | }) { | 175 | }) { |
| 173 | - if (this.getPicType() === 1) { | 176 | + if (this.getPicType(item.weight, item.height) === 1) { |
| 174 | Image(this.loadImg ? item.fullUrl || item.url : '') | 177 | Image(this.loadImg ? item.fullUrl || item.url : '') |
| 175 | .backgroundColor(0xf5f5f5) | 178 | .backgroundColor(0xf5f5f5) |
| 176 | .width('100%') | 179 | .width('100%') |
| 177 | .height(172) | 180 | .height(172) |
| 178 | .autoResize(true) | 181 | .autoResize(true) |
| 179 | .borderRadius(this.caclImageRadius(index)) | 182 | .borderRadius(this.caclImageRadius(index)) |
| 180 | - } else if (this.getPicType() === 2) { | 183 | + } else if (this.getPicType(item.weight, item.height) === 2) { |
| 181 | Image(this.loadImg ? item.fullUrl || item.url : '') | 184 | Image(this.loadImg ? item.fullUrl || item.url : '') |
| 182 | .width('100%') | 185 | .width('100%') |
| 183 | .height(305) | 186 | .height(305) |
| @@ -200,6 +203,10 @@ struct createImg { | @@ -200,6 +203,10 @@ struct createImg { | ||
| 200 | }) | 203 | }) |
| 201 | .fontColor(0xffffff) | 204 | .fontColor(0xffffff) |
| 202 | .fontFamily('PingFang SC') | 205 | .fontFamily('PingFang SC') |
| 206 | + .visibility( | ||
| 207 | + item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2 | ||
| 208 | + ? Visibility.Visible : Visibility.None | ||
| 209 | + ) | ||
| 203 | } | 210 | } |
| 204 | .width(48) | 211 | .width(48) |
| 205 | .padding({bottom: 9}) | 212 | .padding({bottom: 9}) |
| @@ -215,11 +222,7 @@ struct createImg { | @@ -215,11 +222,7 @@ struct createImg { | ||
| 215 | .width('100%') | 222 | .width('100%') |
| 216 | .autoResize(true) | 223 | .autoResize(true) |
| 217 | .borderRadius(this.caclImageRadius(index)) | 224 | .borderRadius(this.caclImageRadius(index)) |
| 218 | - .opacity(!this.picWidth && !this.picHeight ? 0 : 1) | ||
| 219 | - .onComplete(callback => { | ||
| 220 | - this.picWidth = callback?.width || 0; | ||
| 221 | - this.picHeight = callback?.height || 0; | ||
| 222 | - }) | 225 | + .opacity(!item.weight && !item.height ? 0 : 1) |
| 223 | } | 226 | } |
| 224 | } | 227 | } |
| 225 | } else if (this.fullColumnImgUrls.length === 4) { | 228 | } else if (this.fullColumnImgUrls.length === 4) { |
| @@ -231,11 +234,7 @@ struct createImg { | @@ -231,11 +234,7 @@ struct createImg { | ||
| 231 | .backgroundColor(0xf5f5f5) | 234 | .backgroundColor(0xf5f5f5) |
| 232 | .aspectRatio(1) | 235 | .aspectRatio(1) |
| 233 | .borderRadius(this.caclImageRadius(index)) | 236 | .borderRadius(this.caclImageRadius(index)) |
| 234 | - .onComplete(callback => { | ||
| 235 | - this.picWidth = callback?.width || 0; | ||
| 236 | - this.picHeight = callback?.height || 0; | ||
| 237 | - }) | ||
| 238 | - if(this.getPicType() !== 3){ | 237 | + if(this.getPicType(item.weight, item.height) !== 3){ |
| 239 | Flex({ direction: FlexDirection.Row }) { | 238 | Flex({ direction: FlexDirection.Row }) { |
| 240 | Image($r('app.media.icon_long_pic')) | 239 | Image($r('app.media.icon_long_pic')) |
| 241 | .width(12) | 240 | .width(12) |
| @@ -252,6 +251,10 @@ struct createImg { | @@ -252,6 +251,10 @@ struct createImg { | ||
| 252 | }) | 251 | }) |
| 253 | .fontColor(0xffffff) | 252 | .fontColor(0xffffff) |
| 254 | .fontFamily('PingFang SC') | 253 | .fontFamily('PingFang SC') |
| 254 | + .visibility( | ||
| 255 | + item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2 | ||
| 256 | + ? Visibility.Visible : Visibility.None | ||
| 257 | + ) | ||
| 255 | } | 258 | } |
| 256 | .width(48) | 259 | .width(48) |
| 257 | .align(Alignment.BottomEnd) | 260 | .align(Alignment.BottomEnd) |
| @@ -268,11 +271,7 @@ struct createImg { | @@ -268,11 +271,7 @@ struct createImg { | ||
| 268 | .backgroundColor(0xf5f5f5) | 271 | .backgroundColor(0xf5f5f5) |
| 269 | .aspectRatio(1) | 272 | .aspectRatio(1) |
| 270 | .borderRadius(this.caclImageRadius(index)) | 273 | .borderRadius(this.caclImageRadius(index)) |
| 271 | - .onComplete(callback => { | ||
| 272 | - this.picWidth = callback?.width || 0; | ||
| 273 | - this.picHeight = callback?.height || 0; | ||
| 274 | - }) | ||
| 275 | - if (this.getPicType() !== 3) { | 274 | + if (this.getPicType(item.weight, item.height) !== 3) { |
| 276 | Flex({ direction: FlexDirection.Row }) { | 275 | Flex({ direction: FlexDirection.Row }) { |
| 277 | Image($r('app.media.icon_long_pic')) | 276 | Image($r('app.media.icon_long_pic')) |
| 278 | .width(12) | 277 | .width(12) |
| @@ -289,6 +288,10 @@ struct createImg { | @@ -289,6 +288,10 @@ struct createImg { | ||
| 289 | }) | 288 | }) |
| 290 | .fontColor(0xffffff) | 289 | .fontColor(0xffffff) |
| 291 | .fontFamily('PingFang SC') | 290 | .fontFamily('PingFang SC') |
| 291 | + .visibility( | ||
| 292 | + item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2 | ||
| 293 | + ? Visibility.Visible : Visibility.None | ||
| 294 | + ) | ||
| 292 | } | 295 | } |
| 293 | .width(48) | 296 | .width(48) |
| 294 | .align(Alignment.BottomEnd) | 297 | .align(Alignment.BottomEnd) |
-
Please register or login to post a comment