Merge branch 'dev' of http://39.101.133.168:8807/majun/practice_Vue into dev

src/api/homeApi.js

@@ -1,4 +1,3 @@
-
 import service from "./indexApi";
 const homeApi = {
   selectHome(queryType){

src/api/pindaoApi.js

@@ -0,0 +1,10 @@
+import service from "./indexApi";
+const pindaoApi = {
+  selectPindao(queryType){
+    //查询首页的数据
+    return service.post('/api/show/getShowList', {queryType: queryType});
+  }
+
+}
+
+export default pindaoApi;

src/views/ChannelView.vue

@@ -3,10 +3,10 @@
 
     <el-header class="channel-header">
       <div class="header-left">
-        <img :src="channelLogo" class="adaptive-avatar" />
+        <img src="../assets/2.png" class="adaptive-avatar" />
         <div class="channel-info">
-          <h1>{{ channelName }}</h1>
-          <p>{{ subscribers }}已订阅</p>
+          <h1>{{ items.publisherName }}</h1>
+          <p>{{ dingyue }}已订阅</p>
         </div>
       </div>
       <el-button class="subscribe-button" :class="{ disabled: isSubscribed }" @click="toggleSubscribe">
@@ -14,20 +14,18 @@
       </el-button>
     </el-header>
 
-
-
     <!-- 频道内容容器 -->
     <el-main class="channel-content">
-      <div v-for="item in contentItems" :key="item.title" class="content-card">
+      <div v-for="item in items" :key="item.title" class="content-card">
         <div class="content-item">
           <img :src="item.cover" class="content-cover" @click="showLoading(item.link)" />
           <div class="content-details">
             <h2>{{ item.title }}</h2>
             <div class="content-meta">
-              <img :src="channelLogo" class="adaptive-avatar2" />
-              <span class="channel-name">{{ channelName }}</span>
-              <span class="content-comments">{{ item.comments }}评论</span>
-              <span class="content-date">{{ item.date }}</span>
+              <img :src="item.publisherAvatar" class="adaptive-avatar2" />
+              <span class="channel-name">{{ item.publisherName }}</span>
+              <span class="content-comments">{{ item.commentCount }}评论</span>
+              <span class="content-date">{{ item.publishTime }}</span>
             </div>
           </div>
         </div>
@@ -37,54 +35,28 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-// import { ElContainer, ElHeader, ElMain, ElButton} from 'element-plus';
-
-
-const channelLogo = 'src/assets/channel-avatar.png';
-const channelName = ref('量价时空四维预测术');
-const subscribers = ref(5341);
-const isSubscribed = ref(false);
-const contentItems = ref([
-  {
-    title: '2/7~7/17 精彩直播课程安排，弘粉同城会全面启程！',
-    cover: 'src/assets/cover1.png',
-    link: '#',
-    comments: 0,
-    date: '07-01 17:27'
-  },
-  {
-    title: '大国博弈下的深度交易策略',
-    cover: 'src/assets/cover2.png',
-    link: '#',
-    comments: 1,
-    date: '05-28 15:35'
-  },
-  {
-    title: '弘历软件云版重磅迎来升级三部曲',
-    cover: 'src/assets/cover3.png',
-    link: '#',
-    comments: 28,
-    date: '05-28 09:58'
-  },
-  {
-    title: '给弘历老师的一封信',
-    cover: 'src/assets/cover4.png',
-    link: '#',
-    comments: 0,
-    date: '05-26 18:18'
-  }
-]);
 
-const toggleSubscribe = () => {
-  isSubscribed.value = !isSubscribed.value;
-};
+import pindaoApi from '@/api/pindaoApi';
+import { ref, onMounted } from 'vue';
+
+// 定义响应式变量
+const items = ref([]);
+
+const dingyue = ref("500人");
+//获取频道列表
+function getpindao(queryType) {
+  pindaoApi.selectPindao(queryType).then((resp) => {
+    if (resp.data) {
+      items.value = resp.data.list;
+      console.log(items.value);
+    } else {
+      console.log('获取频道列表失败');
+    }
+  });
+}
+
+getpindao(4);
 
-const showLoading = () => {
-  alert('正在跳转到相对应内容...');
-  // 这里可以添加跳转逻辑，例如：
-  // window.location.href = link;
-};
 </script>
 
 

src/views/ClubView.vue

@@ -35,14 +35,14 @@
           <div class="video-info">
             <div class="video-title">
               <span class="gold-icon">🏆</span>
-              {{ video.title }}
+              {{ videos.title }}
             </div>
             <div class="video-meta">
               <span class="author">博股俱乐部</span>
               <div class="video-stats">
                 <div class="stat-item">
-                  <img src="../pic/link.jpg" alt="HomilyLink" class="homily-icon" />
-                  <span class="homily-text">HomilyLink</span>
+                  <img src="../pic/link.jpg" alt="HomilyLink666" class="homily-icon" />
+                  <span class="homily-text">{{ videos.publisherName }}</span>
                 </div>
                 <div class="stat-item">
                   <span class="date">{{ videos.publishTime }}</span>
@@ -57,7 +57,7 @@
                 </div>
                 <div class="stat-item">
                   <img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" />
-                  <span class="likes">{{ videos.likeCount}}</span>
+                  <span class="likes">{{ videos.likeCount }}</span>
                 </div>
               </div>
             </div>
@@ -77,158 +77,83 @@
   </div>
 </template>
 
-
-
-
 <script setup>
-
-// import { ref, onMounted } from 'vue';
-// import axios from 'axios';
-
-// // 定义接口地址常量
-// const API_URL = 'http://192.168.8.235:8000/api/show/getShowList';
-
-// // 定义接口调用函数
-// const fetchShowList = async () => {
-//   try {
-//     // 发送 POST 请求
-//     const response = await axios.post(API_URL);
-//     // 处理响应数据
-//     console.log('接口返回数据:', response.data);
-
-//     // 这里可以根据返回的数据更新页面状态
-//   } catch (error) {
-//     // 处理错误
-//     console.error('接口请求出错:', error);
-//   }
-// };
-
-// const videos = ref([
-//   {
-//     thumbnail: 'src/pic/1.jpg',
-//     title: '第一节《影形结构同现》',
-//     date: '05-26 11:42',
-//     views: 643,
-//     comments: 5,
-//     likes: 3,
-//     isLiked: false,
-//     isCommented: false
-//   },
-//   {
-//     thumbnail: 'src/pic/2.jpg',
-//     title: '第二节《强势结构形态》',
-//     date: '01-11 09:55',
-//     views: 498,
-//     comments: 10,
-//     likes: 12,
-//     isLiked: false,
-//     isCommented: false
-//   },
-// ]);
-
-// // 弹出框相关
-// const showModal = ref(false);
-// const modalTitle = ref('');
-// const modalContent = ref('');
-
-// // 增加播放量
-// const incrementViews = (index) => {
-//   videos.value[index].views += 1;
-//   saveToLocalStorage();
-// };
-
-// // 切换评论状态
-// const toggleComments = (index) => {
-//   if (videos.value[index].isCommented) {
-//     videos.value[index].comments -= 1;
-//     videos.value[index].isCommented = false;
-//   } else {
-//     videos.value[index].comments += 1;
-//     videos.value[index].isCommented = true;
-//   }
-//   saveToLocalStorage();
-// };
-
-// // 切换点赞状态
-// const toggleLikes = (index) => {
-//   if (videos.value[index].isLiked) {
-//     videos.value[index].likes -= 1;
-//     videos.value[index].isLiked = false;
-//   } else {
-//     videos.value[index].likes += 1;
-//     videos.value[index].isLiked = true;
-//   }
-//   saveToLocalStorage();
-// };
-
-// // 查看更多的动态效果
-// const showMore = () => {
-//   modalTitle.value = '查看更多内容';
-//   modalContent.value = '正在加载更多内容...';
-//   showModal.value = true;
-// };
-
-// // 查看更多专题的动态效果
-// const showMoreTopics = () => {
-//   modalTitle.value = '查看更多专题';
-//   modalContent.value = '正在加载更多专题...';
-//   showModal.value = true;
-// };
-
-// // 关闭弹出框
-// const closeModal = () => {
-//   showModal.value = false;
-// };
-
-// // 保存到本地存储
-// const saveToLocalStorage = () => {
-//   localStorage.setItem('videos', JSON.stringify(videos.value));
-// };
-
-// // 从本地存储加载
-// const loadFromLocalStorage = () => {
-//   const savedVideos = localStorage.getItem('videos');
-//   if (savedVideos) {
-//     videos.value = JSON.parse(savedVideos);
-//   }
-// };
-
-// // 清除本地存储（调试用）
-// localStorage.removeItem('videos');
-
-// // 合并 onMounted 逻辑
-// onMounted(() => {
-//   fetchShowList();
-//   loadFromLocalStorage();
-// });
-
-
 import boguApi from '@/api/boguApi';
-import { ref } from 'vue';
-const videos = ref([]);
+import { ref, onMounted } from 'vue';
 
-
-function formatTime(queryType) {
-  boguApi.selectBogu(queryType).then(resp => {
-    if(resp.data){
+// 定义响应式变量
+const videos = ref([]);
+const showModal = ref(false);
+const modalTitle = ref('');
+const modalContent = ref('');
+
+// 获取视频列表
+function getbohuhuiyuan(queryType) {
+  boguApi.selectBogu(queryType).then((resp) => {
+    if (resp.data) {
       videos.value = resp.data.list;
       console.log(videos.value);
+    } else {
+      console.log('获取视频列表失败');
     }
-  }).catch(error => {
-    // 处理请求错误
-    console.error('获取视频列表失败:', error);
   });
 }
 
-formatTime();
+getbohuhuiyuan(3);
+
+// 增加播放量
+const incrementViews = (index) => {
+  videos.value[index].viewCount += 1;
+  saveToLocalStorage();
+};
+
+// 切换评论状态
+const toggleComments = (index) => {
+  if (videos.value[index].isCommented) {
+    videos.value[index].commentCount -= 1;
+    videos.value[index].isCommented = false;
+  } else {
+    videos.value[index].commentCount += 1;
+    videos.value[index].isCommented = true;
+  }
+  saveToLocalStorage();
+};
+
+// 切换点赞状态
+const toggleLikes = (index) => {
+  if (videos.value[index].isLiked) {
+    videos.value[index].likeCount -= 1;
+    videos.value[index].isLiked = false;
+  } else {
+    videos.value[index].likeCount += 1;
+    videos.value[index].isLiked = true;
+  }
+  saveToLocalStorage();
+};
+
+// 查看更多的动态效果
+const showMore = () => {
+  modalTitle.value = '查看更多内容';
+  modalContent.value = '正在加载更多内容...';
+  showModal.value = true;
+};
+
+// 查看更多专题的动态效果
+const showMoreTopics = () => {
+  modalTitle.value = '查看更多专题';
+  modalContent.value = '正在加载更多专题...';
+  showModal.value = true;
+};
+
+// 关闭弹出框
+const closeModal = () => {
+  showModal.value = false;
+};
 
 </script>
 
-
-
-
 <style scoped>
-
+/* 样式部分保持不变 */
 .header-content p {
   font-size: 20px;
   text-align: left;
@@ -318,7 +243,7 @@ formatTime();
 .video-list {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
 }
 
 .video-card {