1

src/views/news/detail.vue

@@ -1,15 +1,46 @@
 <script setup>
-import {onMounted} from 'vue'
+import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 
-import {newsDetail} from './mock'
+import {getNewsDetail} from '@/api/index'
+import {ElMessage} from 'element-plus'
 
 const route = useRoute()
 const detail = route.query
-detail.artical = newsDetail.find((item) => item.id == route.query.id).article
+const showLoad = ref(true)
+const newsTitle = ref('')
+const newsSubTitle = ref('')
+const newsCoverImg = ref('')
+const newsContent = ref('')
+
+const getDetail = () => {
+  showLoad.value = true
+  let query = {
+    slug: detail.slug,
+  }
+  getNewsDetail(query)
+    .then((res) => {
+      if (res.code === 0) {
+        let {content, cover_image, snapshot, title} = res.data
+        newsTitle.value = title
+        newsSubTitle.value = snapshot
+        newsCoverImg.value = cover_image
+        newsContent.value = content
+        showLoad.value = false
+      } else {
+        ElMessage.error(res.msg)
+        showLoad.value = false
+      }
+    })
+    .catch((err) => {
+      showLoad.value = false
+    })
+}
 
 const router = useRouter()
-onMounted(() => {})
+onMounted(() => {
+  getDetail()
+})
 
 const toBack = () => {
   router.back()
@@ -17,19 +48,22 @@ const toBack = () => {
 </script>
 
 <template>
-  <div class="page flex column a-c">
-    <div class="label">
-      {{ detail.label }}
-    </div>
-    <div class="time">
-      {{ detail.time }}
-    </div>
-    <div class="img">
-      <img :src="`./static/images/${detail.imgUrl}`" alt="" />
-    </div>
-    <div class="artical">
-      {{ detail.artical }}
+  <div class="page flex column a-c" v-loading="showLoad">
+    <div v-if="newsTitle">
+      <h3 class="label">
+        {{ newsTitle }}
+      </h3>
+      <h3 class="time" v-if="newsSubTitle">
+        {{ newsSubTitle }}
+      </h3>
+      <div class="img" v-if="newsCoverImg">
+        <img :src="newsCoverImg" alt="" />
+      </div>
+      <div class="artical" v-if="newsContent">
+        {{ newsContent }}
+      </div>
     </div>
+    <div v-else>暂无内容</div>
     <div class="back" @click="toBack">返回</div>
   </div>
 </template>
@@ -43,11 +77,14 @@ const toBack = () => {
   color: $black;
 }
 .time {
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  font-size: 18px;
   margin-bottom: 40px;
 }
 .img {
   width: 1200px;
-  height: 600px;
+  height: auto;
   margin-bottom: 40px;
   img {
     width: 100%;