• 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 { TAB_TITLE_DATA } from '../mock/ProductsData';
17import { MainPage } from '../components/home/MainPage';
18import { NewProduct } from '../components/home/NewProduct';
19import { ShopCart } from '../components/home/ShopCart';
20import { User } from '../components/user/User';
21import url from '@ohos.url';
22
23AppStorage.link<boolean>('isUpdateDialogOpen') || AppStorage.setOrCreate<boolean>('isUpdateDialogOpen', false);
24
25export class Url {
26  url: string;
27
28  constructor(url: string) {
29    this.url = url;
30  }
31}
32
33@Entry
34@Component
35export struct NavigationHomePage {
36  @State tabsIndex: number = AppStorage.get('nowIndex') || 0;
37  @StorageProp('curBp') curBp: string = 'sm';
38  private url: string = '';
39  private controller: TabsController = new TabsController();
40
41  @Builder
42  TabBarBuilder(index: number) {
43    Column() {
44      Image(this.getTabBarImage(index))
45        .id('homeTab' + index)
46        .width(24)
47        .height(24)
48        .objectFit(ImageFit.Contain)
49      Text(TAB_TITLE_DATA[index].title)
50        .fontSize(10)
51        .fontWeight(500)
52        .margin({
53          top: 4
54        })
55        .opacity(this.tabsIndex === index ? 1 : 0.6)
56        .fontWeight(this.tabsIndex === index ? 500 : 400)
57        .fontColor(this.tabsIndex === index ? $r('app.color.pink') : Color.Black)
58    }
59    .justifyContent(FlexAlign.Center)
60    .width('100%')
61    .height('100%')
62    .onClick(() => {
63      this.controller.changeIndex(index);
64    })
65  }
66
67  build() {
68    Column() {
69      Tabs({
70        barPosition: this.curBp === 'sm' ? BarPosition.End : BarPosition.Start,
71        index: this.tabsIndex,
72        controller: this.controller
73      }) {
74        TabContent() {
75          NavDestination() {
76            MainPage(new Url(this.url));
77          }.title('MainPage')
78          .hideTitleBar(true)
79        }.tabBar(
80          this.TabBarBuilder(0)
81        )
82
83        TabContent() {
84          NavDestination() {
85            NewProduct(new Url(this.url));
86          }.title('NewProductPage')
87          .hideTitleBar(true)
88        }.tabBar(
89          this.TabBarBuilder(1)
90        )
91
92        TabContent() {
93          NavDestination() {
94            ShopCart(new Url(this.url));
95          }.title('ShopCartPage')
96          .hideTitleBar(true)
97
98        }.tabBar(
99          this.TabBarBuilder(2)
100        )
101
102        TabContent() {
103          NavDestination() {
104            User();
105          }.title('UserPage')
106          .hideTitleBar(true)
107        }.tabBar(
108          this.TabBarBuilder(3)
109        )
110      }
111      .scrollable(false)
112      .vertical(this.curBp === 'sm' ? false : true)
113      .barMode(BarMode.Fixed)
114      .barWidth(this.curBp === 'sm' ? '100%' : 56)
115      .barHeight(this.curBp === 'sm' ? 56 : '100%')
116      .onChange((index: number) => {
117        this.tabsIndex = index;
118      })
119    }
120    .backgroundColor($r('app.color.divider'))
121  }
122
123  getTabBarImage(index: number): Resource {
124    if (this.tabsIndex === index) {
125      return TAB_TITLE_DATA[index].selectedUri;
126    }
127    return TAB_TITLE_DATA[index].uri;
128  }
129}