first commit
This commit is contained in:
Blizzard
@@ -0,0 +1,214 @@
|
||||
<!-- 禁用页面原生滚动 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user