• 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 { ContactDataSource } from '../data/BasicDataSource'
17import { logger } from '../utils/Logger'
18
19const TAG: string = 'ContactInfo'
20
21@Component
22export struct ContactInfo {
23  @Link name: string
24  @Link phones: string[]
25  @Link email: string
26  @Link address: string
27  @Link remark: string
28  private phoneData: ContactDataSource = new ContactDataSource()
29
30  build() {
31    Column() {
32      Image($r('app.media.touxiang'))
33        .width($r('app.float.head_size_mid'))
34        .aspectRatio(1)
35        .margin({ top: 52 })
36        .objectFit(ImageFit.Contain)
37
38      Text($r('app.string.save_to_phone'))
39        .fontSize($r('app.float.font_size_22'))
40        .margin({ top: 22, bottom: 32 })
41
42      this.newContact($r('app.string.contact_name'), $r('app.media.name'), '', this.name, 12)
43      LazyForEach(this.phoneData, (item, index) => {
44        this.phoneView(item, index)
45      }, (item, index) => index.toString())
46      this.newContact($r('app.string.contact_email'), $r('app.media.email'), '', this.email, 20)
47      this.newContact($r('app.string.contact_address'), $r('app.media.address'), '', this.address, 20)
48      this.newContact($r('app.string.contact_remark'), $r('app.media.remark'), '', this.remark, 50)
49    }
50    .width('100%')
51  }
52
53  @Builder
54  phoneView(item: string, index: number) {
55    Row() {
56      Image($r('app.media.phone'))
57        .width($r('app.float.image_size_32'))
58        .height($r('app.float.image_size_32'))
59        .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
60        .objectFit(ImageFit.Contain)
61
62      TextInput({ text: item, placeholder: $r('app.string.contact_phone') })
63        .layoutWeight(1)
64        .type(InputType.PhoneNumber)
65        .fontSize($r('app.float.font_size_22'))
66        .maxLength(11)
67        .fontWeight(FontWeight.Bold)
68        .backgroundColor(Color.White)
69        .placeholderFont({ size: 24, weight: 450, family: 'cursive', style: FontStyle.Normal })
70        .onChange((value: string) => {
71          this.phones[index] = value
72          logger.info(TAG, `this.phone is ${JSON.stringify(this.phones)}`)
73        })
74      if (index > 0) {
75        Image($r('app.media.no'))
76          .size({ width: $r('app.float.image_size_32'), height: $r('app.float.image_size_32') })
77          .objectFit(ImageFit.Contain)
78          .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
79          .onClick(() => {
80            this.phones.splice(index, 1)
81            this.phoneData['dataArray'].splice(index, 1)
82            this.phoneData.notifyDataReload()
83          })
84      }
85    }
86    .margin({ bottom: $r('app.float.page_space_16') })
87    .padding({ top: $r('app.float.page_space_12'), bottom: $r('app.float.page_space_12') })
88    .width('100%')
89    .borderRadius(32)
90    .backgroundColor(Color.White)
91  }
92
93  @Builder
94  newContact(editText: Resource, img: Resource, filter: string, itemValue: string, maxLength: number) {
95    Row() {
96      Image(img)
97        .width($r('app.float.image_size_32'))
98        .height($r('app.float.image_size_32'))
99        .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
100        .objectFit(ImageFit.Contain)
101
102      TextInput({ text: itemValue, placeholder: editText })
103        .layoutWeight(1)
104        .fontSize($r('app.float.font_size_22'))
105        .maxLength(maxLength)
106        .inputFilter(filter)
107        .fontWeight(FontWeight.Bold)
108        .backgroundColor(Color.White)
109        .placeholderFont({ size: 24, weight: 450, family: 'cursive', style: FontStyle.Normal })
110        .onChange((value: string) => {
111          switch (JSON.stringify(editText)) {
112            case JSON.stringify($r('app.string.contact_name')):
113              this.name = value
114              break
115            case JSON.stringify($r('app.string.contact_email')):
116              this.email = value
117              break
118            case JSON.stringify($r('app.string.contact_address')):
119              this.address = value
120              break
121            case JSON.stringify($r('app.string.contact_remark')):
122              this.remark = value
123              break
124            default:
125              break
126          }
127          logger.info(TAG, `this name is ${this.name}`)
128        })
129    }
130    .margin({ bottom: $r('app.float.page_space_16') })
131    .padding({ top: $r('app.float.page_space_12'), bottom: $r('app.float.page_space_12') })
132    .width('100%')
133    .borderRadius(32)
134    .backgroundColor(Color.White)
135  }
136
137  aboutToAppear() {
138    this.phoneData['dataArray'] = this.phones.copyWithin(this.phones.length, 0)
139  }
140}