commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加音乐,摇一摇,服务等页面

Browse Source
This commit is contained in:
cansnow
2026-02-15 19:41:13 +08:00
parent abd279e7a7
commit 271ec4b9c2
74 changed files with 14021 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/find/music/components/play-bar.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<view v-if="currentPlaySong != null" class="play-bar flex-v-center" @click="bindOnShowPlayViewPopup">
<view class="music-cover flex-v-h-center" :class="currentPlayer.playState ? 'spin-start':'spin-stop'">
<u-avatar :src="currentPlaySong.pic" mode="circle" size='70'></u-avatar>
</view>
<view style="width: 64%;">
<view class="music-info flex-v-center text-line-1">
<view class="music-name text-line-1">{{currentPlaySong.songName}}</view>
<view class="line">-</view>
<view class="music-singer text-line-1">{{currentPlaySong.artist}}</view>
</view>
<view class="u-p-l-20 u-p-r-20 u-flex u-row-between u-col-center">
<view style="width: 80%;">
<u-line-progress active-color="#19be6b"
:striped="true"
:height="8"
:striped-active="true"
:show-percent="false"
:percent="currentPlayer.progress"></u-line-progress>
</view>
<view class="u-font-24 u-tips-color">
<text> {{currentPlaySong.songTimeMinutes}}</text>
</view>
</view>
</view>
<view class="bars flex-v-center flex-space-between">
<view style="width: 64rpx;">
<view class="u-progress-content flex-v-h-center btn-active" @tap.stop="bindOnControllerPlay">
<u-icon :class="currentPlayer.playState ? 'play' : 'pause'"
:name="currentPlayer.playState ? 'pause-circle' : 'play-circle'" size="54"></u-icon>
</view>
</view>
<view class="tools-item btn-active" style="display: inline-block;" @tap.stop="bindOnShowPlayListPopup">
<u-icon name="music-list" custom-prefix="custom-icon" size="54"></u-icon>
</view>
</view>
</view>
<view v-else class="play-bar flex-v-center test-border u-tips-color">
<view style="text-align: center;width: 100%;">
<text>当前暂无播放歌曲记录</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
bindOnControllerPlay(){
this.$emit("changePlayStatus");
},
bindOnShowPlayListPopup(){
this.$emit("showPlayList")
},
bindOnShowPlayViewPopup(){
this.$emit("showPlayView")
},
}
}
</script>
<style>
@import "@/static/music/music.css";
</style>
<style lang="scss" scoped>
.play-bar{
position: fixed;
bottom: 30px;
left: 0;
width: 100%;
height: 120rpx;
background-color: #ffffff;
padding: 0 40rpx;
z-index: 1000;
.music-cover{
width: 100rpx;
height: 100rpx;
background-image: url('@/static/music/disc-plus.png');
background-size: 100% 100%;
flex-shrink:0;
-webkit-transform: rotate(360deg);
animation: rotation 10s linear infinite;
-moz-animation: rotation 10s linear infinite;
-webkit-animation: rotation 10s linear infinite;
-o-animation: rotation 10s linear infinite;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.spin-stop{
-webkit-animation-play-state:paused
}
.spin-start{
-webkit-animation-play-state:running
}
.music-info{
display: flex;
padding: 0 20rpx;
flex: 1;
.music-name{
max-width: 65%;
flex-shrink:0;
}
.line{
padding: 0 10rpx;
color: $uni-text-color-disable;
font-size: $uni-font-size-sm;
}
.music-singer{
max-width: 35%;
color: $uni-text-color-disable;
font-size: $uni-font-size-sm;
}
}
.bars{
width: 160rpx;
text-align: right;
height: 100%;
.u-progress-content{
width: 100%;
height: 100%;
padding-left: 4rpx;
}
}
}
</style>
pages/find/music/index.vue
+265
View File
@@ -0,0 +1,265 @@
<template>
<view>
<u-navbar :is-back="true" title="" :background="{ background: '#ffffff' }"
:border-bottom="false" z-index="1001">
<view class="slot-wrap u-font-32">
<view class="u-font-32" style="width: 100%;">
<u-tabs :list="tabList" active-color="#2ebe4b"
:is-scroll="false" :show-bar="true" :font-size="34"
:current="currentTab" :active-item-style="activeItemStyle"
@change="tabChange"></u-tabs>
</view>
</view>
</u-navbar>
<view>
<view class="u-p-l-40 u-p-r-40">
<view class="u-m-t-20 u-m-b-20">
<u-search placeholder="支持搜索歌手,歌名,专辑"
border-color="#eeeeee"
bg-color="#ffffff"
shape="square"
:clearabled="true"
:show-action="true"
:action-style="actionStyle"
:animation="false"
height="80"
@search="search"
@custom="search"
v-model="searchWord">
</u-search>
</view>
<scroll-view
:scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight)+'px'">
<u-row>
<u-col :span="12">
<view class="u-p-30 u-font-36" style="font-weight: bold;">
<text>热门男歌手</text>
</view>
</u-col>
<u-col :span="4" v-for="(item,index) in singerManList" :key="index">
<view class="u-m-b-30" @click="toSongList(item)">
<view class="u-flex u-row-center u-col-center">
<view>
<u-image width="100%" height="130rpx"
border-radius="16rpx"
mode="heightFix"
:src="item.avatar"></u-image>
</view>
</view>
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
<text>{{item.singerName}}</text>
</view>
</view>
</u-col>
</u-row>
<u-row>
<u-col :span="12">
<view class="u-p-30 u-font-36" style="font-weight: bold;">
<text>热门女歌手</text>
</view>
</u-col>
<u-col :span="4" v-for="(item,index) in singerWomenList" :key="index">
<view class="u-m-b-30" @click="toSongList(item)">
<view class="u-flex u-row-center u-col-center">
<view>
<u-image width="100%" height="130rpx"
border-radius="16rpx"
mode="heightFix"
:src="item.avatar"></u-image>
</view>
</view>
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
<text>{{item.singerName}}</text>
</view>
</view>
</u-col>
</u-row>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageHeight:0,
tabList:[
{
name: '在线听'
},
{
name: '本地听'
},
],
currentTab:0,
activeItemStyle:{
fontSize:'36rpx',
},
actionStyle:{
backgroundColor:'#46be72',
color:'#ffffff',
height:'80rpx',
lineHeight:'80rpx',
position:'relative',
left:'0rpx',
textAlign:'center',
width:'140rpx',
borderRadius:'10rpx',
borderTopRightRadius:'10rpx',
borderBottomRightRadius:'10rpx'
},
searchWord:'',
singerManList:[
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
singerName:'周杰伦'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001BLpXF2DyJe2.jpg?max_age=2592000',
singerName:'林俊杰'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002J4UUk29y8BY.jpg?max_age=2592000',
singerName:'薛之谦'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
singerName:'陈奕迅'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
singerName:'张杰'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP_4.jpg?max_age=2592000',
singerName:'刘德华'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000004NMZuf2BLjg8_2.jpg?max_age=2592000',
singerName:'周传雄'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000aHmbL2aPXWH.jpg?max_age=2592000',
singerName:'李荣浩'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003fA5G40k6hKc.jpg?max_age=2592000',
singerName:'周深'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001IoTZp19YMDG.jpg?max_age=2592000',
singerName:'易烊千玺'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001z2JmX09LLgL.jpg?max_age=2592000',
singerName:'汪苏泷'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000CK5xN3yZDJt.jpg?max_age=2592000',
singerName:'许嵩'
}
],
singerWomenList:[
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg?max_age=2592000',
singerName:'G.E.M.邓紫棋'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000003ZpE43ypssl.jpg?max_age=2592000',
singerName:'张碧晨'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000oCQfT3kdonw.jpg?max_age=2592000',
singerName:'黄霄雲'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002lKaDq2lLLtk.jpg?max_age=2592000',
singerName:'蔡健雅'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
singerName:'苏星婕'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003iPzNg35cWzp.jpg?max_age=2592000',
singerName:'程响'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000aw4WC2EQYTv_5.jpg?max_age=2592000',
singerName:'张靓颖'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000GGDys0yA0Nk_2.jpg?max_age=2592000',
singerName:'梁静茹'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001pWERg3vFgg8.jpg?max_age=2592000',
singerName:'孙燕姿'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000GDDuQ3sGQiT.jpg?max_age=2592000',
singerName:'王菲'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003jJGvv3C82KZ_5.jpg?max_age=2592000',
singerName:'刘若英'
},
{
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000002raUWw3PXdkT_5.jpg?max_age=2592000',
singerName:'张韶涵'
}
]
};
},
created:function(){
let pageHeight= this.$u.sys().windowHeight*0.82;
this.pageHeight=pageHeight;
},
methods: {
tabChange:function(index){
this.currentTab = index;
},
search:function(value){
console.log("搜索关键字",value);
let that=this;
if(value.length>0){
this.$u.route({
url:'pages/tabbar/find/music/song-list',
params:{
keyWords:value
}
})
}
},
toSongList:function(singer){
let that=this;
this.$u.route({
url:'pages/tabbar/find/music/song-list',
params:{
keyWords:singer.singerName
}
})
}
},
}
</script>
<style lang="scss">
.slot-wrap {
display: flex;
align-items: center;
/* 如果您想让slot内容占满整个导航栏的宽度 */
flex: 1;
/* 如果您想让slot内容与导航栏左右有空隙 */
padding: 0 30rpx;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
pages/find/music/song_list.vue
+218
View File
@@ -0,0 +1,218 @@
<template>
<view>
<u-navbar :is-back="true" :title="navbarTitle" :background="{ background: '#ffffff' }"
:title-bold="true" title-size="34"
:border-bottom="true" z-index="1001">
</u-navbar>
<view>
<view class="u-p-30 u-flex u-row-between u-col-center">
<view style="font-size: 36rpx;font-weight: bold;">
<text>列表</text>
<text>({{songList.length}})</text>
</view>
<view class="u-flex u-row-left u-col-center">
<view class="u-m-r-30">
<u-icon name="play-circle-fill" size="42" color="#2979ff" @click="playAll()"
label="播放全部" label-size="32"></u-icon>
</view>
<view class="u-m-l-30">
<u-icon name="heart-fill" size="42" color="#fa3534" @click="addToLocal()"
label="添加本地" label-size="32"></u-icon>
</view>
</view>
</view>
<scroll-view :scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight-50)+'px'" @scrolltolower="loadMore">
<view class="u-flex u-row-between u-col-center u-p-30 u-border-bottom"
v-for="(song,index) in songList" :key="index">
<view class="u-flex u-row-left u-col-center">
<view class="u-m-r-30">
<u-image :src="song.pic" width="100rpx" height="100rpx" border-radius="12rpx"></u-image>
</view>
<view>
<view class="u-font-34 u-m-b-10 u-line-1" style="color: #000000;width: 400rpx;">{{escape2Html(song.name)}}</view>
<view class="u-font-28 u-m-t-10 u-flex u-row-left u-col-center u-line-3" style="color: #808288;width: 400rpx;">
{{escape2Html(song.artist)}}-{{escape2Html(song.album)}}
</view>
</view>
</view>
<view class="u-flex u-row-around u-col-center">
<view>
<u-icon v-if="currentPlaySong&&currentPlaySong.id==song.rid&&currentPlayer.playState" name="pause-circle" size="50" color="#797979"></u-icon>
<u-icon v-else @click="toPlaySong(song)" name="play-circle" size="50" color="#797979"></u-icon>
</view>
<view class="u-m-l-30">
<u-icon @click="download(song)" name="download" size="50" color="#797979"></u-icon>
</view>
</view>
</view>
</scroll-view>
</view>
<view>
<play-bar @changePlayStatus="changePlayStatus" @showPlayView='bindOnPlayBarChange' @showPlayList='bindOnShowPlayListPopup'></play-bar>
</view>
</view>
</template>
<script>
import playBar from './components/play-bar.vue';
import playerUtil from '@/util/music/music-player.js';
export default {
components:{
playBar
},
data() {
return {
navbarTitle:"歌曲列表",
pageHeight:0,
pageNum:1,
pageSize:30,
searchWord:"",
total:0,
songList:[],
loadMoreFlag:false
};
},
watch:{
currentPlaySong:function(newSong){
let that=this;
console.log("====监听到播放歌曲发生变化======");
if(newSong!=null&&newSong.id){
playerUtil.initPlayer(that);
}
}
},
created:function(){
let pageHeight= this.$u.sys().windowHeight*0.79;
this.pageHeight=pageHeight;
},
onLoad:function(option){
let that=this;
console.log("搜索词",option);
let keyWords= option.keyWords;
if(keyWords){
this.navbarTitle=keyWords;
this.searchWord=keyWords;
};
this.getSongList();
that.$u.vuex("currentPlayer.canPlay",false);
//当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
if(playerUtil.bgAudioManager.paused==true){
playerUtil.initPlayer(that);
}
},
methods:{
getSongList:function(){
let that=this;
let param={
pageNum:that.pageNum,
pageSize:that.pageSize,
keyWords:encodeURI(this.searchWord)
};
console.log("搜索歌曲列表",param);
this.$u.api.music.searchMusicList(param).then(res => {
//console.log("获取歌曲列表结果",res);
if(res.code==200){
let result= res.data;
if(result!=null&&result!=undefined){
let reqData= result.data;
this.total= reqData.total;
let list=reqData.list;
if(that.loadMoreFlag==true){
this.songList=this.songList.concat(list);
return;
}else{
this.songList=list;
}
}
}
});
},
loadMore:function(){
let that=this;
if(that.songList.length>=that.total){
that.globalUtil.utilAlert("暂无更多");
that.loadMoreFlag=false;
return;
}
that.pageNum++;
that.loadMoreFlag=true;
console.log("加载更多");
that.getSongList();
},
toPlaySong:function(song){
//console.log("当前选中播放歌曲",song);
//this.$u.vuex("currentPlaySong",song);
let param={
musicId:song.rid
};
this.$u.api.music.getSongInfoAndLrc(param).then(res => {
if(res.code==200){
let baseInfoResult= res.data;
let lrclist= baseInfoResult.data.lrclist;
let songInfo= baseInfoResult.data.songinfo;
songInfo.lrclist=lrclist;
this.$u.api.music.getSongSrc(param).then(res => {
if(res.code==200){
let songSrcResult= res.data;
let songSrc=songSrcResult.data.url;
songInfo.playSrc=songSrc;
console.log("获取歌曲详细信息结果",songInfo);
this.$u.vuex("currentPlaySong",songInfo);
}
})
}
})
//this.$forceUpdate();
},
changePlayStatus:function(){
let that=this;
console.log("改变状态")
playerUtil.bindOnControllerPlay(that);
},
bindOnPlayBarChange(){
//this.$refs.playViewPopup.show();
},
bindOnShowPlayListPopup(){
//this.$refs.playListPopup.show();
},
playAll:function(){
},
addToLocal:function(){
let that=this;
},
download:function(song){
let that=this;
let param={
musicId:song.rid,
songName:that.escape2Html(song.name),
saveDir:that.escape2Html(song.artist),
};
console.log("下载参数",param);
this.$u.api.music.downLoadSong(param).then(res => {
console.log("下载结果",res);
if(res.code==200){
that.globalUtil.utilAlert("下载成功");
let playSrc= res.data.url;
}else{
that.globalUtil.utilAlert("下载失败");
}
})
},
escape2Html:function(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"','$':','};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){
return arrEntities[t];
});
}
}
}
</script>
<style lang="scss">
</style>