• 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 display from '@ohos.display'
17import Logger from '../util/Logger'
18import geolocation from '@ohos.geolocation'
19import { listData, heatCity } from '../mock/LocationMock'
20import { MyDataSource } from '../util/DataSource'
21import httpRequestResponse from '../net/HttpRequestResponse'
22
23const TAG: string = '[Location]'
24
25@Entry
26@Component
27export struct Location {
28  @State alphabetIndex: number = 0
29  @State location: boolean = true
30  @State isCity: string = ''
31  @State currentLocation: string = ''
32  @State @Watch('positionChange') latitude: number = 0
33  @State @Watch('positionChange') longitude: number = 0
34  @State city: string = ''
35  @State isShow: boolean = true
36  private controller: TabsController = new TabsController()
37  private tabValue: string[] = ['A', 'B', 'C', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'T', 'X', 'Y', 'Z']
38  private scroller: Scroller = new Scroller()
39
40  async positionChange() {
41    Logger.info(TAG, `latitude = ${this.latitude}, longitude = ${this.longitude}`)
42    await this.requestResponse()
43  }
44
45  async aboutToAppear() {
46    await this.requestResponse()
47  }
48
49  async aboutToDisappear() {
50    await geolocation.off('locationChange')
51  }
52
53  async requestResponse() {
54    Logger.info(TAG, `enter requestResponse`)
55    try {
56      let httpResponse = await httpRequestResponse.httpRequest('http://123.60.114.86:8090/address/home', this.latitude, this.longitude)
57      Logger.info(TAG, `http response = ${JSON.stringify(httpResponse)}`)
58      let requestResponse = JSON.parse(httpResponse.result.toString())
59      this.city = requestResponse.data
60      Logger.info(TAG, `this.city = ${JSON.stringify(this.city)}`)
61    } catch (error) {
62      Logger.info(TAG, `http request error: ${JSON.stringify(error)}`)
63    }
64  }
65
66  locationChange = async (location) => {
67    Logger.info(TAG, `locationChange location =${JSON.stringify(location)}`)
68    this.latitude = location.latitude
69    this.longitude = location.longitude
70  }
71
72  async getLocation() {
73    Logger.info(TAG, `enter getLocation`)
74    let requestInfo: geolocation.LocationRequest = {
75      priority: 0x203, // 快速获取位置优先，如果应用希望快速拿到1个位置，可以将优先级设置为该字段
76      scenario: 0x300, // 未设置场景信息
77      timeInterval: 0, // 上报位置信息的时间间隔
78      distanceInterval: 100, // 上报位置信息的距离间隔
79      maxAccuracy: 100 // 精度信息
80    }
81    Logger.info(TAG, `on locationChange before`)
82    geolocation.on('locationChange', requestInfo, this.locationChange)
83    Logger.info(TAG, `on locationChange end`)
84  }
85
86  build() {
87    Panel(this.isShow) {
88      Column() {
89        Column() {
90          Text($r('app.string.deliver_to'))
91            .fontSize(25)
92            .margin({ bottom: 30 })
93            .alignSelf(ItemAlign.Start)
94          if (this.currentLocation) {
95            Text(`${this.currentLocation}` || $r('app.string.xian'))
96              .fontSize(20)
97              .alignSelf(ItemAlign.Start)
98          } else {
99            Text($r('app.string.current_positioning'))
100              .fontSize(20)
101              .opacity(0.6)
102              .alignSelf(ItemAlign.Start)
103          }
104        }
105        .width('100%')
106        .height(100)
107        .margin({ top: 20 })
108
109        Row() {
110          Image($r("app.media.location"))
111            .width(22)
112            .height(22)
113            .aspectRatio(1)
114            .padding({ left: 4 })
115          Text(this.city === '' ? $r('app.string.xian') : this.city)
116            .fontSize(20)
117            .fontColor('#E92F4F')
118            .margin({ left: 12 })
119            .padding({ right: 3, top: 2 })
120        }
121        .alignSelf(ItemAlign.Start)
122        .justifyContent(FlexAlign.Center)
123        .width(90)
124        .height(40)
125        .borderRadius(20)
126        .borderWidth(1)
127        .borderColor('#E92F4F')
128        .onClick(async () => {
129          Logger.info(TAG, `enter getLocation onClick`)
130          await this.getLocation()
131        })
132
133        Column() {
134          Stack({ alignContent: Alignment.End }) {
135            Column() {
136              Row() {
137                Text($r('app.string.domestic_hot_city'))
138                  .fontSize(20)
139                  .fontColor('#000000')
140                  .opacity(0.6)
141              }
142              .alignSelf(ItemAlign.Start)
143              .margin({ top: 10, bottom: 15 })
144
145              Grid() {
146                LazyForEach(new MyDataSource(heatCity), (item, index) => {
147                  GridItem() {
148                    Text(`${item}`)
149                      .margin({ bottom: 20 })
150                      .fontSize(20)
151                      .maxLines(3)
152                      .fontColor('#000000')
153                      .onClick(() => {
154                        this.currentLocation = item
155                      })
156                  }
157                  .key("city" + (index + 1))
158
159                })
160              }
161              .margin({ right: 60, top: 10 })
162              .width('100%')
163              .height(130)
164              .columnsTemplate('1fr 1fr 1fr 1fr')
165
166              List({ space: 15, initialIndex: 0, scroller: this.scroller }) {
167                LazyForEach(new MyDataSource(listData), (firstItem) => {
168                  ListItem() {
169                    Column() {
170                      Text(`${firstItem.name}`)
171                        .height(30)
172                        .fontSize(24)
173                        .fontColor('#000000')
174                        .width('100%')
175                        .margin({ top: 10 })
176                      Divider()
177                        .strokeWidth(0.8)
178                        .color('#000000')
179                        .opacity(0.2)
180                        .margin({ right: 10, top: 12 })
181
182                      ForEach(firstItem.city, (item, index) => {
183                        Text(`${item.name === undefined ? item : item.name}`)
184                          .height(30)
185                          .fontSize(20)
186                          .width('100%')
187                          .margin({ top: 16 })
188                          .onClick(() => {
189                            this.currentLocation = item.name === undefined ? item : item.name
190                            if (this.isCity === item.name) {
191                              Logger.info(TAG, `item.name = ${item.name === undefined ? item : item.name}`)
192                              this.isCity = ''
193                            } else {
194                              this.isCity = item.name === undefined ? item : item.name
195                            }
196                          })
197                          .key("city_ah")
198                        if (this.isCity === item.name) {
199                          List() {
200                            ForEach(item.city, (secondCity) => {
201                              ListItem() {
202                                Column() {
203                                  Text(`${secondCity}`)
204                                    .width('100%')
205                                    .height(30)
206                                    .fontSize(18)
207                                    .margin({ top: 4 })
208                                    .key("region" + (index + 1))
209                                    .onClick(() => {
210                                      this.currentLocation = `${item.name}/${secondCity}`
211                                    })
212                                }
213                              }
214                            })
215                          }
216                          .height('9%')
217                          .width('100%')
218                        }
219                      })
220                    }
221                  }
222                })
223              }
224              .height(580)
225              .width('100%')
226              .edgeEffect(EdgeEffect.None)
227              .listDirection(Axis.Vertical)
228              .onScrollIndex((firstIndex: number) => {
229                this.alphabetIndex = firstIndex
230              })
231            }
232
233            Column() {
234              AlphabetIndexer({ arrayValue: this.tabValue, selected: this.alphabetIndex })
235                .height('100%')
236                .font({ size: 16 })
237                .popupColor('#FFFFFF') // 弹出框颜色
238                .selectedBackgroundColor(0xCCCCCC) // 选中背景颜色
239                .popupBackground(0xCCCCCC) // 弹出框背景颜色
240                .usingPopup(true) // 是否显示弹出框
241                .selectedFont({ size: 16, style: FontStyle.Normal }) // 选中的样式
242                .selectedColor('#969494') // 选中颜色
243                .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框的演示
244                .alignStyle(this.location ? IndexerAlign.Right : IndexerAlign.Left)
245                .onSelect((TabIndex: number) => {
246                  this.scroller.scrollToIndex(TabIndex)
247                })
248            }
249            .position({ x: '97%' })
250            .margin({ top: 4 })
251          }
252        }
253      }
254      .width('100%')
255      .padding({ left: '6.7%', right: '6.7%', top: 20 })
256      .backgroundColor('#F1F3F5')
257      .borderRadius({ topLeft: 40, topRight: 40 })
258    }
259    .dragBar(true)
260    .mode(PanelMode.Full)
261  }
262}