新需求增加

src/pages/opinion/index.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="content">
-        <view class="title"> 任务主题 </view>
+        <view class="title"> {{ taskTitle }} </view>
         <text class="text-box"> &emsp;&emsp;{{ taskDescribe }} </text>
 
         <!-- 意见收集 -->
@@ -51,7 +51,7 @@
                     </up-textarea>
                 </up-form-item>
 
-                <up-form-item label="附件(最多上传5张图片)">
+                <up-form-item label="附件(最多上传5个附件)">
                     <up-upload
                         name="1"
                         multiple
@@ -110,11 +110,13 @@
 
 <script setup>
 import { submitOptionsApi, getTaskDetailsApi } from '@/services/options.js'
+import fileView from '@/static/file-view.png'
 import { debounce } from 'lodash-es'
 import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 const sendLoading = ref(false)
 const taskDescribe = ref('')
+const taskTitle = ref('')
 
 // 表单数据源
 const opinionModel = ref({
@@ -166,6 +168,7 @@ onLoad(async (option) => {
         if (res.code == 200) {
             // isError.value = false
             taskDescribe.value = res.data.taskDescribe
+            taskTitle.value = res.data.taskTitle
         }
     }
     if (option.taskType && option.taskType == 1) {
@@ -220,9 +223,9 @@ const onSubmitOptions = debounce(() => {
                 if (fileList.value.length > 0) {
                     fileList.value.forEach((f) => {
                         let d = {
-                            file: f.url,
+                            file: f.viewUrl,
                             name: 'file',
-                            uri: f.url,
+                            uri: f.viewUrl,
                         }
                         files.push(d)
                     })
@@ -328,10 +331,29 @@ const afterRead = async (event) => {
     console.log('event', event)
     let lists = [].concat(event.file)
     lists.map((item) => {
-        fileList.value.push({
+        if (isImage(item.file.type)) {
-            ...item,
+            fileList.value.push({
-        })
+                ...item,
+                viewUrl: item.url,
+            })
+        } else {
+            fileList.value.push({
+                ...item,
+                viewUrl: item.url,
+                thumb: fileView,
+                url: fileView,
+            })
+        }
     })
+
+    console.log(fileList.value)
+}
+
+// 判断是否为图片类型
+const isImage = (mimeType) => {
+    // 图片类型的正则表达式
+    const imageRegex = /^image\/(jpeg|png|gif|bmp|webp|svg\+xml|x-icon)$/i
+    return imageRegex.test(mimeType)
 }
 </script>
 
@@ -406,4 +428,33 @@ const afterRead = async (event) => {
         border-radius: 2rpx;
     }
 }
+
+.file-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    background-color: #f8f8f8;
+    border-radius: 4px;
+    margin: 5px;
+
+    .file-icon {
+        margin-bottom: 5px;
+    }
+
+    .file-name {
+        font-size: 12px;
+        color: #333;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .file-size {
+        font-size: 12px;
+        color: #999;
+        margin-top: 4px;
+    }
+}
 </style>