diff --git a/vueHomilyLink/src/views/HomeView.vue b/vueHomilyLink/src/views/HomeView.vue index 9a7791b..89a0c11 100644 --- a/vueHomilyLink/src/views/HomeView.vue +++ b/vueHomilyLink/src/views/HomeView.vue @@ -3,16 +3,6 @@ import Nav from '@/components/Nav.vue'; import { ref, onMounted, reactive,computed } from 'vue'; import homeApi from '@/api/HomeApi'; -const articleImgSrc = ref(''); -const title = ref(''); -const authorAvatarSrc = ref(''); -const authorName = ref(''); -const viewsCount = ref(''); -const commentsCount = ref(''); -const likesCount = ref(''); -const playTime = ref(''); -const club_id=ref(''); - const seeSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIjSURBVFiF7VhtkqQgDE2sudfSxwAOox4GOUYzFzPzY2Ar0higdWtnqni//IjwQh5JBGBgYGBg4H8C7xrIe68AAPZ9V4j4h4g+07tpmoLWOtwxzyXC3ntFRDMAqBZ7IlqttcuVOd8i3Es0xxXi3YSdcwsiztnjAACAiCsAQAq/917t+67iu/ybt4h3Ed627QnHVQ2IuLbqs+RsL+lmwjnZK2EtEA/GmEfLt1XCJb0i4uPqro/jPtmjpmhVCW/bRj2D8vRWi8A7iyESzkInhk3KHDX5ZHIT5zklnOvMGNNsW0IPacl2aiGAiKcelzYQIj6IaCWilY0xJ7mUkFJizbZImBMgIlGzua0x5qG1DtbaxVq7cNJRMkVorUNm+yyRfiHsnFs4ASmMfMAz2/gsxFslrXJmW3TwQNh7r/gmq+3yVMVq4OGuIW64EG9fHCxKohXTNIXSdQ7uWKOTpzYHwlGraWLF5VGDpM/DhIJjAEdJAsBLW1pMVbxYNKQj0fZKeizZfpQ+jGnpGa9n7/1pA57bOucA4Hsl80LCs0AOVnhE26KGCymmOR0h4oyIc3TiQFaKFO8rJFuxNPeUTKHaVfuPW0ozG6yr+QH4Jp82V61RymUjabyJMMBrL/yj28uEX9PAVybqIn7SgjaTBbjvJ/RvGuJnEKmssiyj8m/+6U8oR0sPLKDr55Xj8slPJ/G3iSbcelTFG5t0XNWS3gYGBgYGfg++AMoF42iHsimVAAAAAElFTkSuQmCC'); const pingSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg=='); const zanSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHOSURBVFiF7ZjdbawwEIXPISkknVzvC9p2sAtgKQC7hrTBS0wn9zbiyQsg4/3JgnfjKLpHWgmN/74dezwDwH/dFnMGO+eUiLQAlIh0AGCMOeXMWeUMDiEoAAoASLYk277vs4Be9g7s+/5EsgUAEelIAsAbSVXXNYdh8HvmzfLQJG+MOWmtD/O2kWydc+rbgGLvkOxme+752Q0Uq2kan5g8AEyHfbM2A6VnZ8+iDwWK9YgtSrUJyDmnnumdzUDTvQPgOd4BgNctnTd6R1lrP641isgInP+xu4HiG3iDd9S1BpJqmnc1391A93qHZBdCGL/o8wdRynHO+fn6WCXXS3nIGHOKQ11rnZWQY1lrZXr0WusDEHkoytwrOed8COFRDCtNOXC1ZhU17rpZczRt3UpnYT9RH74HaVlzOXOPyPY5UqmhGFBcnlRV5ZfnEjC3VAwoTkNxCVMMKIowH9uLb1kcYUBZIHXJWNxDqYoAXQt54Ad4KH1JKAIUh3yqIkBzyF+qrc4KNJJtmvmrqvKzzVr7kYbqDhh1rX0BEpFxLiu/kLqz302JSHepFF4+NgzD4I/H4ygi/wCM84/k36ZpfF3XnD8oZLJ4EXl/1lvL79cnbWbUVZZeqYsAAAAASUVORK5CYII='); @@ -37,22 +27,29 @@ const articleData = reactive({ flag_type:'' }); -console.log('初始化后的articleData:', articleData); - // 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中 const mapResponseToArticleData = (responseData) => { if (Array.isArray(responseData)) { + console.log('res:', responseData); articleData.articleImgSrc = responseData.map(item => item.cover); articleData.title = responseData.map(item => item.name); - articleData.authorAvatarSrc = responseData.map(item => item.avatar); - articleData.authorName = responseData.map(item => item.username); - articleData.viewsCount = responseData.map(item => item.view_count); + articleData.authorAvatarSrc = responseData.map(item => item.user.avatar); + articleData.authorName = responseData.map(item => item.user.username); + articleData.viewsCount = responseData.map(item => item.viewCount); articleData.commentsCount = responseData.map(item => item.comments); articleData.likesCount = responseData.map(item => item.likes); - articleData.playTime = responseData.map(item => item.video_duration); - articleData.publishTime = responseData.map(item => item.releaseTime); - articleData.club_id = responseData.map(item => item.club_id); - articleData.flag_type = responseData.map(item => item.flag_type); + articleData.playTime = responseData.map(item => item.videoDuration); + articleData.publishTime = responseData.map(item => { + const date = new Date(item.releaseTime); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + const hours = ('0' + date.getHours()).slice(-2); + const minutes = ('0' + date.getMinutes()).slice(-2); + return `${month}-${day} ${hours}:${minutes}`; + }); + articleData.club_id = responseData.map(item => item.clubId); + articleData.flag_type = responseData.map(item => item.flagType); + } else { console.warn('接口返回的数据格式不符合预期'); } @@ -62,15 +59,43 @@ const mapResponseToArticleData = (responseData) => { async function selectAll() { try { const response = await homeApi.gethomeList(); - mapResponseToArticleData(response); + mapResponseToArticleData(response.data); + } catch (error) { console.error('获取数据出错：', error); } } - +console.log('初始化后的articleData:', articleData); selectAll(); + +// 精选视频接口 +const articleData2 = ref([]); +function fetchData (){ + homeApi.getHomeVideo().then(response => { + // 将articleData响应式对象赋值给articleData2 + articleData2.value = response.data; + articleData2.value = articleData2.value.map(item => { + const date = new Date(item.releaseTime); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + const hours = ('0' + date.getHours()).slice(-2); + const minutes = ('0' + date.getMinutes()).slice(-2); + return { + ...item, + releaseTime: `${month}-${day} ${hours}:${minutes}` + }; + }); + console.log('初始化后的articleData2:', articleData2.value); + }).catch(error => { + console.error('获取数据出错：', error); + }); +}; +fetchData (); + + + const getColorClass = (index) => { const num = index + 1; if (num === 1) { @@ -83,9 +108,9 @@ const getColorClass = (index) => { return ''; }; -const filteredArticleData = computed(() => { - return articleData.title.filter((_, index) => articleData.flag_type[index] === 1); -}); +// const filteredArticleData = computed(() => { +// return articleData.title.filter((_, index) => articleData.flag_type[index] === 1); +// });