• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 { City, getSideBg, MyDataSource, Style } from '@ohos/common';
18
19@Entry
20@Component
21struct CityList {
22  @StorageLink('cityList') cities: Array<City> = [];
23  @StorageLink('curBp') curBp: string = 'lg';
24  private cityList: MyDataSource = new MyDataSource(this.cities);
25
26  getOffsetMD(index) {
27    if (index === 0) {
28      return 1;
29    }
30    if (index % 2 === 0) {
31      return 2;
32    }
33    return 0;
34  }
35
36  getOffsetLG(index) {
37    if (index === 0) {
38      return 2;
39    }
40    if (index % 2 === 0) {
41      return 4;
42    }
43    return 0;
44  }
45
46  @Builder CityInfo(item, index) {
47    Row() {
48      Text(item.name)
49        .fontColor(Color.White)
50        .fontSize(20)
51      if (index === 0) {
52        Image($r('app.media.icon_location'))
53          .size({ width: 16, height: 16 })
54          .objectFit(ImageFit.Contain)
55      }
56      Blank()
57      Column() {
58        Row() {
59          Text(item.temp)
60            .fontColor(Color.White)
61            .fontWeight(Style.BIG_FONT_WEIGHT)
62            .fontSize(38)
63          Text($r('app.string.du'))
64            .fontColor(Color.White)
65            .fontSize(16)
66            .margin({ bottom: 22 })
67        }
68
69        Text(item.weather)
70          .fontColor(Color.White)
71          .fontSize(12)
72      }
73    }
74    .width('100%')
75    .height(80)
76    .alignItems(VerticalAlign.Center)
77    .padding(Style.NORMAL_PADDING)
78    .borderRadius(Style.NORMAL_RADIUS)
79    .alignItems(VerticalAlign.Center)
80    .backgroundImageSize(ImageSize.Cover)
81    .backgroundImage(getSideBg(item.weather))
82  }
83
84  build() {
85    Column() {
86      Row() {
87        Image($r('app.media.icon_back'))
88          .width(24)
89          .margin({ left: 26 })
90          .objectFit(ImageFit.Contain)
91          .onClick(() => {
92            router.back()
93          })
94        Text($r('app.string.manage_city'))
95          .fontSize(20)
96          .margin({ left: Style.NORMAL_MARGIN })
97      }
98      .width('100%')
99      .height(56)
100
101      Scroll() {
102        GridRow({ columns: { sm: 4, md: 8, lg: 12 }, gutter: { x: Style.GRID_GUTTER, y: Style.GRID_GUTTER }}) {
103          LazyForEach(this.cityList, (item, index) => {
104            GridCol({ span: {sm: 4, md: 3, lg: 4},
105              offset: {sm: 0, md: this.getOffsetMD(index), lg: this.getOffsetLG(index)}}) {
106              this.CityInfo(item, index)
107            }
108          }, item => item.name)
109        }
110      }
111      .layoutWeight(1)
112      .margin({ top: 12 })
113      .scrollBar(BarState.Off)
114      .align(Alignment.TopStart)
115      .padding({ left: Style.NORMAL_PADDING, right: Style.NORMAL_PADDING })
116
117      Column() {
118        Image($r('app.media.icon_add'))
119          .width(24)
120          .height(24)
121          .objectFit(ImageFit.Contain)
122        Text($r('app.string.add_city'))
123          .fontSize(10)
124      }
125      .id('addCity')
126      .justifyContent(FlexAlign.Center)
127      .padding({ bottom: this.curBp === 'lg' ? Style.ADD_CITY_BOTTOM_LG : Style.ADD_CITY_BOTTOM })
128      .onClick(() => {
129        router.pushUrl({ url: 'pages/AddCity' });
130      })
131    }
132    .height('100%')
133    .backgroundColor('#F1F3F5')
134  }
135
136  onPageShow() {
137    this.cityList['dataArray'] = this.cities;
138    this.cityList.notifyDataReload();
139  }
140}