fix: 电子报骨架图，轮播图添加标签

douaojie
Commit 7e9901aacc4f9ed65c87e3a8f04587c61ea2fe8d 7e9901aa 1 parent bb2a3b3f
Showing 2 changed files with 81 additions and 58 deletions
sight_harmony/features/wdComponent/src/main/ets/components/compview/ZhCarouselLayout01.ets
sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/compview/ZhCarouselLayout01.ets
View file @7e9901a
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/compview/ZhCarouselLayout01.ets
View file @7e9901a
 import { CompDTO, ContentDTO, } from 'wdBean';
-import { BreakpointConstants, CommonConstants, DurationEnum } from 'wdConstant';
+import { BreakpointConstants, CommonConstants } from 'wdConstant';
 import { BreakPointType, Logger } from 'wdKit';
 import { CompUtils } from '../../utils/CompUtils';
 import { ProcessUtils } from 'wdRouter';
 import { EmptyComponent } from '../view/EmptyComponent';
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
 import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
+import { Notes } from '../cardview/notes';
 const TAG = 'Zh_Carousel_Layout-01';
@@ -40,19 +41,21 @@ class MyDataSource implements IDataSource {
 @Component
 export struct ZhCarouselLayout01 {
-  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
+  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string =
+    BreakpointConstants.BREAKPOINT_XS;
   @State compDTO: CompDTO = {} as CompDTO
-  private data: MyDataSource = new MyDataSource([])
   @State firstWd: number = 0
   @State SecondWd: number = 0
   @State swiperIndex: number = 0
+  private data: MyDataSource = new MyDataSource([])
   watchCurrentBreakpoint() {
     Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
   }
   aboutToAppear() {
-    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
+    Logger.info(TAG,
+      `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
     let list: number[] = []
     for (let i = 1; i <= this.compDTO?.operDataList?.length; i++) {
       list.push(i);
@@ -155,16 +158,21 @@ export struct ZhCarouselLayout01 {
   }
   public buildDisplayCount(): number {
-    return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
+    return new BreakPointType({
+      xs: 1,
+      sm: 1,
+      md: 2,
+      lg: 3
+    }).getValue(this.currentBreakpoint)
   }
 }
 @Component
 struct CarouselLayout01CardView {
+  @State loadImg: boolean = false;
   private item: ContentDTO = new ContentDTO();
   private length: number = 1; // 轮播图数量
-  @State loadImg: boolean = false;
   async aboutToAppear(): Promise<void> {
     this.loadImg = await onlyWifiLoadImg();
@@ -187,22 +195,18 @@ struct CarouselLayout01CardView {
         })
       Column() {
         // 这里用于展示轮播图右上角信息，这里只对直播类型的展示
-        if (this.item.objectType === '2' || this.item.objectType ==='4') {
+        if (this.item.objectType === '2' || this.item.objectType === '4') {
           CardMediaInfo({ contentDTO: this.item })
             .width(CommonConstants.FULL_PARENT)
         }
         Blank()
         // 文本信息
+        Stack() {
+          if (this.item.objectType == '5') {
+            Notes({ objectType: this.item.objectType })
+          }
           Text(`${this.item.corner}${this.item.newsTitle}`)
             .width(CommonConstants.FULL_PARENT)
-          .height(39)
-          .padding({
-            left: 10,
-            right: 10
-          })
-          .margin({
-            bottom: this.length > 1 ? 28 : 10
-          })
             .fontColor(Color.White)
             .fontSize($r('app.float.font_size_16'))
             .fontWeight(FontWeight.Medium)
@@ -210,6 +214,18 @@ struct CarouselLayout01CardView {
             .align(Alignment.Bottom)
             .maxLines(CompUtils.MAX_LINES_2)
             .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .textIndent(this.item.objectType == '5' ? 40 : 0)
+        }
+        // .height(39)
+        .padding({
+          left: 10,
+          right: 10
+        })
+        .margin({
+          bottom: this.length > 1 ? 28 : 10
+        })
+        .alignContent(Alignment.TopStart)
+
       }
       .width(CommonConstants.FULL_PARENT)
       .height(CommonConstants.FULL_PARENT)
--- a/sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
View file @7e9901a
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
View file @7e9901a
@@ -16,29 +16,42 @@ export struct newsSkeleton {
               Column() {
                 Image($r('app.media.peopleSeleton')).width('100%').height(47)// 后缀名不能省略
                   .interpolation(ImageInterpolation.High)
-                textArea('100%', 9)
-              }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
+                textArea('100%', 8)
+              }
+              .width(124)
+              .alignItems(HorizontalAlign.Start)
+              .margin({ right: 5 })
               Column() {
-                textArea(27, 25)
-                textArea(27, 4)
-                textArea(27, 20)
+                Row()
+                  .width(27)
+                  .height(25)
+                  .backgroundColor('#FFF5F5F5')
+                Row()
+                  .width(27)
+                  .height(4)
+                  .backgroundColor('#FFF5F5F5')
+                  .margin({ top: 3, bottom: 3 })
+                Row()
+                  .width(27)
+                  .height(20)
+                  .backgroundColor('#FFF5F5F5')
+                // textArea(27, 25)
+                // textArea(27, 4)
+                // textArea(27, 20)
               }
               .border({ width: 1 })
               .borderColor('#FFF5F5F5')
               .padding({
-                right: 2,
-                left: 2,
-                top: 0,
-                bottom: 2
+                right: 5,
+                left: 5,
+                top: 4,
+                bottom: 4
               })
-              .justifyContent(FlexAlign.SpaceEvenly)
+              .justifyContent(FlexAlign.SpaceBetween)
               .alignItems(HorizontalAlign.Start)
             }
-            .justifyContent(FlexAlign.SpaceBetween)
-            .width('98%')
-
-            // .height(64)
+            .width('100%')
             BoxAndLine().width('100%')
             BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
@@ -48,24 +61,27 @@ export struct newsSkeleton {
             BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
-          }.width('45%')
-          .opacity(1)
-          .align(Alignment.Start)
-          .alignItems(HorizontalAlign.Start)
+          }
+          .width('50%')
+          .margin({ right: 5 })
           Column() {
             Column() {
               textArea('100%', 13)
             }.width('100%')
-            BoxAndLine()
+            Column() {
+              textArea('100%', 136)
+              textArea('100%', 13)
+              textArea('80%', 13)
+            }.width('100%').alignItems(HorizontalAlign.Start)
             Column() {
-              textArea('95%', 126)
+              textArea('100%', 126)
             }
             Column() {
-              textArea('95%', 13)
+              textArea('100%', 13)
             }
             Row() {
@@ -76,24 +92,28 @@ export struct newsSkeleton {
               Column() {
                 textArea('100%', 30)
               }.layoutWeight(1)
-            }.width('95%').justifyContent(FlexAlign.SpaceBetween)
+            }.width('100%').justifyContent(FlexAlign.SpaceBetween)
             Column() {
-              textArea('95%', 100)
+              textArea('100%', 100)
+            }
           }
-          }.width('45%')
+          .width('50%')
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .backgroundColor(Color.White)
         .padding({
-          top: 5,
-          bottom: 5,
-          right: 5,
-          left: 5
+          top: 15,
+          bottom: 15,
+          right: 15,
+          left: 15
         })
+
+        Column().backgroundColor('#CBCBCB').height(5).width(339)
+        Column().backgroundColor('#909090').height(5).width(326)
       }
       .width('100%')
-
+      .padding({ right: 10, left: 10 })
     }
     .height('100%')
@@ -107,7 +127,7 @@ struct BoxAndLine {
       textArea('100%', 130)
       textArea('100%', 13)
       textArea('80%', 13)
-    }.width('98%').alignItems(HorizontalAlign.Start)
+    }.alignItems(HorizontalAlign.Start)
   }
 }
@@ -140,18 +160,5 @@ function textArea(width: number | Resource | string = '100%', height: number | R
   // .borderRadius(5)
 }
-// 全局公共样式
-@Styles
-function SkeletonStyle() {
-  .padding({ right: 14, left: 14 })
-  .width('100%')
-  .margin({ top: 5 })
-}
-@Extend(Column)
-function RightStyle() {
-  .alignItems(HorizontalAlign.Start)
-  .justifyContent(FlexAlign.SpaceAround)
-  .height('100%')
-}