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

<!-- 收听历史 / 收藏 -->
<page-meta page-style="overflow: hidden;" />
<view class="history-page">

  <!-- Tab 切换 + 清空 -->
  <view class="filter-header">
    <view class="filter-tabs">
      <view class="tab-item {{tab === 'history' ? 'active' : ''}}" bindtap="setTab" data-val="history">
        <text class="tab-text">历史</text>
        <view class="tab-underline"></view>
      </view>
      <view class="tab-item {{tab === 'favorite' ? 'active' : ''}}" bindtap="setTab" data-val="favorite">
        <text class="tab-text">收藏</text>
        <view class="tab-underline"></view>
      </view>
      <view class="tab-item {{tab === 'like' ? 'active' : ''}}" bindtap="setTab" data-val="like">
        <text class="tab-text">赞过</text>
        <view class="tab-underline tab-underline-like"></view>
      </view>
    </view>
    <!-- 清空按钮 -->
    <view class="clear-btn tap-active" bindtap="onClear" wx:if="{{historyList.length > 0}}">
      <view class="icon-trash">
        <view class="trash-handle"></view>
        <view class="trash-lid-bar"></view>
        <view class="trash-body">
          <view class="trash-stripe"></view>
          <view class="trash-stripe"></view>
          <view class="trash-stripe"></view>
        </view>
      </view>
      <text class="clear-text">清空</text>
    </view>
  </view>

  <!-- 频道筛选 -->
  <scroll-view wx:if="{{channelFilters.length > 1}}" scroll-x enhanced show-scrollbar="{{false}}" class="channel-filter-bar">
    <view
      wx:for="{{channelFilters}}"
      wx:key="*this"
      class="ch-filter-tag {{selectedChannel === item ? 'active' : ''}}"
      bindtap="onChannelFilter"
      data-name="{{item}}"
    >
      <text>{{item}}</text>
    </view>
  </scroll-view>

  <!-- 列表区 -->
  <scroll-view
    scroll-y
    enhanced
    show-scrollbar="{{false}}"
    class="list-scroll"
  >
    <view class="list-area">

      <!-- 加载骨架 -->
      <view wx:if="{{loading}}" class="skeleton-wrap">
        <view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
          <view class="sk-icon"></view>
          <view class="sk-lines">
            <view class="sk-line sk-line-short"></view>
            <view class="sk-line sk-line-long"></view>
            <view class="sk-line sk-line-mid"></view>
          </view>
        </view>
      </view>

    <!-- 历史空状态 -->
    <view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
      <view class="empty-icon-wrap">
        <view class="empty-halo"></view>
        <text class="empty-icon">🎧</text>
      </view>
      <text class="empty-title">拓展专属听觉边界</text>
      <text class="empty-desc">海量精彩节目频道，好声音都在这里</text>
      <view class="empty-guide-badge">
        <text class="guide-dot"></text>
        <text class="guide-text">去发现页探索</text>
      </view>
      <view class="empty-actions">
        <view class="btn-primary tap-active" bindtap="goDiscover">
          <text class="btn-text">开始探索</text>
        </view>
        <view class="btn-ghost tap-active" bindtap="goHome">
          <text class="btn-ghost-text">回到主页</text>
        </view>
      </view>
    </view>

    <!-- 收藏空状态 -->
    <view wx:elif="{{historyList.length === 0 && tab === 'favorite'}}" class="empty-state">
      <view class="empty-icon-wrap">
        <view class="empty-halo favored-halo"></view>
        <text class="empty-icon">🔖</text>
      </view>
      <text class="empty-title">打造个人专属收藏</text>
      <text class="empty-desc">好声音不怕遗忘，收集你的听觉库</text>
      <view class="empty-guide-badge warning-badge">
        <text class="guide-icon">🔖</text>
        <text class="guide-text">播放页点击书签图标，即可加入</text>
      </view>
      <view class="empty-actions">
        <view class="btn-primary tap-active" bindtap="goDiscover">
          <text class="btn-text">去发现好声音</text>
        </view>
      </view>
      <!-- 推荐订阅提示 -->
      <view class="upsell-card empty-upsell">
        <text class="upsell-icon">👑</text>
        <view class="upsell-body">
          <text class="upsell-title">开通会员</text>
          <text class="upsell-desc">解锁全部付费频道，无限收藏</text>
        </view>
        <view class="upsell-btn tap-active" bindtap="goVip">
          <text class="upsell-btn-text">了解</text>
        </view>
      </view>
    </view>

    <!-- 赞过空状态 -->
    <view wx:elif="{{historyList.length === 0 && tab === 'like'}}" class="empty-state">
      <view class="empty-icon-wrap">
        <view class="empty-halo liked-halo"></view>
        <text class="empty-icon">♥️</text>
      </view>
      <text class="empty-title">留下与声音共鸣的印记</text>
      <text class="empty-desc">不吝啬你的赞扬，这是最大的鼓励</text>
      <view class="empty-guide-badge danger-badge">
        <text class="guide-icon">♥</text>
        <text class="guide-text">播放页点击心形按钮，点亮爱心</text>
      </view>
      <view class="empty-actions">
        <view class="btn-primary tap-active" bindtap="goDiscover">
          <text class="btn-text">去寻找心动</text>
        </view>
      </view>
    </view>

    <!-- 条目列表 -->
    <view
      wx:for="{{historyList}}"
      wx:key="id"
      class="history-item"
      bindtap="onPlay"
      data-id="{{item.id}}"
    >
      <!-- 频道/节目图标 -->
      <view class="h-icon" style="background: {{item._bgColor}};">
        <text class="h-emoji">{{item._icon}}</text>
      </view>

      <!-- 文字信息 -->
      <view class="h-info">
        <text class="h-channel" wx:if="{{item._domainName}}">{{item._domainName}}</text>
        <text class="h-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
        <view class="h-meta-row">
          <text class="h-meta">{{item._friendlyDate}}</text>
          <text class="h-meta" wx:if="{{item.durationText}}"> · {{item.durationText}}</text>
        </view>
        <!-- 播放进度条 -->
        <view class="h-progress-wrap" wx:if="{{item._progress > 0 && item.duration > 0}}">
          <view class="h-progress-bar" style="width: {{item._progress / item.duration * 100}}%;"></view>
        </view>
      </view>

      <!-- 播放指示 / 播放按钮 -->
      <view class="h-right">
        <view wx:if="{{item._isThisPlaying && isPlaying}}" class="playing-indicator">
          <view class="bar bar-1"></view>
          <view class="bar bar-2"></view>
          <view class="bar bar-3"></view>
        </view>
        <view wx:else class="play-mini">
          <text class="play-mini-icon">▶</text>
        </view>
      </view>

      <!-- 删除/取消点赞按钮 -->
      <view class="h-del tap-active" catchtap="onDeleteItem" data-id="{{item.id}}">
        <!-- 赞过 tab 显示心形图标 -->
        <view wx:if="{{tab === 'like'}}" class="like-del-btn">
          <text class="like-heart-icon">♥</text>
        </view>
        <!-- 其他 tab 显示垂笾桶 -->
        <view wx:else class="icon-trash icon-trash-sm">
          <view class="trash-handle"></view>
          <view class="trash-lid-bar"></view>
          <view class="trash-body">
            <view class="trash-stripe"></view>
            <view class="trash-stripe"></view>
            <view class="trash-stripe"></view>
          </view>
        </view>
      </view>
    </view>

    </view> <!-- /list-area -->
    <view class="player-bottom-spacer"></view>
  </scroll-view>

  <global-player />
</view>