• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Huawei Device 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';
17
18const TAB_INDEX_0: number = 0;
19const TAB_INDEX_1: number = 1;
20
21class hotItem {
22  public id: string;
23  public number: string | Resource;
24  public des: string | Resource;
25
26  constructor(id: string, number: string | Resource, des: string | Resource) {
27    this.id = id;
28    this.number = number;
29    this.des = des;
30  }
31}
32
33class info {
34  currentIndex: number = 1;
35}
36
37@Component
38export struct SameCityListView {
39  @State message: Resource = $r('app.string.hot_search_list');
40  @State currentTabIndex: number = (router.getParams() as info).currentIndex;
41  private controller: TabsController = new TabsController();
42
43  @Builder
44  TabBuilder(index: number, name: string | Resource) {
45    Column() {
46
47      Text(name)
48        .fontFamily('HarmonyHeiTi-Medium')
49        .fontSize($r('app.integer.layout_size_16'))
50        .fontColor(this.currentTabIndex === index ? $r('app.color.font_color_007DFF') : $r('app.color.font_color_182431'))
51        .lineHeight($r('app.integer.layout_size_22'))
52        .fontWeight(this.currentTabIndex === index ? 500 : 400)
53        .margin({ bottom: $r('app.integer.layout_size_7') })
54        .opacity(this.currentTabIndex === index ? $r('app.integer.layout_size_1') : $r('app.float.opacity'))
55      Divider()
56        .strokeWidth(2)
57        .width($r('app.integer.layout_size_48'))
58        .borderRadius($r('app.integer.layout_size_1'))
59        .color($r('app.color.font_color_007DFF'))
60        .opacity(this.currentTabIndex === index ? $r('app.integer.layout_size_1') : $r('app.integer.layout_size_0'))
61        .margin({ bottom: $r('app.integer.layout_size_8') })
62    }
63  }
64
65  build() {
66    Column() {
67      Row() {
68        Image($r('app.media.ic_public_back'))
69          .width($r('app.integer.layout_size_24'))
70          .height($r('app.integer.layout_size_24'))
71          .margin({ right: $r('app.integer.layout_size_24') })
72          .onClick(() => {
73            router.back()
74          })
75          .id('locationbackBtn')
76        Text($r('app.string.hot_search_list'))
77          .fontSize($r('app.integer.layout_size_20'))
78          .fontWeight(FontWeight.Bold)
79          .margin({ top: $r('app.integer.layout_size_15'), bottom: $r('app.integer.layout_size_10') })
80      }
81      .margin({ top: $r('app.integer.layout_size_10') })
82      .width('90%')
83
84      Row() {
85        Tabs({ barPosition: BarPosition.Start, controller: this.controller, index: this.currentTabIndex }) {
86          TabContent() {
87            HotSearchDetail();
88          }
89          .tabBar(this.TabBuilder(TAB_INDEX_0,
90            $r('app.string.hot_search_list')))
91
92          TabContent() {
93            SameCityDetail();
94          }
95          .tabBar(this.TabBuilder(TAB_INDEX_1,
96            $r('app.string.same_city_list')))
97        }
98        .onChange((index: number) => {
99          this.currentTabIndex = index;
100          if (this.currentTabIndex === TAB_INDEX_0) {
101            this.message = $r('app.string.hot_search_list');
102          } else if (this.currentTabIndex === TAB_INDEX_1) {
103            this.message = $r('app.string.same_city_list');
104          }
105        })
106        .barWidth($r('app.integer.layout_size_200'))
107      }
108      .justifyContent(FlexAlign.Center)
109    }
110    .backgroundColor($r('app.color.tabbar_background'))
111    .width('100%')
112    .height('100%')
113  }
114}
115
116@Component
117export struct SameCityDetail {
118  //微博热搜榜数据
119  @State sameCityGroup: hotItem[] = [
120    new hotItem('first', $r('app.string.number_one'), $r('app.string.hot_item_one')),
121    new hotItem('second', $r('app.string.number_two'), $r('app.string.hot_item_two')),
122    new hotItem('third', $r('app.string.number_three'), $r('app.string.hot_item_three')),
123    new hotItem('fourth', $r('app.string.number_four'), $r('app.string.hot_item_four')),
124    new hotItem('fifth', $r('app.string.number_five'), $r('app.string.hot_item_five')),
125    new hotItem('sixth', $r('app.string.number_six'), $r('app.string.hot_item_six')),
126    new hotItem('seventh', $r('app.string.number_seven'), $r('app.string.hot_item_seven')),
127    new hotItem('eighth', $r('app.string.number_eight'), $r('app.string.hot_item_eight')),
128    new hotItem('ninth', $r('app.string.number_nine'), $r('app.string.hot_item_nine')),
129    new hotItem('tenth', $r('app.string.number_ten'), $r('app.string.hot_item_ten'))
130  ]
131  @StorageLink('location') displayLocation: string = '';
132
133  build() {
134    Column() {
135
136      Stack() {
137        Row() {
138          Text($r('app.string.current_hot_point'))
139            .fontSize($r('app.integer.layout_size_14'))
140            .fontColor($r('app.color.font_color_182431'))
141            .fontFamily('HarmonyHeiTi-Medium')
142            .lineHeight($r('app.integer.layout_size_19'))
143            .fontWeight(500)
144            .margin({ left: $r('app.integer.layout_size_10') })
145            .opacity($r('app.float.opacity'))
146        }
147        .height($r('app.integer.layout_size_48'))
148        .width('90%')
149        .justifyContent(FlexAlign.Start)
150
151        Row() {
152          Text($r('app.string.current_city'))
153            .fontSize($r('app.integer.layout_size_10'))
154            .height($r('app.integer.layout_size_14'))
155          Text(`${this.displayLocation}`)
156            .fontSize($r('app.integer.layout_size_10'))
157            .height($r('app.integer.layout_size_14'))
158            .id('locationDisplay')
159        }
160        .justifyContent(FlexAlign.End)
161        .width('85%')
162      }
163
164
165      Row() {
166        List() {
167          //创建微博热搜榜
168          ForEach(this.sameCityGroup, (item: hotItem) => {
169            ListItem() {
170              settingHotItem({ number: item.number, des: item.des })
171            }
172            .margin({ bottom: $r('app.integer.layout_size_5'), top: $r('app.integer.layout_size_5') })
173            .width('100%')
174          }, (item: hotItem) => item.id.toString())
175        }
176        .margin({ bottom: $r('app.integer.layout_size_4'), top: $r('app.integer.layout_size_4') })
177        .borderRadius($r('app.integer.layout_size_24'))
178        .divider({
179          strokeWidth: $r('app.float.stroke_width_2'),
180          color: $r('app.color.tabbar_background')
181        })
182        .backgroundColor($r('app.color.font_color_FFFFFF'))
183      }
184      .width('90%')
185
186    }
187    .backgroundColor($r('app.color.tabbar_background'))
188    .width('100%')
189    .height('100%')
190  }
191}
192
193@Component
194export struct HotSearchDetail {
195  //微博热搜榜数据
196  @State sameCityGroup: hotItem[] = [
197    new hotItem('first', $r('app.string.number_one'), $r('app.string.hot_item_ones')),
198    new hotItem('second', $r('app.string.number_two'), $r('app.string.hot_item_two')),
199    new hotItem('third', $r('app.string.number_three'), $r('app.string.hot_item_three')),
200    new hotItem('fourth', $r('app.string.number_four'), $r('app.string.hot_item_four')),
201    new hotItem('fifth', $r('app.string.number_five'), $r('app.string.hot_item_five')),
202    new hotItem('sixth', $r('app.string.number_six'), $r('app.string.hot_item_six')),
203    new hotItem('seventh', $r('app.string.number_seven'), $r('app.string.hot_item_seven')),
204    new hotItem('eighth', $r('app.string.number_eight'), $r('app.string.hot_item_eight')),
205    new hotItem('ninth', $r('app.string.number_nine'), $r('app.string.hot_item_nine')),
206    new hotItem('tenth', $r('app.string.number_ten'), $r('app.string.hot_item_ten'))
207  ]
208
209  build() {
210    Column() {
211      Row() {
212        Text($r('app.string.current_hot_point'))
213          .fontSize($r('app.integer.layout_size_14'))
214          .fontColor($r('app.color.font_color_182431'))
215          .fontFamily('HarmonyHeiTi-Medium')
216          .lineHeight($r('app.integer.layout_size_19'))
217          .fontWeight(500)
218          .margin({
219            left: $r('app.integer.layout_size_10'),
220            top: $r('app.integer.layout_size_10'),
221            bottom: $r('app.integer.layout_size_10')
222          })
223          .opacity($r('app.float.opacity'))
224      }
225      .height($r('app.integer.layout_size_48'))
226      .width('90%')
227      .justifyContent(FlexAlign.Start)
228
229      Row() {
230        List() {
231          //创建微博热搜榜
232          ForEach(this.sameCityGroup, (item: hotItem) => {
233            ListItem() {
234              settingHotItem({ number: item.number, des: item.des })
235            }
236            .margin({ bottom: $r('app.integer.layout_size_5'), top: $r('app.integer.layout_size_5') })
237            .width('100%')
238          }, (item: hotItem) => item.id.toString())
239        }
240        .margin({ bottom: $r('app.integer.layout_size_4'), top: $r('app.integer.layout_size_4') })
241        .borderRadius($r('app.integer.layout_size_24'))
242        .divider({
243          strokeWidth: $r('app.float.stroke_width_2'),
244          color: $r('app.color.tabbar_background')
245        })
246        .backgroundColor($r('app.color.font_color_FFFFFF'))
247      }
248      .width('90%')
249
250    }
251    .backgroundColor($r('app.color.tabbar_background'))
252    .width('100%')
253    .height('100%')
254  }
255}
256
257@Component
258struct settingHotItem {
259  private des: string | Resource = ''; // 热搜榜编号
260  private number: string | Resource = ''; //热搜榜描述
261
262  build() {
263    Row() {
264      Column() {
265        Text(this.number)
266          .fontSize($r('app.integer.layout_size_16'))
267          .fontWeight(FontWeight.Medium)
268          .fontColor('#CD5555')
269          .fontStyle(FontStyle.Italic)
270          .margin({ left: $r('app.integer.layout_size_20') })
271      }
272
273      .margin({
274        left: $r('app.integer.layout_size_10'),
275        top: $r('app.integer.layout_size_10'),
276        bottom: $r('app.integer.layout_size_10'),
277        right: $r('app.integer.layout_size_10')
278      })
279
280      Column() {
281        Text(this.des)
282          .fontFamily('HarmonyHeiTi-Medium')
283          .fontColor($r('app.color.font_color_182431'))
284          .fontWeight(500)
285          .fontSize($r('app.integer.layout_size_16'))
286          .maxLines(1)
287          .textOverflow({ overflow: TextOverflow.Ellipsis })
288          .width('80%')
289      }
290
291    }
292    .height($r('app.integer.layout_size_48'))
293    .width('100%')
294    .height($r('app.integer.layout_size_46'))
295  }
296}