1/* 2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import router from '@ohos.router'; 17import Logger from '../utils/Logger'; 18import { SearchResult, VideoInfo } from '../appsampled/data/SearchResult'; 19 20const TAG: string = '[SearchVideoComponent]'; 21 22@Component 23export default struct SearchVideoComponent { 24 private scrollerHor: Scroller = new Scroller(); 25 private scrollerVer: Scroller = new Scroller(); 26 private currSearchResult?: SearchResult; 27 @State selectTopIndex: number = 0; 28 29 build() { 30 Column() { 31 Scroll(this.scrollerVer) { 32 Column() { 33 // 横向Label列表 34 Row() { 35 Scroll(this.scrollerHor) { 36 Row({ space: 8 }) { 37 // 全部 38 Column() { 39 Text($r('app.string.All')) 40 .height(20) 41 .fontColor(this.selectTopIndex === 0 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF')) 42 .fontSize(16) 43 .fontFamily($r('app.string.Font_family_medium')) 44 .textAlign(TextAlign.Center) 45 .padding({ left: 16, right: 16 }) 46 } 47 .height(40) 48 .justifyContent(FlexAlign.Center) 49 .backgroundColor(this.selectTopIndex === 0 ? $r('app.color.COLOR_393939') : $r('app.color.COLOR_99393939')) 50 .borderRadius(4) 51 .onClick(e => { 52 this.selectTopIndex = 0; 53 }) 54 // 模拟数据 label列表 55 ForEach(this.currSearchResult?.labelList, (title: string, index: number) => { 56 Column() { 57 Text(title) 58 .height(20) 59 .fontColor(this.selectTopIndex === (index + 1) ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF')) 60 .fontSize(16) 61 .fontFamily($r('app.string.Font_family_medium')) 62 .textAlign(TextAlign.Center) 63 .padding({ left: 16, right: 16 }) 64 } 65 .height(40) 66 .justifyContent(FlexAlign.Center) 67 .backgroundColor(this.selectTopIndex === (index + 1) ? $r('app.color.COLOR_393939') : $r('app.color.COLOR_99393939')) 68 .borderRadius(4) 69 .onClick(e => { 70 this.selectTopIndex = index + 1; 71 }) 72 }) 73 } 74 .height('100%') 75 .justifyContent(FlexAlign.Start) 76 } 77 .scrollable(ScrollDirection.Horizontal) 78 .scrollBar(BarState.Off) 79 .width('100%') 80 .height('100%') 81 } 82 .width('100%') 83 .height(60) 84 .justifyContent(FlexAlign.Start) 85 .padding({ left: 14, right: 8 }) 86 87 // 视频列表 88 GridRow({columns: 2}) { 89 // 模拟数据 音乐列表 90 ForEach(this.currSearchResult?.videoInfo, (videoInfo: VideoInfo) => { 91 GridCol() { 92 this.VideoItem(videoInfo) 93 } 94 .width('100%') 95 .margin({right: 1,bottom:1}) 96 }) 97 } 98 .width('100%') 99 100 } 101 .width('100%') 102 } 103 .scrollable(ScrollDirection.Vertical) 104 .scrollBar(BarState.Off) 105 .width('100%') 106 .height('100%') 107 .align(Alignment.Top) 108 } 109 .width('100%') 110 .height('100%') 111 .backgroundColor($r('app.color.COLOR_151724')) 112 } 113 114 @Builder 115 VideoItem(videoInfo: VideoInfo) { 116 Stack() { 117 Image($r('app.media.app_icon')) 118 .width('100%') 119 .height('100%') 120 .objectFit(ImageFit.Fill) 121 .borderRadius(4) 122 Column() { 123 Text(videoInfo.videoTitle) 124 .fontColor($r('app.color.COLOR_FFFFFF')) 125 .fontSize(18) 126 .fontFamily($r('app.string.Font_family_regular')) 127 .textAlign(TextAlign.Start) 128 .textOverflow({ overflow: TextOverflow.Ellipsis }) 129 .padding({ left: 6, right: 6 }) 130 Row({space: 5}) { 131 Image($r('app.media.app_icon')) 132 .width(24) 133 .height(24) 134 .objectFit(ImageFit.Contain) 135 .borderRadius(12) 136 Text(videoInfo.videoAuthorName) 137 .fontColor($r('app.color.COLOR_FFFFFF')) 138 .fontSize(18) 139 .fontFamily($r('app.string.Font_family_regular')) 140 .textAlign(TextAlign.Start) 141 .textOverflow({ overflow: TextOverflow.Ellipsis }) 142 Blank() 143 Image($r('app.media.app_icon')) 144 .width(24) 145 .height(24) 146 .objectFit(ImageFit.Contain) 147 .borderRadius(12) 148 Text(videoInfo.videoLikeNum) 149 .fontColor($r('app.color.COLOR_FFFFFF')) 150 .fontSize(18) 151 .fontFamily($r('app.string.Font_family_regular')) 152 .textAlign(TextAlign.Start) 153 .textOverflow({ overflow: TextOverflow.Ellipsis }) 154 } 155 .width('100%') 156 .height(30) 157 .padding({ left: 6, right: 6 }) 158 } 159 .width('100%') 160 .height(56) 161 .alignItems(HorizontalAlign.Start) 162 } 163 .width('100%') 164 .height(280) 165 .backgroundColor(Color.Pink) 166 .alignContent(Alignment.Bottom) 167 } 168}