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
108
| /**
| * CImagePicker
| * @author Tevin
| */
|
| <template>
| <view class="c-image-picker">
| <AtInput
| ref="input"
| :name="itemRes.name"
| :title="itemRes.label"
| :required="itemRes.required"
| :error="itemRes.error"
| />
| <AtImagePicker
| ref="picker"
| multiple
| mode="aspectFit"
| :count="9"
| :length="3"
| :files="files"
| :onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
| :onFail="evt=>handleFail(evt)"
| :onImageClick="(index, file)=>handleImgView(index,file)"
| />
| <AtCurtain
| class="c-image-picker-view"
| closeBtnPosition="top-right"
| :isOpened="showImg"
| :onClose="evt=>handleImgClose()"
| >
| <image
| class="img"
| mode="aspectFit"
| :src="curtainImg"
| />
| </AtCurtain>
| </view>
| </template>
|
| <script>
| import { $ } from '@tarojs/extend';
| import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
| import './cImagePicker.scss';
|
| export default {
| name: 'CImagePicker',
| components: {
| AtInput,
| AtImagePicker,
| AtCurtain,
| },
| props: {
| itemRes: Object,
| },
| data() {
| return {
| showImg: false,
| curtainImg: '',
| };
| },
| computed: {
| files() {
| const value = this.itemRes.formData[this.itemRes.name];
| let files = [];
| if (Object.prototype.toString.call(value) === '[object String]') {
| files = value.split(',').map((url) => ({ url }));
| } else if (Object.prototype.toString.call(value) === '[object Array]') {
| files = value.map((url) => ({ url }));
| }
| files.push({ type: 'btn' });
| return files;
| },
| },
| methods: {
| handleChange(files, operationType, index) {
| if (operationType === 'add') {
| }
| const value = [];
| files.forEach((file) => {
| if (file.type === 'btn') {
| return;
| }
| value.push(file.url);
| });
| this.itemRes.onChange(value);
| },
| handleImgView(index, file) {
| this.curtainImg = file.url;
| this.showImg = true;
| },
| handleImgClose() {
| this.showImg = false;
| },
| handleFail(msg) {
| Taro.showToast({
| title: msg,
| icon: 'none',
| mask: true,
| duration: 2000,
| });
| },
| },
| mounted() {
| $(this.$refs.input.$el).find('.at-input__input').prepend(this.$refs.picker.$el);
| },
| };
| </script>
|
|
