• 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      // 传一个id：0
42      this.newContact($r('app.string.contact_name'), $r('app.media.name'), '', this.name, 12, 0)
43      LazyForEach(this.phoneData, (item, index) => {
44        this.phoneView(item, index)
45      }, (item, index) => index.toString())
46      // 传一个id：1
47      this.newContact($r('app.string.contact_email'), $r('app.media.email'), '', this.email, 20, 1)
48      // 传一个id：2
49      this.newContact($r('app.string.contact_address'), $r('app.media.address'), '', this.address, 20, 2)
50      // 传一个id：3
51      this.newContact($r('app.string.contact_remark'), $r('app.media.remark'), '', this.remark, 50, 3)
52    }
53    .width('100%')
54  }
55
56  @Builder
57  phoneView(item: string, index: number) {
58    Row() {
59      Image($r('app.media.phone'))
60        .width($r('app.float.image_size_32'))
61        .height($r('app.float.image_size_32'))
62        .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
63        .objectFit(ImageFit.Contain)
64
65      TextInput({ text: item, placeholder: $r('app.string.contact_phone') })
66        .layoutWeight(1)
67        .type(InputType.PhoneNumber)
68        .fontSize($r('app.float.font_size_22'))
69        .maxLength(11)
70        .id('phoneInput')
71        .fontWeight(FontWeight.Bold)
72        .backgroundColor(Color.White)
73        .placeholderFont({ size: 24, weight: 450, family: 'cursive', style: FontStyle.Normal })
74        .onChange((value: string) => {
75          this.phones[index] = value
76          logger.info(TAG, `this.phone is ${JSON.stringify(this.phones)}`)
77        })
78      if (index > 0) {
79        Image($r('app.media.no'))
80          .size({ width: $r('app.float.image_size_32'), height: $r('app.float.image_size_32') })
81          .objectFit(ImageFit.Contain)
82          .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
83          .onClick(() => {
84            this.phones.splice(index, 1)
85            this.phoneData['dataArray'].splice(index, 1)
86            this.phoneData.notifyDataReload()
87          })
88      }
89    }
90    .margin({ bottom: $r('app.float.page_space_16') })
91    .padding({ top: $r('app.float.page_space_12'), bottom: $r('app.float.page_space_12') })
92    .width('100%')
93    .borderRadius(32)
94    .backgroundColor(Color.White)
95  }
96
97  @Builder
98  newContact(editText: Resource, img: Resource, filter: string, itemValue: string, maxLength: number, id: number) {
99    Row() {
100      Image(img)
101        .width($r('app.float.image_size_32'))
102        .height($r('app.float.image_size_32'))
103        .margin({ left: $r('app.float.page_space_16'), right: $r('app.float.page_space_12') })
104        .objectFit(ImageFit.Contain)
105
106      TextInput({ text: itemValue, placeholder: editText })
107        .layoutWeight(1)
108        .fontSize($r('app.float.font_size_22'))
109        .maxLength(maxLength)
110        .inputFilter(filter)
111        .id(`contactMsg${id}`)
112        .fontWeight(FontWeight.Bold)
113        .backgroundColor(Color.White)
114        .placeholderFont({ size: 24, weight: 450, family: 'cursive', style: FontStyle.Normal })
115        .onChange((value: string) => {
116          switch (JSON.stringify(editText)) {
117            case JSON.stringify($r('app.string.contact_name')):
118              this.name = value
119              break
120            case JSON.stringify($r('app.string.contact_email')):
121              this.email = value
122              break
123            case JSON.stringify($r('app.string.contact_address')):
124              this.address = value
125              break
126            case JSON.stringify($r('app.string.contact_remark')):
127              this.remark = value
128              break
129            default:
130              break
131          }
132          logger.info(TAG, `this name is ${this.name}`)
133        })
134    }
135    .margin({ bottom: $r('app.float.page_space_16') })
136    .padding({ top: $r('app.float.page_space_12'), bottom: $r('app.float.page_space_12') })
137    .width('100%')
138    .borderRadius(32)
139    .backgroundColor(Color.White)
140  }
141
142  aboutToAppear() {
143    this.phoneData['dataArray'] = this.phones.copyWithin(this.phones.length, 0)
144  }
145}