Merge branch 'guoyanqiang' into dev

src/api/boguApi.js

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

src/api/zhiboApi.js

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

src/views/ClubView.vue

@@ -25,9 +25,9 @@
 
       <!-- 视频列表 -->
       <div class="video-list">
-        <div class="video-card" v-for="(video, index) in videos" :key="index">
+        <div class="video-card" v-for="(videos, index) in videos" :key="index">
           <div class="video-thumbnail" @click="incrementViews(index)">
-            <img :src="video.thumbnail" alt="Video Thumbnail" />
+            <img :src="videos.cover" alt="Video Thumbnail" />
             <div class="play-button">
               <span class="play-icon">▶</span>
             </div>
@@ -45,19 +45,19 @@
                   <span class="homily-text">HomilyLink</span>
                 </div>
                 <div class="stat-item">
-                  <span class="date">{{ video.date }}</span>
+                  <span class="date">{{ videos.publishTime }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/bofang.png" alt="Views" class="views-icon" />
-                  <span class="views">{{ video.views }}</span>
+                  <span class="views">{{ videos.viewCount }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/bofang.png" alt="Comments" class="comments-icon" @click.stop="toggleComments(index)" />
-                  <span class="comments">{{ video.comments }}</span>
+                  <span class="comments">{{ videos.commentCount }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" />
-                  <span class="likes">{{ video.likes }}</span>
+                  <span class="likes">{{ videos.likeCount}}</span>
                 </div>
               </div>
             </div>
@@ -77,108 +77,156 @@
   </div>
 </template>
 
+
+
+
 <script setup>
-import { ref, onMounted } from 'vue';
-
-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(() => {
-  loadFromLocalStorage();
-});
+
+// 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([]);
+
+
+function formatTime(queryType) {
+  boguApi.selectBogu(queryType).then(resp => {
+    if(resp.data){
+      videos.value = resp.data.list;
+      console.log(videos.value);
+    }
+  }).catch(error => {
+    // 处理请求错误
+    console.error('获取视频列表失败:', error);
+  });
+}
+
+formatTime();
+
 </script>
 
+
+
+
 <style scoped>
 
 .header-content p {
@@ -401,4 +449,4 @@ onMounted(() => {
   font-size: 24px;
   cursor: pointer;
 }
-</style>
+</style>    

src/views/LiveView.vue

@@ -3,17 +3,17 @@
     <div class="course-grid">
       <div v-for="course in courses" :key="course.id" class="course-card">
         <div class="course-image">
-          <img :src="course.image" alt="课程图片">
+          <img :src="course.cover" alt="课程图片">
           <div class="live-badge">即将开播</div>
-          <div class="live-time">{{ course.time }}</div>
+          <div class="live-time">{{ course.startTime }}</div>
         </div>
         <div class="course-info">
           <div class="course-title">{{ course.title }}</div>
           <div class="course-footer">
             <div class="course-tag">
-              <img :src="course.avatar" alt="讲师头像">
+              <img :src="course.cover" alt="讲师头像">
               <!-- <img src="../pic/images/1.png" alt="讲师头像"> -->
-              {{ course.teacher }}
+              {{ course.publisherName }}
             </div>
             <button class="book-btn" :class="{ active: course.booked }" @click="toggleBook(course.id)">预约</button>
           </div>
@@ -23,143 +23,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import zhiboApi from '@/api/zhiboApi';
 import { ref } from 'vue';
+const courses = ref([]);
 
-export default {
-  name: 'LiveCourses',
-  setup() {
-    const courses = ref([
-      {
-        id: 1,
-        title: '猎庄之顶级波段我公司不...',
-        teacher: '猎庄之顶级波段',
-        time: '明天09:55开播',
-        image: 'src/pic/images/1.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 2,
-        title: '如何提前把握大盘和个股...',
-        teacher: '多空识庄短线寻...',
-        time: '明天10:00开播',
-        image: 'src/pic/images/2.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 3,
-        title: '【粤语】AI铁皮训练-Tom...',
-        teacher: '【粤语】AI铁皮...',
-        time: '明天11:30开播',
-        image: 'src/pic/images/3.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 4,
-        title: '构建有效的价值投资体系...',
-        teacher: '构建有效的价值...',
-        time: '明天20:30开播',
-        image: 'src/pic/images/4.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 5,
-        title: '猎庄之顶级波段我公司不...',
-        teacher: '猎庄之顶级波段',
-        time: '明天09:55开播',
-        image: 'src/pic/images/5.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 6,
-        title: '如何提前把握大盘和个股...',
-        teacher: '多空识庄短线寻...',
-        time: '明天10:00开播',
-        image: 'src/pic/images/6.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 7,
-        title: '【粤语】AI铁皮训练-Tom...',
-        teacher: '【粤语】AI铁皮...',
-        time: '明天11:30开播',
-        image: 'src/pic/images/7.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 8,
-        title: '构建有效的价值投资体系...',
-        teacher: '构建有效的价值...',
-        time: '明天20:30开播',
-        image: 'src/pic/images/8.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      }
-    ]);
 
-    const toggleBook = async (id) => {
-      const courseIndex = courses.value.findIndex(course => course.id === id);
-      if (courseIndex !== -1) {
-        const course = courses.value[courseIndex];
-        try {
-          if (!course.booked) {
-            // 预约课程 - POST 请求
-            const response = await fetch(`https://your-backend-api.com/bookings/${id}`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                courseId: id
-              })
-            });
-
-            if (!response.ok) {
-              throw new Error('预约失败');
-            }
-
-            // 更新本地状态
-            course.booked = true;
-            alert(`您已成功预约课程：${course.title}`);
-          } else {
-            // 取消预约 - DELETE 请求
-            const response = await fetch(`https://your-backend-api.com/bookings/${id}`, {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              }
-            });
-
-            if (!response.ok) {
-              throw new Error('取消预约失败');
-            }
+function formatTime(queryType) {
+  zhiboApi.selectZhibo(queryType).then(resp => {
+    if(resp.data){
+      courses.value = resp.data.list;
+      console.log(courses.value);
+    }
+  })
+}
 
-            // 更新本地状态
-            course.booked = false;
-            alert(`您已取消预约课程：${course.title}`);
-          }
-        } catch (error) {
-          console.error('预约请求失败:', error);
-          alert('预约请求失败，请稍后再试');
-        }
-      }
-    };
+formatTime();
 
-    return {
-      courses,
-      toggleBook
-    };
-  }
-};
 </script>
 
+
 <style scoped>
 .container {
   max-width: 1200px;

vite.config.js

@@ -1,18 +1,25 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
-
-// https://vite.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.8.235:8000', // 后端服务器地址
+        changeOrigin: true, // 改变请求源
+        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api
+      }
+    }
+  },
   plugins: [
     vue(),
-    vueDevTools(),
+    vueDevTools()
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
-  },
-})
+    }
+  }
+});