1

src/views/news/index.vue

@@ -5,35 +5,55 @@ import Banner from '@/components/Banner/index.vue'
 import Swiper from '@/components/Swiper/index.vue'
 import {useRouter} from 'vue-router'
 import {onBeforeRouteLeave} from 'vue-router'
-import {list} from './mock'
+import {getNews} from '@/api/index'
 
 const currentPage = ref(1)
-
+const showLoad = ref(true)
 const containerWidth = ref(1700)
 const containerHeight = ref(1400)
 
-onMounted(() => {})
+onMounted(() => {
+  getNewList()
+})
 
 let router = useRouter()
+
+let scrollTop = 0
+
+const newList = ref([])
+
+const page = ref({
+  pageNum: 1,
+  pageSize: 10,
+  totalPages: 0,
+})
+
+async function getNewList() {
+  let query = {
+    status: 'published',
+    page: page.value.pageNum,
+    page_size: page.value.pageSize,
+  }
+  let {code, data, pagination} = await getNews(query)
+  if (code === 0) {
+    newList.value = data
+    page.value.totalPages = pagination.total_pages
+    showLoad.value = false
+  } else {
+    showLoad.value = false
+  }
+}
+
 const toDetail = (item) => {
   router.push({
     path: '/news/detail',
     query: {
       id: item.id,
-      imgUrl: item.imgUrl,
-      label: item.label,
-      time: item.time,
-      subLabel: item?.subLabel,
+      slug: item.slug,
     },
   })
 }
 
-let scrollTop = 0
-
-onDeactivated(() => {
-  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-})
-
 onActivated(async () => {
   await nextTick()
   // 再强制等一帧布局
@@ -42,6 +62,10 @@ onActivated(async () => {
   })
 })
 
+onDeactivated(() => {
+  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+})
+
 onBeforeRouteLeave((to) => {
   if (to.name === 'Detail') return
 
@@ -55,7 +79,7 @@ onBeforeRouteLeave((to) => {
 </script>
 
 <template>
-  <div class="page">
+  <div class="page" v-loading="showLoad">
     <Banner class="banner" img="banner/news.png" />
     <Swiper
       id="one"
@@ -72,19 +96,19 @@ onBeforeRouteLeave((to) => {
           <div
             class="news flex j-s"
             :class="{active: isActive}"
-            v-for="item in list"
+            v-for="item in newList"
             :key="item.id"
             @click="toDetail(item)"
           >
             <div class="img">
-              <img :src="`./static/images/${item.imgUrl}`" />
+              <img :src="item.cover_image" />
             </div>
 
             <div class="content">
-              <div class="label">{{ item.label }}</div>
-              <div class="time">{{ item.time }}</div>
+              <div class="label">{{ item.title }}</div>
+              <div class="time">{{ item?.time }}</div>
               <div class="sub-label">{{ item?.subLabel }}</div>
-              <div class="text">{{ item.content }}</div>
+              <div class="text">{{ item.snapshot }}</div>
             </div>
           </div>
         </div>