sundynix/sundynix-radio-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化UI

Browse Source
This commit is contained in:
Blizzard
2026-03-05 17:04:40 +08:00
parent 0a61c4ddec
commit 7f51b2a0a8
28 changed files with 1773 additions and 964 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/history/index.wxml
+104 -35
View File
@@ -1,66 +1,135 @@
<!-- 收听历史 —— 按日期倒序的已听列表 -->
<!-- 收听历史 / 收藏 -->
<view class="history-page">
<!-- 筛选Tab + 清空按钮 -->
<!-- Tab 切换 + 清空 -->
<view class="filter-header">
<view class="filter-tabs">
<text
class="tab {{filter === 'all' ? 'active' : ''}}"
bindtap="setFilter"
data-val="all"
>全部片段</text>
<text
class="tab {{filter === 'subscribed' ? 'active' : ''}}"
bindtap="setFilter"
data-val="subscribed"
>仅看已订阅</text>
<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>
<view class="clear-btn tap-active" bindtap="onClear">
<text class="clear-icon">🗑</text>
<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>
<!-- 历史列表 -->
<!-- 列表区 -->
<view class="list-area">
<!-- 空状态 -->
<view wx:if="{{cleared || historyList.length === 0}}" class="empty-state">
<view class="empty-icon-wrap">
<text class="empty-emoji">📭</text>
<!-- 加载骨架 -->
<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>
<text class="empty-text">暂无收听历史</text>
</view>
<!-- 历史条目 -->
<!-- 历史空状态 -->
<view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
<text class="empty-icon">🎧</text>
<text class="empty-title">还没有收听记录</text>
<text class="empty-desc">去发现频道，开始你的第一段收听</text>
<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">
<text class="empty-icon">🔖</text>
<text class="empty-title">还没有收藏内容</text>
<text class="empty-desc">听到喜欢的节目，点击 ♡ 收藏它</text>
<view class="empty-actions">
<view class="btn-primary tap-active" bindtap="goDiscover">
<text class="btn-text">订阅感兴趣的频道</text>
</view>
</view>
<!-- 推荐订阅提示 -->
<view class="upsell-card">
<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:for="{{historyList}}"
wx:key="id"
class="history-item card"
class="history-item"
bindtap="onPlay"
data-id="{{item.id}}"
>
<!-- 频道图标 -->
<!-- 频道/节目图标 -->
<view class="h-icon" style="background: {{item._bgColor}};">
<image wx:if="{{item._coverUrl}}" src="{{item._coverUrl}}" class="h-cover-img" mode="aspectFill" />
<text wx:else class="h-emoji">{{item._icon}}</text>
<text class="h-emoji">{{item._icon}}</text>
</view>
<!-- 信息 -->
<!-- 文字信息 -->
<view class="h-info">
<text class="h-channel">{{item._domainName}}</text>
<text class="h-channel" wx:if="{{item._domainName}}">{{item._domainName}}</text>
<text class="h-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
<text class="h-meta">{{item._friendlyDate}} · {{item.durationText}}</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 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 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 wx:else class="play-mini">
<image src="/assets/icons/play.svg" class="play-mini-icon" />
<!-- 删除按钮 -->
<view class="h-del tap-active" catchtap="onDeleteItem" data-id="{{item.id}}">
<view 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>