|
|
@@ -1,12 +1,11 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <!-- Header -->
|
|
|
+ <view class="bg">
|
|
|
+ <!-- 播放全部 -->
|
|
|
<view class="header">
|
|
|
<view class="header-left">
|
|
|
<!-- 播放按钮 -->
|
|
|
- <view class="play-circle">
|
|
|
+ <view class="play-circle" @click="palyHeaderBtn">
|
|
|
<image
|
|
|
- @click="palyBtn"
|
|
|
style="width: 48rpx; height: 48rpx"
|
|
|
src="/src/static//icon/fi-rr-play-alt.svg"
|
|
|
></image>
|
|
|
@@ -15,35 +14,27 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 循环播放 -->
|
|
|
- <view class="header-right">
|
|
|
- <image @click="cycleBtn" class="imgIcon" src="/src/static/icon/fi-rr-refresh.svg"></image>
|
|
|
- <image class="imgIcon" src="/src/static/icon/fi-rr-shuffle.svg"></image>
|
|
|
+ <view class="header-right" @click="cycleBtn">
|
|
|
+ <image v-if="isRefresh" class="imgIcon" src="/src/static/icon/fi-rr-refresh.svg"></image>
|
|
|
+ <image v-else class="imgIcon" src="/src/static/icon/fi-rr-shuffle.svg"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 当前播放 -->
|
|
|
- <view class="currently-playing">
|
|
|
+ <!-- 当前播放 循环播放-->
|
|
|
+ <view class="currently-playing" v-show="playDom">
|
|
|
<view class="currently-playing-left">
|
|
|
- <view class="play-circle">
|
|
|
- <image
|
|
|
- @click="palyBtn"
|
|
|
- class="palyIcon"
|
|
|
- src="/src/static//icon/fi-rr-play.svg"
|
|
|
- v-if="type === 0"
|
|
|
- ></image>
|
|
|
- <image
|
|
|
- @click="palyBtn"
|
|
|
- class="palyIcon"
|
|
|
- src="/src/static//icon/fi-rr-play.svg"
|
|
|
- v-else
|
|
|
- ></image>
|
|
|
+ <view class="play-circle" @click="palyBtn">
|
|
|
+ <image v-if="isRePaly" class="palyIcon" src="/src/static/icon/fi-rr-play.svg"></image>
|
|
|
+ <image v-else class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
|
|
|
</view>
|
|
|
- <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
|
|
|
+ <text class="text-gray">继续播放: {{ songTitle }}</text>
|
|
|
</view>
|
|
|
- <!-- 循环播放 -->
|
|
|
<view style="display: flex; gap: 80rpx">
|
|
|
- <image @click="cycleBtn" class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
|
|
|
- <image class="imgIcon" src="/src/static/icon/fi-rr-cross-small.svg"></image>
|
|
|
+ <image
|
|
|
+ @click="cleanBtn"
|
|
|
+ class="imgIcon"
|
|
|
+ src="/src/static/icon/fi-rr-cross-small.svg"
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -51,12 +42,10 @@
|
|
|
<view class="playlist">
|
|
|
<view v-for="(song, index) in songs" :key="index" class="playlist-item">
|
|
|
<view class="album-cover">
|
|
|
- <view class="cover-inner">
|
|
|
- <image
|
|
|
- style="width: 100rpx; height: 100rpx"
|
|
|
- src="/src/static/icon/fi-rr-big-play.svg"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
+ <image
|
|
|
+ style="width: 100rpx; height: 100rpx"
|
|
|
+ src="/src/static/icon/fi-rr-big-play.svg"
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
<view class="song-details" @click="playFavoriteBtn(song, index)">
|
|
|
<text class="song-name">{{ song.name }}</text>
|
|
|
@@ -89,6 +78,7 @@
|
|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
+ // 综合还是收藏
|
|
|
const props = defineProps({
|
|
|
type: {
|
|
|
type: Number,
|
|
|
@@ -109,16 +99,35 @@
|
|
|
{ name: '世上只有妈妈好', duration: '3:35', favorite: false },
|
|
|
{ name: '蜗牛与黄鹂鸟', duration: '3:35', favorite: true },
|
|
|
])
|
|
|
- // 播放
|
|
|
+ const isRefresh = ref(true) // 循环
|
|
|
+ const isRePaly = ref(true) // 播放暂停切换
|
|
|
+ const playDom = ref(true)
|
|
|
+ const songTitle = ref('')
|
|
|
+ // 播放 暂停
|
|
|
+ const palyHeaderBtn = () => {
|
|
|
+ console.log(111, '播放', '暂停')
|
|
|
+ }
|
|
|
+ // 播放 暂停
|
|
|
const palyBtn = () => {
|
|
|
- console.log(111, '播放')
|
|
|
+ isRePaly.value = !isRePaly.value
|
|
|
+ console.log(111, '播放', '暂停')
|
|
|
}
|
|
|
// 循环播放
|
|
|
const cycleBtn = () => {
|
|
|
+ isRefresh.value = !isRefresh.value
|
|
|
console.log(111, '循环播放')
|
|
|
}
|
|
|
+ // 清除当前播放DOM
|
|
|
+ const cleanBtn = () => {
|
|
|
+ playDom.value = false
|
|
|
+ }
|
|
|
// 当前列表
|
|
|
const playFavoriteBtn = (song, index) => {
|
|
|
+ console.log(222)
|
|
|
+
|
|
|
+ playDom.value = true
|
|
|
+ songTitle.value = song.name
|
|
|
+ console.log(song, 'songsong')
|
|
|
const songData = encodeURIComponent(JSON.stringify(song))
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/music/component/musicPlayback?songDate=${songData}`,
|
|
|
@@ -138,67 +147,51 @@
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
- }
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ background: #fff;
|
|
|
|
|
|
- .header-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
.play-circle {
|
|
|
display: flex;
|
|
|
- /* justify-content: center; */
|
|
|
align-items: center;
|
|
|
- width: 70rpx;
|
|
|
height: 100rpx;
|
|
|
}
|
|
|
- .orange-icon {
|
|
|
- margin-right: 16rpx;
|
|
|
- color: #f97316;
|
|
|
- }
|
|
|
|
|
|
.text-gray {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 440rpx;
|
|
|
- overflow: hidden;
|
|
|
- font-family: 'PingFang SC';
|
|
|
+ padding-left: 25rpx;
|
|
|
font-size: 24rpx;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
color: #333;
|
|
|
+ overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
-
|
|
|
- .header-right {
|
|
|
- display: flex;
|
|
|
- gap: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .gray-icon {
|
|
|
- color: #6b7280;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
/* 播放 */
|
|
|
.currently-playing {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: 2rpx solid #f0f0f0;
|
|
|
+ .currently-playing-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .currently-playing-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
/* 列表 */
|
|
|
.playlist {
|
|
|
- height: calc(100vh - 630rpx);
|
|
|
+ height: calc(100vh - 620rpx);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
.playlist::-webkit-scrollbar {
|
|
|
@@ -207,13 +200,9 @@
|
|
|
.playlist-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 24rpx 0px;
|
|
|
- cursor: pointer;
|
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .playlist-item:hover {
|
|
|
- background-color: #f9fafb;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
|
|
|
.album-cover {
|
|
|
@@ -223,22 +212,12 @@
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .cover-inner {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
.song-details {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.song-name {
|
|
|
- font-family: 'PingFang SC';
|
|
|
font-size: 32rpx;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
@@ -247,9 +226,7 @@
|
|
|
gap: 32rpx;
|
|
|
align-items: center;
|
|
|
font-size: 24rpx;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- color: var(--999, #999);
|
|
|
+ color: #999;
|
|
|
}
|
|
|
.imgIcon {
|
|
|
width: 32rpx;
|
PIWALIN
