优化loading

Author: konglingwen94

src/components/Loading/Loading.vue

@@ -72,7 +72,7 @@ export default {
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 1);
-  z-index: 1000;
+  z-index: 100;
   &-fullscreen {
     position: fixed !important;
   }

src/components/Loading/main.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import Loading from "./Loading";
 
 const LoadingCtor = Vue.extend(Loading);
-const fullscreenLoading = new LoadingCtor();
+// const fullscreenLoading = new LoadingCtor();
 
 LoadingCtor.install = (Vue) => {
   Vue.directive("loading", {

src/components/header.vue

@@ -25,8 +25,7 @@
       <li class="navbar-item">
         <a href="https://job.bytedance.com/campus/" target="_blank">校园招聘</a>
       </li>
-    </ul>
-    |
+    </ul>|
     <div class="user">
       <div class="login" v-if="!state.isLogin">
         <router-link to="/user">
@@ -56,48 +55,48 @@ import store from "@/store";
 export default {
   name: "Header",
   data: () => ({
-    state: store.state,
+    state: store.state
   }),
   created() {
     store
       .requestLoginStatus()
-      .then((isLogin) => {
+      .then(isLogin => {
         if (!isLogin) {
           store.expireLogin();
         } else if (isLogin && !this.state.userInfo.email) {
           console.log(this.state.userInfo.email);
           store
             .requestUserInfo()
-            .then((res) => {})
-            .catch((err) => {});
+            .then(res => {})
+            .catch(err => {});
         }
       })
-      .catch((err) => {
+      .catch(err => {
         store.expireLogin();
       });
   },
   props: {
     fixedToTop: {
       type: Boolean,
-      default: false,
+      default: false
     },
     themeColor: {
       type: String,
-      default: "main-color",
-    },
+      default: "main-color"
+    }
   },
   methods: {
     handleLogout() {
       store
         .requestLogout()
-        .then((res) => {
-          this.$router.push('/')
+        .then(res => {
+          this.$router.push("/");
         })
-        .catch((err) => {
-          throw err
+        .catch(err => {
+          throw err;
         });
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -108,9 +107,11 @@ export default {
   height: 60px;
   align-items: center;
   padding: 10px 100px;
+  position: relative;
+  z-index: 100000;
   &.fixedToTop {
     position: fixed;
-    z-index: 100;
+     
     width: 100%;
   }
   &.main-color {
@@ -187,12 +188,12 @@ export default {
   .dropdown-menu {
     position: relative;
     z-index: 1000;
-    &__email{
-      line-height:2;
-      cursor:pointer;
+    &__email {
+      line-height: 2;
+      cursor: pointer;
     }
     &__wrapper {
-    // padding-top:10px;
+      // padding-top:10px;
       position: absolute;
       display: none;
       right: 0;

src/store/index.js

@@ -19,7 +19,7 @@ window.addEventListener("load", () => {
   state.userInfo = account.userInfo;
 });
 
-const state = Vue.observable({
+export const state = Vue.observable({
   isLogin: false,
   userInfo: {},
 });

src/views/JobDetail.vue

@@ -15,33 +15,37 @@
       <pre class="textContent">{{ jobDetail.requirement }}</pre>
     </div>
     <div class="job-detail-button job-detail-block">
-      <bytedance-button size="large">投递</bytedance-button>
+      <bytedance-button @click="delivery" size="large">投递</bytedance-button>
     </div>
   </div>
 </template>
 <script>
+import { state } from "@/store";
 export default {
   name: "job-detail",
   data() {
     return { jobDetail: {} };
   },
-  beforeRouteEnter(to, from, next) {
-    console.log(to, from, next);
-    if(from.name==='jobs'){
-      next()
-    }else{
-      
+
+  methods: {
+    delivery() {
+      if (!state.isLogin) {
+        this.$router.push("/user");
+      } else {
+        this.$message.warning("功能开发中...");
+      }
     }
-    next()
   },
   created() {
+    let loading = this.$loading({ position: { top: 60 } });
     const { id } = this.$route.params;
     this.request
       .get(`/jobs/${id}`)
       .then(res => {
         this.jobDetail = res.job_post_detail;
+        loading.close();
       })
-      .catch(console.error);
+      .catch(loading.close);
   }
 };
 </script>

src/views/Jobs.vue

@@ -95,7 +95,7 @@ export default {
     const dataRequest = this.fetchList();
 
     this.loadingIns = this.$loading({
-      position: { top: 60 },
+      // position: { top: 60 },
       background: "#fff"
     });
     Promise.all([jobConfigRequest, dataRequest]).then(() => {
@@ -188,7 +188,7 @@ export default {
     box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
     top: 0;
     padding: 20px 130px;
-
+    z-index: 1000;
     background-color: #fff;
     transform: translateY(0);
   }

src/views/Resume.vue

@@ -387,7 +387,7 @@ export default {
     }
   },
   created() {
-    const loading = this.$loading({ position: { top: 60 } });
+    const loading = this.$loading();
     fetchResume().then(res => {
       this.resumeDetail = res.data.resume_detail;
       loading.close();

src/views/ResumeEditor.vue

@@ -24,6 +24,7 @@
                   :on-success="handleResumeUploadSuccess"
                   :on-change="handleResumeUploadChange"
                   :on-progress="handleResumeUploadProgress"
+                  :on-error="handleResumeUploadError"
                 >
                   <div class="uploadFile__resume">
                     <div class="beforeUpload" v-if="!uploadData.id">
@@ -695,7 +696,7 @@
       class="resumeEditor-footerAction"
     >
       <el-button round @click="$router.push('/resume')">取消</el-button>
-      <el-button round size="medium" @click="submit" type="primary">保存</el-button>
+      <el-button round :loading="submitLoading" size="medium" @click="submit" type="primary">保存</el-button>
     </div>
   </div>
 </template>
@@ -715,6 +716,7 @@ let footerActionPosition = null;
 export default {
   data() {
     return {
+      submitLoading: false,
       uploadData: {},
       resumeUploadUpdateHintVisible: false,
       shouldEvaluate: true,
@@ -1024,6 +1026,14 @@ export default {
         return true;
       });
     },
+    handleResumeUploadError(err) {
+      this.$message({
+        message: err.message,
+        dangerouslyUseHTMLString: true,
+        type: "error"
+        // duration: 0
+      });
+    },
     handleResumeUploadProgress(progressEvent) {
       this.$refs.resumeUploadProgress.percentage = progressEvent.percent;
     },
@@ -1103,7 +1113,7 @@ export default {
       }
 
       const payload = this.transformResumePayload(this.resume);
-
+      this.submitLoading = true;
       fetchSaveResume(payload.id, {
         resume: payload,
 
@@ -1112,8 +1122,11 @@ export default {
         .then(res => {
           this.$message.success("简历保存成功");
           this.$router.push("/resume");
+          this.submitLoading = false;
         })
-        .catch(err => {});
+        .catch(err => {
+          this.submitLoading = false;
+        });
     },
 
     transformResumePayload(data) {