• 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 { addCity, City, getCityList, MyDataSource, Style } from '@ohos/common';
18
19@Entry
20@Component
21struct AddCity {
22  build() {
23    Column() {
24      Row() {
25        Image($r('app.media.icon_back'))
26          .width(24)
27          .margin({ left: 26 })
28          .objectFit(ImageFit.Contain)
29          .onClick(() => {
30            router.back()
31          })
32        Text($r('app.string.add_city'))
33          .fontSize(20)
34          .margin({ left: Style.NORMAL_MARGIN })
35      }
36      .width('100%')
37      .height(56)
38
39      Scroll() {
40        CityGrid()
41      }
42      .layoutWeight(1)
43      .margin({ top: 18 })
44      .scrollBar(BarState.Off)
45    }
46    .height('100%')
47    .backgroundColor('#F1F3F5')
48  }
49}
50
51@Component
52export struct CityGrid {
53  @StorageLink('cityList') cities: Array<City> = [];
54  private cityList: MyDataSource = new MyDataSource(getCityList());
55
56  build() {
57    GridRow({ columns: { sm: 4, md: 8, lg: 12 },
58      breakpoints: { reference: BreakpointsReference.WindowSize } }) {
59      GridCol({
60        span: { sm: 4, md: 6, lg: 8 },
61        offset: { sm: 0, md: 1, lg: 2 } }) {
62        GridRow({ columns: { sm: 3, md: 4, lg: 7 },
63          gutter: { x: vp2px(17), y: vp2px(8) },
64          breakpoints: { reference: BreakpointsReference.WindowSize } }) {
65          GridCol({ span: { sm: 3, md: 4, lg: 7 } }) {
66            Text($r('app.string.hot_city'))
67              .width('100%')
68              .fontSize(14)
69              .fontWeight(FontWeight.Regular)
70              .fontColor('#99000000')
71              .margin({ bottom: 14 })
72          }
73
74          LazyForEach(this.cityList, (item) => {
75            GridCol({ span: 1 }) {
76              Column() {
77                Text(item.name)
78                  .fontSize(14)
79                  .fontColor(this.isCityAdded(item) ? '#61000000' : '#000000')
80              }
81              .width('100%')
82              .height(36)
83              .backgroundColor(this.isCityAdded(item) ? '#05000000' : '#11000000')
84              .justifyContent(FlexAlign.Center)
85              .borderRadius(Style.CITY_TEXT_RADIUS)
86              .onClick(() => {
87                if (!this.isCityAdded(item)) {
88                  addCity(item);
89                  AppStorage.SetOrCreate('isRefresh', true);
90                  router.back();
91                }
92              })
93            }
94          }, item => item.name)
95        }
96      }
97      .height('100%')
98    }
99    .padding({ left: Style.NORMAL_PADDING, right: Style.NORMAL_PADDING })
100  }
101
102  isCityAdded(city: City) {
103    let isAdded: boolean = false;
104    this.cities.forEach(item => {
105      if (item.name === city.name) {
106        isAdded = true;
107      }
108    })
109    return isAdded;
110  }
111}