You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.7 KiB
59 lines
1.7 KiB
6 months ago
|
<view class="player-container" wx:if="{{song}}">
|
||
|
|
<view class="player-bar">
|
||
|
|
<view class="progress">
|
||
|
|
<text class="time">{{formatTime(currentTime)}}</text>
|
||
|
|
<slider
|
||
|
|
class="slider"
|
||
|
|
value="{{currentTime}}"
|
||
|
|
max="{{duration}}"
|
||
|
|
activeColor="#ff3a3a"
|
||
|
|
backgroundColor="#ddd"
|
||
|
|
block-size="12"
|
||
|
|
bindchange="onSliderChange"
|
||
|
|
/>
|
||
|
|
<text class="time">{{formatTime(duration)}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="main-bar">
|
||
|
|
<view class="song-info" bindtap="toggleLyric">
|
||
|
|
<image
|
||
|
|
class="cover {{playing ? 'rotating' : ''}}"
|
||
|
|
src="{{song.al.picUrl}}"
|
||
|
|
mode="aspectFill"
|
||
|
|
/>
|
||
|
|
<view class="info">
|
||
|
|
<view class="name">{{song.name}}</view>
|
||
|
|
<view class="artist">{{song.ar[0].name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="play-btn" bindtap="togglePlay">
|
||
|
|
<image src="/assets/icons/{{playing ? 'pause' : 'play'}}.png"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 歌词弹窗 -->
|
||
|
|
<view class="lyric-modal {{showLyric ? 'show' : ''}}" bindtap="toggleLyric">
|
||
|
|
<view class="lyric-content" catchtap="stopPropagation">
|
||
|
|
<scroll-view
|
||
|
|
class="lyric-scroll"
|
||
|
|
scroll-y
|
||
|
|
scroll-with-animation
|
||
|
|
scroll-into-view="line-{{currentLyricIndex}}"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
wx:for="{{lyric}}"
|
||
|
|
wx:key="time"
|
||
|
|
id="line-{{index}}"
|
||
|
|
class="lyric-line {{currentLyricIndex === index ? 'active' : ''}}"
|
||
|
|
>
|
||
|
|
{{item.text}}
|
||
|
|
</view>
|
||
|
|
<view wx:if="{{!lyric.length}}" class="lyric-empty">
|
||
|
|
暂无歌词
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|