feat(wish-tree): 许愿树页面微调七项
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:
@@ -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}}"
|
||||
|
||||
Reference in New Issue
Block a user