gouki
fe5bed0668
1. 背景图 aspectFill 撑满全屏，挂载点坐标按裁剪比例重算，便签不再落在图外 2. 写下心愿按钮单行不换行，缩小尺寸 3. 移除页面内许愿树标题/数量/最近心愿，点击便签弹出便签式详情卡 4. 默认请求100条：最新50条挂树，其余以弹幕形式缓缓飘过 5. MAKE A WISH 下方增加顶级位置轮播（购买后24小时内展示），点击弹出金色便签详情，与普通便签区分 6. 多棵树分屏轮播（swiper），背景图从服务器获取，带指示点 7. 后端：WishTree新增image字段，Wish新增isTop运行时标记，图片用go:embed内嵌随二进制部署，/images路由提供访问
458 lines
12 KiB
JavaScript
458 lines
12 KiB
JavaScript
const { request, BASE_URL } = require('../../utils/request.js');
|
|
|
|
// 树冠挂载点（基于正方形背景图的图片坐标，百分比）
|
|
// x 需落在 22~78 之间，避免竖屏 aspectFill 时被左右裁掉
|
|
const CANOPY_SLOTS = [
|
|
{ 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 = [
|
|
{
|
|
color: '#ffd700',
|
|
bgColor: 'rgba(255, 224, 130, 0.92)',
|
|
borderColor: 'rgba(255, 215, 0, 0.5)',
|
|
shadowColor: 'rgba(255, 215, 0, 0.35)',
|
|
},
|
|
{
|
|
color: '#ff6b6b',
|
|
bgColor: 'rgba(255, 150, 150, 0.92)',
|
|
borderColor: 'rgba(255, 107, 107, 0.5)',
|
|
shadowColor: 'rgba(255, 107, 107, 0.35)',
|
|
},
|
|
{
|
|
color: '#51cf66',
|
|
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);
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
trees: [],
|
|
currentTreeIndex: 0,
|
|
currentDanmaku: [],
|
|
topWishes: [],
|
|
detailWish: null,
|
|
fireflies: [],
|
|
showCreateModal: false,
|
|
wishContent: '',
|
|
wishType: 'free',
|
|
maxFreeLength: 20,
|
|
maxPaidLength: 100,
|
|
products: [],
|
|
selectedProduct: null,
|
|
},
|
|
|
|
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.loadTrees();
|
|
this.loadProducts();
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
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({
|
|
left: seeded(i, 1) * 100,
|
|
top: seeded(i, 2) * 100,
|
|
size: 2 + seeded(i, 3) * 4,
|
|
duration: 2.5 + seeded(i, 4) * 3.5,
|
|
delay: seeded(i, 5) * 4,
|
|
});
|
|
}
|
|
this.setData({ fireflies });
|
|
},
|
|
|
|
// 图片坐标（正方形图）→ 视口坐标
|
|
// aspectFill 下竖屏会左右对称裁剪，横向需要按比例展开
|
|
transformSlot(slot) {
|
|
const r = this.vh / this.vw;
|
|
const x = slot.x * r - (r - 1) * 50;
|
|
return {
|
|
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() {
|
|
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' });
|
|
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 },
|
|
],
|
|
});
|
|
},
|
|
|
|
// 打开/关闭许愿弹窗
|
|
openCreateModal() {
|
|
this.setData({ showCreateModal: true });
|
|
},
|
|
|
|
closeCreateModal() {
|
|
this.setData({
|
|
showCreateModal: false,
|
|
wishContent: '',
|
|
wishType: 'free',
|
|
selectedProduct: null,
|
|
});
|
|
},
|
|
|
|
onInputContent(e) {
|
|
this.setData({ wishContent: e.detail.value });
|
|
},
|
|
|
|
selectType(e) {
|
|
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);
|
|
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, maxFreeLength, maxPaidLength } = this.data;
|
|
|
|
if (!wishContent.trim()) {
|
|
wx.showToast({ title: '请输入许愿内容', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
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({
|
|
url: '/api/pay/create',
|
|
method: 'POST',
|
|
data: {
|
|
type: 'wish',
|
|
productId: selectedProduct.id,
|
|
content: wishContent,
|
|
treeId: this.currentTreeId(),
|
|
},
|
|
});
|
|
if (orderRes.code === 0) {
|
|
await this.wxPay(orderRes.data);
|
|
}
|
|
} else {
|
|
const res = await request({
|
|
url: '/api/wish/create',
|
|
method: 'POST',
|
|
data: {
|
|
content: wishContent,
|
|
type: 'free',
|
|
treeId: this.currentTreeId(),
|
|
},
|
|
});
|
|
if (res.code === 0) {
|
|
wx.showToast({ title: '许愿成功', icon: 'success' });
|
|
this.closeCreateModal();
|
|
this.loadTreeWishes(this.data.currentTreeIndex, true);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('许愿失败:', err);
|
|
wx.showToast({ title: '许愿失败，请重试', icon: 'none' });
|
|
}
|
|
},
|
|
|
|
// 微信支付
|
|
async wxPay(orderData) {
|
|
return new Promise((resolve, reject) => {
|
|
wx.requestPayment({
|
|
timeStamp: orderData.timeStamp,
|
|
nonceStr: orderData.nonceStr,
|
|
package: orderData.package,
|
|
signType: orderData.signType,
|
|
paySign: orderData.paySign,
|
|
success: () => {
|
|
wx.showToast({ title: '支付成功', icon: 'success' });
|
|
this.closeCreateModal();
|
|
this.loadTreeWishes(this.data.currentTreeIndex, true);
|
|
resolve();
|
|
},
|
|
fail: (err) => {
|
|
console.error('支付失败:', err);
|
|
wx.showToast({ title: '支付失败', icon: 'none' });
|
|
reject(err);
|
|
},
|
|
});
|
|
});
|
|
},
|
|
|
|
// 分享
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '快来许愿树许下你的愿望吧！',
|
|
path: '/pages/wish-tree/wish-tree',
|
|
};
|
|
},
|
|
});
|