• 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 { City, getSideBg, MyDataSource, Style } from '@ohos/common'
17
18@Component
19export default struct SideContent {
20  @StorageLink('cityList') @Watch('cityListChange') cities: Array<City> = []
21  @StorageLink('swiperIndex') swiperIndex: number = 0
22  private cityList: MyDataSource = new MyDataSource(this.cities)
23  @Link showSideBar: boolean
24
25  @Builder header() {
26    Row() {
27      Blank()
28      Image($r('app.media.icon_subarea'))
29        .id('cancelSubarea')
30        .size({ width: 24, height: 24 })
31        .objectFit(ImageFit.Contain)
32        .onClick(() => {
33          this.showSideBar = !this.showSideBar
34        })
35    }
36    .width('100%')
37
38    Text($r('app.string.weather'))
39      .fontColor(Color.White)
40      .fontSize(30)
41      .fontWeight(FontWeight.Medium)
42      .width('100%')
43    Search({ placeholder: '搜索城市（中文/拼音）', icon: '/common/images/icon_search.svg' })
44      .placeholderFont({ size: 16 })
45      .placeholderColor('#60FFFFFF')
46      .width('100%')
47      .backgroundColor('#26FFFFFF')
48      .margin({ top: 4 })
49      .borderRadius(45)
50  }
51
52  build() {
53    Column({ space: Style.NORMAL_SPACE }) {
54      this.header()
55      List({ space: 12 }) {
56        LazyForEach(this.cityList, (item, index) => {
57          ListItem() {
58            CityItem({ cityInfo: item, index: index })
59          }
60          .id('sliderCity' + index)
61          .onClick(() => {
62            this.swiperIndex = index
63            AppStorage.SetOrCreate('swiperIndex', index)
64          })
65        }, item => item.name)
66      }
67      .margin({ top: 8 })
68      .width('100%')
69      .layoutWeight(1)
70    }
71    .width('100%')
72    .height('100%')
73    .padding(Style.NORMAL_PADDING)
74    .backgroundColor('#55000000')
75  }
76
77  cityListChange() {
78    this.cityList['dataArray'] = this.cities
79    this.cityList.notifyDataReload()
80  }
81}
82
83@Component
84struct CityItem {
85  private cityInfo: City
86  private index: number
87  @StorageLink('swiperIndex') swiperIndex: number = 0
88
89  build() {
90    Row() {
91      Text(this.cityInfo.name)
92        .fontColor(Color.White)
93        .fontSize(24)
94      if (this.index === 0) {
95        Image($r('app.media.icon_location'))
96          .size({ width: 16, height: 16 })
97          .objectFit(ImageFit.Contain)
98      }
99      Blank()
100      Column() {
101        Row() {
102          Text(this.cityInfo.temp)
103            .fontColor(Color.White)
104            .fontWeight(Style.BIG_FONT_WEIGHT)
105            .fontSize(54)
106          Text($r('app.string.du'))
107            .fontColor(Color.White)
108            .fontSize(20)
109            .margin({ bottom: 28 })
110        }
111
112        Text(this.cityInfo.weather)
113          .fontColor(Color.White)
114          .fontSize(14)
115      }
116    }
117    .width('100%')
118    .height(100)
119    .alignItems(VerticalAlign.Center)
120    .padding(Style.NORMAL_PADDING)
121    .border({
122      radius: Style.NORMAL_RADIUS,
123      width: 1,
124      color: this.swiperIndex === this.index ? '#BBFFFFFF' : '#116ACD'
125    })
126    .alignItems(VerticalAlign.Center)
127    .backgroundImageSize(ImageSize.Cover)
128    .backgroundImage(getSideBg(this.cityInfo.weather))
129  }
130}
131