我们上一篇文章的轮播,点击轮播海报会跳到相应的歌曲播放中。今天我们来实现一下歌曲播放页面。
这个接口是歌曲详情、如果只有一首歌只需要传一个id。那我们只需要将轮播图片对应歌曲的id传给我们个这歌曲播放详情页面。
我们使用这种动态路由匹配的方式来传这个id、不使用 ?id = 123
这种传参的方式。
{
path:'song/:id',
name:'Song',
component: () => import('@/client/Song/Song.vue')
}
跳转时将id
拼接到最后
新建一个 Song.vue
。
这里用到了 useRouter
这个Hook。然后 通过 router.currentRoute.value.params
可以得到 :id
路由中我们传的id值。
<template>
songs
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router"
import { ref } from "vue"
const router = useRouter()
// 这里因为 ref的处理 所以会多一层value,这里解构了两次
const {value:{id}} = ref(router.currentRoute.value.params)
console.log(router)
</script>
<style>
</style>
我们看一下这个router对象,他的原型上有go、push、back、以及我们要用的 currentRoute
我们再看一下currentRoute,它上面的 value.param
正是匹配出的我们想要的id。
在我们的api文件下(封装后的接口文件)的song.ts中,写一下axios对后端接口的调用。
import request from "@/utils/request";
export const songDetail = (param:any)=>{
return request({
method:'POST',
// 这里会和我们request.ts中的baseUrl进行拼接。这个 / 写不写都可以。 因为他有一个多退少补机制
url:'/api/song/detail',
data:param
})
}
然后在song页面中调用 这里我声明了两个响应式变量:songList、picUrl用于存放整个歌曲详情数据和歌曲详情对应的封面图片。
<script lang="ts" setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import { songDetail } from '@/api/song'
const router = useRouter()
// 歌曲id
const {value:{id}} = ref(router.currentRoute.value.params)
// 图片
let picUrl = ref('')
// 歌曲列表
const songList = ref();
const getSongDetail = async()=>{
const {data:res} = await songDetail({ids:id})
console.log(res.songs[0].al)
songList.value = res?.songs[0]
res? picUrl.value = res?.songs[0].al.picUrl:''
}
getSongDetail()
</script>
先看一下效果。这里展示了两次图片,其中一个进行了高斯模糊
container
位置为相对定位,并且不让他滚动。coverImg
,让其位置在container的位置绝对定位。对其进行了放大和模糊处理main_container
与coverImg
同级,我要它是可以滚动的。同样也是绝对位置,让其背景色为透明。给他一个 max-height
,并让其可以滚动。<template>
<div class="container">
<!-- 作为背景图片 -->
<div class="coverImg">
<el-image :src="picUrl" style="height:100%"></el-image>
</div>
<div class="main_container">
<div class="song_info">
<el-image :src="picUrl" ></el-image>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.container{
width:100%;
background:#ffffff;
height:100%;
overflow: hidden;
position: relative;
}
.coverImg{
position:absolute;
filter: blur(120px);
transform: scale(1.3);
z-index:9;
}
.main_container{
position:absolute;
// top:0;
overflow: scroll;
width:100%;
max-height:800px;
background: transparent;
z-index:10;
.song_info{
width:30%;
height:10000px;
overflow: auto;
}
}
</style>