修改首页查询

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+      <el-col :span="24" class="main animate__animated animate__backInRight">
         <el-col :span="24" class="home">
           <el-image class="image" :src="science" fit="fill" />
           <div class="input">
@@ -16,7 +16,7 @@
           </div>
         </el-col>
         <div class="w_1200">
-          <el-col :span="24" class="one">
+          <el-col :span="24" class="one" v-loading="loadingOne">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">汇聚各种行业政策法规</el-col>
               <el-col :span="12" class="right" @click="selectMenu('news')">查看更多新闻</el-col>
@@ -51,7 +51,7 @@
               </el-col>
             </el-col>
           </el-col>
-          <el-col :span="24" class="one">
+          <el-col :span="24" class="one" v-loading="loadingTwo">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">汇聚科技创新的创新赛道</el-col>
               <el-col :span="12" class="right" @click="selectMenu('project')">查看全部项目</el-col>
@@ -106,7 +106,7 @@
               </el-col>
             </el-col>
           </el-col>
-          <el-col :span="24" class="one">
+          <el-col :span="24" class="one" v-loading="loadingThr">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">汇聚各种行业的专家</el-col>
               <el-col :span="12" class="right" @click="selectMenu('expert')">查看更多专家</el-col>
@@ -166,7 +166,7 @@
               </el-col>
             </el-col>
           </el-col>
-          <el-col :span="24" class="one">
+          <el-col :span="24" class="one" v-loading="loadingFour">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">汇聚各类优质的企业</el-col>
               <el-col :span="12" class="right" @click="selectMenu('company')">查看更多企业</el-col>
@@ -215,7 +215,7 @@
               </el-col>
             </el-col>
           </el-col>
-          <el-col :span="24" class="one">
+          <el-col :span="24" class="one" v-loading="loadingFive">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">汇聚各类优质的成果</el-col>
               <el-col :span="12" class="right" @click="selectMenu('achievement')"
@@ -319,7 +319,12 @@ import science8 from '@/assets/science8.png'
 import science9 from '@/assets/science9.png'
 import news from '@/assets/news.jpg'
 // 加载中
-const loading = ref(false)
+const loadingOne = ref(false)
+const loadingTwo = ref(false)
+const loadingThr = ref(false)
+const loadingFour = ref(false)
+const loadingFive = ref(false)
+const loadingSix = ref(false)
 // 搜索
 const searchValue = ref('')
 const active = ref('0')
@@ -352,16 +357,36 @@ const exportList = ref([])
 const companyList = ref([])
 // 新闻
 const newsList = ref([])
+// 项目
+const list0 = ref([])
+const list1 = ref([])
+const list2 = ref([])
+const list3 = ref([])
+const list4 = ref([])
+const list5 = ref([])
+const list6 = ref([])
+const list7 = ref([])
+const list8 = ref([])
 // 请求
 onMounted(async () => {
-  loading.value = true
+  loadingOne.value = true
   await searchOther()
-  await search(active.value)
+  loadingOne.value = false
+  loadingTwo.value = true
   await searchNews()
+  loadingTwo.value = false
+  loadingThr.value = true
+  await search(active.value)
+  loadingThr.value = false
+  loadingFour.value = true
   await searchExport()
+  loadingFour.value = false
+  loadingFive.value = true
   await searchCompany()
+  loadingFive.value = false
+  loadingSix.value = true
   await searchAchieve()
-  loading.value = false
+  loadingSix.value = false
 })
 const searchOther = async () => {
   let result
@@ -391,15 +416,159 @@ const searchOther = async () => {
   if ($checkRes(result)) fieldList.value = result.data
 }
 const search = async (active) => {
-  const info = {
-    skip: 0,
-    limit: 9,
-    is_use: '0',
-    status: '1'
+  if (active == '0') {
+    if (list0.value.length > 0) list.value = list0.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list0.value = res.data
+      }
+    }
+  }
+  if (active == '1') {
+    if (list1.value.length > 0) list.value = list1.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list1.value = res.data
+      }
+    }
+  }
+  if (active == '2') {
+    if (list2.value.length > 0) list.value = list2.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list2.value = res.data
+      }
+    }
+  }
+  if (active == '3') {
+    if (list3.value.length > 0) list.value = list3.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list3.value = res.data
+      }
+    }
+  }
+  if (active == '4') {
+    if (list4.value.length > 0) list.value = list4.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list4.value = res.data
+      }
+    }
+  }
+  if (active == '5') {
+    if (list5.value.length > 0) list.value = list5.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list5.value = res.data
+      }
+    }
+  }
+  if (active == '6') {
+    if (list6.value.length > 0) list.value = list6.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list6.value = res.data
+      }
+    }
+  }
+  if (active == '7') {
+    if (list7.value.length > 0) list.value = list7.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list7.value = res.data
+      }
+    }
+  }
+  if (active == '8') {
+    if (list0.value.length > 0) list.value = list8.value
+    else {
+      const info = {
+        skip: 0,
+        limit: 9,
+        is_use: '0',
+        status: '1'
+      }
+      if (active) info.type = active
+      const res = await store.query(info)
+      if (res.errcode == '0') {
+        list.value = res.data
+        list8.value = res.data
+      }
+    }
   }
-  if (active) info.type = active
-  const res = await store.query(info)
-  if (res.errcode == '0') list.value = res.data
 }
 const searchNews = async () => {
   const info = {
@@ -568,6 +737,9 @@ const onSearch = (data) => {
         margin-top: 13px;
         margin-right: 34px;
       }
+      .right:hover {
+        cursor: pointer;
+      }
     }
     .one_2 {
       display: flex;