🎈 perf: 优化图片上传

build/webpack.dev.conf.js

@@ -82,11 +82,14 @@ module.exports = new Promise((resolve, reject) => {
       // Add FriendlyErrorsPlugin
       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
         compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+          messages: [
+            `Your application is running here: http://localhost:${port}`,
+            `Network: http://${require('ip').address()}:${port}`,
+          ],
         },
         onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
+          ? utils.createNotifierCallback()
+          : undefined
       }))
 
       resolve(devWebpackConfig)

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
 
     // Various Dev Server settings
     // host: '0.0.0.0', // can be overwritten by process.env.HOST
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/components/pageLoading.vue

@@ -0,0 +1,35 @@
+<template>
+  <van-overlay :show="pageLoadingVisible"
+    style="background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;">
+    <van-loading size="48px" vertical type="spinner" color="#fff">{{ laodingText }}</van-loading>
+  </van-overlay>
+</template>
+
+<script>
+import { Overlay, Loading } from 'vant'
+export default {
+  components: {
+    [Overlay.name]: Overlay,
+    [Loading.name]: Loading
+  },
+  data() {
+    return {
+      pageLoadingVisible: false,
+      laodingText: '加载中'
+    }
+  },
+
+  methods: {
+    showPageLoading(laodingText) {
+      this.pageLoadingVisible = true
+      this.laodingText = laodingText || '加载中'
+    },
+
+    cloasePageLoading() {
+      this.pageLoadingVisible = false
+    }
+  },
+}
+</script>
+
+<style scoped></style>

src/config/mixin/searchMixin.js

@@ -5,7 +5,7 @@ import request from './server'
 
 /* eslint-disable */
 export const listSearch = {
-  data () {
+  data() {
     return {
       // 加载中
       loading: false,
@@ -15,23 +15,23 @@ export const listSearch = {
     /*
      * 发送请求
      */
-    sendReq (params, callback) {
+    sendReq(params, callback, errCb) {
       let self = this
       request({
         method: params.method || 'POST',
         url: params.url,
         data: params.data || {},
         params: params.params || {}, // 傻逼玩意，参数全tm的默认隐藏的，老子是没见过哪个傻逼这样去封装请求的，还得老子来改，初代的开发者是脑子有屎吧
-        withCredentials : true,
+        withCredentials: true,
         headers: {
           'Content-Type': params.contentType || 'application/json;charset=utf-8'
         }
       }).then((res) => {
         if (res && res.data) {
           callback && callback(res.data)
-        }
-      }, (error) => {
-        console.log(error)
+        } 
+      }).catch(error => {
+        errCb && typeof errCb === 'function' && errCb(error)
       })
     }
   }

src/views/moblie/mEnterprise.vue

@@ -302,6 +302,8 @@
       <van-datetime-picker @confirm="endTimeShow = false" @cancel="endTimeShow = false" type="time" title="请选择营业结束时间"
         :min-hour="1" :max-hour="24" v-model="personalForm.endtime" />
     </van-popup>
+
+    <PageLoading ref="pageLoadingRef"></PageLoading>
   </div>
 </template>
 <script>
@@ -309,6 +311,7 @@ import { Area, Popup, DatetimePicker, Uploader, Toast, Picker, Cascader, RadioGr
 import api from '@/api'
 import { listSearchMixin } from '@/config/mixin'
 import AreaList from '../../util/area'
+import PageLoading from '../../components/pageLoading.vue'
 export default {
   mixins: [listSearchMixin],
   name: 'mPersonalBusiness',
@@ -323,7 +326,8 @@ export default {
     [RadioGroup.name]: RadioGroup,
     [Radio.name]: Radio,
     [Button.name]: Button,
-    [Loading.name]: Loading
+    [Loading.name]: Loading,
+    PageLoading
   },
   data() {
     return {
@@ -600,8 +604,10 @@ export default {
         contentType: 'multipart/form-data',
         data: formData
       }
+      this.$refs.pageLoadingRef.showPageLoading('上传中...')
       self.sendReq(params, (res) => {
         if (res.code === '200') {
+          this.$refs.pageLoadingRef.cloasePageLoading()
           if (type === 'license') {
             self.personalForm.enterpriseLicense = res.data.url
           } else if (type === 'positive') {
@@ -614,6 +620,8 @@ export default {
         } else {
           Toast.fail(res.message)
         }
+      }, () => {
+        this.$refs.pageLoadingRef.cloasePageLoading()
       })
       // file.status = 'uploading'
       // file.message = '上传中...'

src/views/moblie/mUinitBusiness.vue

@@ -331,6 +331,8 @@
       <van-datetime-picker @confirm="endTimeShow = false" @cancel="endTimeShow = false" type="time" title="请选择营业结束时间"
         :min-hour="1" :max-hour="24" v-model="personalForm.endtime" />
     </van-popup>
+
+    <PageLoading ref="pageLoadingRef"></PageLoading>
   </div>
 </template>
 <script>
@@ -338,6 +340,8 @@ import { Area, Popup, DatetimePicker, Uploader, Toast, Picker, Cascader, RadioGr
 import api from '@/api'
 import { listSearchMixin } from '@/config/mixin'
 import AreaList from '../../util/area'
+import PageLoading from '../../components/pageLoading.vue'
+
 export default {
   mixins: [listSearchMixin],
   name: 'mPersonalBusiness',
@@ -352,7 +356,8 @@ export default {
     [RadioGroup.name]: RadioGroup,
     [Radio.name]: Radio,
     [Button.name]: Button,
-    [Loading.name]: Loading
+    [Loading.name]: Loading,
+    PageLoading
   },
   data() {
     return {
@@ -626,8 +631,11 @@ export default {
         contentType: 'multipart/form-data',
         data: formData
       }
+
+      this.$refs.pageLoadingRef.showPageLoading('上传中...')
       self.sendReq(params, (res) => {
         if (res.code === '200') {
+        this.$refs.pageLoadingRef.cloasePageLoading()
           if (type === 'license') {
             self.personalForm.subjectLicense = res.data.url
           } else if (type === 'positive') {
@@ -642,6 +650,8 @@ export default {
         } else {
           Toast.fail(res.message)
         }
+      }, () => {
+        this.$refs.pageLoadingRef.cloasePageLoading()
       })
       // file.status = 'uploading'
       // file.message = '上传中...'