developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
958575b9 2 parents 496b1447 8e7385f3

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool

Inline Side-by-side
Showing 3 changed files with 228 additions and 36 deletions
@@ -3,46 +3,45 @@ import { RmhTitle } from '../cardCommon/RmhTitle' @@ -3,46 +3,45 @@ import { RmhTitle } from '../cardCommon/RmhTitle'
3 import { CardMediaInfo } from '../cardCommon/CardMediaInfo' 3 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
4 import { CommonConstants } from 'wdConstant/Index'; 4 import { CommonConstants } from 'wdConstant/Index';
5 5
6 -const TAG = 'Card12Component'; 6 +const TAG = 'Card14Component';
7 7
8 /** 8 /**
9 - * 人民号-动态---12：人民号无图卡； 9 + * 人民号-动态---14：人民号单图卡；
10 */ 10 */
11 -@Entry  
12 @Component 11 @Component
13 -export struct Card12Component { 12 +export struct Card14Component {
14 @State contentDTO: ContentDTO = { 13 @State contentDTO: ContentDTO = {
15 - appStyle: '20',  
16 - coverType: 1,  
17 - coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',  
18 - fullColumnImgUrls: [  
19 - {  
20 - landscape: 1,  
21 - size: 1,  
22 - url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',  
23 - weight: 1600  
24 - }  
25 - ],  
26 - newsTitle: '好玩！》10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',  
27 - rmhInfo: {  
28 - authIcon:  
29 - 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',  
30 - authTitle: '10后音乐人王烁然个人人民号',  
31 - authTitle2: '10后音乐人王烁然个人人民号',  
32 - banControl: 0,  
33 - cnIsAttention: 1,  
34 - rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',  
35 - rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',  
36 - rmhName: '王烁然',  
37 - userId: '522435359667845',  
38 - userType: '2'  
39 - },  
40 - objectType: '1',  
41 - videoInfo: {  
42 - firstFrameImageUri: '',  
43 - videoDuration: 37,  
44 - videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'  
45 - } 14 + // appStyle: '20',
  15 + // coverType: 1,
  16 + // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  17 + // fullColumnImgUrls: [
  18 + // {
  19 + // landscape: 1,
  20 + // size: 1,
  21 + // url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  22 + // weight: 1600
  23 + // }
  24 + // ],
  25 + // newsTitle: '好玩！》10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  26 + // rmhInfo: {
  27 + // authIcon:
  28 + // 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
  29 + // authTitle: '10后音乐人王烁然个人人民号',
  30 + // authTitle2: '10后音乐人王烁然个人人民号',
  31 + // banControl: 0,
  32 + // cnIsAttention: 1,
  33 + // rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  34 + // rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
  35 + // rmhName: '王烁然',
  36 + // userId: '522435359667845',
  37 + // userType: '2'
  38 + // },
  39 + // objectType: '1',
  40 + // videoInfo: {
  41 + // firstFrameImageUri: '',
  42 + // videoDuration: 37,
  43 + // videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
  44 + // }
46 } as ContentDTO; 45 } as ContentDTO;
47 46
48 aboutToAppear(): void { 47 aboutToAppear(): void {
  1 +import { ContentDTO } from 'wdBean';
  2 +import { RmhTitle } from '../cardCommon/RmhTitle'
  3 +import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
  4 +import { CommonConstants } from 'wdConstant/Index';
  5 +
  6 +const TAG = 'Card16Component';
  7 +
  8 +/**
  9 + * 人民号-动态---16：人民号三图卡；
  10 + */
  11 +@Component
  12 +export struct Card16Component {
  13 + @State contentDTO: ContentDTO = {
  14 + appStyle: '20',
  15 + coverType: 1,
  16 + coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90;https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90;https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  17 + fullColumnImgUrls: [
  18 + {
  19 + landscape: 1,
  20 + size: 1,
  21 + url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  22 + weight: 1600
  23 + }
  24 + ],
  25 + newsTitle: '好玩！》10后音乐人王烁然个人人民号10后音乐人王烁然个人人民号10后音乐人王烁然个人人民号10后音乐人王烁然个人人民号10后音乐人王烁然个人人民号10后音乐人王烁然个人人民号',
  26 + rmhInfo: {
  27 + authIcon:
  28 + 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
  29 + authTitle: '10后音乐人王烁然个人人民号',
  30 + authTitle2: '10后音乐人王烁然个人人民号',
  31 + banControl: 0,
  32 + cnIsAttention: 1,
  33 + rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  34 + rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
  35 + rmhName: '王烁然',
  36 + userId: '522435359667845',
  37 + userType: '2'
  38 + },
  39 + objectType: '1',
  40 + videoInfo: {
  41 + firstFrameImageUri: '',
  42 + videoDuration: 37,
  43 + videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
  44 + }
  45 + } as ContentDTO;
  46 +
  47 + aboutToAppear(): void {
  48 + }
  49 +
  50 + build() {
  51 + Column() {
  52 + // rmh信息
  53 + RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
  54 + // 标题
  55 + if (this.contentDTO.newsTitle) {
  56 + Text(this.contentDTO.newsTitle)
  57 + .fontSize($r('app.float.font_size_17'))
  58 + .fontColor($r('app.color.color_222222'))
  59 + .width(CommonConstants.FULL_WIDTH)
  60 + .textOverflowStyle(2)
  61 + .margin({ bottom: 8 })
  62 + .lineHeight(25)
  63 + }
  64 + if (this.contentDTO.coverUrl) {
  65 + Flex() {
  66 + ForEach(this.contentDTO.coverUrl?.split(';'), (item: string) => {
  67 + Image(item).flexBasis(113).height(75).margin({right: 2})
  68 + })
  69 + }
  70 + }
  71 + //TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
  72 + }
  73 + .padding({
  74 + left: $r('app.float.card_comp_pagePadding_lf'),
  75 + right: $r('app.float.card_comp_pagePadding_lf'),
  76 + top: $r('app.float.card_comp_pagePadding_tb'),
  77 + bottom: $r('app.float.card_comp_pagePadding_tb')
  78 + })
  79 + }
  80 +}
  81 +
  82 +interface radiusType {
  83 + topLeft: number | Resource;
  84 + topRight: number | Resource;
  85 + bottomLeft: number | Resource;
  86 + bottomRight: number | Resource;
  87 +}
  88 +
  89 +@Component
  90 +struct createImg {
  91 + @Prop contentDTO: ContentDTO
  92 +
  93 + build() {
  94 + GridRow() {
  95 + if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
  96 + // 横屏
  97 + GridCol({
  98 + span: { xs: 12 }
  99 + }) {
  100 + Stack() {
  101 + Image(this.contentDTO.coverUrl)
  102 + .width(CommonConstants.FULL_WIDTH)
  103 + .aspectRatio(16 / 9)
  104 + .borderRadius($r('app.float.image_border_radius'))
  105 + CardMediaInfo({ contentDTO: this.contentDTO })
  106 + }
  107 + .align(Alignment.BottomEnd)
  108 + }
  109 + } else {
  110 + // 竖图显示，宽度占50%，高度自适应
  111 + GridCol({
  112 + span: { xs: 6 }
  113 + }) {
  114 + Stack() {
  115 + Image(this.contentDTO.coverUrl)
  116 + .width(CommonConstants.FULL_WIDTH)
  117 + .borderRadius($r('app.float.image_border_radius'))
  118 + CardMediaInfo({ contentDTO: this.contentDTO })
  119 + }
  120 + .align(Alignment.BottomEnd)
  121 + }
  122 + }
  123 + }
  124 + }
  125 +}
  126 +
  127 +
  128 +@Extend(Text)
  129 +function textOverflowStyle(maxLine: number) {
  130 + .maxLines(maxLine)
  131 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  132 +}
@@ -13,7 +13,7 @@ export struct Card19Component { @@ -13,7 +13,7 @@ export struct Card19Component {
13 // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', 13 // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
14 // fullColumnImgUrls: [ 14 // fullColumnImgUrls: [
15 // { 15 // {
16 - // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/quality,q_90/auto-orient,1', 16 + // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
17 // height: 1500, 17 // height: 1500,
18 // landscape: 1, 18 // landscape: 1,
19 // size: 1, 19 // size: 1,
@@ -107,6 +107,8 @@ interface radiusType { @@ -107,6 +107,8 @@ interface radiusType {
107 @Component 107 @Component
108 struct createImg { 108 struct createImg {
109 @Prop fullColumnImgUrls: FullColumnImgUrlDTO[] 109 @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
  110 + @State picWidth: number = 0;
  111 + @State picHeight: number = 0;
110 aboutToAppear(): void { 112 aboutToAppear(): void {
111 if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位 113 if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
112 this.fullColumnImgUrls.splice(2,0, { 114 this.fullColumnImgUrls.splice(2,0, {
@@ -137,18 +139,77 @@ struct createImg { @@ -137,18 +139,77 @@ struct createImg {
137 return radius 139 return radius
138 } 140 }
139 141
  142 + getPicType(){
  143 + if (this.picWidth && this.picWidth) {
  144 + if (this.picWidth / this.picHeight > 343/172) {
  145 + return 1; //横长图
  146 + } else if (this.picHeight / this.picWidth > 305/228) {
  147 + return 2; //竖长图
  148 + } else {
  149 + return 3
  150 + }
  151 + } else {
  152 + return 3; //普通图
  153 + }
  154 + }
  155 +
  156 +
140 build() { 157 build() {
141 GridRow({ 158 GridRow({
142 gutter: { x: 2, y: 2 } 159 gutter: { x: 2, y: 2 }
143 }) { 160 }) {
144 ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => { 161 ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
145 if (this.fullColumnImgUrls.length === 1) { 162 if (this.fullColumnImgUrls.length === 1) {
  163 + if (this.getPicType() !== 3) {
  164 + GridCol({
  165 + span: this.getPicType() === 1 ? 12 : 8
  166 + }){
  167 + Stack({
  168 + alignContent: Alignment.BottomEnd
  169 + }) {
  170 + if (this.getPicType() === 1) {
  171 + Image(item.fullUrl)
  172 + .width('100%')
  173 + .height(172)
  174 + .autoResize(true)
  175 + .borderRadius(this.caclImageRadius(index))
  176 + } else if (this.getPicType() === 2) {
  177 + Image(item.fullUrl)
  178 + .width('100%')
  179 + .height(305)
  180 + .autoResize(true)
  181 + .borderRadius(this.caclImageRadius(index))
  182 + }
  183 + Flex({ direction: FlexDirection.Row }) {
  184 + Image($r('app.media.icon_long_pic'))
  185 + .width(14)
  186 + .height(14)
  187 + .margin({right: 4})
  188 + Text('长图')
  189 + .fontSize(12)
  190 + .fontWeight(400)
  191 + .fontColor(0xffffff)
  192 + .fontFamily('PingFang SC')
  193 + }
  194 + .width(48)
  195 + .padding({bottom: 9})
  196 +
  197 + }
  198 + }
  199 + } else {
146 GridCol({ 200 GridCol({
147 span: { xs: 8 } 201 span: { xs: 8 }
148 }) { 202 }) {
149 Image(item.fullUrl) 203 Image(item.fullUrl)
150 .width('100%') 204 .width('100%')
151 .borderRadius(this.caclImageRadius(index)) 205 .borderRadius(this.caclImageRadius(index))
  206 + .autoResize(true)
  207 + .opacity(!this.picWidth && !this.picHeight ? 0 : 1)
  208 + .onComplete(callback => {
  209 + this.picWidth = callback?.width || 0;
  210 + this.picHeight = callback?.height || 0;
  211 + })
  212 + }
152 } 213 }
153 } else if (this.fullColumnImgUrls.length === 4) { 214 } else if (this.fullColumnImgUrls.length === 4) {
154 GridCol({ 215 GridCol({