mali-applet-ui 0.2.77 → 0.2.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-upload" :class="[className || '']">
|
|
2
|
+
<view class="ml-upload" :class="[className || '', {'is-loading': loading}]">
|
|
3
3
|
<!-- 上传图片 -->
|
|
4
4
|
<view v-if="mediatype === 'image'" class="ml-upload-image-list">
|
|
5
5
|
<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
|
|
@@ -8,22 +8,26 @@
|
|
|
8
8
|
<ml-icon name="close" />
|
|
9
9
|
</view>
|
|
10
10
|
</view>
|
|
11
|
-
<view v-if="!isFromReadonly" class="ml-upload-image-add">
|
|
11
|
+
<view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-image-add">
|
|
12
12
|
<view class="ml-upload-image-add-btn" @tap="chooseEvent">
|
|
13
13
|
<view class="ml-upload-image-add-icon">
|
|
14
|
-
<ml-icon name="
|
|
14
|
+
<ml-icon v-if="loading" name="loading" roll />
|
|
15
|
+
<ml-icon v-else name="add" />
|
|
16
|
+
<view v-if="loading" class="ml-upload-image-add-loading-text">上传中...</view>
|
|
15
17
|
</view>
|
|
16
18
|
</view>
|
|
17
19
|
</view>
|
|
18
20
|
</view>
|
|
19
21
|
<!-- 上传文件 -->
|
|
20
22
|
<view v-else class="ml-upload-file-list">
|
|
21
|
-
<view v-if="!isFromReadonly" class="ml-upload-file-add">
|
|
23
|
+
<view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-file-add">
|
|
22
24
|
<view class="ml-upload-file-add-btn" @tap="chooseEvent">
|
|
23
25
|
<text class="ml-upload-file-add-icon">
|
|
24
|
-
<ml-icon name="
|
|
26
|
+
<ml-icon v-if="loading" name="loading" roll />
|
|
27
|
+
<ml-icon v-else name="add" />
|
|
25
28
|
</text>
|
|
26
|
-
<text
|
|
29
|
+
<text v-if="loading">上传中...</text>
|
|
30
|
+
<text v-else>添加文件</text>
|
|
27
31
|
</view>
|
|
28
32
|
</view>
|
|
29
33
|
<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
|
|
@@ -39,9 +43,9 @@
|
|
|
39
43
|
<ml-button status="primary" type="text" @click="downloadEvent(item)">下载</ml-button>
|
|
40
44
|
</view>
|
|
41
45
|
</view>
|
|
42
|
-
<view v-if="!isFromReadonly
|
|
46
|
+
<view v-if="!isFromReadonly" class="ml-upload-file-right">
|
|
43
47
|
<view class="ml-upload-file-del-btn" @click="removeEvent(item)">
|
|
44
|
-
|
|
48
|
+
<ml-icon name="close" />
|
|
45
49
|
</view>
|
|
46
50
|
</view>
|
|
47
51
|
</view>
|
|
@@ -106,6 +110,7 @@ export default {
|
|
|
106
110
|
},
|
|
107
111
|
data () {
|
|
108
112
|
return {
|
|
113
|
+
loading: false,
|
|
109
114
|
fileList: [],
|
|
110
115
|
docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
|
|
111
116
|
imgTypes: ['png', 'jpg']
|
|
@@ -351,6 +356,9 @@ export default {
|
|
|
351
356
|
})
|
|
352
357
|
},
|
|
353
358
|
chooseEvent () {
|
|
359
|
+
if (this.loading) {
|
|
360
|
+
return
|
|
361
|
+
}
|
|
354
362
|
let chooseMethod = uploadAllFiles
|
|
355
363
|
if (this.mediatype === 'image') {
|
|
356
364
|
chooseMethod = uploadImageFiles
|
|
@@ -360,6 +368,7 @@ export default {
|
|
|
360
368
|
count: this.limit - this.fileList.length
|
|
361
369
|
}).then(res => {
|
|
362
370
|
const { tempFiles } = res
|
|
371
|
+
this.loading = true
|
|
363
372
|
Promise.all(
|
|
364
373
|
tempFiles.map(file => {
|
|
365
374
|
const fileSuffix = this.getSuffix(file.name)
|
|
@@ -389,9 +398,13 @@ export default {
|
|
|
389
398
|
this.fileList.push(...list)
|
|
390
399
|
this.isUpdate = true
|
|
391
400
|
this.updateModel()
|
|
401
|
+
this.loading = false
|
|
392
402
|
}).catch((e) => {
|
|
393
403
|
console.log(e)
|
|
404
|
+
this.loading = false
|
|
394
405
|
})
|
|
406
|
+
}).catch(e => {
|
|
407
|
+
console.log(e)
|
|
395
408
|
})
|
|
396
409
|
}
|
|
397
410
|
}
|
|
@@ -433,12 +446,23 @@ export default {
|
|
|
433
446
|
.ml-upload-image-add-btn {
|
|
434
447
|
width: 120rpx;
|
|
435
448
|
height: 120rpx;
|
|
436
|
-
line-height: 120rpx;
|
|
437
449
|
font-size: 60rpx;
|
|
438
450
|
color: #c8c8c9;
|
|
439
451
|
border: 1px dashed #c8c8c9;
|
|
440
452
|
border-radius: $ml-border-radius;
|
|
441
453
|
}
|
|
454
|
+
.ml-upload-image-add-icon {
|
|
455
|
+
width: 100%;
|
|
456
|
+
height: 100%;
|
|
457
|
+
display: flex;
|
|
458
|
+
flex-direction: column;
|
|
459
|
+
align-items: center;
|
|
460
|
+
justify-content: center;
|
|
461
|
+
text-align: center;
|
|
462
|
+
}
|
|
463
|
+
.ml-upload-image-add-loading-text {
|
|
464
|
+
font-size: 24rpx;
|
|
465
|
+
}
|
|
442
466
|
.ml-upload-image-img {
|
|
443
467
|
width: 120rpx;
|
|
444
468
|
height: 120rpx;
|
|
@@ -475,6 +499,9 @@ export default {
|
|
|
475
499
|
border: 1px dashed #c8c8c9;
|
|
476
500
|
border-radius: $ml-border-radius;
|
|
477
501
|
}
|
|
502
|
+
.ml-upload-file-add-icon {
|
|
503
|
+
margin-right: 10rpx;
|
|
504
|
+
}
|
|
478
505
|
.ml-upload-file-del-btn {
|
|
479
506
|
width: 40rpx;
|
|
480
507
|
height: 40rpx;
|