添加首页加载loading

src/main.js

@@ -36,7 +36,8 @@ import {
   Skeleton,
   Tag,
   Popover,
-  PullRefresh
+  PullRefresh,
+  Loading
 } from "vant";
 
 window.$_http = axios;
@@ -69,6 +70,7 @@ Vue.component("VanSkeleton", Skeleton);
 Vue.component("VanTag", Tag);
 Vue.component("vanPopover", Popover);
 Vue.component("VanPullRefresh", PullRefresh);
+Vue.component("VanLoading", Loading);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/views/home/learn/page-learn-content.vue

@@ -6,161 +6,167 @@
       left-arrow
       @click-left="onClickLeft"
     />
-    <div v-if="!isReadable" class="learn-content-rest-time">已学完</div>
-    <div v-else class="learn-content-rest-time">
-      剩余学习时间: {{ getTimeHoursMinuteSecondsFun(seconds) }}
-    </div>
-    <!-- 内容 -->
-    <div class="learn-content-body">
-      <!-- 不是视频时展示 -->
-      <div v-if="contentObj.type != 'VIDEO'" class="learn-content-body-title">
-        {{ contentObj.name }}
-      </div>
-      <!-- 不是视频时展示 -->
-      <div v-if="contentObj.type != 'VIDEO'" class="learn-content-body-auther">
-        编辑：{{ contentObj.userId }}
+    <van-loading v-if="loading" type="spinner" vertical >加载中...</van-loading>
+    <div v-else>
+      <div v-if="!isReadable" class="learn-content-rest-time">已学完</div>
+      <div v-else class="learn-content-rest-time">
+        剩余学习时间: {{ getTimeHoursMinuteSecondsFun(seconds) }}
       </div>
-      <div class="learn-content-body-description">
-        <!-- {{ contentObj.contents }} -->
-        <p
-          v-if="contentObj.type == 'ARTICLE'"
-          class="p-content"
-          v-html="contentObj.contents"
-          @click="showImg($event)"
-        >
-          {{ contentObj.contents }}
-        </p>
-        <div v-if="contentObj.type == 'VIDEO'">
-          <div
-            class="learn-content-body-title p-content"
-            style="margin-top: 0.5rem"
-          >
-            {{ contentObj.name }}
-          </div>
-          <video
-            :poster="getContentObj(contentObj.contents).faceUrl"
-            :src="getContentObj(contentObj.contents).videoUrl"
-            controls="controls"
-          >
-            您的浏览器不支持 video 标签。
-          </video>
-        </div>
-        <div style="margin-top: 0.5rem">
-          <!-- <div>附件</div> -->
-          <div
-            v-for="(item, index) in contentObj.links"
-            :key="index"
-            class="linkListItem"
-          >
-            <a :href="item">
-              <div class="linkListItemIocn">
-                <img :src="getLinkIcon(item)" />
-              </div>
-              <div class="linkListItemContent">
-                <div class="linkListItemTitle">{{ getUrlName(item) }}</div>
-                <div class="linkListItemDescribel">这里是描述</div>
-              </div>
-            </a>
-          </div>
+      <!-- 内容 -->
+      <div class="learn-content-body">
+        <!-- 不是视频时展示 -->
+        <div v-if="contentObj.type != 'VIDEO'" class="learn-content-body-title">
+          {{ contentObj.name }}
         </div>
+        <!-- 不是视频时展示 -->
         <div
-          class="imgDolg"
-          v-show="imgPreview.show"
-          @click.stop="imgPreview.show = false"
+          v-if="contentObj.type != 'VIDEO'"
+          class="learn-content-body-auther"
         >
-          <van-icon
-            class="el-icon-close"
-            id="imgDolgClose"
-            name="cross"
-            @click.stop="imgPreview.show = false"
-          />
-          <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
-        </div>
-      </div>
-      <div class="learn-content-body-time-row">
-        <div class="learn-content-body-time">
-          发布日期：
-          {{
-            formateDatesFun(contentObj.createdTime) || contentObj.createdTime
-          }}
+          编辑：{{ contentObj.userId }}
         </div>
-        <div class="learn-content-body-collect">
-          <div
-            v-show="!isCollected"
-            class="learn-content-body-collect-div"
-            @click="clickCollection"
+        <div class="learn-content-body-description">
+          <!-- {{ contentObj.contents }} -->
+          <p
+            v-if="contentObj.type == 'ARTICLE'"
+            class="p-content"
+            v-html="contentObj.contents"
+            @click="showImg($event)"
           >
-            <span>收藏</span>
-            <div class="learn-content-body-collect-img">
-              <van-image width="100%" height="100%" :src="collectImg" />
+            {{ contentObj.contents }}
+          </p>
+          <div v-if="contentObj.type == 'VIDEO'">
+            <div
+              class="learn-content-body-title p-content"
+              style="margin-top: 0.5rem"
+            >
+              {{ contentObj.name }}
+            </div>
+            <video
+              :poster="getContentObj(contentObj.contents).faceUrl"
+              :src="getContentObj(contentObj.contents).videoUrl"
+              controls="controls"
+            >
+              您的浏览器不支持 video 标签。
+            </video>
+          </div>
+          <div style="margin-top: 0.5rem">
+            <!-- <div>附件</div> -->
+            <div
+              v-for="(item, index) in contentObj.links"
+              :key="index"
+              class="linkListItem"
+            >
+              <a :href="item">
+                <div class="linkListItemIocn">
+                  <img :src="getLinkIcon(item)" />
+                </div>
+                <div class="linkListItemContent">
+                  <div class="linkListItemTitle">{{ getUrlName(item) }}</div>
+                  <div class="linkListItemDescribel">这里是描述</div>
+                </div>
+              </a>
             </div>
           </div>
           <div
-            v-show="isCollected"
-            class="learn-content-body-collect-div"
-            @click="clickRemoveCollection"
+            class="imgDolg"
+            v-show="imgPreview.show"
+            @click.stop="imgPreview.show = false"
           >
-            <span>取消收藏</span>
-            <div class="learn-content-body-collect-img">
-              <van-image width="100%" height="100%" :src="collectedImg" />
-            </div>
+            <van-icon
+              class="el-icon-close"
+              id="imgDolgClose"
+              name="cross"
+              @click.stop="imgPreview.show = false"
+            />
+            <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
           </div>
         </div>
-      </div>
-      <div class="learn-content-body-count">
-        <div class="learn-content-body-count-btn">
-          阅读<span>{{ contentObj.readerCount }}</span>
+        <div class="learn-content-body-time-row">
+          <div class="learn-content-body-time">
+            发布日期：
+            {{
+              formateDatesFun(contentObj.createdTime) || contentObj.createdTime
+            }}
+          </div>
+          <div class="learn-content-body-collect">
+            <div
+              v-show="!isCollected"
+              class="learn-content-body-collect-div"
+              @click="clickCollection"
+            >
+              <span>收藏</span>
+              <div class="learn-content-body-collect-img">
+                <van-image width="100%" height="100%" :src="collectImg" />
+              </div>
+            </div>
+            <div
+              v-show="isCollected"
+              class="learn-content-body-collect-div"
+              @click="clickRemoveCollection"
+            >
+              <span>取消收藏</span>
+              <div class="learn-content-body-collect-img">
+                <van-image width="100%" height="100%" :src="collectedImg" />
+              </div>
+            </div>
+          </div>
         </div>
-        <!-- <div class="learn-content-body-count-btn">
+        <div class="learn-content-body-count">
+          <div class="learn-content-body-count-btn">
+            阅读<span>{{ contentObj.readerCount }}</span>
+          </div>
+          <!-- <div class="learn-content-body-count-btn">
           点赞<span>{{ contentObj.likesCount }}</span>
         </div> -->
+        </div>
       </div>
-    </div>
-    <!-- 评论 -->
-    <div class="learn-content-comment">
-      <div class="learn-content-comment-title">
-        <div class="learn-content-comment-title-icon"></div>
-        <span>评论</span>
-      </div>
-      <div class="learn-content-comment-list">
-        <div
-          class="learn-content-comment-item"
-          v-for="(item, index) in commentList"
-          :key="index"
-        >
-          <div class="learn-content-comment-item-userHead">
-            <van-image
-              width="100%"
-              height="100%"
-              round
-              alt="cover"
-              :src="item.userAvatarPath || defaultHeadImg"
-            />
-          </div>
-          <div class="learn-content-comment-item-userInfo">
-            <div class="learn-content-comment-item-name">
-              {{ item.userNickName }}
-            </div>
-            <div class="learn-content-comment-item-content">
-              {{ item.content }}
+      <!-- 评论 -->
+      <div class="learn-content-comment">
+        <div class="learn-content-comment-title">
+          <div class="learn-content-comment-title-icon"></div>
+          <span>评论</span>
+        </div>
+        <div class="learn-content-comment-list">
+          <div
+            class="learn-content-comment-item"
+            v-for="(item, index) in commentList"
+            :key="index"
+          >
+            <div class="learn-content-comment-item-userHead">
+              <van-image
+                width="100%"
+                height="100%"
+                round
+                alt="cover"
+                :src="item.userAvatarPath || defaultHeadImg"
+              />
             </div>
-            <div class="learn-content-comment-item-createdtime">
-              {{ formateDatesFun(item.createdTime) || item.createdTime }}
+            <div class="learn-content-comment-item-userInfo">
+              <div class="learn-content-comment-item-name">
+                {{ item.userNickName }}
+              </div>
+              <div class="learn-content-comment-item-content">
+                {{ item.content }}
+              </div>
+              <div class="learn-content-comment-item-createdtime">
+                {{ formateDatesFun(item.createdTime) || item.createdTime }}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- 发布评论 -->
-    <div class="learn-content-post-comment">
-      <input
-        v-model="commentValue"
-        maxlength="200"
-        placeholder="发表你的评论"
-      />
-      <div class="learn-content-post-comment-btn">
-        <div @click="postCommentFun">发布</div>
-        <div @click="canclePostCommentFun">取消</div>
+      <!-- 发布评论 -->
+      <div class="learn-content-post-comment">
+        <input
+          v-model="commentValue"
+          maxlength="200"
+          placeholder="发表你的评论"
+        />
+        <div class="learn-content-post-comment-btn">
+          <div @click="postCommentFun">发布</div>
+          <div @click="canclePostCommentFun">取消</div>
+        </div>
       </div>
     </div>
   </div>
@@ -203,7 +209,8 @@ export default {
         ppt: require("@/assets/image/learn/ppt.png"),
         xlsx: require("@/assets/image/learn/xlsx.png"),
         text: require("@/assets/image/learn/text.png")
-      }
+      },
+      loading: true
     };
   },
   computed: {
@@ -254,9 +261,11 @@ export default {
           // ！！！需要查询该文章是否已被当前用户点赞！！！
           // TODO...
           this.getCommentListFun(); // 查询：评论列表内容
+          this.loading = false;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
+          this.loading = false;
         });
     },
     // 查询：评论列表内容

src/views/home/learn/page-learn.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-learn">
-    <van-tabs :active="active" @click="rootChange" line-width="10px">
+    <van-loading v-if="loading" type="spinner" vertical >加载中...</van-loading>
+    <van-tabs v-else :active="active" @click="rootChange" line-width="10px">
       <!-- 根目录 -->
       <van-tab v-for="(item, index) in learnRootList" :key="index" :title="item.name">
         <PageLearnChild v-if="index !== 0" :parentId="parentId"></PageLearnChild>
@@ -26,7 +27,8 @@ export default {
       active: 0,
       learnRootList: [],
       choosedRootIndex: 0,
-      parentId: ""
+      parentId: "",
+      loading: true
     };
   },
   computed: {},
@@ -50,9 +52,11 @@ export default {
             return;
           }
           this.getChildList();
+          this.loading = false;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
+          this.loading = false;
         });
     },
     //   查询子目录