• 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';
17import { LocationControl } from '../authorizedControl/LocationControl'
18import { promptActionFn } from '../model/DataFactory';
19
20@Observed
21  //热搜榜数据构造类
22class hotSearchItem {
23  public id: string; //唯一ID
24  public des: string | Resource; //热搜描述
25  public image: Resource | undefined; //后缀图标
26
27  constructor(id: string, des: string | Resource, image: Resource | undefined) {
28    this.id = id;
29    this.des = des;
30    this.image = image;
31  }
32}
33
34@Component
35export struct TrendsDetailView {
36  private scroller: Scroller = new Scroller()
37  //微博热搜榜数据数组
38  @State hotSearchGroup: hotSearchItem[] = [
39    new hotSearchItem('hotfirstitem', $r('app.string.hot_first_item'), $r('app.media.label_hot')),
40    new hotSearchItem('hotseconditem', $r('app.string.hot_second_item'), undefined),
41    new hotSearchItem('hotthirditem', $r('app.string.hot_third_item'), undefined),
42    new hotSearchItem('hotfourthitem', $r('app.string.hot_fourth_item'), $r('app.media.label_hot')),
43    new hotSearchItem('hotfifthitem', $r('app.string.hot_fifth_item'), $r('app.media.label_hot')),
44    new hotSearchItem('hotsixthitem', $r('app.string.hot_sixth_item'), undefined),
45    new hotSearchItem('hotseventhitem', $r('app.string.hot_seventh_item'), $r('app.media.label_new')),
46    new hotSearchItem('hoteighthitem', $r('app.string.hot_eighth_item'), $r('app.media.label_new')),
47    new hotSearchItem('honinthitem', $r('app.string.hot_ninth_item'), $r('app.media.label_hot')),
48    new hotSearchItem('hottenthitem', $r('app.string.hot_tenth_item'), $r('app.media.label_new')),];
49  @StorageLink('location') location: string = '';
50
51  build() {
52    Column() {
53      Scroll(this.scroller) {
54        Column() {
55          //同城榜、超话社区、尊享会员、榜单
56          Grid() {
57            GridItem() {
58              gird({ image: $r('app.media.discover_vip'), message: $r('app.string.honorable_vip') })
59            }
60            .backgroundColor($r('app.color.font_color_FFFFFF'))
61
62            GridItem() {
63              gird({ image: $r('app.media.discover_bangdan'), message: $r('app.string.list') })
64            }
65            .backgroundColor($r('app.color.font_color_FFFFFF'))
66
67            GridItem() {
68              Column() {
69                LocationControl();
70                Text($r('app.string.same_city'))
71                  .margin({ top: $r('app.integer.layout_size_6') })
72                  .fontFamily('HarmonyHeiTi')
73                  .fontSize($r('app.integer.layout_size_12'))
74                  .fontColor($r('app.color.font_color_182431'))
75                  .fontWeight(400)
76                  .lineHeight($r('app.integer.layout_size_22'))
77              }
78            }
79            .backgroundColor($r('app.color.font_color_FFFFFF'))
80
81            GridItem() {
82              gird({ image: $r('app.media.discover_shequ'), message: $r('app.string.super_talk') })
83            }
84            .backgroundColor($r('app.color.font_color_FFFFFF'))
85          }
86          .width('90%')
87          .borderRadius($r('app.integer.layout_size_24'))
88          .rowsTemplate('1fr')
89          .columnsTemplate('1fr 1fr 1fr 1fr')
90          .height($r('app.integer.layout_size_95'))
91
92          //热搜榜标题
93          Row() {
94            RelativeContainer() {
95              Text($r('app.string.hot_search'))
96                .opacity($r('app.float.opacity'))
97                .fontFamily('HarmonyHeiTi-Medium')
98                .fontSize($r('app.integer.layout_size_14'))
99                .fontColor($r('app.color.font_color_182431'))
100                .fontWeight(500)
101                .lineHeight($r('app.integer.layout_size_19'))
102                .margin({ left: $r('app.integer.layout_size_22') })
103                .alignRules({
104                  left: { anchor: '__container__', align: HorizontalAlign.Start },
105                  middle: { anchor: '__container__', align: HorizontalAlign.Center }
106                })
107                .id('text1')
108
109              Text($r('app.string.all'))
110                .alignRules({
111                  right: { anchor: '__container__', align: HorizontalAlign.End },
112                })
113                .id('text2')
114                .lineHeight($r('app.integer.layout_size_19'))
115                .margin({ right: $r('app.integer.layout_size_12') })
116                .fontFamily('HarmonyHeiTi-Medium')
117                .fontSize($r('app.integer.layout_size_14'))
118                .fontColor('#007DFF')
119                .onClick(() => {
120                  router.pushUrl({
121                    url: 'pages/SameCityListPage',
122                    params: {
123                      currentIndex: 0
124                    }
125                  })
126                })
127            }
128            .width('100%')
129          }
130          .width('90%')
131          .margin({
132            top: $r('app.integer.layout_size_18'),
133          })
134          .height($r('app.integer.layout_size_30'))
135
136
137          //热搜榜
138          Column() {
139            List() {
140              //微博热搜榜的条目
141              ForEach(this.hotSearchGroup, (item: hotSearchItem) => {
142                ListItem() {
143                  hotSearchView({ text: item.des, image: item.image })
144                }
145                .margin({ left: $r('app.integer.layout_size_10'),right:$r('app.integer.layout_size_5')})
146                .height($r('app.integer.layout_size_48'))
147              }, (item: hotSearchItem) => item.id.toString())
148            }
149            .margin({
150              top: $r('app.integer.layout_size_4'),
151              bottom: $r('app.integer.layout_size_4'),
152            })
153            .width('100%')
154            .lanes(2)
155          }
156          .width('90%')
157          .borderRadius($r('app.integer.layout_size_24'))
158          .backgroundColor($r('app.color.font_color_FFFFFF'))
159
160
161          //微博VIP的广告
162          Row() {
163            Image($r('app.media.tp'))
164              .objectFit(ImageFit.Fill)
165          }
166          .justifyContent(FlexAlign.Center)
167          .borderRadius($r('app.integer.layout_size_24'))
168          .width('90%')
169          .height($r('app.integer.layout_size_147'))
170          .margin({ top: $r('app.integer.layout_size_15') })
171          .backgroundColor($r('app.color.font_color_FFFFFF'))
172
173          Row() {
174            Text($r('app.string.anonymous_story'))
175              .opacity($r('app.float.opacity'))
176              .fontFamily('HarmonyHeiTi-Medium')
177              .fontSize($r('app.integer.layout_size_14'))
178              .fontColor($r('app.color.font_color_182431'))
179              .fontWeight(500)
180              .lineHeight($r('app.integer.layout_size_19'))
181              .margin({ left: $r('app.integer.layout_size_22') })
182          }
183          .borderRadius($r('app.integer.layout_size_24'))
184          .width('90%')
185          .margin({ top: $r('app.integer.layout_size_20'), bottom: $r('app.integer.layout_size_10') })
186
187          Row() {
188            //匿名故事板块
189            List() {
190              ListItem() {
191                Row() {
192                  Image($r('app.media.photo10'))
193                    .width($r('app.integer.layout_size_48'))
194                    .height($r('app.integer.layout_size_48'))
195                    .borderRadius($r('app.integer.layout_size_10'))
196                  Text($r('app.string.story_des'))
197                    .fontFamily('HarmonyHeiTi-Medium')
198                    .fontSize($r('app.integer.layout_size_16'))
199                    .fontColor($r('app.color.font_color_182431'))
200                    .fontWeight(500)
201                    .lineHeight($r('app.integer.layout_size_22'))
202                    .margin({ left: $r('app.integer.layout_size_16') })
203                }
204              }
205              .height($r('app.integer.layout_size_64'))
206
207              ListItem() {
208                Row() {
209                  Image($r('app.media.photo110'))
210                    .width($r('app.integer.layout_size_48'))
211                    .height($r('app.integer.layout_size_48'))
212                    .borderRadius($r('app.integer.layout_size_10'))
213                  Text($r('app.string.story_dess'))
214                    .fontFamily('HarmonyHeiTi-Medium')
215                    .fontSize($r('app.integer.layout_size_16'))
216                    .fontColor($r('app.color.font_color_182431'))
217                    .fontWeight(500)
218                    .lineHeight($r('app.integer.layout_size_22'))
219                    .margin({ left: $r('app.integer.layout_size_16') })
220                }
221              }
222              .height($r('app.integer.layout_size_64'))
223            }
224            .divider({
225              strokeWidth: $r('app.float.stroke_width'),
226              color: $r('app.color.font_color_00000'),
227              startMargin: $r('app.integer.layout_size_64'),
228              endMargin: $r('app.integer.layout_size_24')
229            })
230            .margin({
231              top: $r('app.integer.layout_size_4'),
232              bottom: $r('app.integer.layout_size_4'),
233              left: $r('app.integer.layout_size_12'),
234              right: $r('app.integer.layout_size_12')
235            })
236          }
237          .margin({ bottom: $r('app.integer.layout_size_50') })
238          .width('90%')
239          .borderRadius($r('app.integer.layout_size_24'))
240          .backgroundColor($r('app.color.font_color_FFFFFF'))
241
242        }
243        .width('100%')
244        .backgroundColor($r('app.color.tabbar_background'))
245      }
246      .scrollable(ScrollDirection.Vertical)
247    }
248  }
249}
250
251@Component
252  //同城榜、超话社区、尊享会员、榜单
253export struct gird {
254  @StorageLink('location') Location: string = '';
255  image: Resource = $r('app.media.photo93');
256  message: Resource = $r('app.string.same_city')
257
258  build() {
259    Column() {
260      Button({ type: ButtonType.Circle }) {
261        Image(this.image)
262          .width($r('app.integer.layout_size_46'))
263          .height($r('app.integer.layout_size_46'))
264          .borderRadius($r('app.integer.layout_size_26'))
265      }
266      .margin({ bottom: $r('app.integer.layout_size_5') })
267      .onClick(() => {
268        promptActionFn($r('app.string.feature_development'));
269      })
270
271      Text(this.message)
272        .fontFamily('HarmonyHeiTi')
273        .fontSize($r('app.integer.layout_size_12'))
274        .fontColor($r('app.color.font_color_182431'))
275        .fontWeight(400)
276        .lineHeight($r('app.integer.layout_size_22'))
277    }
278  }
279}
280
281
282@Component
283  //热搜榜条目的布局
284struct hotSearchView {
285  private text: string | Resource = '';
286  private image: Resource | string = '';
287
288  build() {
289    Row() {
290      Text(this.text)
291        .fontFamily('HarmonyHeiTi')
292        .fontSize($r('app.integer.layout_size_14'))
293        .fontColor($r('app.color.font_color_182431'))
294        .fontWeight(400)
295        .maxLines(1)
296        .textOverflow({ overflow: TextOverflow.Ellipsis })
297        .width($r('app.integer.layout_size_120'))
298        .margin({ left: $r('app.integer.layout_size_12'), right: $r('app.integer.layout_size_12') })
299
300      Image(this.image)
301        .objectFit(ImageFit.Contain)
302        .width($r('app.integer.layout_size_18'))
303        .height($r('app.integer.layout_size_16'))
304        .margin({ right: $r('app.integer.layout_size_12') })
305    }
306    .width('100%')
307    .justifyContent(FlexAlign.SpaceBetween)
308  }
309}