更新小程序首页精选推荐逻辑,调整展示的章节数据源为排名接口,优化展开功能以支持动态加载更多章节。修复图标组件的SVG映射,确保图标显示一致性。更新开发环境配置为本地地址,提升开发体验。

This commit is contained in:
Alex-larget
2026-03-20 17:02:09 +08:00
parent 1b87fa92f7
commit 905e8f1e8d
24 changed files with 337 additions and 161 deletions

View File

@@ -85,6 +85,9 @@ Page({
// 余额(用于余额支付)
walletBalance: 0,
// 未解锁时显示的预览比例来自文章详情用于付费墙「已阅读X%」)
previewPercent: 20,
// 审核模式:隐藏购买按钮
auditMode: false,
@@ -337,6 +340,9 @@ Page({
chapterTitle: res.chapterTitle || ''
}
if (res.mid) updates.sectionMid = res.mid
if (res.previewPercent != null && res.previewPercent >= 1 && res.previewPercent <= 100) {
updates.previewPercent = res.previewPercent
}
this.setData(updates)
// 写入本地缓存(存 displayContent供离线/重试降级使用)
try { wx.setStorageSync(cacheKey, { ...res, content: displayContent }) } catch (_) {}

View File

@@ -94,17 +94,23 @@
<!-- 分享操作区 -->
<view class="action-section">
<view class="action-row-inline">
<view class="action-btn-inline btn-share-inline" bindtap="onShareTimelineTap">
<icon name="megaphone" size="32" color="#00CED1" customClass="action-icon-small"></icon>
<text class="action-text-small">分享到朋友圈</text>
<view class="action-btn-inline" bindtap="onShareTimelineTap">
<view class="action-btn-inner">
<image class="action-btn-icon" src="/assets/icons/share.svg" mode="aspectFit"></image>
<text class="action-text-small">分享到朋友圈</text>
</view>
</view>
<view class="action-btn-inline btn-poster-inline" bindtap="generatePoster">
<icon name="image" size="32" color="#00CED1" customClass="action-icon-small"></icon>
<text class="action-text-small">生成海报</text>
<view class="action-btn-inline" bindtap="generatePoster">
<view class="action-btn-inner">
<image class="action-btn-icon" src="/assets/icons/image.svg" mode="aspectFit"></image>
<text class="action-text-small">生成海报</text>
</view>
</view>
<view class="action-btn-inline btn-gift-inline" bindtap="showGiftShareModal" wx:if="{{isLoggedIn && !auditMode}}">
<icon name="gift" size="32" color="#00CED1" customClass="action-icon-small"></icon>
<text class="action-text-small">代付分享</text>
<view class="action-btn-inline" bindtap="showGiftShareModal" wx:if="{{isLoggedIn && !auditMode}}">
<view class="action-btn-inner">
<image class="action-btn-icon" src="/assets/icons/gift.svg" mode="aspectFit"></image>
<text class="action-text-small">代付分享</text>
</view>
</view>
</view>
<view class="share-tip-inline" wx:if="{{!auditMode}}">
@@ -128,7 +134,7 @@
<view class="paywall">
<view class="paywall-icon"><icon name="lock" size="80" color="#00CED1"></icon></view>
<text class="paywall-title">登录后继续阅读</text>
<text class="paywall-desc">已阅读50%,登录后查看完整内容</text>
<text class="paywall-desc">已阅读{{previewPercent}}%,登录后查看完整内容</text>
<view class="login-btn" bindtap="showLoginModal">
<text class="login-btn-text">手机号一键登录</text>
@@ -179,7 +185,7 @@
<view class="paywall">
<view class="paywall-icon"><icon name="lock" size="80" color="#00CED1"></icon></view>
<text class="paywall-title">解锁完整内容</text>
<text class="paywall-desc">已阅读50%,购买后继续阅读</text>
<text class="paywall-desc">已阅读{{previewPercent}}%,购买后继续阅读</text>
<!-- 购买选项(审核模式隐藏) -->
<view class="purchase-options" wx:if="{{!auditMode}}">
@@ -353,6 +359,6 @@
<!-- 右下角悬浮按钮 - 分享到朋友圈 -->
<view class="fab-share" bindtap="shareToMoments">
<icon name="globe" size="40" color="#ffffff" customClass="fab-moments-icon"></icon>
<image class="fab-circle-icon" src="/assets/icons/circle.svg" mode="aspectFit"></image>
</view>
</view>

View File

@@ -479,11 +479,10 @@
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 24rpx 12rpx;
border-radius: 16rpx;
border: none;
background: transparent;
border: 2rpx solid rgba(0, 206, 209, 0.25);
background: rgba(0, 206, 209, 0.08);
line-height: normal;
box-sizing: border-box;
overflow: hidden;
@@ -493,31 +492,28 @@
border: none;
}
.btn-share-inline {
background: rgba(7, 193, 96, 0.15);
border: 2rpx solid rgba(7, 193, 96, 0.3);
.action-btn-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12rpx;
}
.btn-poster-inline {
background: rgba(255, 215, 0, 0.15);
border: 2rpx solid rgba(255, 215, 0, 0.3);
}
.action-icon-small {
font-size: 28rpx;
flex-shrink: 0;
.action-btn-icon {
width: 44rpx;
height: 44rpx;
filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%);
}
.action-text-small {
font-size: 24rpx;
color: #ffffff;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
max-width: 100%;
}
.share-tip-inline {
@@ -659,9 +655,6 @@
}
/* ===== 代付分享 ===== */
.btn-gift-inline {
/* 与 btn-share-inline 同风格 */
}
.gift-share-row {
display: flex;
align-items: center;
@@ -1255,20 +1248,15 @@
.fab-share {
position: fixed;
right: 32rpx;
width:70rpx!important;
bottom: calc(120rpx + env(safe-area-inset-bottom));
height: 70rpx;
border-radius: 60rpx;
background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
box-shadow: 0 8rpx 32rpx rgba(0, 206, 209, 0.4);
padding: 0;
margin: 0;
border: none;
z-index: 9999;
display:flex;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
transition: transform 0.2s ease;
}
.fab-share::after {
@@ -1277,18 +1265,10 @@
.fab-share:active {
transform: scale(0.95);
box-shadow: 0 4rpx 20rpx rgba(0, 206, 209, 0.5);
}
.fab-icon {
padding:16rpx;
width: 50rpx;
height: 50rpx;
display: block;
}
.fab-moments-icon {
font-size: 44rpx;
line-height: 1;
.fab-circle-icon {
width: 72rpx;
height: 72rpx;
}