majun
/
practice_Vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

haha

dev
guoyanqiang 1 month ago
parent
c94de16b83
commit
14a8869df9
3 changed files with 165 additions and 127 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/api/boguApi.js
  2. 278
      src/views/ClubView.vue
  3. 4
      src/views/LiveView.vue

10
src/api/boguApi.js
View File

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

278
src/views/ClubView.vue
View File

@ -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,128 +77,156 @@
</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 { 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 {

4
src/views/LiveView.vue
View File

@ -26,8 +26,7 @@
<script setup>
import zhiboApi from '@/api/zhiboApi';
import { ref } from 'vue';
const courses = ref([
]);
const courses = ref([]);
function formatTime(queryType) {
@ -43,6 +42,7 @@ formatTime();
</script>
<style scoped>
.container {
max-width: 1200px;

Write Preview
Loading…
Cancel
Save