• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-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 { NAV_DATA } from '../../mock/ProductsData';
17import { TitleBarComponent } from '../../components/home/TitleBar';
18import { HomePageContent } from '../../components/home/HomePageContent';
19import { NavDataModel } from '../../model/GoodsModel';
20import { Url } from '../../main/NavigationHomePage';
21
22@Component
23export struct MainPage {
24  @State navTabsIndex: number = 0;
25  private url: string = '';
26  private navController: TabsController = new TabsController();
27  @StorageProp('curBp') curBp: string = 'sm';
28
29  build() {
30    Column() {
31      TitleBarComponent()
32        .backgroundImageSize({
33          width: '100%',
34          height: '100%'
35        })
36        .backgroundImage($r('app.media.title_bar'), ImageRepeat.NoRepeat)
37      Scroll() {
38        Column() {
39          Row() {
40            ForEach(NAV_DATA, (item: NavDataModel) => {
41              Row() {
42                Text(item.navData)
43                  .fontSize(16)
44                  .fontColor($r('app.color.white'))
45                  .opacity(this.navTabsIndex == item.id ? 1 : 0.8)
46                  .fontWeight(this.navTabsIndex == item.id ? 500 : 400)
47              }
48              .align(Alignment.Center)
49              .onClick(() => {
50                this.navTabsIndex = item.id;
51                this.navController.changeIndex(item.id);
52              })
53            }, (item: NavDataModel) => item.id.toString())
54
55            Row() {
56              Divider()
57                .vertical(true)
58                .width(1)
59                .height(18)
60                .color($r('app.color.divider_white'))
61              Image($r('app.media.nav_classification'))
62                .width(16)
63                .height(16)
64                .objectFit(ImageFit.Contain)
65                .margin({
66                  left: 4
67                })
68              Text($r('app.string.classification'))
69                .fontSize(16)
70                .opacity(0.8)
71                .fontColor($r('app.color.white'))
72                .margin({
73                  left: 2
74                })
75            }
76          }
77          .width('100%')
78          .justifyContent(FlexAlign.SpaceBetween)
79          .padding(12)
80
81          HomePageContent(new Url(this.url));
82        }
83      }
84      .width('100%')
85      .height('100%')
86      .backgroundImageSize({
87        width: '100%',
88        height: 200
89      })
90      .backgroundImage($r('app.media.home_background'), ImageRepeat.NoRepeat)
91      .scrollBar(BarState.Off)
92      .flexGrow(1)
93      .flexShrink(1)
94      .align(Alignment.Top)
95
96      Divider()
97        .color($r('app.color.divider2'))
98        .height(0.5)
99    }
100    .width('100%')
101    .height('100%')
102  }
103}