feat：完善功能

src/api/home.js

@@ -7,3 +7,12 @@ export function getWeatherApi() {
     method: 'get'
   })
 }
+
+// 核心景区视频
+export function getVideoListApi(data) {
+  return request({
+    url: '/api/video/list',
+    method: 'get',
+    params: data
+  })
+}

src/api/request.js

@@ -106,19 +106,7 @@ const instance = axios.create({
  */
 instance.interceptors.request.use(
   (config) => {
-    // 规范写法 不可随意自定义
-    let urlParams = {}
-    if (config.params) {
-      urlParams = {
-        ...config.params
-      }
-    }
-
-    config.url = config.url + '?' + qs.stringify(urlParams)
-    if (
-      config.data &&
-      config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8'
-    )
+    if (config.data && config.headers['Content-Type'] === 'application/json";charset=UTF-8')
       config.data = qs.stringify(config.data)
     return config
   },

src/components/CoreVideo/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="core-video">
     <div class="title">核心景区视频</div>
-    <ul class="list" v-loading="loading">
+
+    <ul class="list">
       <li
         class="item"
         :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
@@ -12,7 +13,17 @@
           <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
             三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
           </p>
-          <img class="item-img" src="@/assets/images/cover.png" />
+          <!-- <img class="item-img" src="@/assets/images/cover.png" /> -->
+          <video
+            class="item-img"
+            :ref="(el) => getRefs(el, index)"
+            muted
+            autoplay
+            controls
+            style="object-fit: fill"
+          >
+            <source src="" type="application/x-mpegURL" />
+          </video>
         </div>
       </li>
     </ul>
@@ -22,13 +33,28 @@
 <script setup>
   import primary from '@/assets/images/item-primary.png'
   import error from '@/assets/images/item-error.png'
-  let loading = ref(true)
-  let list = ref(0)
+  import { getVideoListApi } from '@/api/home'
+  import Hls from 'hls.js'
+
+  let list = ref(2)
+
+  const getRefs = (el) => {
+    if (el) {
+      const hls = new Hls()
+      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
+      hls.attachMedia(el)
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        el.play()
+      })
+    }
+  }
+  const getVideoList = async () => {
+    let res = await getVideoListApi({
+      businessVideoDisplayPosition: ''
+    })
+  }
   onMounted(() => {
-    setTimeout(() => {
-      loading.value = false
-      list.value = 10
-    }, 2000)
+    getVideoList()
   })
 </script>
 

src/components/Header/index.vue

@@ -50,7 +50,6 @@
   const emit = defineEmits(['change'])
 
   const router = useRouter()
-  const currentRoute = router.currentRoute.value
 
   let currentDate = ref('')
   let weatherData = ref({})