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: #FAFAF8;"></view>

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

  <!-- ===== 顶部问候栏（吸顶） ===== -->
  <view class="meta-bar">
    <!-- 行1: 问候语 -->
    <text class="greeting-sub">{{greetingSub}}</text>
    <!-- 行2: 位置 · 日期 · 天气（紧凑） -->
    <view class="info-row">
      <view class="info-item" wx:if="{{locationName}}">
        <t-icon name="location" size="26rpx" color="#FF9E6D" />
        <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.temp}}°C</text>
      </block>
    </view>
  </view>

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

      <!-- VIP 状态卡片（仅 VIP 用户显示） -->
      <view wx:if="{{isVip}}" class="vip-home-card tap-active" bindtap="goVip">
        <text class="vip-home-icon">👑</text>
        <view class="vip-home-body">
          <text class="vip-home-title">全部频道会员</text>
          <text class="vip-home-desc">所有频道面向你全量开放 · 畅听无限制</text>
        </view>
        <text class="vip-home-tag">享看权益 ›</text>
      </view>

      <!-- ─── 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="swipe-container"
        >
          <!-- 滑动露出的取消订阅按钮 -->
          <view class="swipe-action" bindtap="onUnsubscribe" data-id="{{item.id}}" data-name="{{item.name}}">
            <text class="swipe-action-text">取消订阅</text>
          </view>
          <!-- 可滑动的卡片主体 -->
          <view
            class="channel-card card swipe-card"
            style="transform: translateX({{item._swipeX || 0}}rpx);"
            data-idx="{{index}}"
            bindtouchstart="onSwipeStart"
            bindtouchmove="onSwipeMove"
            bindtouchend="onSwipeEnd"
          >
          <!-- 左侧色条 -->
          <view class="card-accent" style="background: {{item.bgColor}};"></view>

          <!-- 频道头部 -->
          <view class="card-header" bindtap="goChannel" data-id="{{item.id}}">
            <view class="channel-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
              <text wx:if="{{item._isDefaultCover}}" class="icon-initial">{{item._initial}}</text>
              <text wx:else 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}}"
          >
            <!-- 左侧装饰色条 -->
            <view class="play-row-accent" style="background: {{item.bgColor || '#FF9E6D'}};"></view>
            <!-- 左：音波动画 or 音乐图标（带圆形背景） -->
            <view class="play-left">
              <view class="play-left-circle" style="background: {{item.bgColor || '#FF9E6D'}}20;">
                <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="34rpx" color="{{item._isThisPlaying ? '#FF9E6D' : item.bgColor || '#FF9E6D'}}" />
              </view>
            </view>
            <!-- 中：标题 -->
            <view class="play-info">
              <text class="play-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item._todayContent.title}}</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="36rpx" color="#FFF" />
                <t-icon wx:else name="play" size="36rpx" color="{{item._isThisPlaying ? '#FFF' : '#888'}}" />
              </view>
            </view>
          </view>

          <!-- 该频道暂无节目 -->
          <view wx:else class="no-content">
            <t-icon name="sound" size="32rpx" color="#DDD" />
            <text class="no-content-text">暂无节目，敬请期待</text>
          </view>
          </view> <!-- /swipe-card -->
        </view> <!-- /swipe-container -->
      </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">{{isVip ? '全部频道' : '免费频道'}}</text>
          <text class="section-subtitle">{{isVip ? '会员全开放，点即收听' : '无需订阅，随时收听'}}</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 {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
                <text wx:if="{{item._isDefaultCover}}" class="free-initial">{{item._initial}}</text>
                <text wx:else class="free-emoji">{{item.cover}}</text>
              </view>
              <text class="free-name">{{item.name}}</text>
              <!-- VIP 用户显示频道类型，普通用户只显免费帘记 -->
              <t-tag wx:if="{{item.isVipOnly}}" size="small" variant="light" theme="warning">👑</t-tag>
              <t-tag wx:elif="{{item.isFree !== 1}}" size="small" variant="light" theme="default">付费</t-tag>
              <t-tag wx:else 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 class="player-bottom-spacer"></view>

    </view>
  </scroll-view>

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