Showing
4 changed files
with
139 additions
and
2 deletions
| @@ -16,6 +16,7 @@ import { | @@ -16,6 +16,7 @@ import { | ||
| 16 | import { | 16 | import { |
| 17 | HorizontalStrokeCardThreeTwoRadioForOneComponent | 17 | HorizontalStrokeCardThreeTwoRadioForOneComponent |
| 18 | } from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent'; | 18 | } from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent'; |
| 19 | +import { AlbumCardComponent } from './view/AlbumCardComponent'; | ||
| 19 | 20 | ||
| 20 | /** | 21 | /** |
| 21 | * comp适配器. | 22 | * comp适配器. |
| @@ -57,7 +58,10 @@ export struct CompParser { | @@ -57,7 +58,10 @@ export struct CompParser { | ||
| 57 | HeadPictureCardComponent({ compDTO: compDTO }) | 58 | HeadPictureCardComponent({ compDTO: compDTO }) |
| 58 | } else if (compDTO.compStyle === CompStyle.ZhGrid_Layout_03) { | 59 | } else if (compDTO.compStyle === CompStyle.ZhGrid_Layout_03) { |
| 59 | ZhGridLayoutComponent({ compDTO: compDTO }) | 60 | ZhGridLayoutComponent({ compDTO: compDTO }) |
| 60 | - } else { | 61 | + } else if (compDTO.compStyle === CompStyle.Album_Card_01) { |
| 62 | + AlbumCardComponent({ compDTO: compDTO }) | ||
| 63 | + } | ||
| 64 | + else { | ||
| 61 | // todo:组件未实现 / Component Not Implemented | 65 | // todo:组件未实现 / Component Not Implemented |
| 62 | Text(compDTO.compStyle) | 66 | Text(compDTO.compStyle) |
| 63 | .width(CommonConstants.FULL_PARENT) | 67 | .width(CommonConstants.FULL_PARENT) |
| @@ -65,4 +69,5 @@ export struct CompParser { | @@ -65,4 +69,5 @@ export struct CompParser { | ||
| 65 | // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle | 69 | // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle |
| 66 | } | 70 | } |
| 67 | } | 71 | } |
| 68 | -} | ||
| 72 | +} | ||
| 73 | + |
| 1 | +import { CompDTO } from 'wdBean' | ||
| 2 | +import { DateTimeUtils, Logger } from 'wdKit'; | ||
| 3 | + | ||
| 4 | +const TAG = 'AlbumCardComponent'; | ||
| 5 | + | ||
| 6 | +@Preview | ||
| 7 | +@Component | ||
| 8 | +export struct AlbumCardComponent { | ||
| 9 | + @State compDTO: CompDTO = {} as CompDTO | ||
| 10 | + | ||
| 11 | + aboutToAppear() { | ||
| 12 | + Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList)); | ||
| 13 | + | ||
| 14 | + } | ||
| 15 | + | ||
| 16 | + build() { | ||
| 17 | + Column({ space: 8 }) { | ||
| 18 | + Text(this.compDTO.operDataList[0].newsTitle) | ||
| 19 | + .textOverflow({ overflow: TextOverflow.Ellipsis }) | ||
| 20 | + .fontSize(17) | ||
| 21 | + .fontColor(0x222222) | ||
| 22 | + .lineHeight(25) | ||
| 23 | + .maxLines(3) | ||
| 24 | + .margin({ top: 6, | ||
| 25 | + left: 16, | ||
| 26 | + right: 16 }) | ||
| 27 | + .width(343) | ||
| 28 | + | ||
| 29 | + RelativeContainer() { | ||
| 30 | + Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url) | ||
| 31 | + .width(229) | ||
| 32 | + .height(154) | ||
| 33 | + .alignRules({ | ||
| 34 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 35 | + left: { anchor: "__container__", align: HorizontalAlign.Start } | ||
| 36 | + }) | ||
| 37 | + .id('mainImage') | ||
| 38 | + | ||
| 39 | + Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url) | ||
| 40 | + .width(112) | ||
| 41 | + .height(76) | ||
| 42 | + .alignRules({ | ||
| 43 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 44 | + right: { anchor: "__container__", align: HorizontalAlign.End } | ||
| 45 | + }) | ||
| 46 | + .id('subTopImage') | ||
| 47 | + | ||
| 48 | + Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url) | ||
| 49 | + .width(112) | ||
| 50 | + .height(76) | ||
| 51 | + .alignRules({ | ||
| 52 | + right: { anchor: "__container__", align: HorizontalAlign.End }, | ||
| 53 | + bottom: { anchor: "__container__", align: VerticalAlign.Bottom } | ||
| 54 | + }) | ||
| 55 | + .id('subBottomImage') | ||
| 56 | + | ||
| 57 | + Shape() { | ||
| 58 | + Rect().width(33).height(18) | ||
| 59 | + } | ||
| 60 | + // .viewPort({ x: -2, y: -2, width: 304, height: 130 }) | ||
| 61 | + .fill(0x000000) | ||
| 62 | + .fillOpacity(0.3) | ||
| 63 | + // .strokeDashArray([20]) | ||
| 64 | + // .strokeDashOffset(10) | ||
| 65 | + .strokeLineCap(LineCapStyle.Round) | ||
| 66 | + .strokeLineJoin(LineJoinStyle.Round) | ||
| 67 | + .antiAlias(true) | ||
| 68 | + .id('shape') | ||
| 69 | + .alignRules({ | ||
| 70 | + right: { anchor: "__container__", align: HorizontalAlign.End }, | ||
| 71 | + bottom: { anchor: "__container__", align: VerticalAlign.Bottom } | ||
| 72 | + }) | ||
| 73 | + .margin({ right: 4, | ||
| 74 | + bottom: 4 }) | ||
| 75 | + | ||
| 76 | + Image($r('app.media.album_card_shape')) | ||
| 77 | + .width(22) | ||
| 78 | + .height(18) | ||
| 79 | + .alignRules({ | ||
| 80 | + left: { anchor: "shape", align: HorizontalAlign.Start }, | ||
| 81 | + top: { anchor: "shape", align: VerticalAlign.Top } | ||
| 82 | + }) | ||
| 83 | + .id('shapeSubImage') | ||
| 84 | + | ||
| 85 | + Text(this.compDTO.operDataList[0].fullColumnImgUrls.length + '') | ||
| 86 | + .fontSize(13) | ||
| 87 | + .fontColor(0xFFFFFF) | ||
| 88 | + .id('pageIndex') | ||
| 89 | + .alignRules({ | ||
| 90 | + right: { anchor: "shape", align: HorizontalAlign.End }, | ||
| 91 | + top: { anchor: "shape", align: VerticalAlign.Top } | ||
| 92 | + }) | ||
| 93 | + .margin({ right: 2 }) | ||
| 94 | + .textAlign(TextAlign.Center) | ||
| 95 | + .width(17) | ||
| 96 | + .height(17) | ||
| 97 | + } | ||
| 98 | + .width(343) | ||
| 99 | + .height(154) | ||
| 100 | + | ||
| 101 | + Row() { | ||
| 102 | + Text(this.compDTO.operDataList[0].source) | ||
| 103 | + .fontSize(13) | ||
| 104 | + .fontColor(0xB0B0B0) | ||
| 105 | + .margin({ | ||
| 106 | + left: 16 | ||
| 107 | + }) | ||
| 108 | + | ||
| 109 | + Image($r('app.media.point')) | ||
| 110 | + .width(16) | ||
| 111 | + .height(16) | ||
| 112 | + | ||
| 113 | + Text('45分钟') | ||
| 114 | + .fontSize(13) | ||
| 115 | + .fontColor(0xB0B0B0) | ||
| 116 | + | ||
| 117 | + Text('328评') | ||
| 118 | + .fontSize(13) | ||
| 119 | + .fontColor(0xB0B0B0) | ||
| 120 | + .margin({ | ||
| 121 | + left: 6 | ||
| 122 | + }) | ||
| 123 | + } | ||
| 124 | + .width(375) | ||
| 125 | + .height(16) | ||
| 126 | + .id('label') | ||
| 127 | + } | ||
| 128 | + .width(375) | ||
| 129 | + // .backgroundColor(0x000000) | ||
| 130 | + } | ||
| 131 | +} |
1.03 KB
| @@ -25,4 +25,5 @@ export const enum CompStyle { | @@ -25,4 +25,5 @@ export const enum CompStyle { | ||
| 25 | Title_All_01 = '3', // 全标题 | 25 | Title_All_01 = '3', // 全标题 |
| 26 | Single_Imagecard_03 = '13',//单图卡:3行标题 | 26 | Single_Imagecard_03 = '13',//单图卡:3行标题 |
| 27 | ZhGrid_Layout_03 = 'Zh_Grid_Layout-03', //金刚位卡 | 27 | ZhGrid_Layout_03 = 'Zh_Grid_Layout-03', //金刚位卡 |
| 28 | + Album_Card_01 = '17' //图卡集 | ||
| 28 | } | 29 | } |
-
Please register or login to post a comment