mali-applet-ui 0.2.70 → 0.2.71

package/components/ml-file-upload/file-handle.js

@@ -1,5 +1,4 @@
 function normalizeChooseAndUploadFileRes(res, fileType) {
-	debugger
 	res.tempFiles.forEach((item) => {
 		if (!item.name) {
 			item.name = item.path.substring(item.path.lastIndexOf('/') + 1)
@@ -34,7 +33,7 @@ export function uploadAllFiles(opts) {
 		if (typeof wx !== 'undefined' && typeof wx.chooseMessageFile === 'function') {
 			chooseFile = wx.chooseMessageFile
 		}
-		if (typeof chooseFile == 'function') {
+		if (typeof chooseFile !== 'function') {
 			return reject({})
 		}
 		chooseFile({

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

@@ -1,22 +1,31 @@
 <template>
 	<view class="ml-upload" :class="[className || '']">
+		<!-- 上传图片 -->
 		<view v-if="mediatype === 'image'" class="ml-upload-image-list">
 			<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
-				<image class="ml-upload-image-img" mode="aspectFill" :src="getUrl(item)" @click="previewEvent(item, index)"></image>
-				<view class="ml-upload-image-del-btn">
+				<image class="ml-upload-image-img" mode="aspectFit" :src="getUrl(item)" @click="previewImageEvent(item, index)"></image>
+				<view class="ml-upload-image-del-btn" @click="removeEvent(item)">
 					<ml-icon name="close" />
 				</view>
 			</view>
 			<view class="ml-upload-image-add">
-				<view class="ml-upload-image-add-btn" @tap="chooseImage">
+				<view class="ml-upload-image-add-btn" @tap="chooseEvent">
 					<view class="ml-upload-image-add-icon">
 						<ml-icon name="add" />
 					</view>
 				</view>
 			</view>
 		</view>
-
+		<!-- 上传文件 -->
 		<view v-else class="ml-upload-file-list">
+			<view 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" />
+					</text>
+					<text>添加文件</text>
+				</view>
+			</view>
 			<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
 				<view class="ml-upload-file-left">
 					<view class="ml-upload-file-icon">
@@ -25,25 +34,17 @@
 				</view>
 				<view class="ml-upload-file-info">
 					<view class="ml-upload-file-name">{{ item[nameField] }}</view>
-					<view>
-						<ml-button status="primary" type="text">预览</ml-button>
-						<ml-button status="primary" type="text">下载</ml-button>
+					<view class="ml-upload-file-desc">
+						<ml-button status="primary" type="text" @click="previewDocs(item)">预览</ml-button>
+						<ml-button status="primary" type="text" @click="downloadEvent(item)">下载</ml-button>
 					</view>
 				</view>
 				<view class="ml-upload-file-right">
-					<view class="ml-upload-file-del-btn">
+					<view class="ml-upload-file-del-btn" @click="removeEvent(item)">
 						<ml-icon name="close" />
 					</view>
 				</view>
 			</view>
-			<view class="ml-upload-file-add">
-				<view class="ml-upload-file-add-btn" @tap="chooseFile">
-					<view class="ml-upload-file-add-icon">
-						<ml-icon name="add" />
-					</view>
-					<view class="ml-upload-file-add-text">添加附件</view>
-				</view>
-			</view>
 		</view>
 	</view>
 </template>
@@ -51,9 +52,11 @@
 <script>
 import XEUtils from 'xe-utils'
 import globalStore from '../../config/store'
+import mlButton from '../ml-button/ml-button.vue'
 import { uploadAllFiles, uploadImageFiles } from './file-handle'
 	
 export default {
+  components: { mlButton },
   name: 'MlUpload',
 	props: {
 		value: {
@@ -106,16 +109,7 @@ export default {
 	data () {
 		return {
 			fileList: [],
-			selectUniFileList: [],
-			imageStyles: {
-				// "height": 60,	// 边框高度
-				// "width": 60,	// 边框宽度
-				// "border":{ // 如果为 Boolean 值，可以控制边框显示与否
-				// 	"color":"transparent",		// 边框颜色
-				// 	"width":"1px",		// 边框宽度
-				// 	"style":"solid", 	// 边框样式
-				// }
-			},
+			docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
 			imgTypes: ['png', 'jpg']
 		}
 	},
@@ -143,7 +137,7 @@ export default {
     }
 	},
 	watch: {
-		value (val) {
+		value () {
 			if (!this.isUpdate) {
 				this.isUpdate = true
 				this.loadList()
@@ -175,21 +169,6 @@ export default {
 						tempPath: this.getUrl(obj)
 					}
 				})
-				this.selectUniFileList = this.urlList.map(url => {
-          const name = this.getUrlName(url)
-					const extname = this.getSuffix(name)
-					const obj = {
-						[this.nameField]: name,
-						[this.typeField]: extname,
-						[this.urlField]: url
-					}
-					return {
-						...obj,
-						name: name,
-						extname: extname,
-						url: this.getUrl(obj)
-					}
-				})
 				this.isUpdate = true
 				this.$emit('input', this.fileList)
 			} else {
@@ -197,14 +176,6 @@ export default {
 					item.tempPath = this.getUrl(item)
 					return item
 				})
-				this.selectUniFileList = this.value.map(item => {
-					return {
-						...item,
-						name: item[this.nameField],
-						extname: item[this.typeField],
-						url: this.getUrl(item)
-					}
-				})
 			}
 		},
 		updateModel () {
@@ -213,61 +184,8 @@ export default {
 		  this.$emit('input', this.fileList)
 			this.$emit('change', { value: this.simpleValue ? urlList : this.fileList })
 		},
-		async selectFile (e) {
-			const { tempFiles } = e
-			if (this.$loading) {
-				this.$loading.show('上传中')
-			}
-			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
-			Promise.all(
-				tempFiles.map(file => {
-      		const fileSuffix = this.getSuffix(file.name)
-					if (uploadMethod) {
-						return Promise.resolve(
-							uploadMethod.call(this.currVM, {
-								file,
-								params: this.params
-							})
-						).then(res => {
-							const item = {
-								...res,
-								[this.nameField]: res[this.nameField] || file.name,
-								[this.typeField]: res[this.typeField] || fileSuffix,
-								tempPath: file.path
-							}
-							this.selectUniFileList.push(file)
-							this.fileList.push(item)
-							this.isUpdate = true
-							this.updateModel()
-						})
-					} else {
-						const item = {
-							[this.nameField]: file.name,
-							[this.typeField]: file.extname,
-							[this.urlField]: file.path,
-							tempPath: file.path
-						}
-						this.selectUniFileList.push(file)
-						this.fileList.push(item)
-						this.isUpdate = true
-						this.updateModel()
-					}
-				})
-			).then(res => {
-				if (this.$loading) {
-					this.$loading.hide()
-				}
-			}).catch((e) => {
-				if (this.$loading) {
-					this.$loading.hide()
-				}
-			})
-		},
-		removeEvent (e) {
-			const { tempFilePath } = e
-			const item = this.fileList.find(item => item.tempPath === tempFilePath)
-			this.selectUniFileList = this.selectUniFileList.filter(item => item.url !== tempFilePath)
-			this.fileList = this.fileList.filter(item => item.tempPath !== tempFilePath)
+		removeEvent (item) {
+			this.fileList = this.fileList.filter(obj => obj.tempPath !== item.tempPath)
 			const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
 			if (!item) {
 				console.error('删除出错！！！')
@@ -305,7 +223,7 @@ export default {
 		  }
 		  return suffix
 		},
-		previewEvent (item, index) {
+		previewImageEvent (item, index) {
 			if (this.previewStatus) {
 				return
 			}
@@ -351,40 +269,54 @@ export default {
 				}
 			})
 		},
+		previewDocs (item) {
+			// 仅支持文档和图片
+			const supportDocs = this.docsTypes.includes(item[this.typeField])
+			const supportImg = this.imgTypes.includes(item[this.typeField])
+			if (supportDocs || supportImg) {
+				uni.downloadFile({
+					url: this.getUrl(item), 
+					success: (downRes) => {
+						if (supportDocs) {
+							uni.openDocument({
+								filePath: downRes.tempFilePath,
+								showMenu: true,
+								success () {},
+								fail () {
+									uni.showModal({
+										content: '打开失败',
+										showCancel: false
+									})
+								}
+							})
+						} else if (supportImg) {
+							this.previewImg(item)
+						}
+					},
+					fail () {
+						uni.showModal({
+							content: '下载失败',
+							showCancel: false
+						})
+					}
+				})
+			}
+		},
 		downloadEvent (item) {
 			uni.downloadFile({
 				url: this.getUrl(item), 
 				success: (downRes) => {
-					// 仅支持类型
-					if (['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(item[this.typeField])) {
-						uni.openDocument({
-							filePath: downRes.tempFilePath,
-							showMenu: true,
-							success (saveRes) {
-							},
-							fail () {
-								uni.showModal({
-									content: '打开失败',
-									showCancel: false
-								});
-							}
-						})
-					} else if (['png', 'jpg'].includes(item[this.typeField])) {
-						this.previewImg(item)
-					} else {
-						uni.saveFile({
-							tempFilePath: downRes.tempFilePath,
-							success: function(res) {
-								uni.showToast({
-									icon: 'none',
-									mask: true,
-									title: '文件已保存：' + res.savedFilePath, //保存路径
-									duration: 3000,
-								})
-							}
-						})
-
-					}
+					uni.saveFile({
+						tempFilePath: downRes.tempFilePath,
+						success: function(res) {
+							uni.showToast({
+								icon: 'none',
+								mask: true,
+								title: '文件已保存：' + res.savedFilePath, //保存路径
+								duration: 3000,
+							})
+						}
+					})
 				},
 				fail () {
 					uni.showModal({
@@ -394,52 +326,14 @@ export default {
 				}
 			})
 		},
-		chooseImage () {
-			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
-			uploadImageFiles({}).then(res => {
-				const { tempFiles } = res
-				debugger
-				Promise.all(
-					tempFiles.map(file => {
-						const fileSuffix = this.getSuffix(file.name)
-						if (uploadMethod) {
-							return Promise.resolve(
-								uploadMethod.call(this.currVM, {
-									file,
-									params: this.params
-								})
-							).then(res => {
-								return {
-									...res,
-									[this.nameField]: res[this.nameField] || file.name,
-									[this.typeField]: res[this.typeField] || fileSuffix,
-									tempPath: file.path
-								}
-							})
-						}
-						return {
-							[this.nameField]: file.name,
-							[this.typeField]: file.extname,
-							[this.urlField]: file.path,
-							tempPath: file.path
-						}
-					})
-				).then(list => {
-					this.selectUniFileList.push(...list)
-					this.fileList.push(...list)
-					this.isUpdate = true
-					this.updateModel()
-					debugger
-				}).catch((e) => {
-					debugger
-				})
-			})
-		},
-		chooseFile () {
+		chooseEvent () {
+			let chooseMethod = uploadAllFiles
+			if (this.mediatype === 'image') {
+				chooseMethod = uploadImageFiles
+			}
 			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
-			uploadAllFiles({}).then(res => {
+			chooseMethod({}).then(res => {
 				const { tempFiles } = res
-				debugger
 				Promise.all(
 					tempFiles.map(file => {
 						const fileSuffix = this.getSuffix(file.name)
@@ -466,13 +360,11 @@ export default {
 						}
 					})
 				).then(list => {
-					this.selectUniFileList.push(...list)
 					this.fileList.push(...list)
 					this.isUpdate = true
 					this.updateModel()
-					debugger
 				}).catch((e) => {
-					debugger
+					console.log(e)
 				})
 			})
 		}
@@ -506,6 +398,7 @@ export default {
 		width: 40rpx;
 		height: 40rpx;
 		line-height: 40rpx;
+		font-size: 28rpx;
 		text-align: center;
 		border-radius: 50%;
 		color: #ffffff;
@@ -528,10 +421,18 @@ export default {
 	}
 }
 .ml-upload-file-list {
+	.ml-upload-file-add,
+	.ml-upload-file-item {
+		margin: 20rpx 0;
+	}
 	.ml-upload-file-item {
 		display: flex;
 		flex-direction: row;
 	}
+	.ml-upload-file-item {
+		padding-bottom: 10rpx;
+		border-bottom: 1px solid #f1f1f1;
+	}
 	.ml-upload-file-left,
 	.ml-upload-file-right {
 		display: flex;
@@ -540,11 +441,29 @@ export default {
 		justify-content: center;
 		flex-shrink: 0;
 	}
+	.ml-upload-file-add-btn {
+		height: 70rpx;
+		line-height: 70rpx;
+		text-align: center;
+		color: #8a8686;
+		border: 1px solid #c8c8c9;
+		border-radius: $ml-border-radius;
+	}
+	.ml-upload-file-del-btn {
+		width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		text-align: center;
+		font-size: 28rpx;
+		color: #ffffff;
+		background: #c8c8c9;
+		border-radius: 50%;
+	}
 	.ml-upload-file-left {
 		width: 80rpx;
 	}
 	.ml-upload-file-icon {
-		font-size: 50rpx;
+		font-size: 60rpx;
 	}
 	.ml-upload-file-info {
 		flex-grow: 1;
@@ -557,9 +476,5 @@ export default {
 	.ml-upload-file-right {
 		width: 60rpx;
 	}
-	.ml-upload-file-add-btn {
-		display: flex;
-		flex-direction: row;
-	}
 }
 </style>

package/package.json

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