fix:增加学习路径图loading

src/api/request.js

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { getCookie } from "@/api/utils";
 import JSONBigInt from 'json-bigint';
 const JSONBigIntStr = JSONBigInt({ storeAsString: true });
-export function usePage(_url, param) {
+export function usePage(_url, param, callback) {
 
     const state = reactive({
         data: {},
@@ -28,6 +28,7 @@ export function usePage(_url, param) {
             state.total = r.data.total
             state.current = r.data.current
             state.loading = false
+            callback(r)
         })
     }
 

src/views/roadmap/LearnPath.vue

@@ -56,7 +56,11 @@
         </div>
       </div>
       <!-- 路径列表-->
-      <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+      <div class="routerList" v-if="isLoading" style="display:flex;color:#909399;">
+				
+			</div>
+      <div v-else :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+        {{ loading.close() }}
         <div style="min-width: 770px; width: 100%">
           <el-table :data="data" style="width: 100%" @row-click="gofun">
             <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
@@ -107,17 +111,30 @@ import {ROUTER_LIST,} from "@/api/api";
 import {useRouter} from "vue-router";
 import store from "@/store";
 import PathDetailImage from "@/components/PathDetailImage.vue";
+import { ElLoading } from 'element-plus';
 
 const detail = ref();
 const showmapdetail = ref(false);
 const currentStageId = ref();
 const userInfo = computed(() => store.state.userInfo);
-const {data} = usePage(ROUTER_LIST, {pageSize: 60});
+const loading = ref(false);
+const isLoading = ref(true);
+loading.value = ElLoading.service({  
+  lock: true,
+  text: 'Loading',
+  background: 'rgba(0, 0, 0, 0.7)'
+})
+
+const {data} = usePage(ROUTER_LIST, {pageSize: 60}, (e)=>{
+  console.log('我请求成功了吗', e)
+  isLoading.value = false;
+});
 const router = useRouter();
 const returnclick = () => {
   router.back();
 };
 
+
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const returnfun = () => {