Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ActionSheetController, AlertController, IonicPage, ModalController } from 'ionic-angular';
import { FileObj } from '../../model/FileObj';
import { NativeService } from '../../providers/NativeService';
import { PreviewPicturePage } from '../preview-picture/preview-picture';
import { FileService } from '../../providers/FileService';
import { GlobalData } from '../../providers/GlobalData';
/**
* Generated class for the SelectPicturePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-select-picture',
templateUrl: 'select-picture.html',
})
export class SelectPicturePage {
@Input() max = 4; // 最多可选择多少张图片，默认为4张
@Input() allowAdd = true; // 是否允许新增
@Input() allowDelete = true; // 是否允许删除
@Input() fileObjList: FileObj[] = []; // 图片列表,与fileObjListChange形成双向数据绑定
@Output() fileObjListChange = new EventEmitter<any>();
constructor(private modalCtrl: ModalController,
private alertCtrl: AlertController,
private actionSheetCtrl: ActionSheetController,
private fileService: FileService,
private globalData: GlobalData,
private nativeService: NativeService) {
}
addPicture() {// 新增照片
const that = this;
that.actionSheetCtrl.create({
buttons: [
{
text: '从相册选择',
handler: () => {
that.nativeService.getMultiplePicture({// 从相册多选
maximumImagesCount: (that.max - that.fileObjList.length),
destinationType: 1 // 期望返回的图片格式,1图片路径
}).subscribe(imgs => {
for (const img of imgs as string[]) {
that.getPictureSuccess(img);
}
});
}
},
{
text: '拍照',
handler: () => {
that.nativeService.getPicture().subscribe(img => {
that.getPictureSuccess(img);
});
}
},
{
text: '取消',
role: 'cancel'
}
]
}).present();
}
deletePicture(i) {// 删除照片
if (!this.allowDelete) {
return;
}
this.alertCtrl.create({
title: '确认删除？',
buttons: [{text: '取消'},
{
text: '确定',
handler: () => {
const delArr = this.fileObjList.splice(i, 1);
const delId = delArr[0].id;
if (delId) {
this.globalData.showLoading = false;
this.fileService.deleteById(delId);
}
}
}
]
}).present();
}
viewerPicture(index) { // 照片预览
const picturePaths = [];
for (const fileObj of this.fileObjList) {
picturePaths.push(fileObj.origPath);
}
this.modalCtrl.create(PreviewPicturePage, {'initialSlide': index, 'picturePaths': picturePaths}).present();
}
private getPictureSuccess(img) {
const fileObj = {'origPath': img, 'thumbPath': img};
this.fileObjList.push(fileObj);
this.fileObjListChange.emit(this.fileObjList);
}
}