• 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 { GoodsList } from '../good/GoodsList';
17import { NEW_PRODUCT_TITLE_BAR_DATA, SWIPER_DATA } from '../../mock/ProductsData';
18import { NewProductTitleBarModel, SwiperModel } from '../../model/GoodsModel';
19import { Url } from '../../main/NavigationHomePage';
20
21@Component
22export struct NewProduct {
23  @State tabsIndex: number = 0;
24  @StorageProp('curBp') curBp: string = 'md';
25  private url: string = '';
26  private controller: TabsController = new TabsController();
27
28  build() {
29    Column() {
30      Scroll() {
31        Column() {
32          Swiper() {
33            ForEach(SWIPER_DATA, (item: SwiperModel) => {
34              Column() {
35                Image(item.img)
36                  .objectFit(ImageFit.Cover)
37                  .width('100%')
38                  .borderRadius({
39                    bottomLeft: 12,
40                    bottomRight: 12,
41                    topLeft: 0,
42                    topRight: 0
43                  })
44              }
45            }, (item: SwiperModel) => item.id.toString())
46          }
47          .width('100%')
48          .height(186)
49          .autoPlay(true)
50          .itemSpace(10)
51          .displayCount(this.curBp === 'sm' ? 1 : this.curBp === 'md' ? 2 : 3)
52          // 这里的导航点需要位于swiper的右下角，此处使用right:24
53          .indicator(
54            Indicator
55              .dot()
56              .selectedItemWidth(10)
57              .right(24)
58              .color($r('app.color.point_selected'))
59              .selectedColor($r('app.color.point'))
60          )
61
62          Row() {
63            ForEach(NEW_PRODUCT_TITLE_BAR_DATA, (item: NewProductTitleBarModel) => {
64              Column() {
65                Text(item.title)
66                  .fontSize(16)
67                  .fontColor($r('app.color.blank'))
68                  .opacity(this.tabsIndex == item.id ? 1 : 0.6)
69                  .fontWeight(this.tabsIndex == item.id ? 500 : 400)
70              }
71              .justifyContent(FlexAlign.Center)
72              .align(Alignment.Center)
73              .onClick(() => {
74                this.tabsIndex = item.id;
75                this.controller.changeIndex(item.id);
76              })
77            }, (item: NewProductTitleBarModel) => item.id.toString())
78
79            Row() {
80              Image($r('app.media.line_navclass'))
81                .width(2)
82                .height(16)
83                .objectFit(ImageFit.Contain)
84              Image($r('app.media.new_navclass'))
85                .width(16)
86                .height(16)
87                .objectFit(ImageFit.Contain)
88                .margin({
89                  left: 4
90                })
91              Text($r('app.string.classification'))
92                .fontSize(16)
93                .opacity(0.6)
94                .fontColor($r('app.color.blank'))
95                .margin({
96                  left: 2
97                })
98            }
99          }
100          .width('100%')
101          .padding({
102            left: 12,
103            right: 12,
104            bottom: 16,
105            top: 16
106          })
107          .justifyContent(FlexAlign.SpaceBetween)
108
109          GoodsList(new Url(this.url));
110        }
111        .padding({
112          bottom: 12
113        })
114      }
115      .layoutWeight(1)
116      .scrollBar(BarState.Off)
117
118      Divider()
119        .color($r('app.color.divider2'))
120        .height(0.5)
121    }
122    .width('100%')
123    .height('100%')
124  }
125}