支持拖拽上传文件

layouts/components/NavBar.vue

@@ -76,7 +76,7 @@
           <el-popover
             ref="popover"
             v-model="popover"
-            placement="bottom"
+            placement="bottom-end"
             trigger="hover"
             :close-delay="3000"
             :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
@@ -88,10 +88,12 @@
                     <img v-if="userInfo?.subscriberType === 1" class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
                     <img v-else class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
                   </a>
-                  <div class="pl-20px">
-                    <p class="mt-15px mb-10px text-[#333]">{{userInfo?.name}}</p>
-                    <p class="text-[#999]">{{userInfo?.email || userInfo?.phone}}</p>
-                  </div>
+                  <a href="/members/me/expenses">
+                    <div class="pl-20px">
+                      <p class="mt-15px mb-10px text-[#333]">{{userInfo?.name}}</p>
+                      <p class="text-[#999]">{{userInfo?.email || userInfo?.phone}}</p>
+                    </div>
+                  </a>
                 </div>
                 <div class="flex py-14px mt-20px justify-between">
                   <div>

pages/converter.vue

@@ -43,13 +43,16 @@
               <div>
                 <form enctype="multipart/form-data">
                   <input type="hidden" name="folder" value="converter/input"/>
+
+                  <!-- 转档框 -->
                   <div class="file-input theme-explorer file-input-ajax-new h-380px mt-17px py-0 px-[10%]">
                     <div class="file-preview rounded-5px w-[100%] h-[100%]">
-                      <div class="file-drop-zone border border-dashed border-[#d1d1d1] rounded-4px h-[100%] text-center align-middle overflow-y-auto">
-                        <div v-show="fileList.length <= 0" class="file-drop-zone-title text-[#999] text-16px pt-222px cursor-default">
+                      <div  ref="drag" @drop="handleEvent" @dragleave="handleEvent" @dragenter="handleEvent" @dragover="handleEvent"
+                      class="file-drop-zone border border-dashed border-[#d1d1d1] rounded-4px h-[100%] text-center align-middle overflow-y-auto">
+                        <div v-show="fileList.length <= 0" class="file-drop-zone-title text-[#999] text-16px leading-[1.428571429] pt-222px cursor-default">
                           <div></div>
                           点击从电脑上传文件或把文件拖到这里
-                          <p class="text-14px">（支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换）</p>
+                          <p class="text-14px leading-[1.428571429]">（支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换）</p>
                         </div>
                         <table id="table-fileinput" class="table table-hover w-[100%] max-w-[100%]">
                           <thead v-show="fileList.length > 0">
@@ -395,18 +398,33 @@ export default {
             this.$store.commit("OPEN_LOGIN", true);
             this.$store.commit("SET_INTERFACE", type);
         },
+        //拖拽事件
+        handleEvent(event) {
+          // 阻止事件的默认行为
+          event.preventDefault();
+          if (event.type === 'drop') {
+            // 文件进入并松开鼠标,文件边框恢复正常
+            this.$refs.drag.style.background = '#fff'
+            this.$refs.drag.style.border = "thin dashed #d1d1d1"
+            this.addFile(event.dataTransfer.files)
+          } else if (event.type === 'dragleave') {
+            // 离开时边框恢复
+            this.$refs.drag.style.background = '#fff'
+            this.$refs.drag.style.border = "thin dashed #d1d1d1"
+          } else {
+            // 进入边框变为红色
+            this.$refs.drag.style.background = '#f0f0f0'
+            this.$refs.drag.style.border = "thick dashed #d1d1d1"            
+          }
+        },
         // 添加文件
         async addFile(event) {
-          // console.log(event)
-            // 阻止发生默认行为
-            event.preventDefault();
-            document.addEventListener('drop', function (event) {
-              event.preventDefault()
-            }, false)
-            document.addEventListener('dragover', function (event) {
-              event.preventDefault()
-            }, false)
-            const array = event.target.files;
+            let array = {} 
+            if(event.target){
+              array = event.target.files
+            }else{
+              array = event
+            }
             const defaultPrice = await this.getFilePrice("pdf", "docx");
             for (let i = 0; i < array.length; i++) {
                 const fileObj = {
@@ -420,8 +438,30 @@ export default {
                 this.fileList.push(fileObj);
                 this.uniqFileArr.push(array[i]);
             }
-            // console.log('fileList:', this.fileList)
-            // console.log('uniqFileArr:', this.uniqFileArr)
+            // this.fileList,this.uniqFileArr数组去重
+            let newArr= [];
+            let arrId = [];
+            for(var item of this.fileList){
+              if(arrId.indexOf(item['name']) == -1){
+                arrId.push(item['name']);
+                newArr.push(item);
+              }
+            }
+            this.fileList=newArr
+            newArr=[]
+            arrId=[]
+            for(var item of this.uniqFileArr){
+              if(arrId.indexOf(item['name']) == -1){
+                arrId.push(item['name']);
+                newArr.push(item);
+              }
+            }
+            this.uniqFileArr=newArr
+
+            
+            if(event.target){
+              event.target.value=''
+            }
         },
         // 查询文件所需券数
         async getFilePrice(input, output) {
@@ -478,8 +518,9 @@ export default {
             this.fileList = [];
             this.uniqFileArr = [];
             this.changeFileStatus("all", 5);
-            this.changeSucesssFileList = [];
+            this.changeSucesssFileList = [];        
             localStorage.removeItem("file");
+            this.showFileBig = false
         },
         // 转档第一步，根据文件列表创建任务和插入文件信息
         createFileMission() {