加载蒙版

.env.development

 ENV = 'development'
 
 # 接口地址
-VUE_APP_BASE_API  = 'http://192.168.3.23:7001'
-VUE_APP_WS_API = 'ws://192.168.3.23:7001'
+#VUE_APP_BASE_API  = 'http://192.168.3.23:7001'
+#VUE_APP_WS_API = 'ws://192.168.3.23:7001'
 
-#VUE_APP_BASE_API  = 'http://60.217.78.224:7001'
-#VUE_APP_WS_API = 'ws://60.217.78.224:7001'
+VUE_APP_BASE_API  = 'http://60.217.78.224:7001'
+VUE_APP_WS_API = 'ws://60.217.78.224:7001'
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -59,6 +59,7 @@
     "vue-cropper": "0.4.9",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-image-crop-upload": "^2.5.0",
+    "vue-loading-overlay": "^3.0.1",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/components/Loading/index.js

+import Vue from 'vue'
+import loadingCom from './index.vue'
+
+const LoadingConstructor = Vue.extend(loadingCom)
+
+const instance = new LoadingConstructor({
+  el: document.createElement('div')
+})
+
+instance.show = false
+const loading = {
+  show() {
+    instance.show = true
+    document.body.appendChild(instance.$el)
+  },
+  hide() {
+    instance.show = false
+  }
+}
+
+export default {
+  install() {
+    if (!Vue.$showLoading) {
+      Vue.$showLoading = loading
+    }
+    Vue.mixin({
+      created() {
+        this.$showLoading = Vue.$showLoading
+      }
+    })
+  }
+}

src/components/Loading/index.vue

+<template>
+  <div v-show="show" class="mask">
+    <div class="loader-rainbow">
+      <div class="loader-inner">
+        <div class="loader-line-wrap">
+          <div class="loader-line" />
+        </div>
+        <div class="loader-line-wrap">
+          <div class="loader-line" />
+        </div>
+        <div class="loader-line-wrap">
+          <div class="loader-line" />
+        </div>
+        <div class="loader-line-wrap">
+          <div class="loader-line" />
+        </div>
+        <div class="loader-line-wrap">
+          <div class="loader-line" />
+        </div>
+      </div>
+      <div style="font-size: 32px;margin-top: 150px">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: {
+    show: Boolean
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .5);
+  z-index: 1000;
+}
+.loader-rainbow {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+}
+.loader-inner {
+  bottom: 0;
+  height: 100px;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100px;
+}
+
+.loader-line-wrap {
+  animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
+  box-sizing: border-box;
+  height: 50px;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  transform-origin: 50% 100%;
+  width: 100px;
+}
+.loader-line {
+  border: 4px solid transparent;
+  border-radius: 100%;
+  box-sizing: border-box;
+  height: 100px;
+  left: 0;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100px;
+}
+.loader-line-wrap:nth-child(1) {
+  animation-delay: -50ms;
+}
+.loader-line-wrap:nth-child(2) {
+  animation-delay: -100ms;
+}
+.loader-line-wrap:nth-child(3) {
+  animation-delay: -150ms;
+}
+.loader-line-wrap:nth-child(4) {
+  animation-delay: -200ms;
+}
+.loader-line-wrap:nth-child(5) {
+  animation-delay: -250ms;
+}
+
+.loader-line-wrap:nth-child(1) .loader-line {
+  border-color: hsl(0, 80%, 60%);
+  height: 90px;
+  width: 90px;
+  top: 7px;
+}
+.loader-line-wrap:nth-child(2) .loader-line {
+  border-color: hsl(60, 80%, 60%);
+  height: 76px;
+  width: 76px;
+  top: 14px;
+}
+.loader-line-wrap:nth-child(3) .loader-line {
+  border-color: hsl(120, 80%, 60%);
+  height: 62px;
+  width: 62px;
+  top: 21px;
+}
+.loader-line-wrap:nth-child(4) .loader-line {
+  border-color: hsl(180, 80%, 60%);
+  height: 48px;
+  width: 48px;
+  top: 28px;
+}
+.loader-line-wrap:nth-child(5) .loader-line {
+  border-color: hsl(240, 80%, 60%);
+  height: 34px;
+  width: 34px;
+  top: 35px;
+}
+
+@keyframes spin {
+  0%,
+  15% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/main.js

@@ -27,6 +27,10 @@ import router from './router/routers'
 import './assets/icons' // icon
 import './router/index' // permission control
 
+// loading
+import loading from '@/components/Loading/index.js'
+
+Vue.use(loading)
 Vue.use(checkPer)
 Vue.use(permission)
 Vue.use(dict)

src/views/homepage/product/details.vue

@@ -10,7 +10,8 @@
       </div>
     </div>
     <div class="content-box">
-      <div style="width: 88%;padding-left: 9%;">
+      <div v-show="loading" style="width: 88%;height:66vh;padding-left: 9%;" />
+      <div v-show="!loading" style="width: 88%;padding-left: 9%;">
         <div class="showcase">
           <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
@@ -156,6 +157,7 @@ export default {
     return {
       defaultImgProduct: default_product,
       imgSrcStart: process.env.VUE_APP_BASE_API,
+      loading: false,
       carouseIndex: 0,
       projectObj: {
         productId: null,
@@ -195,6 +197,8 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
+      this.loading = true
+      this.$showLoading.show()
       HttpReq.webClientApi.productDetails({
         productId: this.$route.params.id
       }).then((res) => {
@@ -206,6 +210,8 @@ export default {
           this.projectObj.productFeatureList = this.projectObj.productFeature.split(';')
         }
         document.title = this.projectObj.productName
+        this.loading = false
+        this.$showLoading.hide()
       })
     })
   },
@@ -242,6 +248,7 @@ export default {
   background-color: #1961c5;
   opacity: 0.2;
 }
+
 .touch {
   cursor:pointer;
 }
@@ -592,3 +599,4 @@ export default {
   }
 }
 </style>
+