mali-applet-ui 0.2.76 → 0.2.78

package/components/ml-upload/ml-upload.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-upload" :class="[className || '']">
+	<view class="ml-upload" :class="[className || '', {'is-loading': loading}]">
 		<!-- 上传图片 -->
 		<view v-if="mediatype === 'image'" class="ml-upload-image-list">
 			<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
@@ -8,22 +8,26 @@
 					<ml-icon name="close" />
 				</view>
 			</view>
-			<view v-if="!isFromReadonly" class="ml-upload-image-add">
+			<view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-image-add">
 				<view class="ml-upload-image-add-btn" @tap="chooseEvent">
 					<view class="ml-upload-image-add-icon">
-						<ml-icon name="add" />
+						<ml-icon v-if="loading" name="loading" roll />
+						<ml-icon v-else name="add" />
+						<view v-if="loading" class="ml-upload-image-add-loading-text">上传中...</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		<!-- 上传文件 -->
 		<view v-else class="ml-upload-file-list">
-			<view v-if="!isFromReadonly" class="ml-upload-file-add">
+			<view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-file-add">
 				<view class="ml-upload-file-add-btn" @tap="chooseEvent">
 					<text class="ml-upload-file-add-icon">
-						<ml-icon name="add" />
+						<ml-icon v-if="loading" name="loading" roll />
+						<ml-icon v-else name="add" />
 					</text>
-					<text>添加文件</text>
+					<text v-if="loading">上传中...</text>
+					<text v-else>添加文件</text>
 				</view>
 			</view>
 			<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
@@ -41,7 +45,7 @@
 				</view>
 				<view v-if="!isFromReadonly" class="ml-upload-file-right">
 					<view class="ml-upload-file-del-btn" @click="removeEvent(item)">
-						<ml-icon name="close" />
+          	<ml-icon name="close" />
 					</view>
 				</view>
 			</view>
@@ -53,7 +57,7 @@
 import XEUtils from 'xe-utils'
 import globalStore from '../../config/store'
 import { uploadAllFiles, uploadImageFiles } from './file-handle'
-	
+
 export default {
   name: 'MlUpload',
 	props: {
@@ -106,6 +110,7 @@ export default {
   },
 	data () {
 		return {
+			loading: false,
 			fileList: [],
 			docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
 			imgTypes: ['png', 'jpg']
@@ -286,6 +291,9 @@ export default {
 							itemList: ['保存图片']
 						}
 					})
+				},
+				fail (e) {
+					console.log(e)
 				}
 			})
 		},
@@ -333,6 +341,9 @@ export default {
 								title: '文件已保存：' + res.savedFilePath, //保存路径
 								duration: 3000,
 							})
+						},
+						fail (e) {
+							console.log(e)
 						}
 					})
 				},
@@ -340,20 +351,24 @@ export default {
 					uni.showModal({
 						content: '下载失败',
 						showCancel: false
-					});
+					})
 				}
 			})
 		},
 		chooseEvent () {
+			if (this.loading) {
+				return
+			}
 			let chooseMethod = uploadAllFiles
 			if (this.mediatype === 'image') {
 				chooseMethod = uploadImageFiles
 			}
 			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
 			chooseMethod({
-				count: this.limit
+				count: this.limit - this.fileList.length
 			}).then(res => {
 				const { tempFiles } = res
+				this.loading = true
 				Promise.all(
 					tempFiles.map(file => {
 						const fileSuffix = this.getSuffix(file.name)
@@ -383,9 +398,13 @@ export default {
 					this.fileList.push(...list)
 					this.isUpdate = true
 					this.updateModel()
+					this.loading = false
 				}).catch((e) => {
 					console.log(e)
+					this.loading = false
 				})
+			}).catch(e => {
+				console.log(e)
 			})
 		}
 	}
@@ -427,12 +446,23 @@ export default {
 	.ml-upload-image-add-btn {
 		width: 120rpx;
 		height: 120rpx;
-		line-height: 120rpx;
 		font-size: 60rpx;
 		color: #c8c8c9;
 		border: 1px dashed #c8c8c9;
 		border-radius: $ml-border-radius;
 	}
+	.ml-upload-image-add-icon {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+	.ml-upload-image-add-loading-text {
+		font-size: 24rpx;
+	}
 	.ml-upload-image-img {
 		width: 120rpx;
 		height: 120rpx;
@@ -469,6 +499,9 @@ export default {
 		border: 1px dashed #c8c8c9;
 		border-radius: $ml-border-radius;
 	}
+	.ml-upload-file-add-icon {
+		margin-right: 10rpx;
+	}
 	.ml-upload-file-del-btn {
 		width: 40rpx;
 		height: 40rpx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.2.76",
+  "version": "0.2.78",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"