［修改］老师学生课程、题目、题目详情、成绩页面loading

src/views/student/Home/index.vue

@@ -15,7 +15,15 @@
     </section>
     <div class="container">
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in courses" class="column is-4-desktop">
+        <div v-if="isStudentCourseLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div
+          v-else
+          :key="item.id"
+          v-for="item in courses"
+          class="column is-4-desktop"
+        >
           <router-link :to="`/course-student/${item.id}/dashboard`">
             <card hoverable>{{ item.name }}</card>
           </router-link>
@@ -95,7 +103,8 @@ export default {
       coursenum: "",
       submitting: false,
       isServerError: false,
-      errorMassage: "服务器错误,请稍后重试"
+      errorMassage: "服务器错误,请稍后重试",
+      isStudentCourseLoading: true
     };
   },
   mounted() {
@@ -103,7 +112,10 @@ export default {
   },
   methods: {
     getCourses() {
-      getStudentCourses().then(value => (this.courses = value.data));
+      getStudentCourses().then(value => {
+        this.courses = value.data;
+        this.isStudentCourseLoading = false;
+      });
     },
     //加入课程
     joinSubject() {

src/views/teacher/Home/index.vue

@@ -15,7 +15,10 @@
     </section>
     <div class="container">
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in courses" class="column is-4">
+        <div v-if="isTeacherCourseLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div v-else :key="item.id" v-for="item in courses" class="column is-4">
           <router-link :to="`/course-teacher/${item.id}/dashboard`">
             <card hoverable>{{ item.name }}</card>
           </router-link>
@@ -124,7 +127,8 @@ export default {
       coursenum: "",
       submitting: false,
       isServerError: false,
-      errorMassage: "服务器错误,请稍后再试"
+      errorMassage: "服务器错误,请稍后再试",
+      isTeacherCourseLoading: true
     };
   },
   mounted() {
@@ -132,7 +136,10 @@ export default {
   },
   methods: {
     getCourses() {
-      getTeacherCourses().then(value => (this.courses = value.data));
+      getTeacherCourses().then(value => {
+        this.courses = value.data;
+        this.isTeacherCourseLoading = false;
+      });
     },
     //新建课程
     newSubject() {

src/views/teacher/Question/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <page-header :routes="[{ name: `查看题目`, path: 'question/' }]">
+    <page-header
+      :loading="loadingQuestionList"
+      :routes="[{ name: `查看题目`, path: 'question/' }]"
+    >
       <template slot="title">
         查看题目
       </template>
     </page-header>
     <page-body>
+      <page-section-loading :show="loadingQuestionList" />
       <!-- container面板-->
-      <div class="data-table">
+      <div v-if="!loadingQuestionList" class="data-table">
         <!--下拉框&搜索框-->
         <div class="form-group">
           <!--下拉框-->
@@ -136,11 +140,13 @@ import {
 } from "@/api/question";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     PageHeader,
-    PageBody
+    PageBody,
+    PageSectionLoading
   },
   computed: {
     ...mapState({
@@ -154,7 +160,8 @@ export default {
       questionType: [],
       data: [],
       keyWord: "",
-      errorMessage: "服务器错误，请稍后再试"
+      errorMessage: "服务器错误，请稍后再试",
+      loadingQuestionList: true
     };
   },
   mounted() {
@@ -162,6 +169,8 @@ export default {
     this.getQuestionType();
     //获取全部题目
     this.getQuestions();
+
+    this.loadingQuestionList = false;
   },
   methods: {
     //获取全部题目分类

src/views/teacher/Question/questionDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="isQuestionDetailLoading"
       :routes="[
         { name: '查看题目', path: 'question/' },
         { name: `${questionName}`, path: `question/123` }
@@ -19,30 +20,35 @@
       </template>
     </page-header>
     <page-body>
-      <div class="data-table">
-        <div class="question-description">
-          <div class="subtitle">题目描述</div>
-          <div class="question-content">{{ questionInfo.description }}</div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">预计完成时间</div>
-          <div class="question-content">{{ questionInfo.expectTime }}分钟</div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">题目难度</div>
-          <div class="question-content">
-            {{ difficultyType(questionInfo.difficulty) }}
+      <page-section-loading :show="isQuestionDetailLoading" />
+      <div v-if="!isQuestionDetailLoading" class="data-table">
+        <div>
+          <div class="question-description">
+            <div class="subtitle">题目描述</div>
+            <div class="question-content">{{ questionInfo.description }}</div>
           </div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">文件信息</div>
-          <div class="question-content">
-            <div
-              class="file-info"
-              v-for="(item, index) in questionInfo.file"
-              :key="index"
-            >
-              <a>{{ item.filename }}</a>
+          <div class="question-description">
+            <div class="subtitle">预计完成时间</div>
+            <div class="question-content">
+              {{ questionInfo.expectTime }}分钟
+            </div>
+          </div>
+          <div class="question-description">
+            <div class="subtitle">题目难度</div>
+            <div class="question-content">
+              {{ difficultyType(questionInfo.difficulty) }}
+            </div>
+          </div>
+          <div class="question-description">
+            <div class="subtitle">文件信息</div>
+            <div class="question-content">
+              <div
+                class="file-info"
+                v-for="(item, index) in questionInfo.file"
+                :key="index"
+              >
+                <a>{{ item.filename }}</a>
+              </div>
             </div>
           </div>
         </div>
@@ -54,11 +60,13 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getQuestionDetail } from "@/api/question";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    PageSectionLoading
   },
   mounted() {
     this.questionName = this.$route.query.questionName;
@@ -66,13 +74,15 @@ export default {
     getQuestionDetail(this.questionId).then(res => {
       console.log(res.data);
       this.questionInfo = res.data;
+      this.isQuestionDetailLoading = false;
     });
   },
   data() {
     return {
       questionName: "",
       questionInfo: {},
-      questionId: ""
+      questionId: "",
+      isQuestionDetailLoading: true
     };
   },
   methods: {

src/views/teacher/Result/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '成绩管理', path: 'result/' }]">
+    <page-header
+      :loading="isResultLoading"
+      :routes="[{ name: '成绩管理', path: 'result/' }]"
+    >
       <template slot="title">
         全部作业成绩
       </template>
     </page-header>
     <page-body>
+      <page-section-loading :show="isResultLoading" />
       <!-- container面板-->
-      <div class="data-table">
+      <div v-show="!isResultLoading" class="data-table">
         <!--下拉框&搜索框-->
         <div class="form-group">
           <!--下拉框-->
@@ -108,13 +112,6 @@
           成绩比例调控<small>&nbsp;&nbsp;请按百分比填写</small>
         </div>
         <div class="content">
-          <b-notification
-            class="notification-self"
-            type="is-danger"
-            :active.sync="isServerError"
-          >
-            {{ errorMassage }}
-          </b-notification>
           <div class="homework-item">
             <label>文档作业</label>
             <div class="homework-percent">
@@ -190,12 +187,14 @@ import Chart from "chart.js";
 import BInput from "buefy/src/components/input/Input";
 import { required, numeric, between } from "vuelidate/lib/validators";
 import { getStudentFinaleResult } from "@/api/resultstatistics";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     BInput,
     PageHeader,
-    PageBody
+    PageBody,
+    PageSectionLoading
   },
   validations: {
     percent: {
@@ -221,7 +220,8 @@ export default {
       finalResultPercentage: [20, 20, 20, 10, 10, 10, 10],
       submitting: false,
       isServerError: false,
-      errorMessage: "服务器错误,请稍后重试"
+      errorMessage: "服务器错误,请稍后重试",
+      isResultLoading: true
     };
   },
   methods: {
@@ -277,6 +277,7 @@ export default {
     getStudentFinaleResult(this.courses.id).then(res => {
       console.log(res.data);
       this.data = res.data;
+      this.isResultLoading = false;
     });
     //绘制图表
     let resultChart = document.getElementById("result-chart");