sundynix-radio-mp/pages/channel-detail/index.wxml

<!-- 频道详情 —— 频道信息头部 + 往期内容列表 -->
<view class="detail-page">

  <!-- 频道信息头部 -->
  <view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9E6D'}}, {{domain.bgColorEnd || '#FFB366'}});">

    <!-- 频道信息 -->
    <view class="hero-content">
      <text class="hero-icon">{{domain.cover || domain.icon || '📻'}}</text>
      <text class="hero-name">{{domain.name}}</text>
      <text class="hero-tag">{{domain.tag || ''}}</text>
      <!-- 频道描述 -->
      <text wx:if="{{domain.description}}" class="hero-desc">{{domain.description}}</text>
      <!-- 数据行：订阅人数 + 节目数 -->
      <view class="hero-stats">
        <text class="hero-stat">{{domain.subscriberCount || 0}} 人已订阅</text>
        <text class="hero-stat-dot">·</text>
        <text class="hero-stat">{{domainContents.length || 0}} 期节目</text>
      </view>

      <!-- ═══ 按钮区 ═══ -->

      <!-- 0. 可播放（VIP / 免费 / 已订阅）→ 直接收听 -->
      <block wx:if="{{canPlay}}">
        <view class="hero-action-row">
          <button class="hero-sub-btn free-btn" bindtap="goFirstProgram">
            <text>▶ 开始收听</text>
          </button>
          <button class="hero-share-inline-btn tap-active" open-type="share">
            <t-icon name="share" size="44rpx" color="#FFF" />
          </button>
        </view>
        <!-- 副标签 -->
        <text wx:if="{{isVip}}" class="hero-expired">👑 VIP 会员畅享</text>
        <text wx:elif="{{isFree}}" class="hero-expired">🎁 永久免费频道</text>
        <view wx:elif="{{isSubscribed}}" class="hero-sub-row">
          <text class="hero-expired">有效至 {{expiredAt || '长期有效'}}</text>
          <!-- 续订按钮：付费已订阅频道才显示 -->
          <view wx:if="{{!isVipOnly}}" class="renew-inline-btn tap-active" bindtap="onRenew">
            <text class="renew-inline-text">续订</text>
          </view>
        </view>
      </block>

      <!-- 1. 免费频道（但不可播放，理论上不会到这里） -->
      <block wx:elif="{{isFree}}">
        <view class="hero-badge free-badge">🎁 永久免费</view>
        <view class="hero-action-row">
          <button class="hero-sub-btn free-btn" bindtap="onSubscribe">
            <text>▶ 开始收听</text>
          </button>
          <button class="hero-share-inline-btn tap-active" open-type="share">
            <t-icon name="share" size="44rpx" color="#FFF" />
          </button>
        </view>
      </block>

      <!-- 2. VIP专享 -->
      <block wx:elif="{{isVipOnly}}">
        <view class="hero-badge vip-badge">👑 VIP专享</view>
        <view class="hero-action-row">
          <button class="hero-sub-btn vip-btn" bindtap="onSubscribe">
            <text>开通 VIP 解锁</text>
          </button>
          <button class="hero-share-inline-btn tap-active" open-type="share">
            <t-icon name="share" size="44rpx" color="#FFF" />
          </button>
        </view>
      </block>

      <!-- 3. 订阅已过期 -->
      <block wx:elif="{{isExpired}}">
        <view class="hero-badge expired-badge">⏰ 订阅已到期</view>
        <view class="hero-action-row">
          <button class="hero-sub-btn renew-btn" bindtap="onSubscribe">
            <text>续费订阅</text>
          </button>
          <button class="hero-share-inline-btn tap-active" open-type="share">
            <t-icon name="share" size="44rpx" color="#FFF" />
          </button>
        </view>
        <text class="hero-expired">已于 {{expiredAt}} 到期</text>
      </block>

      <!-- 4. 未订阅付费频道 -->
      <block wx:else>
        <view class="hero-action-row">
          <button class="hero-sub-btn" bindtap="onSubscribe">
            <text>订阅频道</text>
          </button>
          <button class="hero-share-inline-btn tap-active" open-type="share">
            <t-icon name="share" size="44rpx" color="#FFF" />
          </button>
        </view>
      </block>
    </view>

    <!-- 底部波浪装饰 -->
    <view class="hero-wave"></view>
  </view>

  <!-- 内容区域 -->
  <view class="content-area">

    <!-- 提示条：根据状态动态切换 -->
    <!-- VIP专享未开通 -->
    <view wx:if="{{isVipOnly && !canPlay}}" class="trial-notice vip-notice" bindtap="onSubscribe">
      <text class="notice-icon">👑</text>
      <view class="notice-info">
        <text class="notice-title">VIP专属频道</text>
        <text class="notice-desc">开通全频道会员，畅享本频道全部内容及免广告特权</text>
      </view>
      <text class="notice-action">去开通 ›</text>
    </view>

    <!-- 订阅已过期（非免费频道） -->
    <view wx:elif="{{isExpired && !isFree}}" class="trial-notice expired-notice" bindtap="onSubscribe">
      <text class="notice-icon">⏰</text>
      <view class="notice-info">
        <text class="notice-title">订阅已到期</text>
        <text class="notice-desc">您的订阅已于 {{expiredAt}} 到期，续费后可继续收听全部内容</text>
      </view>
      <text class="notice-action">续费 ›</text>
    </view>

    <!-- 付费频道未订阅（全锁，无试听） -->
    <view wx:elif="{{!canPlay && !isFree}}" class="trial-notice locked-notice" bindtap="onSubscribe">
      <text class="notice-icon">🔐</text>
      <view class="notice-info">
        <text class="notice-title">频道未解锁</text>
        <text class="notice-desc">订阅频道或开通全频道会员，即可畅听全部内容</text>
      </view>
      <text class="notice-action">立即解锁 ›</text>
    </view>

    <!-- 内容列表标题 -->
    <view class="list-header">
      <text class="list-title">内容列表</text>
      <view class="list-count">{{domainContents.length}} 期</view>
    </view>

    <!-- 内容列表 -->
    <view class="list">
      <view
        wx:for="{{domainContents}}"
        wx:key="id"
        class="list-item {{item._isThisPlaying ? 'playing' : ''}} {{item._isLocked ? 'locked' : ''}}"
        bindtap="onPlayItem"
        data-id="{{item.id}}"
        data-idx="{{index}}"
      >
        <!-- 序号 -->
        <text class="item-index">{{item._displayIndex}}</text>

        <!-- 信息 -->
        <view class="item-info">
          <text class="item-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
          <view class="item-meta">
            <text>{{item._dateDot}}</text>
            <block wx:if="{{item.durationText}}">
              <text class="meta-dot">·</text>
              <text>{{item.durationText}}</text>
            </block>
          </view>
        </view>

        <!-- 播放 / 锁定按钮 -->
        <view class="item-play-btn {{item._isThisPlaying ? 'active' : ''}} {{item._isLocked ? 'locked-btn' : ''}}">
          <text wx:if="{{item._isLocked}}" class="lock-icon">🔒</text>
          <view wx:elif="{{item._isThisPlaying && isPlaying}}" class="mini-pause">
            <view class="mp-bar"></view>
            <view class="mp-bar"></view>
          </view>
          <text wx:else class="play-tri">▶</text>
        </view>
      </view>
    </view>
  </view>

  <view class="player-bottom-spacer"></view>
  <global-player />
  <t-message id="t-message" />
</view>