feat: 优化UI

pages/channel-detail/index.wxml

@@ -9,10 +9,27 @@
       <text class="hero-name">{{domain.name}}</text>
       <text class="hero-tag">{{domain.tag || domain.description || ''}}</text>
 
-      <!-- ═══ 按钮区：根据频道类型和订阅状态分情况 ═══ -->
+      <!-- ═══ 按钮区 ═══ -->
 
-      <!-- 1. 免费频道 -->
-      <block wx:if="{{isFree}}">
+      <!-- 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>
@@ -27,24 +44,16 @@
         </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. 订阅已过期（重新订阅） -->
+      <!-- 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 wx:if="{{expiredAt}}" class="hero-expired">已于 {{expiredAt}} 到期</text>
+        <text class="hero-expired">已于 {{expiredAt}} 到期</text>
       </block>
 
-      <!-- 5. 未订阅付费频道 -->
+      <!-- 4. 未订阅付费频道 -->
       <block wx:else>
         <button class="hero-sub-btn" bindtap="onSubscribe">
           <text>订阅频道</text>
@@ -61,7 +70,7 @@
 
     <!-- 提示条：根据状态动态切换 -->
     <!-- VIP专享未开通 -->
-    <view wx:if="{{isVipOnly && !isSubscribed}}" class="trial-notice vip-notice" bindtap="onSubscribe">
+    <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>
@@ -80,14 +89,14 @@
       <text class="notice-action">续费 ›</text>
     </view>
 
-    <!-- 付费频道未订阅（试听） -->
-    <view wx:elif="{{!isSubscribed && !isFree}}" class="trial-notice" bindtap="onSubscribe">
-      <text class="notice-icon">🔒</text>
+    <!-- 付费频道未订阅（全锁，无试听） -->
+    <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>
+        <text class="notice-title">频道未解锁</text>
+        <text class="notice-desc">订阅频道或开通全频道会员，即可畅听全部内容</text>
       </view>
-      <text class="notice-action">订阅 ›</text>
+      <text class="notice-action">立即解锁 ›</text>
     </view>
 
     <!-- 内容列表标题 -->
@@ -119,18 +128,14 @@
           </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 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>