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

<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="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>

  <!-- 边缘暗角，让树从中心发光 -->
  <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.png" 
        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>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近的心愿 -->
    <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>
  </view>

  <!-- 许愿按钮 -->
  <view class="action-bar">
    <button class="btn-wish" bindtap="openCreateModal">
      <text class="icon">🙏</text>
      <text>写下心愿</text>
    </button>
  </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="section-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>