• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 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 picker from '@ohos.file.picker';
17import { logger, NO_IMAGE_SELECTED } from '@ohos/uploaddownload';
18
19const TAG: string = 'AddPictures';
20
21@Extend(Image) function imageStyle() {
22  .width('100%')
23  .aspectRatio(1)
24  .objectFit(ImageFit.Fill)
25  .backgroundColor($r('app.color.light_gray'))
26  .borderRadius(12)
27}
28
29@Component
30export struct AddPictures {
31  @Consume imageList: Array<string>;
32  @Consume chunkImgIndex: number;
33
34  build() {
35    Column() {
36      Text($r('app.string.tip'))
37        .fontColor($r('app.color.text_normal'))
38        .fontWeight(400)
39        .fontFamily('HarmonyHeiTi')
40        .fontSize(14)
41        .opacity(0.4)
42        .margin({ top: 16, bottom: 48 })
43        .width('100%')
44      GridRow({ columns: { sm: 3, md: 6, lg: 8 }, gutter: 12 }) {
45        ForEach(this.imageList, (item: string, index: number) => {
46          GridCol({ span: 1 }) {
47            Image(item)
48              .imageStyle()
49          }
50          .borderWidth(2)
51          .borderColor(index === this.chunkImgIndex ? $r('app.color.button_blue') : $r('app.color.light_gray'))
52          .onClick(() => {
53            logger.debug(TAG, `onclick: this.chunkImgIndex=${this.chunkImgIndex}, curindex:${index}`);
54            if (this.chunkImgIndex === NO_IMAGE_SELECTED) {
55              this.chunkImgIndex = index;
56            }
57          })
58        })
59        GridCol({ span: 1 }) {
60          Row() {
61            Image($r('app.media.ic_public_add'))
62              .size({ width: 24, height: 24 })
63              .objectFit(ImageFit.Contain)
64          }
65          .width('100%')
66          .height('100%')
67          .justifyContent(FlexAlign.Center)
68        }
69        .width('100%')
70        .aspectRatio(1)
71        .backgroundColor($r('app.color.white'))
72        .borderRadius(12)
73        .onClick(() => {
74          this.showDialog();
75        })
76      }
77    }
78    .width('100%')
79  }
80
81  addImages = (images: Array<string>) => {
82    images.forEach((item: string) => {
83      if (!this.imageList.includes(item)) {
84        this.imageList.push(item);
85      }
86    })
87    logger.info(TAG, `addImages imageList=${JSON.stringify(this.imageList)}`);
88  }
89
90  showDialog() {
91    AlertDialog.show({
92      message: $r('app.string.pick_album'),
93      alignment: DialogAlignment.Bottom,
94      offset: { dx: 0, dy: -12 },
95      primaryButton: {
96        value: $r('app.string.cancel'),
97        fontColor: $r('app.color.btn_text_blue'),
98        action: () => {
99        }
100      },
101      secondaryButton: {
102        value: $r('app.string.ok'),
103        fontColor: $r('app.color.btn_text_blue'),
104        action: () => {
105          try {
106            let photoSelectOptions = new picker.PhotoSelectOptions();
107            photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
108            photoSelectOptions.maxSelectNumber = 5;
109            let photoPicker = new picker.PhotoViewPicker();
110            photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
111              this.addImages(photoSelectResult.photoUris);
112            }).catch((err: Error) => {
113              logger.info(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`);
114            });
115          } catch (err) {
116            logger.info(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`);
117          }
118        }
119      }
120    })
121  }
122}