lunar-mini/mini/pages/wish-tree/wish-tree.wxml

<view class="container">
  <!-- 背景氛围：萤火虫 -->
  <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>

  <!-- 多树分屏轮播 -->
  <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"
        />

        <!-- 树上的许愿便签（最新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>
    </swiper-item>
  </swiper>

  <!-- 弹幕层（超出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 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>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">许下心愿</text>
        <text class="modal-close" bindtap="closeCreateModal">×</text>
      </view>
      
      <view class="modal-body">
        <!-- 许愿类型选择 -->
        <view class="type-selector">
          <view 
            class="type-item {{wishType === 'free' ? 'active' : ''}}"
            bindtap="selectType"
            data-type="free"
          >
            <text class="type-name">免费许愿</text>
            <text class="type-desc">20字以内</text>
          </view>
          <view 
            class="type-item {{wishType === 'paid' ? 'active' : ''}}"
            bindtap="selectType"
            data-type="paid"
          >
            <text class="type-name">付费许愿</text>
            <text class="type-desc">更多特权</text>
          </view>
        </view>

        <!-- 许愿内容输入 -->
        <textarea 
          class="wish-input"
          placeholder="请输入你的愿望..."
          maxlength="{{wishType === 'free' ? maxFreeLength : maxPaidLength}}"
          bindinput="onInputContent"
          value="{{wishContent}}"
        ></textarea>
        <view class="input-count">
          {{wishContent.length}}/{{wishType === 'free' ? maxFreeLength : maxPaidLength}}
        </view>

        <!-- 付费商品选择 -->
        <view class="product-section" wx:if="{{wishType === 'paid'}}">
          <view class="product-title">选择许愿商品</view>
          <view class="product-list">
            <view 
              wx:for="{{products}}" 
              wx:key="id"
              class="product-item {{selectedProduct && selectedProduct.id === item.id ? 'active' : ''}}"
              bindtap="selectProduct"
              data-id="{{item.id}}"
            >
              <view class="product-info">
                <text class="product-name">{{item.name}}</text>
                <text class="product-desc">展示{{item.duration}}天</text>
              </view>
              <view class="product-price">¥{{item.price / 100}}</view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="btn-outline" bindtap="closeCreateModal">取消</button>
        <button class="btn-primary" bindtap="submitWish">
          {{wishType === 'paid' ? '支付并许愿' : '提交许愿'}}
        </button>
      </view>
    </view>
  </view>
</view>