developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
fanmingyou3_wd
d61b6d17 1 parent eb714c89

短视频详情页面布局增加功能

Inline Side-by-side
Showing 5 changed files with 55 additions and 33 deletions
@@ -30,6 +30,7 @@ export struct DetailPlayShortVideoPage { @@ -30,6 +30,7 @@ export struct DetailPlayShortVideoPage {
30 @Provide canStart?: boolean = false; 30 @Provide canStart?: boolean = false;
31 @Provide status: number = PlayerConstants.STATUS_START; 31 @Provide status: number = PlayerConstants.STATUS_START;
32 @Provide userId: string = ''; 32 @Provide userId: string = '';
  33 + @Provide newsSourceName?: string = undefined
33 @Provide title?: string = undefined 34 @Provide title?: string = undefined
34 @Provide message?: string = undefined 35 @Provide message?: string = undefined
35 @Provide newsSummary?: string = undefined 36 @Provide newsSummary?: string = undefined
@@ -37,6 +38,7 @@ export struct DetailPlayShortVideoPage { @@ -37,6 +38,7 @@ export struct DetailPlayShortVideoPage {
37 38
38 playVMChanged(name: string) { 39 playVMChanged(name: string) {
39 this.url = this.playVM.url 40 this.url = this.playVM.url
  41 + this.newsSourceName = this.playVM.newsSourceName
40 this.title = this.playVM.title 42 this.title = this.playVM.title
41 this.curContId = this.playVM.contentId 43 this.curContId = this.playVM.contentId
42 this.nextContId = this.playVM.nextContId 44 this.nextContId = this.playVM.nextContId
@@ -42,28 +42,32 @@ export struct OperationListView { @@ -42,28 +42,32 @@ export struct OperationListView {
42 } 42 }
43 43
44 build() { 44 build() {
  45 + // List({ space: 0, initialIndex: 0 }) {
  46 + // ForEach(this.operationList, (item: OperationItem, index: number) => {
  47 + // ListItem() {
  48 + // this.buildOperationItem(item, index)
  49 + // }
  50 + // }, (item: OperationItem, index: number) => JSON.stringify(item))
  51 + // }
  52 + // .width(48)
  53 + // .height(250)
  54 + // // .margin({ bottom: 100 })
  55 + // .backgroundColor(Color.Red)
  56 + // // .listDirection(Axis.Vertical) // 默认值：Axis.Vertical
  57 + // // .lanes(this.buildLanes()) // 行/列数，一列 // 默认值：1
  58 + // .cachedCount(2)
  59 + // .scrollBar(BarState.Off)
  60 + // .nestedScroll({
  61 + // scrollForward: NestedScrollMode.PARENT_FIRST,
  62 + // scrollBackward: NestedScrollMode.SELF_FIRST
  63 + // })
45 64
46 - List({ space: 0, initialIndex: 0 }) { 65 + Column() {
47 ForEach(this.operationList, (item: OperationItem, index: number) => { 66 ForEach(this.operationList, (item: OperationItem, index: number) => {
48 - ListItem() {  
49 this.buildOperationItem(item, index) 67 this.buildOperationItem(item, index)
50 - }  
51 }, (item: OperationItem, index: number) => JSON.stringify(item)) 68 }, (item: OperationItem, index: number) => JSON.stringify(item))
52 } 69 }
53 .width(48) 70 .width(48)
54 - // .margin({ bottom: 100 })  
55 - //.backgroundColor(Color.Red)  
56 - // .listDirection(Axis.Vertical) // 默认值：Axis.Vertical  
57 - // .lanes(this.buildLanes()) // 行/列数，一列 // 默认值：1  
58 - .cachedCount(2)  
59 - .scrollBar(BarState.Off)  
60 - .nestedScroll({  
61 - scrollForward: NestedScrollMode.PARENT_FIRST,  
62 - scrollBackward: NestedScrollMode.SELF_FIRST  
63 - })  
64 - // Stack({alignContent:Alignment.End}) {  
65 - // }  
66 - // .width('100%')  
67 } 71 }
68 72
69 /** 73 /**
@@ -80,8 +84,7 @@ export struct OperationListView { @@ -80,8 +84,7 @@ export struct OperationListView {
80 // .borderRadius(6) 84 // .borderRadius(6)
81 85
82 Text(item.text) 86 Text(item.text)
83 - .width('100%')  
84 - // .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown) 87 + .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
85 .fontWeight(FontWeight.Normal) 88 .fontWeight(FontWeight.Normal)
86 .textAlign(TextAlign.Center) 89 .textAlign(TextAlign.Center)
87 .fontSize(13) 90 .fontSize(13)
@@ -89,13 +92,13 @@ export struct OperationListView { @@ -89,13 +92,13 @@ export struct OperationListView {
89 .maxLines(1) 92 .maxLines(1)
90 .textOverflow({ overflow: TextOverflow.Ellipsis }) 93 .textOverflow({ overflow: TextOverflow.Ellipsis })
91 } 94 }
92 - .margin(10) 95 + .margin(5)
93 // .backgroundColor(Color.Black) 96 // .backgroundColor(Color.Black)
94 .alignItems(HorizontalAlign.Center) 97 .alignItems(HorizontalAlign.Center)
95 .hoverEffect(HoverEffect.Scale) 98 .hoverEffect(HoverEffect.Scale)
96 .onClick((event: ClickEvent) => { 99 .onClick((event: ClickEvent) => {
97 console.info(TAG, `buildOperationItem onClick event index: ${index}`); 100 console.info(TAG, `buildOperationItem onClick event index: ${index}`);
98 - ToastUtils.showToast('体验版本功能暂未开放', 1000); 101 + ToastUtils.showToast('体验版，本功能暂未开发', 1000);
99 }) 102 })
100 } 103 }
101 } 104 }
1 /** 1 /**
2 * 详情view&播放器view的容器布局组件 2 * 详情view&播放器view的容器布局组件
3 */ 3 */
  4 +@Entry
4 @Component 5 @Component
5 export struct PlayerDetailContainer { 6 export struct PlayerDetailContainer {
6 @BuilderParam playerView: () => void 7 @BuilderParam playerView: () => void
@@ -26,12 +27,14 @@ export struct PlayerDetailContainer { @@ -26,12 +27,14 @@ export struct PlayerDetailContainer {
26 .zIndex(1) 27 .zIndex(1)
27 } 28 }
28 .width('100%') 29 .width('100%')
29 - .aspectRatio(this.isFullScreen ? 0 : 16 / 9.0) 30 + // .aspectRatio(this.isFullScreen ? 0.1 : 16 / 9.0) // 若width值确定，当aspectRatio值越小，则height值越大
  31 + .height(this.isFullScreen ? '100%' : 200)
  32 + .margin({ top: this.isFullScreen ? 0 : 174 })
30 .alignRules({ 33 .alignRules({
31 - center: { anchor: '__container__', align: VerticalAlign.Center },  
32 - middle: { anchor: '__container__', align: HorizontalAlign.Center } 34 + top: { anchor: '__container__', align: VerticalAlign.Top },
  35 + // middle: { anchor: '__container__', align: HorizontalAlign.Center }
33 }) 36 })
34 - .id('txt_title') 37 + .id('stk_player_container')
35 38
36 if (!this.isFullScreen) { 39 if (!this.isFullScreen) {
37 Row() { 40 Row() {
@@ -39,7 +42,8 @@ export struct PlayerDetailContainer { @@ -39,7 +42,8 @@ export struct PlayerDetailContainer {
39 } 42 }
40 .width('100%') 43 .width('100%')
41 .alignRules({ 44 .alignRules({
42 - bottom: { anchor: '__container__', align: VerticalAlign.Bottom } 45 + bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  46 + // middle: { anchor: '__container__', align: HorizontalAlign.Center }
43 }) 47 })
44 .id('row_bottomView') 48 .id('row_bottomView')
45 } 49 }
@@ -9,6 +9,7 @@ import { OperationListView } from './OperationListView'; @@ -9,6 +9,7 @@ import { OperationListView } from './OperationListView';
9 @Component 9 @Component
10 export struct PlayerTitleComment { 10 export struct PlayerTitleComment {
11 private playerController?: WDPlayerController; 11 private playerController?: WDPlayerController;
  12 + @Consume newsSourceName?: string
12 @Consume title?: string 13 @Consume title?: string
13 @Consume newsSummary?: string; 14 @Consume newsSummary?: string;
14 @State @Watch('watchSpeed') playSpeed: number = 1; 15 @State @Watch('watchSpeed') playSpeed: number = 1;
@@ -49,30 +50,40 @@ export struct PlayerTitleComment { @@ -49,30 +50,40 @@ export struct PlayerTitleComment {
49 }) 50 })
50 } 51 }
51 .width('100%') 52 .width('100%')
52 - .margin({ bottom: 120 }) 53 + // .margin({ bottom: 120 })
53 .alignItems(HorizontalAlign.Center) 54 .alignItems(HorizontalAlign.Center)
54 55
55 Row() { 56 Row() {
56 Column() { 57 Column() {
57 - Text(this.title) 58 + if (this.newsSourceName) {
  59 + Text("@" + this.newsSourceName)
58 .fontColor(Color.White) 60 .fontColor(Color.White)
59 - .fontSize(14) 61 + .fontSize(15)
60 .maxLines(1) 62 .maxLines(1)
  63 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  64 + }
  65 + if (this.newsSummary) {
  66 + Text(this.newsSummary)
  67 + .fontColor(Color.White)
  68 + .fontSize(15)
  69 + .maxLines(3)
  70 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  71 + }
61 72
62 Text('查看详情 > ') 73 Text('查看详情 > ')
  74 + .margin({ top: 5 })
63 .fontColor(Color.White) 75 .fontColor(Color.White)
64 - .fontSize('14fp') 76 + .fontSize(12)
65 .maxLines(2) 77 .maxLines(2)
66 } 78 }
67 .layoutWeight(1) 79 .layoutWeight(1)
68 .alignItems(HorizontalAlign.Start) 80 .alignItems(HorizontalAlign.Start)
69 81
70 - // OperationListView()  
71 - // .width(48)  
72 - // .height(150)  
73 - // .zIndex(3) 82 + OperationListView()
  83 + .width(48)
74 } 84 }
75 .width('100%') 85 .width('100%')
  86 + .alignItems(VerticalAlign.Bottom)
76 87
77 Slider({ 88 Slider({
78 value: this.progressVal, 89 value: this.progressVal,
@@ -11,6 +11,7 @@ export class PlayViewModel { @@ -11,6 +11,7 @@ export class PlayViewModel {
11 contentId: string 11 contentId: string
12 relId: string 12 relId: string
13 relType: string 13 relType: string
  14 + newsSourceName?:string
14 title?: string 15 title?: string
15 url?: string 16 url?: string
16 nextContId?: string 17 nextContId?: string
@@ -54,6 +55,7 @@ export class PlayViewModel { @@ -54,6 +55,7 @@ export class PlayViewModel {
54 Logger.error(TAG, `getContentDetailData then body is empty`); 55 Logger.error(TAG, `getContentDetailData then body is empty`);
55 return 56 return
56 } 57 }
  58 + this.newsSourceName = resDTO.data[0].newsSourceName
57 this.title = resDTO.data[0].newsTitle 59 this.title = resDTO.data[0].newsTitle
58 this.url = resDTO.data[0].videoInfo[0].videoUrl 60 this.url = resDTO.data[0].videoInfo[0].videoUrl
59 this.canStart = true; 61 this.canStart = true;