• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 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 { PRODUCTS_DATA } from '../mock/CommodityMock';
17import { CommodityDataModel } from '../model/CommodityDataModel';
18import { CommodityDataSource } from '../model/CommodityDataSource';
19import { promptAction } from '@kit.ArkUI';
20
21const IMAGE_ASPECT_RATIO: number = 1; // 图片的宽高比
22const OFFSET: number = -4; // 价格控件偏移量
23const OFFSETX: number = 10; // banner阴影X轴偏移量
24const OFFSETY: number = 10; // banner阴影Y轴偏移量
25const LAYOUT_WEIGHT: number = 1; // 分配剩余空间
26const ANGLE: number = 180; // 自上而下渐变
27
28@Component
29export struct CommodityList {
30  private commodityData: CommodityDataSource = new CommodityDataSource();
31
32  aboutToAppear() {
33    this.commodityData.pushData(PRODUCTS_DATA)
34  }
35
36  build() {
37    Column() {
38      Column() {
39        Image($r('app.media.page_loading_light_mode_banner'))
40          .objectFit(ImageFit.Contain)
41          .borderRadius($r('app.integer.page_loading_banner_border_radius'))
42          .margin({ top: $r('app.integer.page_loading_banner_margin_top') })
43          .width('100%')
44          .shadow({
45            radius: $r('app.integer.page_loading_banner_shadow_border_radius'),
46            color: $r('app.color.page_loading_banner_shadow_color'),
47            offsetX: OFFSETX,
48            offsetY: OFFSETY
49          })
50
51        Text($r('app.string.page_loading_goods_title_text'))
52          .fontColor(Color.Black)
53          .fontSize($r('app.integer.page_loading_commodity_font'))
54          .fontWeight(FontWeight.Bold)
55          .height($r('app.integer.page_loading_new_commodity_height'))
56          .width('100%')
57          .textAlign(TextAlign.Center)
58      }
59      .padding({ left: $r('app.integer.page_loading_column_padding_left'), right: $r('app.integer.page_loading_column_padding_right') })
60      .backgroundColor(Color.White)
61
62      List() {
63        LazyForEach(this.commodityData, (item: CommodityDataModel) => {
64          ListItem() {
65            ItemView({ item: item })
66          }
67          .padding({
68            left: $r('app.integer.page_loading_commodity_list_item_padding'),
69            right: $r('app.integer.page_loading_commodity_list_item_padding')
70          })
71          .margin({ top: $r('app.integer.page_loading_commodity_list_item_margin_top') })
72        }, (item: CommodityDataModel) => item.id.toString())
73      }
74      .id('commodity_list')
75      .width('100%')
76      .layoutWeight(LAYOUT_WEIGHT)
77    }
78    // 设置背景颜色渐变
79    .linearGradient({
80      angle: ANGLE,
81      colors: [[0xFFFFFF, 0.0], [0xdddddd, 1.0]]
82    })
83  }
84}
85
86@Component
87struct ItemView {
88  @Prop item: CommodityDataModel;
89
90  build() {
91    // TODO: 知识点：相对布局组件，用于复杂场景中元素对齐的布局，容器内子组件区分水平方向，垂直方向子组件可以将容器或者其他子组件设为锚点。
92    RelativeContainer() {
93      Image(this.item.uri)
94        .width($r('app.integer.page_loading_commodity_image_width'))
95        .aspectRatio(IMAGE_ASPECT_RATIO)
96        .objectFit(ImageFit.Contain)
97        .padding({
98          top: $r('app.integer.page_loading_commodity_image_padding_top'),
99          bottom: $r('app.integer.page_loading_commodity_image_padding_bottom')
100        })
101        .alignRules({
102          top: { anchor: '__container__', align: VerticalAlign.Top },
103          left: { anchor: '__container__', align: HorizontalAlign.Start }
104        })
105        .id('image')
106
107      Text(this.item.insurance)
108        .fontSize($r('app.integer.page_loading_commodity_insurance_font_size'))
109        .fontColor($r('app.color.page_loading_goods_insurance_text_color'))
110        .borderColor($r('app.color.page_loading_goods_insurance_border_color'))
111        .borderWidth($r('app.integer.page_loading_commodity_insurance_border_width'))
112        .borderRadius($r('app.integer.page_loading_commodity_insurance_border_radius'))
113        .padding({
114          left: $r('app.integer.page_loading_commodity_insurance_padding_left'),
115          right: $r('app.integer.page_loading_commodity_insurance_padding_right'),
116          top: $r('app.integer.page_loading_commodity_insurance_padding_top'),
117          bottom: $r('app.integer.page_loading_commodity_insurance_padding_bottom')
118        })
119        .margin({ right: $r('app.integer.page_loading_commodity_insurance_margin_right') })
120        .alignRules({
121          right: { anchor: '__container__', align: HorizontalAlign.End },
122          center: { anchor: '__container__', align: VerticalAlign.Center }
123        })
124        .id('insurance')
125
126      Row() {
127        Image($r('app.media.page_loading_views'))
128          .width($r('app.integer.page_loading_views_image_width'))
129          .aspectRatio(IMAGE_ASPECT_RATIO)
130          .objectFit(ImageFit.Contain)
131
132        Text(this.item.views)
133          .fontSize($r('app.integer.page_loading_views_font'))
134          .margin({ left: $r('app.integer.page_loading_views_margin_left') })
135          .fontColor(Color.Black)
136      }
137      .height($r('app.integer.page_loading_views_height'))
138      .width($r('app.integer.page_loading_views_width'))
139      .margin({ top: $r('app.integer.page_loading_views_margin_top') })
140      .justifyContent(FlexAlign.End)
141      .alignRules({
142        middle: { anchor: 'insurance', align: HorizontalAlign.Center },
143        top: { anchor: 'insurance', align: VerticalAlign.Bottom }
144      })
145      .id('views')
146
147      Column() {
148        Text(this.item.title)
149          .fontSize($r('app.integer.page_loading_commodity_title_text_font_size'))
150          .fontWeight(FontWeight.Bold)
151          .fontColor(Color.Black)
152          .width('100%')
153
154        Text(this.item.price)
155          .fontSize($r('app.integer.page_loading_commodity_price_text_font_size'))
156          .fontWeight(FontWeight.Bold)
157          .offset({ x: OFFSET })// 因为￥是中文字符，上面的是中文字符，占的宽度不一样，所以需要对齐，添加offset
158          .fontColor($r('app.color.page_loading_goods_price_text_color'))
159          .margin({ top: $r('app.integer.page_loading_commodity_price_margin_top') })
160          .width('100%')
161      }
162      .justifyContent(FlexAlign.Start)
163      .alignRules({
164        left: { anchor: 'image', align: HorizontalAlign.End },
165        right: { anchor: 'insurance', align: HorizontalAlign.Start },
166        center: { anchor: 'image', align: VerticalAlign.Center }
167      })
168      .id('column')
169      .onClick(() => {
170        promptAction.showToast({ message: $r('app.string.page_loading_commodity_other_function') });
171      })
172    }
173    .height($r('app.integer.page_loading_commodity_list_item_height'))
174    .borderRadius($r('app.integer.page_loading_commodity_border_radius'))
175    .width('100%')
176    .backgroundColor(Color.White)
177  }
178}