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

<!-- 禁用页面原生滚动 -->
<page-meta page-style="overflow: hidden;" />

<!-- 整体容器：flex 纵向布局 -->
<view class="index-page">

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

  <!-- ===== 自定义导航栏 ===== -->
  <view class="custom-nav">
    <text class="nav-brand-name">全声汇</text>
  </view>

  <!-- ===== 顶部问候栏（吸顶） ===== -->
  <view class="meta-bar">
    <!-- 时段文案（根据时间变化） -->
    <text class="greeting-sub">{{greetingSub}}</text>
    <!-- 信息行 -->
    <view class="info-row">
      <view class="info-item" wx:if="{{locationName}}">
        <t-icon name="location" size="26rpx" color="#FF9D42" />
        <text class="info-text loc-name-text">{{locationName}}</text>
      </view>
      <text class="info-dot" wx:if="{{locationName}}">·</text>
      <text class="info-text">{{dateDisplay}} {{weekDay}}</text>
      <block wx:if="{{weather}}">
        <text class="info-dot">·</text>
        <text class="weather-icon-sm">{{weather.icon}}</text>
        <text class="info-text">{{weather.desc}} {{weather.temp}}°C</text>
      </block>
    </view>
  </view>

  <!-- ===== 可滚动内容区 ===== -->
  <scroll-view
    scroll-y
    enhanced
    show-scrollbar="{{false}}"
    class="main-scroll"
  >
    <view class="content-area">

      <!-- ─── Section 1: 我的订阅 ─── -->
      <view class="section-header">
        <view class="section-title-wrap">
          <text class="section-dot"></text>
          <text class="section-title">我的订阅</text>
        </view>
        <view class="section-action tap-active" bindtap="goDiscover">
          <text class="section-action-text">管理</text>
          <t-icon name="chevron-right" size="32rpx" color="#CCC" />
        </view>
      </view>

      <!-- 订阅加载中 (骨架屏) -->
      <block wx:if="{{loadingSub}}">
        <view class="skeleton-sub-card card" wx:for="{{[1,2]}}" wx:key="*this">
          <view class="skele-header">
            <view class="skele-avatar skele-bg"></view>
            <view class="skele-text-group">
              <view class="skele-title skele-bg"></view>
              <view class="skele-subtitle skele-bg"></view>
            </view>
          </view>
          <view class="skele-play-row skele-bg"></view>
        </view>
      </block>

      <!-- 订阅空状态 -->
      <view wx:elif="{{subscribedData.length === 0}}" class="sub-empty-card" bindtap="goDiscover">
        <view class="sub-empty-icon">
          <text class="sub-empty-emoji">🎤</text>
        </view>
        <view class="sub-empty-body">
          <text class="sub-empty-title">还没有订阅</text>
          <text class="sub-empty-desc">去发现感兴趣的频道，每天为你准时送达</text>
        </view>
        <view class="sub-empty-arrow">
          <t-icon name="chevron-right" size="36rpx" color="#CCC" />
        </view>
      </view>

      <!-- 订阅列表 -->
      <block wx:else>
        <view
          wx:for="{{subscribedData}}"
          wx:key="id"
          class="channel-card card"
        >
          <!-- 左侧色条 -->
          <view class="card-accent" style="background: {{item.bgColor}};"></view>

          <!-- 频道头部 -->
          <view class="card-header" bindtap="goChannel" data-id="{{item.id}}">
            <view class="channel-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
              <text class="icon-emoji">{{item.cover || '📻'}}</text>
            </view>
            <view class="channel-info">
              <text class="channel-name">{{item.name}}</text>
              <view class="channel-meta">
                <t-tag wx:if="{{item.isFree === 1}}" size="small" variant="light" theme="success">免费</t-tag>
                <t-tag wx:elif="{{item.isVipOnly === 1}}" size="small" variant="light" theme="warning">👑 VIP</t-tag>
                <t-tag wx:if="{{item._todayContent}}" size="small" variant="light" theme="primary">新内容</t-tag>
              </view>
            </view>
            <t-icon name="chevron-right" size="40rpx" color="#CCC" />
          </view>

          <!-- 最新节目播放行 -->
          <view
            wx:if="{{item._todayContent}}"
            class="play-row {{item._isThisPlaying ? 'playing' : ''}}"
            bindtap="onPlayContent"
            data-content-id="{{item._todayContent.id}}"
          >
            <!-- 左：音波动画 or 音乐图标 -->
            <view class="play-left">
              <view wx:if="{{item._isThisPlaying && isPlaying}}" class="sound-wave">
                <view class="wave-bar wave-1"></view>
                <view class="wave-bar wave-2"></view>
                <view class="wave-bar wave-3"></view>
                <view class="wave-bar wave-4"></view>
              </view>
              <t-icon wx:else name="sound" size="36rpx" color="{{item._isThisPlaying ? '#FF9D42' : '#BBB'}}" />
            </view>
            <!-- 中：标题 + 时长 -->
            <view class="play-info">
              <text class="play-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item._todayContent.title}}</text>
              <text class="play-duration">{{item._todayContent.durationText}}</text>
            </view>
            <!-- 右：播放按钮 -->
            <view class="play-btn-wrap">
              <view class="play-btn-ring {{item._isThisPlaying ? 'active' : ''}}"></view>
              <view class="play-btn {{item._isThisPlaying ? 'active' : ''}}">
                <t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="32rpx" color="#FFF" />
                <t-icon wx:else name="play" size="32rpx" color="{{item._isThisPlaying ? '#FFF' : '#555'}}" />
              </view>
            </view>
          </view>

          <!-- 该频道暂无节目 -->
          <view wx:else class="no-content">
            <text class="no-content-text">暂无节目，敬请期待</text>
          </view>
        </view>
      </block>

      <!-- ─── Section 2: 免费频道 ─── -->
      <t-divider style="margin: 12rpx 0;" />

      <view class="section-header section-header-free">
        <view class="section-title-wrap">
          <text class="section-dot dot-free"></text>
          <text class="section-title">免费频道</text>
          <text class="section-subtitle">无需订阅，随时收听</text>
        </view>
        <view class="section-action tap-active" bindtap="goDiscover">
          <text class="section-action-text">全部</text>
          <t-icon name="chevron-right" size="32rpx" color="#CCC" />
        </view>
      </view>

      <!-- 免费频道加载中 (骨架屏) -->
      <block wx:if="{{loadingFree}}">
        <view class="free-list" style="padding: 4rpx 32rpx 16rpx;">
          <view class="skeleton-free-card" wx:for="{{[1,2,3,4]}}" wx:key="*this">
            <view class="skele-free-avatar skele-bg"></view>
            <view class="skele-free-text skele-bg"></view>
          </view>
        </view>
      </block>

      <!-- 免费频道横向滚动列表 -->
      <block wx:if="{{!loadingFree && freeChannels.length > 0}}">
        <scroll-view
          scroll-x
          enhanced
          show-scrollbar="{{false}}"
          class="free-scroll"
        >
          <view class="free-list">
            <view
              wx:for="{{freeChannels}}"
              wx:key="id"
              class="free-card tap-active"
              bindtap="goChannel"
              data-id="{{item.id}}"
            >
              <view class="free-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
                <text class="free-emoji">{{item.cover || '📻'}}</text>
              </view>
              <text class="free-name">{{item.name}}</text>
              <t-tag size="small" variant="light-outline" theme="success">免费</t-tag>
            </view>
          </view>
        </scroll-view>
      </block>

      <!-- 免费区无数据 -->
      <view wx:if="{{!loadingFree && freeChannels.length === 0}}" class="free-empty">
        <t-empty description="暂无免费频道" />
      </view>

      <!-- 底部占位 -->
      <view style="height: 200rpx;"></view>

    </view>
  </scroll-view>

  <!-- 全局播放条 -->
  <global-player />
  <t-message id="t-message" />
</view>