Blizzard
143 lines
5.1 KiB
Plaintext
143 lines
5.1 KiB
Plaintext
<!-- 频道详情 —— 频道信息头部 + 往期内容列表 -->
|
||
<view class="detail-page">
|
||
|
||
<!-- 频道信息头部 -->
|
||
<view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9D42'}}, {{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 || domain.description || ''}}</text>
|
||
|
||
<!-- ═══ 按钮区：根据频道类型和订阅状态分情况 ═══ -->
|
||
|
||
<!-- 1. 免费频道 -->
|
||
<block wx:if="{{isFree}}">
|
||
<view class="hero-badge free-badge">🎁 永久免费</view>
|
||
<button class="hero-sub-btn free-btn" bindtap="onSubscribe">
|
||
<text>▶ 开始收听</text>
|
||
</button>
|
||
</block>
|
||
|
||
<!-- 2. VIP专享 -->
|
||
<block wx:elif="{{isVipOnly}}">
|
||
<view class="hero-badge vip-badge">👑 VIP专享</view>
|
||
<button class="hero-sub-btn vip-btn" bindtap="onSubscribe">
|
||
<text>开通 VIP 解锁</text>
|
||
</button>
|
||
</block>
|
||
|
||
<!-- 3. 已订阅且有效 -->
|
||
<block wx:elif="{{isSubscribed}}">
|
||
<button class="hero-sub-btn subscribed" bindtap="onSubscribe">
|
||
<text>✓ 已订阅</text>
|
||
</button>
|
||
<text wx:if="{{expiredAt}}" class="hero-expired">有效至 {{expiredAt}}</text>
|
||
</block>
|
||
|
||
<!-- 4. 订阅已过期（重新订阅） -->
|
||
<block wx:elif="{{isExpired}}">
|
||
<view class="hero-badge expired-badge">⏰ 订阅已到期</view>
|
||
<button class="hero-sub-btn renew-btn" bindtap="onSubscribe">
|
||
<text>续费订阅</text>
|
||
</button>
|
||
<text wx:if="{{expiredAt}}" class="hero-expired">已于 {{expiredAt}} 到期</text>
|
||
</block>
|
||
|
||
<!-- 5. 未订阅付费频道 -->
|
||
<block wx:else>
|
||
<button class="hero-sub-btn" bindtap="onSubscribe">
|
||
<text>订阅频道</text>
|
||
</button>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 底部波浪装饰 -->
|
||
<view class="hero-wave"></view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="content-area">
|
||
|
||
<!-- 提示条：根据状态动态切换 -->
|
||
<!-- VIP专享未开通 -->
|
||
<view wx:if="{{isVipOnly && !isSubscribed}}" 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="{{!isSubscribed && !isFree}}" class="trial-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>
|
||
<text class="meta-dot">·</text>
|
||
<text>{{item.durationText}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 播放按钮 -->
|
||
<view wx:if="{{!item._isLocked}}" class="item-play-btn {{item._isThisPlaying ? 'active' : ''}}">
|
||
<image
|
||
wx:if="{{item._isThisPlaying && isPlaying}}"
|
||
src="/assets/icons/pause.svg"
|
||
class="item-play-icon"
|
||
/>
|
||
<image
|
||
wx:else
|
||
src="/assets/icons/play.svg"
|
||
class="item-play-icon"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 200rpx;"></view>
|
||
<global-player />
|
||
<t-message id="t-message" />
|
||
</view>
|