• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 { AudioInfo, SearchResult, VideoDetailInfo } from '../appsampled/data/SearchResult';
17import SearchPlayMusicComponent from './SearchPlayMusicComponent';
18import SearchPlayVideoComponent from './SearchPlayVideoComponent';
19import Logger from '../utils/Logger';
20
21const TAG: string = '[SearchSynthesizeComponent]';
22
23@Component
24export default struct SearchSynthesizeComponent {
25  private scrollerHor: Scroller = new Scroller();
26  private scrollerVer: Scroller = new Scroller();
27  private currSearchResult?: SearchResult;
28  @State selectTopIndex: number = 0;
29
30  build() {
31    Column() {
32      Scroll(this.scrollerVer) {
33        Column() {
34          // 横向Label列表
35          Row() {
36            Scroll(this.scrollerHor) {
37              Row({ space: 8 }) {
38                // 全部
39                Column() {
40                  Text($r('app.string.All'))
41                    .height(20)
42                    .fontColor(this.selectTopIndex === 0 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
43                    .fontSize(16)
44                    .fontFamily($r('app.string.Font_family_medium'))
45                    .textAlign(TextAlign.Center)
46                    .padding({ left: 16, right: 16 })
47                }
48                .height(40)
49                .justifyContent(FlexAlign.Center)
50                .backgroundColor(this.selectTopIndex === 0 ? $r('app.color.COLOR_393939') : $r('app.color.COLOR_99393939'))
51                .borderRadius(4)
52                .onClick(e => {
53                  this.selectTopIndex = 0;
54                })
55                // 模拟数据 label列表
56                ForEach(this.currSearchResult?.labelList, (title: string, index: number) => {
57                  Column() {
58                    Text(title)
59                      .height(20)
60                      .fontColor(this.selectTopIndex === (index + 1) ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
61                      .fontSize(16)
62                      .fontFamily($r('app.string.Font_family_medium'))
63                      .textAlign(TextAlign.Center)
64                      .padding({ left: 16, right: 16 })
65                  }
66                  .height(40)
67                  .justifyContent(FlexAlign.Center)
68                  .backgroundColor(this.selectTopIndex === (index + 1) ? $r('app.color.COLOR_393939') : $r('app.color.COLOR_99393939'))
69                  .borderRadius(4)
70                  .onClick(e => {
71                    this.selectTopIndex = index + 1;
72                  })
73                })
74              }
75              .height('100%')
76              .justifyContent(FlexAlign.Start)
77            }
78            .scrollable(ScrollDirection.Horizontal)
79            .scrollBar(BarState.Off)
80            .width('100%')
81            .height('100%')
82          }
83          .width('100%')
84          .height(60)
85          .justifyContent(FlexAlign.Start)
86          .padding({ left: 14, right: 8 })
87
88          // 音乐列表
89          Column() {
90            // 音乐 Title
91            Row() {
92              Text($r('app.string.Music'))
93                .width(60)
94                .height(20)
95                .fontColor($r('app.color.COLOR_FFFFFF'))
96                .fontSize(18)
97                .fontFamily($r('app.string.Font_family_medium'))
98                .textAlign(TextAlign.Start)
99
100              Blank()
101
102              Image($r('app.media.app_icon'))
103                .width(22)
104                .height(30)
105                .objectFit(ImageFit.Contain)
106              Image($r('app.media.app_icon'))
107                .width(18)
108                .height(18)
109                .objectFit(ImageFit.Contain)
110                .margin({ left: 25, right: 14 })
111            }
112            .width('100%')
113            .height(40)
114            .margin({ top: 10 })
115
116            // 模拟数据 音乐列表
117            ForEach(this.currSearchResult?.audioInfoList, (audioInfo: AudioInfo) => {
118              SearchPlayMusicComponent({ audioInfo: audioInfo })
119            })
120          }
121          .width('100%')
122          .justifyContent(FlexAlign.Start)
123          .padding({ left: 14, right: 14 })
124
125          // 模拟数据 视频详细信息列表
126          Column() {
127
128            ForEach(this.currSearchResult?.videoDetailInfo, (videoDetailInfo: VideoDetailInfo) => {
129              Divider()
130                .vertical(false)
131                .height(10)
132                .width('100%')
133                .strokeWidth(8)
134                .color($r('app.color.COLOR_000000'))
135              Column() {
136                SearchPlayVideoComponent({ videoDetailInfo: videoDetailInfo })
137              }
138              .width('100%')
139              .padding({ left: 14, right: 14 })
140            })
141          }
142          .width('100%')
143          .justifyContent(FlexAlign.Start)
144        }
145        .width('100%')
146      }
147      .scrollable(ScrollDirection.Vertical)
148      .scrollBar(BarState.Off)
149      .width('100%')
150      .height('100%')
151      .align(Alignment.Top)
152    }
153    .width('100%')
154    .height('100%')
155    .backgroundColor($r('app.color.COLOR_151724'))
156  }
157}