YD_WeChatApplet/subpackage/teacher/resource-detail/resource-detail.wxml

<view class="page-content player-page">
  <mp-bar background="transparent" title="{{title}}" color="#ffffff"></mp-bar>

  <view class="player-card">
    <view class="record-wrap {{isPlay ? 'record-playing' : ''}}">
      <view class="record">
        <view class="record-line line-one"></view>
        <view class="record-line line-two"></view>
        <view class="record-core">
          <text class="record-note">♫</text>
        </view>
      </view>
    </view>

    <view class="song-name">{{data.resourceName || '暂无音频'}}</view>
    <view class="song-count" wx:if="{{playlist.length}}">{{currentIndex + 1}} / {{playlist.length}}</view>

    <view class="progress-area">
      <slider
        class="progress-slider"
        min="0"
        max="{{durationSeconds}}"
        step="1"
        value="{{sliderValue}}"
        activeColor="#fbb716"
        backgroundColor="#e5eaf0"
        block-color="#fbb716"
        block-size="18"
        bindchanging="onSliderChanging"
        bindchange="onSliderChange"
      />
      <view class="time">
        <text>{{value}}</text>
        <text>{{duration}}</text>
      </view>
    </view>

    <view class="btnlist">
      <view class="tool-button" bind:tap="toggleLoop">
        <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/teacher/{{isSingleLoop ? 'reload' : 'repeat'}}.png" class="tool-icon" />
        <text>{{isSingleLoop ? '单曲' : '列表'}}</text>
      </view>
      <image bind:tap="playPrevious" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/teacher/play-previous.png" class="switch-icon" />
      <view class="play-button" bind:tap="btnCilck">
        <mp-icon icon="{{!isPlay ? 'play' : 'pause'}}" type="field" size="52" color="#ffffff"></mp-icon>
      </view>
      <image bind:tap="playNext" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/teacher/play-next.png" class="switch-icon" />
      <view class="tool-button" bind:tap="showList">
        <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/teacher/play-list.png" class="tool-icon" />
        <text>列表</text>
      </view>
    </view>
  </view>

  <view wx:if="{{isShow}}" class="playlist-mask {{isClosing ? 'playlist-mask-leave' : 'playlist-mask-enter'}}" bind:tap="hideList">
    <view class="playlist-panel {{isClosing ? 'playlist-panel-leave' : 'playlist-panel-enter'}}" catch:tap="preventClose">
      <view class="playlist-header">
        <view>
          <view class="playlist-title">播放列表</view>
          <view class="playlist-subtitle">共 {{playlist.length}} 首</view>
        </view>
        <view class="close-button" bind:tap="hideList">×</view>
      </view>
      <scroll-view scroll-y class="playlist-scroll" scroll-into-view="song-{{currentIndex}}">
        <view wx:if="{{!playlist.length}}" class="empty-list">暂无可播放歌曲</view>
        <view
          wx:for="{{playlist}}"
          wx:key="resourceUrl"
          id="song-{{index}}"
          class="playlist-item {{index === currentIndex ? 'playlist-active' : ''}}"
          data-index="{{index}}"
          bind:tap="selectTrack"
        >
          <view class="song-index">{{index === currentIndex && isPlay ? '♪' : index + 1}}</view>
          <view class="playlist-name">{{item.resourceName}}</view>
          <view wx:if="{{index === currentIndex}}" class="playing-label">{{isPlay ? '播放中' : '当前'}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>