From 8b362d48e1c31059a69a8348e9622d3e08f39f88 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Fri, 29 Nov 2024 19:53:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=91=E9=81=93js=E6=A8=A1=E6=8B=9F=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/ChannelView.vue | 271 +++++++++++++++++++++++---------
 1 file changed, 198 insertions(+), 73 deletions(-)

diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 57dac43..5bc5367 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,5 +1,130 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
+
+//频道
+const channel = ref();
+//加载频道信息
+function loadChannels(){
+    channel.value = {
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+        status:0
+    }
+}
+loadChannels();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  shows.value = ([
+    {
+      id: 3,
+      cover:"	https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
+      name:"联合利剑！五大机器人史诗升级",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-05-26 11:42:00",
+      // 视频时长
+      videoDurition:"01:22:11",
+      // 观看数量
+      viewCount:796,
+      comments:1,
+      likes:10,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      
+      
+    },
+    {
+      id: 4,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-01-24 09:55:00",
+      // 视频时长
+      videoDurition:"03:56:00",
+      // 观看数量
+      viewCount:"594",
+      comments:50,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+      channel:{
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+      }
+      
+    },
+    {
+      id: 5,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
+      name:"壁垒将至？中美博弈开启拼刺刀白热化阶段",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+        password:"123456",
+      },
+      releaseTime:"2024-01-24 09:55:00",
+      // 视频时长
+      videoDurition:"03:56:00",
+      // 观看数量
+      viewCount:"594",
+      comments:50,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:2,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+      channel:{
+        id:1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        name:"量价时空四维预测术",
+        // 订阅数量
+        subscriptionCount:60,
+        backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
+      }
+      
+    }
+  ])
+
+}
+// 
+loadShows();
+//订阅
+function submit(){
+    
+}
 </script>
 
 <template>
@@ -7,19 +132,20 @@ import Nav from '@/components/Nav.vue';
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
-            <button disabled="disabled" type="button" class="submit">已订阅</button>
+            <button v-if="channel.status==1" class="submited">已订阅</button>
+            <button v-else class="submit" @click="submit">订阅</button>
             <!-- 2-背景图片 -->
-            <img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
+            <img alt="" class="bc-image" :src="channel.backgroundImage" />
             <!-- 3-频道主题 -->
             <div class="channel-title">
-            <!-- 频道头像 -->
-            <img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
-            <!-- 频道title -->
-            <div class="title-content">
-                <h3>量价时空四维预测术</h3>
-                <span>5525已订阅</span>
-                <p style="line-height: 18px;">.</p>
-            </div>
+                <!-- 频道头像 -->
+                <img alt="" class="title-image" :src="channel.image" />
+                <!-- 频道title -->
+                <div class="title-content">
+                    <h3 :name="channel.name">{{ channel.name }}</h3>
+                    <span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount}}已订阅</span>
+                    <p style="line-height: 18px;">.</p>
+                </div>
             </div>
         </div>
         <!-- 频道内容 -->
@@ -29,69 +155,40 @@ import Nav from '@/components/Nav.vue';
             <button class="tab">全部</button>
             <button class="tab">文章</button>
             <button class="tab">视频</button>
-            <button class="tab">合集</button>
             </div>
             <!-- 内容 -->
             <div class="content-list">
-            <ul class="list-display">
-                <!-- 一条 -->
-                <li>
-                    <div class="sub-topic">
-                        <!-- 左边 -->
-                        <div class="sub-left">
-                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
-                        </div>
-                        <!-- 右边 -->
-                        <div class="sub-right">
-                            <!-- title -->
-                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
-                            
-                            <div class="right-inline">
-                                <!-- HomilyLink -->
-                                <div class="right-item">
-                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
-                                    <div>HomilyLink</div>
+                <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" :videoDurition="show.videoDurition" class="video-time">
+                                    {{ show.videoDurition }}
                                 </div>
-                                <!-- 评论 -->
-                                <span class="right-item">0评论</span>
-                                <!-- 日期 -->
-                                <div class="right-item"> 05-26 11:42 </div>
                             </div>
-                        </div>
-
-
-
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
                                 
-
-                        
-                    </div>
-                </li>
-                <li>
-                    <div class="sub-topic">
-                        <!-- 左边 -->
-                        <div class="sub-left">
-                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
-                        </div>
-                        <!-- 右边 -->
-                        <div class="sub-right">
-                            <!-- title -->
-                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
-                            
-                            <div class="right-inline">
-                                <!-- HomilyLink -->
-                                <div class="right-item">
-                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
-                                    <div>HomilyLink</div>
+                                <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>
-                                <!-- 评论 -->
-                                <span class="right-item">0评论</span>
-                                <!-- 日期 -->
-                                <div class="right-item"> 05-26 11:42 </div>
                             </div>
                         </div>
-                    </div>
-                </li>
-            </ul>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -111,23 +208,39 @@ import Nav from '@/components/Nav.vue';
     height: 100%;
     width: 100%;
 }
-.submit{
+.submited{
     position: absolute; /* 绝对定位 */
     top: 50px; /* 根据需要调整位置 */
     right: 10px; /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px;
-    border-radius: 5%;
+    border-radius: 10%;
+    z-index: 999;
+}
+.submit{
+    position: absolute; /* 绝对定位 */
+    top: 50px; /* 根据需要调整位置 */
+    right: 10px; /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px 20px;
+    
+    border-radius: 10%;
+    z-index: 999;
 }
 .channel-title{
+    position:absolute;
+    top: 0px;
+    left: 0px;
+    padding-top: 60px;
+    padding-left: 50px;
     box-sizing: border-box;
-    position: absolute;
-    left: 60px;
-    top: 50px;
-    background: rgba(0, 0, 0, .4);
-    width: 400px;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+
 }
 .title-image{
     width: 90px;
@@ -192,12 +305,24 @@ import Nav from '@/components/Nav.vue';
 .sub-left{
     height: 112px;
     width: 200px;
-}
-.sub-image{
+    position: relative;
+    .sub-image{
     width: 100%;
     height: 100%;
+    }
+   
+    .video-time{
+        position: absolute;
+        left: 70%;
+        top: 80%;
+        color: #fff;
+        background-color: rgba(31, 30, 30, 0.5); 
+        border-radius: 20%;
+        font-size: smaller;
+    }
 }
 
+
 .right-inline{
     display: flex;
     margin-bottom: 15px;