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路由提供访问

mini/pages/wish-tree/wish-tree.js

@@ -1,46 +1,41 @@
-const { request } = require('../../utils/request.js');
+const { request, BASE_URL } = require('../../utils/request.js');
 
-// 预设的树冠挂载点（百分比坐标）
+// 树冠挂载点（基于正方形背景图的图片坐标，百分比）
+// x 需落在 22~78 之间，避免竖屏 aspectFill 时被左右裁掉
 const CANOPY_SLOTS = [
-  { x: 16, y: 34 },
-  { x: 27, y: 21 },
-  { x: 39, y: 14 },
-  { x: 52, y: 12 },
-  { x: 63, y: 18 },
-  { x: 74, y: 26 },
-  { x: 84, y: 38 },
-  { x: 12, y: 50 },
-  { x: 23, y: 46 },
-  { x: 34, y: 40 },
-  { x: 66, y: 40 },
-  { x: 78, y: 50 },
-  { x: 88, y: 30 },
-  { x: 45, y: 30 },
+  { x: 30, y: 30 }, { x: 36, y: 20 }, { x: 43, y: 14 }, { x: 50, y: 12 },
+  { x: 57, y: 15 }, { x: 64, y: 22 }, { x: 70, y: 32 }, { x: 27, y: 42 },
+  { x: 34, y: 38 }, { x: 42, y: 34 }, { x: 58, y: 34 }, { x: 66, y: 40 },
+  { x: 73, y: 48 }, { x: 27, y: 55 }, { x: 47, y: 26 }, { x: 53, y: 40 },
+  { x: 39, y: 48 }, { x: 61, y: 50 }, { x: 45, y: 56 },
 ];
 
-// 标签颜色配置
-const TAG_COLORS = {
-  amber: {
+// 便签配色
+const TAG_COLORS = [
+  {
     color: '#ffd700',
-    bgColor: 'rgba(255, 215, 0, 0.9)',
-    borderColor: 'rgba(255, 215, 0, 0.6)',
-    shadowColor: 'rgba(255, 215, 0, 0.4)',
+    bgColor: 'rgba(255, 224, 130, 0.92)',
+    borderColor: 'rgba(255, 215, 0, 0.5)',
+    shadowColor: 'rgba(255, 215, 0, 0.35)',
   },
-  red: {
+  {
     color: '#ff6b6b',
-    bgColor: 'rgba(255, 107, 107, 0.9)',
-    borderColor: 'rgba(255, 107, 107, 0.6)',
-    shadowColor: 'rgba(255, 107, 107, 0.4)',
+    bgColor: 'rgba(255, 150, 150, 0.92)',
+    borderColor: 'rgba(255, 107, 107, 0.5)',
+    shadowColor: 'rgba(255, 107, 107, 0.35)',
   },
-  jade: {
+  {
     color: '#51cf66',
-    bgColor: 'rgba(81, 207, 102, 0.9)',
-    borderColor: 'rgba(81, 207, 102, 0.6)',
-    shadowColor: 'rgba(81, 207, 102, 0.4)',
+    bgColor: 'rgba(140, 226, 155, 0.92)',
+    borderColor: 'rgba(81, 207, 102, 0.5)',
+    shadowColor: 'rgba(81, 207, 102, 0.35)',
   },
-};
+];
 
-// 生成伪随机数（用于萤火虫和花瓣位置）
+// 挂树数量上限，超出的以弹幕展示
+const MAX_HANG = 50;
+
+// 伪随机（保证每次渲染一致）
 function seeded(i, salt) {
   const v = Math.sin((i + 1) * 12.9898 + salt * 78.233) * 43758.5453;
   return v - Math.floor(v);
@@ -48,9 +43,12 @@ function seeded(i, salt) {
 
 Page({
   data: {
-    wishes: [],
-    recentWishes: [],
-    loading: true,
+    trees: [],
+    currentTreeIndex: 0,
+    currentDanmaku: [],
+    topWishes: [],
+    detailWish: null,
+    fireflies: [],
     showCreateModal: false,
     wishContent: '',
     wishType: 'free',
@@ -58,25 +56,36 @@ Page({
     maxPaidLength: 100,
     products: [],
     selectedProduct: null,
-    fireflies: [],
-    petals: [],
   },
 
   onLoad() {
+    // 屏幕尺寸，用于图片坐标到视口坐标的换算
+    const sys = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+    this.vw = sys.windowWidth;
+    this.vh = sys.windowHeight;
+
+    // 每棵树的许愿缓存：{ treeId: { hangWishes, danmaku, top } }
+    this.wishCache = {};
+
     this.initAmbiance();
-    this.loadWishes();
+    this.loadTrees();
     this.loadProducts();
   },
 
   onPullDownRefresh() {
-    this.loadWishes().then(() => {
+    const { currentTreeIndex, trees } = this.data;
+    const tree = trees[currentTreeIndex];
+    if (tree) {
+      this.loadTreeWishes(currentTreeIndex, true).then(() => {
+        wx.stopPullDownRefresh();
+      });
+    } else {
       wx.stopPullDownRefresh();
-    });
+    }
   },
 
-  // 初始化氛围效果
+  // 初始化萤火虫氛围
   initAmbiance() {
-    // 萤火虫
     const fireflies = [];
     for (let i = 0; i < 22; i++) {
       fireflies.push({
@@ -87,137 +96,248 @@ Page({
         delay: seeded(i, 5) * 4,
       });
     }
-
-    // 花瓣
-    const petals = [];
-    for (let i = 0; i < 10; i++) {
-      petals.push({
-        left: seeded(i, 6) * 100,
-        size: 5 + seeded(i, 7) * 6,
-        duration: 10 + seeded(i, 8) * 8,
-        delay: seeded(i, 9) * 12,
-      });
-    }
-
-    this.setData({ fireflies, petals });
+    this.setData({ fireflies });
   },
 
-  // 加载许愿
-  async loadWishes() {
-    try {
-      const res = await request({
-        url: '/api/wish/tree/1/wishes',
-        method: 'GET',
-      });
-      
-      if (res.code === 0) {
-        const wishes = this.formatWishes(res.data.list || []);
-        this.setData({ 
-          wishes,
-          recentWishes: wishes.slice(0, 8),
-          loading: false,
-        });
-      }
-    } catch (err) {
-      console.error('加载许愿失败:', err);
-      const wishes = this.formatWishes(this.getMockWishes());
-      this.setData({ 
-        wishes,
-        recentWishes: wishes.slice(0, 8),
-        loading: false,
-      });
-    }
-  },
-
-  // 格式化许愿数据
-  formatWishes(list) {
-    const colorKeys = Object.keys(TAG_COLORS);
-    
-    return list.map((wish, index) => {
-      const slot = this.pickSlot(index);
-      const colorKey = colorKeys[index % colorKeys.length];
-      const colors = TAG_COLORS[colorKey];
-      
-      return {
-        id: wish.id,
-        content: wish.content,
-        author: wish.author || '匿名',
-        type: wish.type,
-        x: slot.x,
-        y: slot.y,
-        color: colors.color,
-        bgColor: colors.bgColor,
-        borderColor: colors.borderColor,
-        shadowColor: colors.shadowColor,
-        swayDuration: 3.4 + (index % 5) * 0.6,
-        swayDelay: (index % 7) * 0.35,
-        isNew: false,
-      };
-    });
-  },
-
-  // 选择挂载点
-  pickSlot(index) {
-    const base = CANOPY_SLOTS[index % CANOPY_SLOTS.length];
-    const wrap = Math.floor(index / CANOPY_SLOTS.length);
-    
-    if (wrap === 0) return base;
-    
-    const jitterX = ((wrap * 37) % 9) - 4;
-    const jitterY = ((wrap * 53) % 9) - 4;
-    
+  // 图片坐标（正方形图）→ 视口坐标
+  // aspectFill 下竖屏会左右对称裁剪，横向需要按比例展开
+  transformSlot(slot) {
+    const r = this.vh / this.vw;
+    const x = slot.x * r - (r - 1) * 50;
     return {
-      x: Math.min(92, Math.max(8, base.x + jitterX)),
-      y: Math.min(58, Math.max(10, base.y + jitterY)),
+      x: Math.min(96, Math.max(4, x)),
+      y: slot.y,
     };
   },
 
-  // 模拟许愿数据
+  // 加载许愿树列表（后端提供几个就显示几个分屏）
+  async loadTrees() {
+    try {
+      const res = await request({ url: '/api/wish/trees', method: 'GET' });
+      if (res.code === 0 && res.data.list && res.data.list.length > 0) {
+        const trees = res.data.list.map((t) => ({
+          ...t,
+          imageUrl: this.resolveImageUrl(t.image),
+          hangWishes: [],
+        }));
+        this.setData({ trees });
+        this.loadTreeWishes(0);
+        return;
+      }
+    } catch (err) {
+      console.error('加载许愿树失败:', err);
+    }
+
+    // 兜底：单棵本地树
+    this.setData({
+      trees: [{
+        id: 1,
+        name: '祈福树',
+        imageUrl: '/images/wish-tree.jpg',
+        hangWishes: [],
+      }],
+    });
+    this.loadTreeWishes(0);
+  },
+
+  // 解析树背景图地址（相对路径拼接服务器域名）
+  resolveImageUrl(image) {
+    if (!image) return '/images/wish-tree.jpg';
+    if (/^https?:\/\//.test(image)) return image;
+    return BASE_URL + image;
+  },
+
+  // 分屏切换
+  onSwiperChange(e) {
+    const index = e.detail.current;
+    this.setData({ currentTreeIndex: index });
+
+    const tree = this.data.trees[index];
+    if (!tree) return;
+
+    const cache = this.wishCache[tree.id];
+    if (cache) {
+      // 已加载过，直接展示缓存
+      this.applyTreeWishes(index, cache);
+    } else {
+      this.loadTreeWishes(index);
+    }
+  },
+
+  // 加载指定树的许愿（默认100条）
+  async loadTreeWishes(index, force) {
+    const trees = this.data.trees;
+    const tree = trees[index];
+    if (!tree) return;
+    if (!force && this.wishCache[tree.id]) {
+      this.applyTreeWishes(index, this.wishCache[tree.id]);
+      return;
+    }
+
+    let list = [];
+    try {
+      const res = await request({
+        url: `/api/wish/tree/${tree.id}/wishes`,
+        method: 'GET',
+      });
+      if (res.code === 0) {
+        list = res.data.list || [];
+      }
+    } catch (err) {
+      console.error('加载许愿失败:', err);
+      list = this.getMockWishes();
+    }
+
+    // 按时间倒序（新数据在前）
+    list.sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
+
+    // 顶级位置轮播
+    const top = list.filter((w) => w.isTop).map((w) => this.formatWish(w, 0));
+
+    // 最新50条挂树
+    const hangWishes = list.slice(0, MAX_HANG).map((w, i) => {
+      const wish = this.formatWish(w, i);
+      const slot = this.transformSlot(this.pickSlot(i));
+      return {
+        ...wish,
+        x: slot.x,
+        y: slot.y,
+        swayDuration: 3.4 + (i % 5) * 0.6,
+        swayDelay: (i % 7) * 0.35,
+        isNew: Date.now() - new Date(w.createdAt || 0).getTime() < 60000,
+      };
+    });
+
+    // 其余以弹幕飘过
+    const danmaku = list.slice(MAX_HANG).map((w, i) => ({
+      id: w.id,
+      content: w.content,
+      author: w.author || '匿名',
+      type: w.type,
+      top: 12 + (i % 6) * 7,
+      duration: 16 + w.content.length * 0.4,
+      delay: -(i * 2.1),
+    }));
+
+    const cache = { hangWishes, danmaku, top };
+    this.wishCache[tree.id] = cache;
+    this.applyTreeWishes(index, cache);
+  },
+
+  // 应用某棵树的许愿数据到视图
+  applyTreeWishes(index, cache) {
+    this.setData({
+      [`trees[${index}].hangWishes`]: cache.hangWishes,
+      topWishes: cache.top,
+      currentDanmaku: cache.danmaku,
+    });
+  },
+
+  // 格式化许愿
+  formatWish(w, i) {
+    const colors = TAG_COLORS[i % TAG_COLORS.length];
+    return {
+      id: w.id,
+      content: w.content,
+      author: w.author || '匿名',
+      type: w.type,
+      isTop: !!w.isTop,
+      dateStr: this.formatDate(w.createdAt),
+      ...colors,
+    };
+  },
+
+  // 选择挂载点（循环复用，复用时加抖动）
+  pickSlot(index) {
+    const base = CANOPY_SLOTS[index % CANOPY_SLOTS.length];
+    const wrap = Math.floor(index / CANOPY_SLOTS.length);
+    if (wrap === 0) return base;
+    const jitterX = ((wrap * 37) % 7) - 3;
+    const jitterY = ((wrap * 53) % 7) - 3;
+    return {
+      x: Math.min(75, Math.max(25, base.x + jitterX)),
+      y: Math.min(60, Math.max(10, base.y + jitterY)),
+    };
+  },
+
+  // 日期格式化
+  formatDate(t) {
+    if (!t) return '';
+    const d = new Date(t);
+    const pad = (n) => (n < 10 ? '0' + n : '' + n);
+    return `${d.getMonth() + 1}月${d.getDate()}日 ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  },
+
+  // 模拟数据（开发调试用，60条以验证弹幕效果）
   getMockWishes() {
-    return [
-      { id: 1, content: '愿家人平安喜乐，身体健康', author: '小满', type: 'paid' },
-      { id: 2, content: '希望今年考研上岸，一战成硕', author: '阿远', type: 'free' },
-      { id: 3, content: '愿世界温柔以待每一个努力的人', author: '林深', type: 'paid' },
-      { id: 4, content: '早日遇见那个对的人', author: '拾光', type: 'free' },
-      { id: 5, content: '祝爸妈身体硬朗，笑口常开', author: '念念', type: 'paid' },
-      { id: 6, content: '愿所求皆如愿，所行皆坦途', author: '白露', type: 'free' },
-      { id: 7, content: '希望新工作顺顺利利', author: '子夜', type: 'paid' },
-      { id: 8, content: '愿此生尽兴，赤诚善良', author: '青禾', type: 'free' },
-      { id: 9, content: '愿代码零bug，一次通过', author: '小测', type: 'paid' },
+    const texts = [
+      '愿家人平安喜乐，身体健康',
+      '希望今年考研上岸，一战成硕',
+      '愿世界温柔以待每一个努力的人',
+      '早日遇见那个对的人',
+      '祝爸妈身体硬朗，笑口常开',
+      '愿所求皆如愿，所行皆坦途',
+      '希望新工作顺顺利利',
+      '愿此生尽兴，赤诚善良',
+      '愿代码零bug，一次通过',
+      '希望减肥成功，越来越好看',
+      '愿所有付出都有回报',
+      '希望今年能去一次海边',
     ];
+    const authors = ['小满', '阿远', '林深', '拾光', '念念', '白露', '子夜', '青禾', '小测', '桃桃', '余涵', '奕'];
+    const list = [];
+    for (let i = 0; i < 60; i++) {
+      list.push({
+        id: i + 1,
+        content: texts[i % texts.length],
+        author: authors[i % authors.length],
+        type: i % 5 === 0 ? 'paid' : 'free',
+        position: i === 0 ? 100 : 0,
+        isTop: i === 0,
+        createdAt: new Date(Date.now() - i * 3600 * 1000).toISOString(),
+      });
+    }
+    return list;
+  },
+
+  // 查看便签详情
+  openDetail(e) {
+    const wish = e.currentTarget.dataset.wish;
+    if (!wish) return;
+    this.setData({ detailWish: wish });
+  },
+
+  closeDetail() {
+    this.setData({ detailWish: null });
   },
 
   // 加载许愿商品
   async loadProducts() {
     try {
-      const res = await request({
-        url: '/api/wish/products',
-        method: 'GET',
-      });
-      
+      const res = await request({ url: '/api/wish/products', method: 'GET' });
       if (res.code === 0) {
         this.setData({ products: res.data.list || [] });
+        return;
       }
     } catch (err) {
       console.error('加载商品失败:', err);
-      this.setData({
-        products: [
-          { id: 1, name: '普通许愿条', price: 100, duration: 7 },
-          { id: 2, name: '精品许愿条', price: 500, duration: 30 },
-          { id: 3, name: '至尊许愿条', price: 2000, duration: 90 },
-        ],
-      });
     }
+    this.setData({
+      products: [
+        { id: 1, name: '普通许愿条', price: 100, duration: 7 },
+        { id: 2, name: '精品许愿条', price: 500, duration: 30 },
+        { id: 3, name: '至尊许愿条', price: 2000, duration: 90 },
+      ],
+    });
   },
 
-  // 打开许愿弹窗
+  // 打开/关闭许愿弹窗
   openCreateModal() {
     this.setData({ showCreateModal: true });
   },
 
-  // 关闭许愿弹窗
   closeCreateModal() {
-    this.setData({ 
+    this.setData({
       showCreateModal: false,
       wishContent: '',
       wishType: 'free',
@@ -225,44 +345,47 @@ Page({
     });
   },
 
-  // 输入许愿内容
   onInputContent(e) {
     this.setData({ wishContent: e.detail.value });
   },
 
-  // 选择许愿类型
   selectType(e) {
-    const type = e.currentTarget.dataset.type;
-    this.setData({ wishType: type });
+    this.setData({ wishType: e.currentTarget.dataset.type });
   },
 
-  // 选择商品
   selectProduct(e) {
     const id = e.currentTarget.dataset.id;
-    const product = this.data.products.find(p => p.id === id);
+    const product = this.data.products.find((p) => p.id === id);
     this.setData({ selectedProduct: product });
   },
 
+  // 当前树ID
+  currentTreeId() {
+    const { trees, currentTreeIndex } = this.data;
+    const tree = trees[currentTreeIndex];
+    return tree ? tree.id : 1;
+  },
+
   // 提交许愿
   async submitWish() {
-    const { wishContent, wishType, selectedProduct } = this.data;
-    
+    const { wishContent, wishType, selectedProduct, maxFreeLength, maxPaidLength } = this.data;
+
     if (!wishContent.trim()) {
       wx.showToast({ title: '请输入许愿内容', icon: 'none' });
       return;
     }
-    
-    const maxLength = wishType === 'free' ? this.data.maxFreeLength : this.data.maxPaidLength;
+
+    const maxLength = wishType === 'free' ? maxFreeLength : maxPaidLength;
     if (wishContent.length > maxLength) {
       wx.showToast({ title: `最多输入${maxLength}个字`, icon: 'none' });
       return;
     }
-    
+
     if (wishType === 'paid' && !selectedProduct) {
       wx.showToast({ title: '请选择许愿商品', icon: 'none' });
       return;
     }
-    
+
     try {
       if (wishType === 'paid') {
         const orderRes = await request({
@@ -272,10 +395,9 @@ Page({
             type: 'wish',
             productId: selectedProduct.id,
             content: wishContent,
-            treeId: 1,
+            treeId: this.currentTreeId(),
           },
         });
-        
         if (orderRes.code === 0) {
           await this.wxPay(orderRes.data);
         }
@@ -286,14 +408,13 @@ Page({
           data: {
             content: wishContent,
             type: 'free',
-            treeId: 1,
+            treeId: this.currentTreeId(),
           },
         });
-        
         if (res.code === 0) {
           wx.showToast({ title: '许愿成功', icon: 'success' });
           this.closeCreateModal();
-          this.loadWishes();
+          this.loadTreeWishes(this.data.currentTreeIndex, true);
         }
       }
     } catch (err) {
@@ -314,7 +435,7 @@ Page({
         success: () => {
           wx.showToast({ title: '支付成功', icon: 'success' });
           this.closeCreateModal();
-          this.loadWishes();
+          this.loadTreeWishes(this.data.currentTreeIndex, true);
           resolve();
         },
         fail: (err) => {
@@ -326,14 +447,6 @@ Page({
     });
   },
 
-  // 查看许愿详情
-  viewWishDetail(e) {
-    const id = e.currentTarget.dataset.id;
-    wx.navigateTo({
-      url: `/pages/wish-detail/wish-detail?id=${id}`,
-    });
-  },
-
   // 分享
   onShareAppMessage() {
     return {