app2.0 上传组件增加名称回显 区分非图片实现下载

Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue

@@ -21,11 +21,14 @@
           <view v-else-if="isDocFile(file.type)" @click="fileClick(index)" class="file-icon solids">
             <l-icon type="text" />
           </view>
-          <view v-else class="file-icon solids"><l-icon type="text" /></view>
+          <view v-else class="file-icon solids" @click="fileClick(index)"><l-icon type="text" /></view>
 
           <view v-if="!readonly" @click.stop="delFile(index)" class="cu-tag bg-red" style="height: 24px; width: 24px;">
             <l-icon type="close" color="white" style="width: 18px; height: 24px; font-size: 24px;" />
           </view>
+		  <view class="fileName">
+			  <text>{{file.name}}</text>
+		  </view>
         </view>
 
         <view v-if="!readonly && value.length < Number(number)" @click="chooseFile" class="solids">
@@ -63,7 +66,10 @@ export default {
       return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'].includes(typeString)
     },
 
-    delFile(index) {
+    async delFile(index) {
+	  if (!(await this.CONFIRM('删除文件', '确定要删除该文件吗？', true))) {
+		return
+	  }
       const newList = JSON.parse(JSON.stringify(this.value))
       newList.splice(index, 1)
       this.$emit('input', newList)
@@ -121,47 +127,52 @@ export default {
     },
 
     async fileClick(index) {
-	  if(typeof this.value[index] == "string"){
-		  uni.previewImage({ urls: this.value.filter(item=>typeof this.value[index] == "string"), current: this.value[index] })
-		  return
-	  }
+	  // if(typeof this.value[index] == "string"){
+		 //  uni.previewImage({ urls: this.value.filter(item=>typeof this.value[index] == "string"), current: this.value[index] })
+		 //  return
+	  // }
       const { path, type, uid, size = 0 } = this.value[index]
-      if (this.isImgFile(type)) {
-        uni.previewImage({ urls: [path], current: path })
-      } else if (this.isDocFile(type)) {
-        // #ifndef H5 || MP-DINGTALK
-        if (size >= 50 * 1024 * 1024) {
-          this.TOAST('小程序端无法下载超过50MB的文件，此文件大小为${size}KB，超过限制')
-          return
-        }
-        // #endif
-
-        // #ifndef MP-DINGTALK
-        const tempFilePath = await this.HTTP_DOWNLOAD(uid)
-        uni.openDocument({ filePath: tempFilePath, fileType: type })
-        // #endif
-
-        // #ifdef MP-DINGTALK
-        this.TOAST('钉钉小程序只支持查看图片文件')
-        // #endif
-      } else {
-        // #ifndef MP-DINGTALK
-        this.TOAST('小程序端只支持打开图片和文档(word、pdf等)文件')
-        // #endif
-
-        // #ifdef MP-DINGTALK
-        this.TOAST('钉钉小程序只支持查看图片文件')
-        // #endif
-
-        // #ifdef APP-VUE
-        const tempFilePath = await this.HTTP_DOWNLOAD(uid)
-        uni.openDocument({ filePath: tempFilePath, fileType: type })
-        // #endif
-
-        // #ifdef H5
-        await this.HTTP_DOWNLOAD(uid)
-        // #endif
-      }
+	  if (this.isImgFile(type)) {
+	    uni.previewImage({ urls: [path], current: path })
+	  }else{
+		uni.openDocument({ filePath: path, fileType: type })
+	  }
+      // if (this.isImgFile(type)) {
+      //   uni.previewImage({ urls: [path], current: path })
+      // } else if (this.isDocFile(type)) {
+      //   // #ifndef H5 || MP-DINGTALK
+      //   if (size >= 50 * 1024 * 1024) {
+      //     this.TOAST('小程序端无法下载超过50MB的文件，此文件大小为${size}KB，超过限制')
+      //     return
+      //   }
+      //   // #endif
+
+      //   // #ifndef MP-DINGTALK
+      //   const tempFilePath = await this.HTTP_DOWNLOAD(uid)
+      //   uni.openDocument({ filePath: tempFilePath, fileType: type })
+      //   // #endif
+
+      //   // #ifdef MP-DINGTALK
+      //   this.TOAST('钉钉小程序只支持查看图片文件')
+      //   // #endif
+      // } else {
+      //   // #ifndef MP-DINGTALK
+      //   this.TOAST('小程序端只支持打开图片和文档(word、pdf等)文件')
+      //   // #endif
+
+      //   // #ifdef MP-DINGTALK
+      //   this.TOAST('钉钉小程序只支持查看图片文件')
+      //   // #endif
+
+      //   // #ifdef APP-VUE
+      //   const tempFilePath = await this.HTTP_DOWNLOAD(uid)
+      //   uni.openDocument({ filePath: tempFilePath, fileType: type })
+      //   // #endif
+
+      //   // #ifdef H5
+      //   await this.HTTP_DOWNLOAD(uid)
+      //   // #endif
+      // }
     }
   }
 }
@@ -172,6 +183,21 @@ export default {
   line-height: 100%;
   position: static;
 }
+.fileName{
+	padding: 2px 2px;
+	margin-bottom: 2px;
+	text-align: center;
+	position: absolute;
+	bottom: 0px;
+	width: 100%;
+	background: rgba(0,0,0,0.2);
+	color: #fff;
+	font-size: 12px;
+	
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
 .mask{
 	position: absolute;
 	top: 0;left: 0;