• 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 image from '@ohos.multimedia.image'
18import { logger } from '@ohos/photomodify'
19
20const TAG: string = 'Index'
21
22@Entry
23@Component
24struct Index {
25  @StorageLink('pixelMaps') pixelMaps: Array<image.PixelMap> = []
26  @State isShowCamera: boolean = false
27  @State isShowComment: boolean = true
28
29  terminateSelf(context: any) {
30    context.terminateSelf()
31  }
32
33  aboutToAppear() {
34    logger.info(TAG, 'enter aboutToAppear')
35    if (AppStorage.Get('pixelMaps')) {
36      this.pixelMaps.push(undefined)
37    }
38    if (router.getParams() && router.getParams()['isShowCamera']) {
39      this.isShowCamera = true
40    }
41  }
42
43  build() {
44    Column() {
45      Row() {
46        Image($r('app.media.back'))
47          .width(46)
48          .height(26)
49          .objectFit(ImageFit.Contain)
50          .onClick(() => {
51            let context = getContext(this)
52            this.terminateSelf(context)
53          })
54
55        Text($r('app.string.publish_comments'))
56          .fontSize(22)
57          .margin({ left: 130 })
58          .textAlign(TextAlign.Center)
59
60        Blank()
61
62        Button($r('app.string.submit'))
63          .fontSize(20)
64          .height(32)
65          .width(80)
66          .backgroundColor('#E92F4F')
67          .borderRadius(20)
68          .margin({ right: 10 })
69      }
70      .width('100%')
71      .height(32)
72      .padding({ left: 14 })
73      .margin({ top: 20 })
74
75      Scroll() {
76        Column() {
77          Stack({ alignContent: Alignment.Top }) {
78            Column() {
79              Stack() {
80                TextArea({ placeholder: $r('app.string.tip') })
81                  .height(150)
82                  .backgroundColor('#fffffff')
83                  .onChange((value) => {
84                    if (value.length === 0) {
85                      this.isShowComment = true
86                    } else {
87                      this.isShowComment = false
88                    }
89                  })
90
91                if (this.isShowComment) {
92                  Image($r('app.media.comment'))
93                    .height(20)
94                    .width(20)
95                    .margin({ top: 8, left: 16 })
96                }
97              }
98              .alignContent(Alignment.TopStart)
99              .margin({ top: 40 })
100
101              if (this.isShowCamera) {
102                Grid() {
103                  ForEach(this.pixelMaps, (item, index) => {
104                    GridItem() {
105                      if (index < this.pixelMaps.length - 1) {
106                        Image(item)
107                          .width('100%')
108                          .height(100)
109                          .borderRadius(10)
110
111                      } else {
112                        Column() {
113                          Image($r('app.media.photo'))
114                            .height(40)
115                            .width(40)
116                            .onClick(() => {
117                              router.push({
118                                url: 'pages/ChoicePhotos'
119                              })
120                            })
121                          Text($r('app.string.add_picture'))
122                            .fontSize(13)
123                        }
124                        .alignItems(HorizontalAlign.Center)
125                        .justifyContent(FlexAlign.Center)
126                        .width('100%')
127                        .height(100)
128                        .borderRadius(10)
129                        .backgroundColor('#F1F3F5')
130                      }
131                    }
132                  })
133                }
134                .columnsTemplate('1fr 1fr 1fr 1fr')
135                .columnsGap(8)
136                .rowsGap(8)
137                .margin({ top: 8 })
138                .width('94%')
139                .height(105 * (this.pixelMaps.length > 4 ? 2 : 1))
140              } else {
141                Column() {
142                  Image($r('app.media.camera'))
143                    .width(40)
144                    .height(40)
145
146                  Text($r('app.string.add_picture'))
147                    .fontSize(16)
148                }
149                .onClick(() => {
150                  router.push({
151                    url: 'pages/ChoicePhotos'
152                  })
153                })
154                .width('94%')
155                .height(130)
156                .margin({ top: 10 })
157                .borderRadius(10)
158                .justifyContent(FlexAlign.Center)
159                .backgroundColor('#F1F3F5')
160              }
161              Text($r('app.string.anonymous_display'))
162                .fontSize(15)
163                .fontColor('#99182431')
164                .alignSelf(ItemAlign.Start)
165                .margin({ left: 16, top: 16 })
166            }
167            .width('100%')
168            .height('100%')
169            .margin({ top: 22 })
170            .borderRadius(20)
171            .backgroundColor('#fffffff')
172
173            Image($r('app.media.commodity'))
174              .width(44)
175              .height(44)
176          }
177          .backgroundColor('#f1f3f5')
178          .height('100%')
179          .width('94%')
180          .margin({ top: 10 })
181        }
182        .width('100%')
183        .height(this.isShowCamera === false ? 380 : 300 + (this.pixelMaps.length / 4 > 1 ? 160 : 60))
184      }
185      .margin({ top: 20 })
186      .constraintSize({ maxHeight: '94%', minHeight: '94%' })
187      .backgroundColor('#f1f3f5')
188    }
189    .width('100%')
190    .height('100%')
191  }
192}