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

<!-- 播放器详情页 -->
<page-meta page-style="overflow:hidden; background:#1A1208;" />
<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 || '#FF9D42'}}44 0%, transparent 65%);">
  </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 tap-active" bindtap="onOpenComments">
      <text class="top-comment-icon">💬</text>
    </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>
        </view>
      </scroll-view>
      <text class="banner-hint">点击返回封面</text>
    </view>
  </view>

  <!-- 日期 + like 同行 -->
  <view class="date-like-row">
    <text class="date-text">{{displayDate}}</text>
    <view class="like-btn-inline tap-active" bindtap="onLike">
      <text class="like-icon {{isLiked ? 'liked' : ''}}">{{isLiked ? '♥' : '♡'}}</text>
    </view>
  </view>

  <!-- 进度条 -->
  <view class="progress-section">
    <slider
      class="progress-slider"
      min="0"
      max="{{duration}}"
      value="{{currentTime}}"
      activeColor="#FF9D42"
      backgroundColor="rgba(255,255,255,0.12)"
      block-size="14"
      block-color="#FF9D42"
      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="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>

  <!-- 评论弹层 -->
  <view class="comment-mask" wx:if="{{showComments}}" bindtap="onCloseComments"></view>
  <view class="comment-sheet {{showComments ? 'sheet-up' : ''}}">
    <view class="sheet-handle"></view>
    <view class="sheet-header">
      <text class="sheet-title">评论 ({{commentList.length}})</text>
      <view class="sheet-close tap-active" bindtap="onCloseComments">
        <text class="sheet-close-icon">✕</text>
      </view>
    </view>

    <!-- 输入区 -->
    <view class="comment-input-row">
      <input
        class="comment-input"
        placeholder="说点什么..."
        placeholder-style="color:rgba(255,200,120,0.3);"
        value="{{commentText}}"
        bindinput="onCommentInput"
        confirm-type="send"
        bindconfirm="onSubmitComment"
        maxlength="200"
      />
      <view class="send-btn tap-active {{submitting ? 'sending' : ''}}" bindtap="onSubmitComment">
        <text class="send-text">发送</text>
      </view>
    </view>

    <!-- 评论列表 -->
    <scroll-view scroll-y class="comment-list-scroll" enhanced show-scrollbar="{{false}}">
      <view wx:if="{{commentLoading}}" class="comment-loading">
        <text class="comment-loading-text">加载中...</text>
      </view>
      <view wx:elif="{{commentList.length === 0}}" class="comment-empty">
        <text class="comment-empty-icon">💬</text>
        <text class="comment-empty-text">还没有评论，来说第一句话</text>
      </view>
      <view
        wx:for="{{commentList}}"
        wx:key="id"
        class="comment-item"
      >
        <view class="comment-avatar">
          <text class="comment-avatar-text">{{item.userName ? item.userName[0] : '?'}}</text>
        </view>
        <view class="comment-body">
          <text class="comment-author">{{item.userName || '匿名'}}</text>
          <text class="comment-text">{{item.content}}</text>
          <text class="comment-time">{{item.createdAtStr || item.createdAt}}</text>
        </view>
        <view wx:if="{{item._isOwn}}" class="comment-del tap-active" bindtap="onDeleteComment" data-id="{{item.id}}">
          <text class="comment-del-icon">🗑</text>
        </view>
      </view>
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>

</view>