频道Api，频道页面视频导航栏跳转

vueHomilyLink/src/api/ChannelApi.js

@@ -0,0 +1,22 @@
+import service from ".";
+
+const ChannelApi = {
+    //获取频道列表
+    getchannels(){
+        return service.get('/list');
+    },
+    //获取shows列表
+    getShows(Id,UserId,FlagType){
+        return service.get('/channel',{Id,UserId,FlagType});
+    },
+    //订阅状态
+    subscribe(Id,UserId){
+        return service.post('/subscription',{Id,UserId})
+    },
+    //取消订阅
+    unSubscribe(Id,UserId){
+        return service.delete('/subscription',{Id,UserId})
+    }
+    
+}
+export default ChannelApi;

vueHomilyLink/src/views/ChannelView.vue

@@ -1,12 +1,13 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import router from '@/router';
 
 //频道列表
 
 const channelList = ref([]);
 function getChannel() {
+    //查询频道列表api
     channelList.value = ([
         {
             id: 1,
@@ -32,7 +33,7 @@ getChannel();
 
 
 //频道
-//获取传递的参数中的id
+//默认信息
 const channel = ref({
     id: 1,
     image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
@@ -50,17 +51,27 @@ function loadChannels(channelId) {
         }
     });
 }
-loadChannels();
+// loadChannels();
 function toLink(channelId) {
     router.push({ path: '/channel', query: { id: channelId } });
     loadChannels(channelId);
     loadShows();
 }
 
+//视频上的导航栏
+const currentTab = ref('all');
+const flagType = ref(null);
+
+function changeTab(tab, flagType) {
+  currentTab.value = tab;
+  loadShows(flagType);
+}
+
 // 展示列表1
 const shows = ref([]);
 // 加载展示列表
-function loadShows() {
+function loadShows(flagType) {
+    //shows查询api,根据id,userId
     shows.value = ([
         {
             id: 3,
@@ -157,14 +168,18 @@ function loadShows() {
     ])
 
 }
-// 
-loadShows();
+loadShows(flagType);
+
 //订阅
 function submit() {
-
+    //修改状态，editapi
 }
 
 
+// function buttonActive(){
+   
+// }
+// buttonActive();
 </script>
 
 <template>
@@ -198,12 +213,59 @@ function submit() {
         <div class="channel-content">
             <!-- 导航栏 -->
             <div class="content-nav">
-                <button class="tab">全部</button>
-                <button class="tab">文章</button>
-                <button class="tab">视频</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'all' }" 
+                @click="changeTab('all', null)">全部</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'articles' }" 
+                @click="changeTab('articles', 1)">文章</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'videos' }" 
+                @click="changeTab('videos', 2)">视频</button>
             </div>
+            <component :is="currentTabComponent"></component>
             <!-- 内容 -->
-            <div class="content-list">
+             <!-- 如果是全部 -->
+            
+            <div v-if="currentTab == 'all'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-if="currentTab == 'videos'" class="content-list">
                 <ul class="list-display">
                     <!-- 一条 -->
                     <li v-for="show in shows">
@@ -237,6 +299,45 @@ function submit() {
                     </li>
                 </ul>
             </div>
+
+
+            <div v-if="currentTab == 'articles'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+
+
         </div>
     </div>
 </template>
@@ -400,9 +501,8 @@ function submit() {
 }
 
 .active {
-    color: red;
+    color: red;   
     border-bottom: 2px solid red;
-    /* 修正了属性名中的空格 */
 }
 
 .list-display {