feat(wish-tree): 许愿树页面微调七项
Publish Mini Program Dev Version / publish (push) Failing after 11s
Build and Publish Server / build (push) Successful in 2m54s

1. 背景图 aspectFill 撑满全屏,挂载点坐标按裁剪比例重算,便签不再落在图外
2. 写下心愿按钮单行不换行,缩小尺寸
3. 移除页面内许愿树标题/数量/最近心愿,点击便签弹出便签式详情卡
4. 默认请求100条:最新50条挂树,其余以弹幕形式缓缓飘过
5. MAKE A WISH 下方增加顶级位置轮播(购买后24小时内展示),点击弹出金色便签详情,与普通便签区分
6. 多棵树分屏轮播(swiper),背景图从服务器获取,带指示点
7. 后端:WishTree新增image字段,Wish新增isTop运行时标记,图片用go:embed内嵌随二进制部署,/images路由提供访问
This commit is contained in:
gouki
2026-08-09 20:58:32 +00:00
parent f5c8d06fbe
commit fe5bed0668
9 changed files with 697 additions and 446 deletions
+99 -76
View File
@@ -1,94 +1,117 @@
<view class="container">
<!-- 背景氛围:萤火虫 -->
<view class="ambiance">
<view
wx:for="{{fireflies}}"
wx:key="index"
class="firefly"
style="left: {{item.left}}%; top: {{item.top}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
></view>
</view>
<view class="firefly"
wx:for="{{fireflies}}"
wx:key="index"
style="left: {{item.left}}%; top: {{item.top}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
></view>
<!-- 背景氛围:花瓣 -->
<view class="petals">
<view
wx:for="{{petals}}"
wx:key="index"
class="petal"
style="left: {{item.left}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
></view>
</view>
<!-- 多树分屏轮播 -->
<swiper
class="tree-swiper"
current="{{currentTreeIndex}}"
bindchange="onSwiperChange"
circular="{{trees.length > 1}}"
>
<swiper-item wx:for="{{trees}}" wx:key="id">
<view class="tree-page">
<!-- 背景图撑满全屏 -->
<image
src="{{item.imageUrl}}"
class="tree-bg"
mode="aspectFill"
/>
<!-- 边缘暗角,让树从中心发光 -->
<view class="vignette"></view>
<!-- 主内容 -->
<view class="main-content">
<!-- 头部 -->
<view class="header">
<text class="subtitle">MAKE A WISH</text>
<text class="title">许愿树</text>
<text class="description">月色微凉,灯火摇曳。写下心中所愿,挂上枝头,静待花开成真。</text>
<text class="wish-count">已有 <text class="count">{{wishes.length}}</text> 个心愿挂满枝头</text>
</view>
<!-- 许愿树 -->
<view class="tree-container">
<image
src="/images/wish-tree.jpg"
class="tree-image"
mode="aspectFit"
/>
<!-- 许愿标签 -->
<view
wx:for="{{wishes}}"
wx:key="id"
class="wish-tag {{item.isNew ? 'new' : ''}}"
style="left: {{item.x}}%; top: {{item.y}}%;"
bindtap="viewWishDetail"
data-id="{{item.id}}"
>
<view class="tag-sway" style="animation-duration: {{item.swayDuration}}s; animation-delay: {{item.swayDelay}}s;">
<!-- 挂绳 -->
<view class="tag-string" style="background: linear-gradient(to bottom, transparent, {{item.color}});"></view>
<!-- 绳结 -->
<view class="tag-knot" style="background: {{item.color}}; box-shadow: 0 0 8px {{item.color}};"></view>
<!-- 标签 -->
<view class="tag-content" style="background: {{item.bgColor}}; border: 1px solid {{item.borderColor}}; box-shadow: 0 4px 16px {{item.shadowColor}};">
<text class="tag-text">{{item.content}}</text>
<text class="tag-author">—— {{item.author}}</text>
<!-- 树上的许愿便签(最新50条) -->
<view
wx:for="{{item.hangWishes}}"
wx:for-item="wish"
wx:key="id"
class="wish-tag {{wish.isNew ? 'new' : ''}}"
style="left: {{wish.x}}%; top: {{wish.y}}%;"
catchtap="openDetail"
data-wish="{{wish}}"
>
<view class="tag-sway" style="animation-duration: {{wish.swayDuration}}s; animation-delay: {{wish.swayDelay}}s;">
<view class="tag-string" style="background: linear-gradient(to bottom, transparent, {{wish.color}});"></view>
<view class="tag-knot" style="background: {{wish.color}}; box-shadow: 0 0 8rpx {{wish.color}};"></view>
<view class="tag-content" style="background: {{wish.bgColor}}; border: 1rpx solid {{wish.borderColor}}; box-shadow: 0 6rpx 20rpx {{wish.shadowColor}};">
<text class="tag-text">{{wish.content}}</text>
<text class="tag-author">—— {{wish.author}}</text>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 最近的心愿 -->
<view class="recent-section">
<text class="section-title">最 近 的 心 愿</text>
<scroll-view class="recent-list" scroll-x enhanced show-scrollbar="{{false}}">
<view
wx:for="{{recentWishes}}"
wx:key="id"
class="recent-item"
bindtap="viewWishDetail"
data-id="{{item.id}}"
>
<text class="recent-text">{{item.content}}</text>
<text class="recent-author">—— {{item.author}}</text>
</view>
</scroll-view>
</view>
<!-- 弹幕层(超出50条的心愿缓缓飘过) -->
<view class="danmaku-layer">
<view
wx:for="{{currentDanmaku}}"
wx:key="id"
class="danmaku-item {{item.type === 'paid' ? 'paid' : ''}}"
style="top: {{item.top}}%; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
>{{item.content}} · {{item.author}}</view>
</view>
<!-- 许愿按钮 -->
<!-- 边缘暗角 -->
<view class="vignette"></view>
<!-- 顶部:MAKE A WISH + 顶级位置轮播 -->
<view class="header">
<text class="subtitle">MAKE A WISH</text>
<swiper
wx:if="{{topWishes.length > 0}}"
class="top-swiper"
vertical
autoplay
circular
interval="3000"
duration="500"
>
<swiper-item wx:for="{{topWishes}}" wx:key="id">
<view class="top-item" catchtap="openDetail" data-wish="{{item}}">
<text class="top-crown">👑</text>
<text class="top-text">{{item.content}}</text>
<text class="top-author">—— {{item.author}}</text>
</view>
</swiper-item>
</swiper>
</view>
<!-- 分屏指示点 -->
<view class="page-dots" wx:if="{{trees.length > 1}}">
<view
wx:for="{{trees}}"
wx:key="id"
class="dot {{currentTreeIndex === index ? 'active' : ''}}"
></view>
</view>
<!-- 许愿按钮(树根附近) -->
<view class="action-bar">
<button class="btn-wish" bindtap="openCreateModal">
<text class="icon">🙏</text>
<text>写下心愿</text>
<text class="btn-text">写下心愿</text>
</button>
</view>
<!-- 便签详情弹窗 -->
<view class="detail-modal" wx:if="{{detailWish}}">
<view class="detail-mask" bindtap="closeDetail"></view>
<view class="note-card {{detailWish.isTop ? 'top-note' : ''}}">
<view class="note-string"></view>
<view class="note-knot" style="background: {{detailWish.color}};"></view>
<view class="note-badge" wx:if="{{detailWish.isTop}}">👑 顶级心愿</view>
<text class="note-text">{{detailWish.content}}</text>
<view class="note-footer">
<text class="note-author">—— {{detailWish.author}}</text>
<text class="note-date">{{detailWish.dateStr}}</text>
</view>
</view>
</view>
<!-- 许愿弹窗 -->
<view class="modal" wx:if="{{showCreateModal}}">
<view class="modal-mask" bindtap="closeCreateModal"></view>
@@ -133,7 +156,7 @@
<!-- 付费商品选择 -->
<view class="product-section" wx:if="{{wishType === 'paid'}}">
<view class="section-title">选择许愿商品</view>
<view class="product-title">选择许愿商品</view>
<view class="product-list">
<view
wx:for="{{products}}"