pref：优化上传图片加载效果

fengtao
1 parent 73114451
Showing 3 changed files with 50 additions and 10 deletions
src/views/system/customize/cpns/AppDraw.vue
src/views/system/customize/cpns/CVIDraw.vue
src/views/system/customize/cpns/EnterpriseInfo.vue
--- a/src/views/system/customize/cpns/AppDraw.vue
View file @cf1a197
+++ b/src/views/system/customize/cpns/AppDraw.vue
View file @cf1a197
@@ -15,7 +15,8 @@
             <img v-if="logoPic" :src="logoPic" />
             <div v-else>
               <div style="margin-top: 1.875rem">
-                <PlusOutlined style="font-size: 2.5rem" />
+                <LoadingOutlined v-if="loading" />
+                <PlusOutlined v-else style="font-size: 2.5rem" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -38,7 +39,8 @@
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <div v-else>
               <div style="margin-top: 1.875rem">
-                <PlusOutlined style="font-size: 2.5rem" />
+                <LoadingOutlined v-if="loading1" />
+                <PlusOutlined v-else style="font-size: 2.5rem" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -93,7 +95,7 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Loading } from '/@/components/Loading/index';
   import { Card, Upload, Input, Modal } from 'ant-design-vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
   import { schemas } from '../config/AppDraw.config';
   import { FileItem, FileInfo } from '../types/index';
   import { logoUpload, bgUpload } from '/@/api/oem/index';
@@ -111,8 +113,11 @@
       Input,
       Modal,
       Authority,
+      LoadingOutlined,
     },
     setup() {
+      const loading = ref(false);
+      const loading1 = ref(false);
       const compState = ref({
         absolute: false,
         loading: false,
@@ -153,11 +158,14 @@
       const logoPic = ref();
       async function customUploadLogoPic({ file }) {
         if (beforeUploadLogoPic(file)) {
+          logoPic.value = '';
+          loading.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await logoUpload(formData);
           if (response.fileStaticUri) {
             logoPic.value = response.fileStaticUri;
+            loading.value = false;
           }
         }
       }
@@ -177,11 +185,14 @@
       const bgPic = ref();
       async function customUploadBgPic({ file }) {
         if (beforeUploadBgPic(file)) {
+          bgPic.value = '';
+          loading1.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await bgUpload(formData);
           if (response.fileStaticUri) {
             bgPic.value = response.fileStaticUri;
+            loading1.value = false;
           }
         }
       }
@@ -202,7 +213,6 @@
         if (beforeUploadHomeSwiper(file)) {
           const formData = new FormData();
           formData.append('file', file);
-
           const response = await bgUpload(formData);
           if (response.fileStaticUri) {
             fileList.value.push({
@@ -294,6 +304,8 @@
         bgPic,
         previewVisible,
         previewImage,
+        loading,
+        loading1,
       };
     },
   });
--- a/src/views/system/customize/cpns/CVIDraw.vue
View file @cf1a197
+++ b/src/views/system/customize/cpns/CVIDraw.vue
View file @cf1a197
@@ -14,7 +14,8 @@
             <img v-if="logoPic" :src="logoPic" />
             <div v-else>
               <div style="margin-top: 1.875rem">
-                <PlusOutlined style="font-size: 2.5rem" />
+                <LoadingOutlined v-if="loading" />
+                <PlusOutlined v-else style="font-size: 2.5rem" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -40,7 +41,8 @@
             </div>
             <div v-else>
               <div style="margin-top: 20px">
-                <PlusOutlined style="font-size: 30px" />
+                <LoadingOutlined v-if="loading1" />
+                <PlusOutlined v-else style="font-size: 30px" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -63,7 +65,8 @@
             <img v-if="bgPic" :src="bgPic" alt="avatar" />
             <div v-else>
               <div style="margin-top: 1.875rem">
-                <PlusOutlined style="font-size: 2.5rem" />
+                <LoadingOutlined v-if="loading2" />
+                <PlusOutlined v-else style="font-size: 2.5rem" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -98,7 +101,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import { logoUpload, iconUpload, bgUpload, getPlatForm, updatePlatForm } from '/@/api/oem/index';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { Authority } from '/@/components/Authority';
@@ -112,8 +115,12 @@
       Input,
       PlusOutlined,
       Authority,
+      LoadingOutlined,
     },
     setup() {
+      const loading = ref(false);
+      const loading1 = ref(false);
+      const loading2= ref(false);
       const compState = ref({
         absolute: false,
         loading: false,
@@ -138,11 +145,14 @@
       // logo图片上传
       async function customUploadLogoPic({ file }) {
         if (beforeUploadLogoPic(file)) {
+          logoPic.value = '';
+          loading.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await logoUpload(formData);
           if (response.fileStaticUri) {
             logoPic.value = response.fileStaticUri;
+            loading.value = false;
           }
         }
       }
@@ -160,11 +170,14 @@
       // Icon上传
       async function customUploadIconPic({ file }) {
         if (beforeUploadIconPic(file)) {
+          iconPic.value = '';
+          loading1.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await iconUpload(formData);
           if (response.fileStaticUri) {
             iconPic.value = response.fileStaticUri;
+            loading1.value = false;
           }
         }
       }
@@ -182,11 +195,14 @@
       // 登录页背景上传
       async function customUploadBgPic({ file }) {
         if (beforeUploadBgPic(file)) {
+          bgPic.value = '';
+          loading2.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await bgUpload(formData);
           if (response.fileStaticUri) {
             bgPic.value = response.fileStaticUri;
+            loading2.value = false;
           }
         }
       }
@@ -250,6 +266,9 @@
         beforeUploadBgPic,
         compState,
         handleUpdateInfo,
+        loading,
+        loading1,
+        loading2,
       };
     },
   });
--- a/src/views/system/customize/cpns/EnterpriseInfo.vue
View file @cf1a197
+++ b/src/views/system/customize/cpns/EnterpriseInfo.vue
View file @cf1a197
@@ -14,7 +14,8 @@
             <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
             <div v-else>
               <div style="margin-top: 1.875rem">
-                <PlusOutlined style="font-size: 2.5rem" />
+                <LoadingOutlined v-if="loading" />
+                <PlusOutlined v-else style="font-size: 2.5rem" />
               </div>
               <div
                 class="ant-upload-text flex"
@@ -47,7 +48,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
   import { qrcodeUpload } from '/@/api/oem/index';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import type { CityItem, Code } from '../types';
@@ -61,8 +62,10 @@
       Upload,
       PlusOutlined,
       Authority,
+      LoadingOutlined,
     },
     setup() {
+      const loading = ref(false);
       const compState = ref({
         absolute: false,
         loading: false,
@@ -98,11 +101,14 @@
       const customUploadqrcodePic = async ({ file }) => {
         clearValidate('qrcode');
         if (beforeUploadqrcodePic(file)) {
+          qrcodePic.value = '';
+          loading.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await qrcodeUpload(formData);
           if (response.fileStaticUri) {
             qrcodePic.value = response.fileStaticUri;
+            loading.value = false;
           }
         }
       };
@@ -132,6 +138,8 @@
           delete newFieldValue.nameCoun;
           delete newFieldValue.nameTown;
+          console.log(newFieldValue.qrCode);
+          console.log(newFieldValue.codeTown);
           // 表单校验
           const values = await validate([
             'name',
@@ -332,6 +340,7 @@
         customUploadqrcodePic,
         beforeUploadqrcodePic,
         registerCustomForm,
+        loading,
       };
     },
   });