axios+频道侧栏

vueHomilyLink/package-lock.json

@@ -8,6 +8,7 @@
       "name": "vuehomilylink",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.8",
         "pinia": "^2.2.6",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1434,6 +1435,23 @@
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -1514,6 +1532,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1619,6 +1649,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
@@ -1727,6 +1766,40 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -1990,6 +2063,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -2239,6 +2333,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",

vueHomilyLink/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.8",
     "pinia": "^2.2.6",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"

vueHomilyLink/src/views/ChannelView.vue

@@ -3,32 +3,56 @@ import Nav from '@/components/Nav.vue';
 import { ref } from 'vue';
 import router from '@/router';
 
+//频道列表
+
+const channelList = ref([]);
+function getChannel() {
+    channelList.value = ([
+        {
+            id: 1,
+            image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+            name: "量价时空四维预测术",
+            // 订阅数量
+            subscriptionCount: 60,
+            backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+            status: 1
+        },
+        {
+            id:2,
+            image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+            name:"时空四维预测术",
+            // 订阅数量
+            subscriptionCount:60,
+            backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+            status:0
+        }
+    ]);
+}
+getChannel();
+
+
 //频道
 //获取传递的参数中的id
-const channel = ref();
-//加载频道信息
-function loadChannels(channelId){
-    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
-        id:2,
+const channel = ref({
+    id: 1,
     image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
     name: "量价时空四维预测术",
     // 订阅数量
     subscriptionCount: 60,
     backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
-        status:0
+    status: 1
+});
+//加载频道信息
+function loadChannels(channelId) {
+    channelList.value.forEach(ch =>{
+        if(ch.id == channelId){
+            channel.value = ch;
         }
+    });
 }
 loadChannels();
 function toLink(channelId) {
     router.push({ path: '/channel', query: { id: channelId } });
-  console.log(channelId);
     loadChannels(channelId);
     loadShows();
 }
@@ -148,16 +172,13 @@ function submit(){
     <ChannelNav></ChannelNav>
     <div class="club-nav">
         <div class="container">
-            <button @click="toLink(1)" class="nav-item">量价时空四维预测术</button>
-            <button @click="toLink(2)" class="nav-item">云板&左侧频道</button>
-            <button @click="toLink(3)" class="nav-item">HomilyChart第一频道</button>
-            <button @click="toLink(4)" class="nav-item">TD频道</button>
+            <button v-for="channel in channelList" @click="toLink(channel.id)" class="nav-item">{{ channel.name }}</button>
         </div>
     </div>
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
-            <button v-if="channel.status==1" class="submited">已订阅</button>
+            <button v-if="channel.status && channel.status == 1" class="submited">已订阅</button>
             <button v-else class="submit" @click="submit">订阅</button>
             <!-- 2-背景图片 -->
             <img alt="" class="bc-image" :src="channel.backgroundImage" />
@@ -208,7 +229,8 @@ function submit(){
                                     <!-- 评论 -->
                                     <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
                                     <!-- 日期 -->
-                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} </div>
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -263,34 +285,45 @@ function submit(){
     color: white;
     border-radius: 5%;
 }
+
 .channel {
     width: 800px;
     margin-left: auto;
     margin-right: auto;
 }
+
 .channel-head {
     position: relative;
     height: 200px;
     width: 100%;
 }
+
 .bc-image {
     height: 100%;
     width: 100%;
 }
+
 .submited {
-    position: absolute; /* 绝对定位 */
-    top: 50px; /* 根据需要调整位置 */
-    right: 10px; /* 根据需要调整位置 */
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px;
     border-radius: 10%;
     z-index: 999;
 }
+
 .submit {
-    position: absolute; /* 绝对定位 */
-    top: 50px; /* 根据需要调整位置 */
-    right: 10px; /* 根据需要调整位置 */
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
     color: rgb(129, 132, 134);
     background-color: aliceblue;
     padding: 10px 20px;
@@ -298,6 +331,7 @@ function submit(){
     border-radius: 10%;
     z-index: 999;
 }
+
 .channel-title {
     position: absolute;
     top: 0px;
@@ -311,6 +345,7 @@ function submit(){
     overflow: hidden;
 
 }
+
 .title-image {
     width: 90px;
     height: 90px;
@@ -318,6 +353,7 @@ function submit(){
     vertical-align: top;
     border-radius: 50%;
 }
+
 .title-content {
     display: inline-block;
     position: absolute;
@@ -325,6 +361,7 @@ function submit(){
     color: white;
     overflow: hidden;
 }
+
 .channel-title h3 {
     max-width: 75%;
     overflow: hidden;
@@ -335,6 +372,7 @@ function submit(){
     margin: 0px;
     z-index: 999;
 }
+
 .channel-title span {
     padding: 4px 0;
     font-size: 14px;
@@ -343,38 +381,47 @@ function submit(){
 
 .content-nav {
     display: flex;
-    justify-content: flex-start; /* 修正了属性名中的空格 */
-    background-color: #fff; /* 修正了属性名中的空格 */
-    border-bottom: 1px solid #ccc; /* 修正了属性名中的空格 */
+    justify-content: flex-start;
+    /* 修正了属性名中的空格 */
+    background-color: #fff;
+    /* 修正了属性名中的空格 */
+    border-bottom: 1px solid #ccc;
+    /* 修正了属性名中的空格 */
     margin: 10px;
 }
 
 .tab {
     padding: 10px 20px;
     border: none;
-    background-color: transparent; /* 修正了属性名中的空格 */
+    background-color: transparent;
+    /* 修正了属性名中的空格 */
     cursor: pointer;
     font-size: 16px;
 }
 
 .active {
     color: red;
-    border-bottom: 2px solid red; /* 修正了属性名中的空格 */
+    border-bottom: 2px solid red;
+    /* 修正了属性名中的空格 */
 }
+
 .list-display {
     list-style-type: none;
     padding: 0px;
 }
+
 .sub-topic {
     margin: 10px 0;
     padding: 10px;
     display: flex;
 
 }
+
 .sub-left {
     height: 112px;
     width: 200px;
     position: relative;
+
     .sub-image {
         width: 100%;
         height: 100%;
@@ -399,9 +446,11 @@ function submit(){
     font-size: 16px;
 
 }
+
 .right-title {
     margin-left: 10px;
 }
+
 .right-item {
     display: flex;
     color: #8e8e8e;
@@ -409,11 +458,11 @@ function submit(){
     margin-right: 18px;
     align-items: center;
 }
+
 .img1 {
     margin-left: 10px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
 }
-
 </style>