sundynix-radio-mp/pages/player/index.wxml

<!-- 播放器详情页 -->
<page-meta page-style="overflow:hidden; background:#FAFAF8;" />
<view class="player-page">

  <!-- 状态栏占位 -->
  <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>

  <!-- 环境光背景 - 顶部轻柔光晕 -->
  <view class="bg-glow"
    style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9E6D'}}26 0%, transparent 60%);">
  </view>

  <!-- 顶部：返回 + 标题 -->
  <view class="top-bar">
    <view class="top-btn tap-active" bindtap="goBack">
      <text class="top-back">‹</text>
    </view>
    <view class="top-title-wrap">
      <text class="top-label">正在播放</text>
      <text class="top-title">{{activeContent.title || '加载中...'}}</text>
    </view>
    <view class="top-btn" style="visibility: hidden;"></view>
  </view>

  <!-- 中央 Banner：封面 ↔ 文案 -->
  <view class="banner-area" bindtap="onBannerTap">

    <!-- 封面视图（默认） -->
    <view class="banner-cover {{showTranscript ? 'banner-hidden' : ''}}">
      <!-- 涟漪声波（播放中才显示） -->
      <view class="ripple-wrap" wx:if="{{isPlaying}}">
        <view class="ripple-ring" style="animation-delay: 0s;"></view>
        <view class="ripple-ring" style="animation-delay: 0.7s;"></view>
        <view class="ripple-ring" style="animation-delay: 1.4s;"></view>
      </view>

      <!-- 大 emoji -->
      <text class="cover-emoji {{isPlaying ? 'emoji-active' : ''}}">📻</text>

      <!-- 频道名 -->
      <text class="cover-channel">{{domain.name}}</text>

      <text class="banner-hint">📖 阅读模式</text>
    </view>

    <!-- 文案视图（阅读模式） -->
    <view class="banner-transcript {{showTranscript ? '' : 'banner-hidden'}}">
      <scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="transcript-scroll">
        <text class="transcript-content" wx:if="{{activeContent.content}}">{{activeContent.content}}</text>
        <view wx:else class="transcript-empty">
          <text class="transcript-empty-icon">📝</text>
          <text class="transcript-empty-text">暂无文案内容</text>
          <text class="transcript-empty-sub">主播未上传此期文稿</text>
        </view>
      </scroll-view>
      <view class="transcript-close-hint">
        <text class="transcript-close-text">点击任意区域返回播放</text>
      </view>
    </view>
  </view>

  <!-- 日期 + 收藏 + like 同行 -->
  <view class="date-like-row">
    <text class="date-text">{{displayDate}}</text>
    <view class="action-btns">
      <!-- 收藏按鈕 -->
      <view class="action-btn tap-active" bindtap="onFavorite">
        <text class="action-icon {{isFavorited ? 'favorited' : ''}}">{{isFavorited ? '🔖' : '📄'}}</text>
      </view>
      <!-- 点赞按钮 -->
      <view class="action-btn tap-active" bindtap="onLike">
        <text class="like-icon {{isLiked ? 'liked' : ''}}">{{isLiked ? '❤️' : '♡'}}</text>
      </view>
    </view>
  </view>

  <!-- 进度条 -->
  <view class="progress-section">
    <slider
      class="progress-slider"
      min="0"
      max="{{duration}}"
      value="{{currentTime}}"
      activeColor="#FF9E6D"
      backgroundColor="rgba(255,255,255,0.12)"
      block-size="14"
      block-color="#FF9E6D"
      bindchange="onSliderChange"
      bindchanging="onSliderChanging"
    />
    <view class="time-row">
      <text class="time-text">{{currentTimeText}}</text>
      <text class="time-text">{{durationText}}</text>
    </view>
  </view>

  <!-- 控制区：|◁ ← 15s | 播放/暂停 | 15s → ▷| -->
  <view class="controls-row">
    <!-- 上一期 -->
    <view class="prev-next-btn tap-active" bindtap="onPrev">
      <text class="pn-icon">⏮</text>
    </view>

    <view class="skip-btn tap-active" bindtap="onBackward">
      <text class="skip-arrow">↺</text>
      <text class="skip-sec">15</text>
    </view>

    <view class="play-btn tap-active" bindtap="onTogglePlay">
      <view wx:if="{{isPlaying}}" class="pause-group">
        <view class="pause-bar"></view>
        <view class="pause-bar"></view>
      </view>
      <text wx:else class="play-tri">▶</text>
    </view>

    <view class="skip-btn tap-active" bindtap="onForward">
      <text class="skip-arrow">↻</text>
      <text class="skip-sec">15</text>
    </view>

    <!-- 下一期 -->
    <view class="prev-next-btn tap-active" bindtap="onNext">
      <text class="pn-icon">⏭</text>
    </view>
  </view>

  <!-- 倍速按钮行 -->
  <view class="speed-row">
    <view class="speed-btn tap-active" bindtap="onSpeed">
      <text class="speed-label">{{playbackRate === 1 ? '倍速' : playbackRate + 'x'}}</text>
    </view>
  </view>

  <!-- 倍速选择 ActionSheet -->
  <t-action-sheet
    visible="{{showSpeedSheet}}"
    items="{{speedItems}}"
    bind:selected="onSpeedSelect"
    bind:cancel="onSpeedCancel"
    cancel-text="取消"
  />

  <!-- 分享面板遮罩 -->
  <view class="share-mask" wx:if="{{showSharePanel}}" bindtap="onCloseShare"></view>

  <!-- 分享面板 -->
  <view class="share-sheet {{showSharePanel ? 'sheet-up' : ''}}">
    <view class="share-sheet-handle"></view>
    <view class="share-sheet-title">分享到</view>
    <view class="share-options">

      <!-- 发给朋友（open-type=share 触发 onShareAppMessage） -->
      <button class="share-option-btn" open-type="share">
        <view class="share-option">
          <view class="share-opt-icon share-opt-friend">
            <text class="share-opt-emoji">💬</text>
          </view>
          <text class="share-opt-label">小程序好友</text>
        </view>
      </button>

      <!-- 分享到朋友圈 -->
      <view class="share-option tap-active" bindtap="onShareMomentTip">
        <view class="share-opt-icon share-opt-moment">
          <text class="share-opt-emoji">🌐</text>
        </view>
        <text class="share-opt-label">朋友圈</text>
      </view>

    </view>
    <view class="share-cancel tap-active" bindtap="onCloseShare">取消</view>
  </view>

</view>