2022_07_21施工进度 2022_07_21施工进度{music id="1463391795" color="#1989fa" /}点击 http://test.bandao.ltd 再点击歌单再点击音乐可以播放歌曲，下面的播放暂停按钮可正常使用主要难点：本地要代理访问网易云的api，线上则不需要自己代理（这里花了两个小时来更正修复bug：刷新导致404// vue.config.js devServer: { proxy: { '/api': { target: 'https://music.163.com',//这里填入你要请求的接口的前缀 ws: true,//代理websocked changeOrigin: true,//虚拟的站点需要更管origin secure: true, //是否https接口 pathRewrite: { '^/api': ''//重写路径 } } } }// footerMusic.vue <!-- 本地使用这个，这里用了代理 --> <!-- <audio ref="myAudio" :src="`/api/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"></audio> --> <!-- 线上使用这个 --> <audio ref="myAudio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"></audio> 技术点vuex// store/index.js mutations: { updateIsBtnShow(state, value) { state.isBtnShow = value }, updatePlaylist(state, value) { state.playlist = value }, updatePlaylistIndex(state, value) { state.playlistIndex = value }, },// footerMusic.vue import { mapMutations, mapState } from 'vuex' computed: { ...mapState(['playlist', 'playlistIndex', 'isBtnShow']), }, methods: { ..mapMutations(['updateIsBtnShow']) },

2022_07_19施工进度 2022-07-20 03:29:47 星期三{music id="1958557200" color="#1989fa" /}{collapse}{collapse-item label="Daily部分" close}音乐没开自动播放好困啊，明天还要练车，绝了此页面随时消失嗷，说不定那天我又把服务器重启了，ngnix又开不了了，这个页面就g了图片放在我另外一个网站上了也是随时会g掉明天还要处理一堆拍的照片{/collapse-item}{/collapse}2022_07_19施工进度点击 http://test.bandao.ltd 再点击歌单网址是 http://test.bandao.ltd/itemMusic?id=5349291073 （好像直接点击进不去耶，显示404我也没搞懂）今天做的事情：上面的歌单信息展示部分写了200多行，大部分都是样式，写得我自己都要看不懂了已知bug ：直接点击链接或者再次刷新会404，但是本地运行没有这个情况歌单描述部分的箭头需要更改样式pc端显示大概率异常需要努力的地方：还需要了解一下flex布局加快学习的速度啊（原神活动主要都肝完了要好好学习了）下面是代码部分<template> <img :src="playlist.coverImgUrl" alt="" class="bgImg"> <van-row justify="space-between" align="center" class="itemMusicTop"> <van-col span="8" class="itemLeft"> <van-icon name="arrow-left" @click="$router.go(-1)" size="25" /> <span>歌单</span> </van-col> <van-col span="8" class="itemRight"> <van-icon name="search" class="search" size="25" /> <van-icon name="wap-nav" class="wap-nav" size="25" /> </van-col> </van-row> <van-row justify="space-between" align="center" class="itemMusicCenter"> <van-col span="10" class="imgBox"> <div class="imgBoxAndplayCount"> <span class="playCount"> <svg class="icon" aria-hidden="true"> <use xlink:href='#icon-bofang1'></use> </svg> {{ changeCount(playlist.playCount) }} </span> <img :src="playlist.coverImgUrl" alt="" class="coverImg"> </div> </van-col> <van-col span="14"> <van-row justify="center" class="listInfo"> <van-col span="30" class="title">{{ playlist.name }}</van-col> <van-col span="30" class="creator"> <img :src="playlist.creator.avatarUrl" alt=""> <span> {{ playlist.creator.nickname }} <van-icon name="arrow" size="15" /> </span> </van-col> <van-col span="30" class="description"> <div class="text"> {{ playlist.description }} </div> <van-icon name="arrow" size="15" /> </van-col> </van-row> </van-col> </van-row> <van-row justify="space-between" align="center" class="functionButtons"> <van-col span="6"> <van-icon name="chat-o" size="30" /> <span>{{ playlist.commentCount }}</span> </van-col> <van-col span="6"> <van-icon name="share-o" size="30" /> <span>{{ playlist.shareCount }}</span> </van-col> <van-col span="6"> <van-icon name="down" size="30" /> <span>下载</span> </van-col> <van-col span="6"> <van-icon name="add-o" size="30" /> <span>多选</span> </van-col> </van-row> </template> <script> import { getMusicItemList } from '@/request/api/item' export default { name: "itemMusicTop", props: ['playlist'], setup(props) { // console.log(props); // 通过props进行传值，判断如果没有，则从sessionStorage获取 if ((props.playlist.creator = "")) { try { console.log("here"); props.playlist.creator = JSON.parse(sessionStorage.getItem('itemDetail')).playlist.creator } catch { console.log("here"); let response = getMusicItemList(playlistId) playlist = response.data.playlist } } function changeCount(num) { if (num >= 100000000) { // toFixed(1) 小数点后一位 return (num / 100000000).toFixed(1) + "亿" } else if (num >= 10000) { return (num / 10000).toFixed(1) + "万" } } return { changeCount } } } </script> <style lang="less" scoped> .itemMusicTop { height: 50px; padding: 10px; .itemLeft, .itemRight { .van-icon { color: #fff; } } .itemLeft { span { position: relative; font-size: 25px; margin-left: 30px; top: -2.5px; color: #fff; text-align: center; } } .itemRight { position: absolute; right: 10px; .search { margin-right: 40px; } } } .bgImg { position: fixed; width: 100%; height: 350px; z-index: -1; filter: blur(40px); } .itemMusicCenter { margin-top: -15px; padding: 10px; height: 180px; .imgBox { padding: 5px; width: 150px; text-align: center; .imgBoxAndplayCount { position: relative; height: 130px; width: 130px; .coverImg { border-radius: 0.4rem; height: 130px; width: 130px; } .playCount { position: absolute; right: 0.1rem; top: 0.1rem; font-size: 0.25rem; color: #ccc; display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.2); margin: 4px; padding: 3px; border-radius: 0.4rem; .icon { width: 15px; fill: #ccc; } } } } .listInfo { padding: 5px; flex-flow: column; width: 100%; height: 150px; .title { font-weight: 900; color: #fff; font-size: .39rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .creator { padding: 10px 5px; color: #ccc; img { position: relative; border-radius: 0.6rem; height: 30px; } span { position: absolute; padding-left: 10px; width: 160px; font-size: .32rem; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .van-icon { position: absolute; bottom: 7.5px; padding-left: 15px; } } .description { position: relative; color: #ccc; // width: 80%; height: 80px; .text { position: absolute; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; width: 85%; } .van-icon { position: absolute; right: 13px; top: 27px; } } } } .functionButtons { color: #fff; height: 1.5rem; padding: 5px; margin-bottom: 10px; .van-col { display: flex; flex-direction: column; align-items: center; } } </style>