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

feat: 样式调整

Browse Source
This commit is contained in:
Blizzard
2026-04-28 10:32:19 +08:00
parent 7f51b2a0a8
commit ce91e2cbbe
33 changed files with 1553 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/channel-detail/index.js
+31 -2
View File
@@ -33,14 +33,17 @@ Page({
onShow() {
this._loadPrograms()
this._onPlayerChange = () => this._updatePlayState()
this._onSubChange = () => this._loadPrograms()
this._onSubChange = () => this._loadChannelDetail()
this._onVipChange = () => this._loadChannelDetail()
app.on('playerStateChange', this._onPlayerChange)
app.on('subscriptionChange', this._onSubChange)
app.on('vipChange', this._onVipChange)
},
onHide() {
if (this._onPlayerChange) app.off('playerStateChange', this._onPlayerChange)
if (this._onSubChange) app.off('subscriptionChange', this._onSubChange)
if (this._onVipChange) app.off('vipChange', this._onVipChange)
},
/**
@@ -78,6 +81,8 @@ Page({
isVip: app.globalData.isVip,
canPlay
})
// 详情加载后刷新节目列表（更新 _isLocked 状态）
self._loadPrograms()
}
}).catch(function (err) {
console.error('[ChannelDetail] 加载频道详情失败:', err)
@@ -105,7 +110,7 @@ Page({
return Object.assign({}, item, {
_displayIndex: String(total - idx).padStart(2, '0'),
_dateDot: item.createdAt ? item.createdAt.substring(0, 10).replace(/-/g, '.') : '',
durationText: util.formatTime(item.duration || 0),
durationText: item.duration > 0 ? util.formatTime(item.duration) : '',
_isThisPlaying: gd.activeContent && gd.activeContent.id === item.id,
_isLocked: !canPlay // 所有集全部锁定，没有试听
})
@@ -195,6 +200,11 @@ Page({
},
goFirstProgram() {
// 权限保护：不可播放时引导到订阅/VIP
if (!this.data.canPlay) {
this.onSubscribe()
return
}
var list = this.data.domainContents
if (list && list.length > 0) {
var first = list[0]
@@ -222,5 +232,24 @@ Page({
goBack() {
wx.navigateBack()
},
// ===================== 分享钩子 =====================
onShareAppMessage() {
const domain = this.data.domain || {}
return {
title: domain.name ? '听全声汇频道：' + domain.name : '全声汇 - 精选频道',
path: '/pages/channel-detail/index?id=' + this._domainId,
imageUrl: ''
}
},
onShareTimeline() {
const domain = this.data.domain || {}
return {
title: domain.name ? '听全声汇频道：' + domain.name : '全声汇 - 精选频道',
query: 'id=' + this._domainId,
imageUrl: ''
}
}
})
pages/channel-detail/index.json
+2 -1
View File
@@ -1,7 +1,8 @@
{
"usingComponents": {
"global-player": "/components/global-player/index",
"t-message": "tdesign-miniprogram/message/message"
"t-message": "tdesign-miniprogram/message/message",
"t-icon": "tdesign-miniprogram/icon/icon"
},
"navigationBarTitleText": "频道详情"
}
pages/channel-detail/index.wxml
+56 -20
View File
@@ -2,20 +2,34 @@
<view class="detail-page">
<!-- 频道信息头部 -->
<view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9D42'}}, {{domain.bgColorEnd || '#FFB366'}});">
<view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9E6D'}}, {{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>
<text class="hero-tag">{{domain.tag || ''}}</text>
<!-- 频道描述 -->
<text wx:if="{{domain.description}}" class="hero-desc">{{domain.description}}</text>
<!-- 数据行：订阅人数 + 节目数 -->
<view class="hero-stats">
<text class="hero-stat">{{domain.subscriberCount || 0}} 人已订阅</text>
<text class="hero-stat-dot">·</text>
<text class="hero-stat">{{domainContents.length || 0}} 期节目</text>
</view>
<!-- ═══ 按钮区 ═══ -->
<!-- 0. 可播放（VIP / 免费 / 已订阅）→ 直接收听 -->
<block wx:if="{{canPlay}}">
<button class="hero-sub-btn free-btn" bindtap="goFirstProgram">
<text>▶ 开始收听</text>
</button>
<view class="hero-action-row">
<button class="hero-sub-btn free-btn" bindtap="goFirstProgram">
<text>▶ 开始收听</text>
</button>
<button class="hero-share-inline-btn tap-active" open-type="share">
<t-icon name="share" size="44rpx" color="#FFF" />
</button>
</view>
<!-- 副标签 -->
<text wx:if="{{isVip}}" class="hero-expired">👑 VIP 会员畅享</text>
<text wx:elif="{{isFree}}" class="hero-expired">🎁 永久免费频道</text>
@@ -31,33 +45,53 @@
<!-- 1. 免费频道（但不可播放，理论上不会到这里） -->
<block wx:elif="{{isFree}}">
<view class="hero-badge free-badge">🎁 永久免费</view>
<button class="hero-sub-btn free-btn" bindtap="onSubscribe">
<text>▶ 开始收听</text>
</button>
<view class="hero-action-row">
<button class="hero-sub-btn free-btn" bindtap="onSubscribe">
<text>▶ 开始收听</text>
</button>
<button class="hero-share-inline-btn tap-active" open-type="share">
<t-icon name="share" size="44rpx" color="#FFF" />
</button>
</view>
</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>
<view class="hero-action-row">
<button class="hero-sub-btn vip-btn" bindtap="onSubscribe">
<text>开通 VIP 解锁</text>
</button>
<button class="hero-share-inline-btn tap-active" open-type="share">
<t-icon name="share" size="44rpx" color="#FFF" />
</button>
</view>
</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>
<view class="hero-action-row">
<button class="hero-sub-btn renew-btn" bindtap="onSubscribe">
<text>续费订阅</text>
</button>
<button class="hero-share-inline-btn tap-active" open-type="share">
<t-icon name="share" size="44rpx" color="#FFF" />
</button>
</view>
<text class="hero-expired">已于 {{expiredAt}} 到期</text>
</block>
<!-- 4. 未订阅付费频道 -->
<block wx:else>
<button class="hero-sub-btn" bindtap="onSubscribe">
<text>订阅频道</text>
</button>
<view class="hero-action-row">
<button class="hero-sub-btn" bindtap="onSubscribe">
<text>订阅频道</text>
</button>
<button class="hero-share-inline-btn tap-active" open-type="share">
<t-icon name="share" size="44rpx" color="#FFF" />
</button>
</view>
</block>
</view>
@@ -123,8 +157,10 @@
<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>
<block wx:if="{{item.durationText}}">
<text class="meta-dot">·</text>
<text>{{item.durationText}}</text>
</block>
</view>
</view>
@@ -141,7 +177,7 @@
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="player-bottom-spacer"></view>
<global-player />
<t-message id="t-message" />
</view>
pages/channel-detail/index.wxss
+52 -2
View File
@@ -56,8 +56,58 @@
font-size: 26rpx;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40rpx;
margin-bottom: 12rpx;
}
.hero-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
text-align: center;
padding: 0 48rpx;
margin-bottom: 12rpx;
}
.hero-stats {
display: flex;
align-items: center;
gap: 10rpx;
margin-bottom: 32rpx;
}
.hero-stat {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.hero-stat-dot {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.35);
}
/* 按钮区 */
.hero-action-row {
display: flex;
align-items: center;
gap: 20rpx;
z-index: 10;
}
.hero-share-inline-btn {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2rpx solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.hero-share-inline-btn::after { border: none; }
.hero-share-inline-btn:active { transform: scale(0.92); }
.hero-sub-btn {
padding: 16rpx 56rpx;
@@ -121,7 +171,7 @@
/* 按钮变体 */
.hero-sub-btn.free-btn { background: #2ECC71; color: #FFF; box-shadow: 0 8rpx 24rpx rgba(46,204,113,0.3); }
.hero-sub-btn.vip-btn { background: linear-gradient(135deg, #FBBF24, #D97706); color: #1F2937; box-shadow: 0 8rpx 24rpx rgba(251,191,36,0.35); }
.hero-sub-btn.renew-btn { background: linear-gradient(135deg, #FF9D42, #FF7832); color: #FFF; box-shadow: 0 8rpx 24rpx rgba(255,120,50,0.35); }
.hero-sub-btn.renew-btn { background: linear-gradient(135deg, #FF9E6D, #FF7832); color: #FFF; box-shadow: 0 8rpx 24rpx rgba(255,120,50,0.35); }
/* 波浪 */
.hero-wave {