Blizzard
148 lines
5.6 KiB
Plaintext
148 lines
5.6 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>
|
||
|
||
<!-- ═══ 按钮区 ═══ -->
|
||
|
||
<!-- 0. 可播放（VIP / 免费 / 已订阅）→ 直接收听 -->
|
||
<block wx:if="{{canPlay}}">
|
||
<button class="hero-sub-btn free-btn" bindtap="goFirstProgram">
|
||
<text>▶ 开始收听</text>
|
||
</button>
|
||
<!-- 副标签 -->
|
||
<text wx:if="{{isVip}}" class="hero-expired">👑 VIP 会员畅享</text>
|
||
<text wx:elif="{{isFree}}" class="hero-expired">🎁 永久免费频道</text>
|
||
<view wx:elif="{{isSubscribed}}" class="hero-sub-row">
|
||
<text class="hero-expired">有效至 {{expiredAt || '长期有效'}}</text>
|
||
<!-- 续订按钮：付费已订阅频道才显示 -->
|
||
<view wx:if="{{!isVipOnly}}" class="renew-inline-btn tap-active" bindtap="onRenew">
|
||
<text class="renew-inline-text">续订</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 1. 免费频道（但不可播放，理论上不会到这里） -->
|
||
<block wx:elif="{{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="{{isExpired}}">
|
||
<view class="hero-badge expired-badge">⏰ 订阅已到期</view>
|
||
<button class="hero-sub-btn renew-btn" bindtap="onSubscribe">
|
||
<text>续费订阅</text>
|
||
</button>
|
||
<text class="hero-expired">已于 {{expiredAt}} 到期</text>
|
||
</block>
|
||
|
||
<!-- 4. 未订阅付费频道 -->
|
||
<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 && !canPlay}}" 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="{{!canPlay && !isFree}}" class="trial-notice locked-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 class="item-play-btn {{item._isThisPlaying ? 'active' : ''}} {{item._isLocked ? 'locked-btn' : ''}}">
|
||
<text wx:if="{{item._isLocked}}" class="lock-icon">🔒</text>
|
||
<view wx:elif="{{item._isThisPlaying && isPlaying}}" class="mini-pause">
|
||
<view class="mp-bar"></view>
|
||
<view class="mp-bar"></view>
|
||
</view>
|
||
<text wx:else class="play-tri">▶</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 200rpx;"></view>
|
||
<global-player />
|
||
<t-message id="t-message" />
|
||
</view>
|