# 本周鲜果 · 青樾里团购接龙

> 活页公开模板 `sample-group-buy` · 场景: 报名 · 投票 · 接龙 · 行业: 零售门店 / 个人家庭
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/vy1uHn7nAdH6 · 详情: https://space.24haowan.com/examples/sample-group-buy

## 这是什么

小区团购接龙 · 团长发到业主群收订单

## 什么时候用

社区团长、小店老板、宝妈群每周发一期团购：几款商品有团购价和成团线，邻居选数量接龙，要一份按人排的接龙名单和按商品的汇总，选它。只收报名、按场次分名额选 sample-event-signup；只想把商品和价格摆出来、不收单选 sample-product-catalog；要抽奖引流选 sample-lucky-wheel。

## 用户对助手说的原话

帮我做一个小区水果团购接龙页，发成一个网页链接到业主群：页头是团名、小区、期号、团长，下面四个要素（截单时间带一个走秒的倒计时、取货时间、取货地点、付款方式）；接着列本周六款水果，每款一行：左边一个现画的 SVG 水果插画，右边名称、规格、团购价和划掉的原价、一条成团进度条和「已订 38 / 50 份成团 · 还差 12 份」，价格旁边是「− 数量 +」步进按钮，底部一条固定的购物条实时算合计和比原价省多少，点「去接龙」跳到表单；然后是接龙：像微信群接龙那样以「#接龙」开头、一行一户编号排（3 栋 张姐 芒果×2 青提×1），下面一张表单选楼栋、填称呼、一个「接上」按钮，提交存进一张数据表（name / building / items / total），新接的一行滑进名单；再按商品汇总已订份数、金额和是否成团；最后写取货时间地点、怎么付款、没成团怎么办、坏果怎么赔和团长的联系方式。电脑上左边商品右边接龙两栏，手机上依次排下来。每周换一期商品就更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-group-buy/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-group-buy ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 本周六款
- 取货 · 付款 · 售后
- 接龙
- 按商品汇总

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-group-buy/source/index.html（入口）

## 发成活页之后还能做的

- 商品行带 SVG 插画、团购价 / 原价和成团进度条，「+ / −」选数量、底部购物条实时算合计
- 接龙经原生表单写回数据表（POST ./_data/orders），页面读回排成群接龙样式的名单，新的一条滑入
- 按接龙自动重算每款已订份数、是否成团和汇总金额；截单倒计时
- 同一链接每周更新一期（换商品只发新版本）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 orders（列 name / building / items / total，append_open=true）：接龙表单写进这里，页面读回排成名单并重算成团；发布前先用 set_data 建好，截单时把 append_open 关掉

## 模板说明（README）

模板市场第三轮补齐的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。示例内容均为虚构：小区「青樾里」、樾里鲜果团、团长阿芸、36 户邻居和电话都是编的；水果品种名是通用品种 / 产地名，不指向任何品牌。插画全是内联 SVG 现画的。

## 演示哪个特色

**群里接龙的网页版：选数量实时算钱，接龙写回数据表，页面读回排成接龙名单、自动算成团。**

- 记忆点是右栏（手机上是「接龙」一节）那份接龙名单：照微信群接龙的样子 `#接龙` 起头、一行一户（`12. 3 栋 张姐 芒果×2 青提×1`）。新接上的那一行从右边滑进来、底色亮一下再淡掉（`prefers-reduced-motion` 时直接停在高亮）。
- 商品行：SVG 插画、规格、团购价 / 原价、成团进度条「已订 38 / 50 份成团 · 还差 12 份」（进度条第一次进入视野时长出来）；点「+ / −」选数量（有 `navigator.vibrate` 就轻震一下），底部购物条实时算合计和比原价省多少。手机上购物条固定在屏幕底部，电脑上贴在商品栏底部。
- 截单倒计时每秒走（页头「截单」那格）。
- 发出去之后：「接上」是原生表单 `<form action="./_data/orders" method="post">`，写进数据表 `orders`（列 `name` / `building` / `items` / `total`）；脚本在时页内提交，读 `./_data/orders.json` 接在名单后面，重算每款已订份数、进度条、成团与否和「按商品汇总」那张表。团长用 `list_data_rows table=orders` 拿全部名单去发收款。
- 不跑脚本时：页面是一份完整的静态名单 + 汇总（与种子数据一致：36 户、103 份、¥3,662.70，3 款已成团），表单里多出一格「要什么、几份」手填 `芒果×2、青提×1`，照样能提交。

## 两份数据：种子名单在页面里，新接的在表里

| 在哪 | 是什么 | 页面怎么用 |
|---|---|---|
| `<script type="application/json" id="seed">` + `#jl-list` 里的静态行 | 发页面之前群里已经接的那些（团长从群里搬过来） | 名单的前 N 条；成团份数从它起算 |
| 数据表 `orders`（`append_open=true`） | 页面上新接的 | 接在种子后面编号；`items` 按 `商品短名×数量`、用「、」分隔，页面按这个格式解析 |

`total` 是提交时页面算好的金额（字符串，两位小数），只给团长对账用；页面上的份数和金额一律按 `items` 重算，不信 `total`。
建表：

```
set_data proposal_id=<id> table="orders" revision=0 rows=[] columns=["name","building","items","total"] append_open=true
```

截单 = 只翻开关：`set_data table="orders" revision=<当前> append_open=false`（再提交会印「本期已经截单了」）。
本地 `space-cli serve` 会把提交写进包里的 `_data/orders.json`，试完改回 `[]`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.sub` / `.facts` | 团名、小区、期号、团长；截单 / 取货 / 地点 / 付款 |
| 脚本顶上 `GOODS` | 每款的短名 `short`（接龙里写的那个词）、团购价 `price`、原价 `orig`、成团线 `need`；与商品行 `data-g` 一一对应 |
| 脚本顶上 `DEADLINE` / `ISSUE` / `ROLL_WEEKLY` | 截单时刻（UTC 毫秒，注释里写了北京时间）、期号。样例为了一直能演示，过了截单就按周滚到下一个周四；**自己用时把 `ROLL_WEEKLY` 改成 `false`**，过了截单倒计时显示「已截单」 |
| `.goods` 六行 | 插画（`svg.fr`，64×64 坐标）、名称、规格、价格；静态的「已订 n / 成团线」是不跑脚本时的样子，跟种子名单一起改 |
| `#seed` 与 `#jl-list` | 群里已经接的名单；不想带种子就两处都清空（`[]` 和空 `<ol>`），汇总表的静态数字改成 0 |
| 楼栋下拉 `#f-b` | 你们小区的楼栋 |
| 「取货 · 付款 · 售后」 | 取货时间地点、怎么付、没成团怎么办、坏果怎么赔、团长联系方式 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致）+ 一句适用场景；发自己的团购时整段删掉 |
| `manifest.json` | `title` / `share.*`；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

纪律：`orders` 开了写回，过审的行任何能看这页的人都读得到 —— 只收称呼和楼栋，不收手机号、门牌号；收款在群里另发，不在这页付。

## 怎么发出去

```bash
# 1. 建页面（MCP create_proposal）→ proposal_id；2. 建表 orders（上面的 set_data）
# 3. 推整个目录（带 _data/ 回落）：
node core/space/cli/space-cli.mjs push core/space/examples/sample-group-buy \
  --proposal <proposal_id> --manifest core/space/examples/sample-group-buy/manifest.json --hold
# 4. 预览：点几下「+」看合计，接一单看名单多一行、进度条变；5. publish_version
# 6. 业主群里发：口令（set_visibility passcode）或公开，由团长本人决定；下周换商品就改页面再发一版，链接不变
# 7. 截单：关掉 orders 的 append_open；list_data_rows 导出名单去发收款
```

验收截图：`node --import tsx examples/verify-shots.mjs sample-group-buy --write-thumb --write-phone`（QUALITY.md §7）。