表单 / 服务组件

本文档面向 服务表单（errand_service） 页面的 16 个表单组件。
价格怎么算：先在各组件属性里配「计价」形成项目加价，再在页面级「服务表单」Tab → 配置计价方式 选择如何把基础价、项目加价、配送费相加（详见下方「表单价格怎么算」）。

条件显隐

在组件属性面板的 条件显隐 分组中，可为任意表单组件（含分割线/说明）配置显示规则：

• 来源字段：只能选当前组件之前的画布字段，不能引用自身或后面的组件
• 匹配方式：全部满足 / 任一满足
• 运算符：等于、为空、开关开/关、多选包含、数字比较等
• 隐藏语义：不渲染、不校验必填、不计价、不进提交 payload，并清空已填值

保存模板时会自动校验 循环依赖 与 前向引用；启用规则的组件在画布右上角显示「条件」角标。页面级「服务表单」Tab 会统计启用数量。

服务表单（errand_service）页面的 16 个表单组件。此类页面组件库仅显示「表单/服务」分类，用于跑腿下单、可配置服务等场景。

UI管理 → 页面配置 → 设计 → 表单/服务·运营 / UI 编辑人员

移动端宽度与左右留白

灵萌客户端基于 uni-app，移动端设计稿逻辑宽度为 750rpx，编辑器画布预览与真机一致。

只需设置宽度与左边距即可，不必再单独填右边距。适用于卡片、轮播、图片等需要距屏幕边缘一点距离的块级组件。

• 750rpx = 屏幕逻辑全宽
• 若希望组件两侧留空且整体居中：在样式 Tab 将宽度设为 720rpx，左边距设为 15rpx
• 720 + 15 + 15 = 750，即左右各 15rpx 边距

页面类型

表单组件只能添加到服务表单页。首页、圈子页等内容组件在此类页面不可用。

页面类型 — 服务表单文档

表单项怎么参与计费

选中每个表单项后，在属性面板「计价」分组选择计费方式。编辑器里显示的选项名与后台一致，无需记英文代码。

后台字段 pricingRole 对应上述中文选项，运营按界面操作即可，不必手填代码。

不计价该字段不影响价格（说明、分割线、时间选择等默认选项）

按数量乘单价用户填的数字 × 你设的单价。适合件数、份数、上传张数/文件数（数字步进、滑动条、图片、文件）

选项差价 / 开关加价 / 填写加价 / 定位差价选中某个选项、打开开关、填写地址或选中预设地点时，加固定金额（选项、开关、地址、定位选择器）

仅作变量本身不加钱，只在「四则运算」模式里被公式引用（如用重量参与超重费计算）

表单价格怎么算

用户看到的总价 = 基础价 + 表单加价 + 配送费（按你选的计价方式组合）。

两步走：① 在各表单项里配好加价 → ② 点击画布空白，在「服务表单」Tab 选计价方式。

• 基础价：服务表单 Tab →「基础价」，每笔订单的固定起步价（元）
• 表单加价：所有设为「参与计费」的表单项自动累加（试算弹窗里显示为「表单加价」或「项目加价」）
• 配送费：履约方式选「骑手配送」且用户填写取件/送达地址后，按距离估算；编辑器试算固定显示 ¥0.00
• 合计：在「配置计价方式」弹窗选一种组合规则，得到最终应付金额

在哪里配置

1. 1
   基础价点击画布空白 → 右侧「服务表单」Tab → 填写「基础价」（元）
2. 2
   表单项加价选中表单项 → 属性 Tab →「计价」选计费方式，并填单价/差价/选项加价
3. 3
   计价方式仍在服务表单 Tab →「计价方式」旁点「配置」，打开弹窗
4. 4
   看试算弹窗顶部「实时试算」展示基础价、表单加价、配送费、合计（按画布默认值估算，非最终下单价）

四种计价方式（配置弹窗）

常规计价（推荐）基础价 + 表单加价 + 配送费。各表单项设的加价会自动汇总，弹窗里一般不用再逐项配置 — 适合代取、帮买、代办等大多数场景

仅基础价只收基础价，忽略表单加价和配送费。适合一口价、不按选项浮动

按数量计费基础价 + 某个「数字步进」字段的值 × 每件单价。可勾选是否叠加「表单里其他加价」「配送费」

四则运算把费用拆成多个「费用分组」，组内用加减乘除组合表单字段、数量×单价或固定金额；最后在「最终价格还要包含」里勾选基础价、各分组、表单加价、配送费

表单加价怎么累加

试算弹窗里的「表单加价」= 下面各表单项按计费方式算出的金额之和。选「常规计价」时会自动计入总价。

• 常规计价：在各表单项配好加价即可，弹窗会提示「在表单组件里设置加价即可自动计入」
• 若页面已选「按数量计费」，同一数字字段不要再设「按数量乘单价」，避免重复计费
• 「费用展示」公式留空即跟随页面；「提交底栏」左侧合计自动联动，无需单独设计费方式

选项（单选/多选）计价选「选项差价」：单选取当前选中项加价；多选累加各选中项。在选项列表为每项填「选中加价（元）」

开关计价选「开关加价」：打开加「开启时加价」，关闭加「关闭时加价」（可填 0）

数字步进 / 滑动条计价选「按数量乘单价」：当前数值 × 每件单价。数字步进默认已开启

图片 / 文件计价选「按数量乘单价」：已上传张数/个数 × 单价

地址计价选「填写加价」：用户填写后加固定金额；取件/送达还会另算配送距离费

定位选择器计价选「定位差价」：用户选哪个预设地点，就加该地点的「选中加价」

配置示例

1. 1
   代取快递（常规计价）基础价 3 元；数字「件数」选「按数量乘单价」每件 1 元；选项「加急」选中加价 0.5 元 → 试算：基础 3.00 + 表单加价 1.50 + 配送 0 = 合计 4.50 元
2. 2
   统一标价（仅基础价）基础价 10 元，各表单项计价均选「不计价」→ 无论用户怎么填，合计恒为 10 元
3. 3
   纯按件（按数量计费）基础价 0；计价方式选「按数量计费」→ 数量字段选「件数」，每件 2 元；不勾「其他加价」→ 用户填 3 件 = 6 元
4. 4
   分组计费（四则运算）添加分组「包装费」= 固定 5 元；分组「超重费」= 数字字段 weight × 2 元；最终勾选：基础价 + 包装费 + 超重费 + 配送费

试算与真实下单

弹窗「实时试算」用各组件默认值/首选项估算，配送费在编辑器内为 0，标注「非最终下单价」。用户实际填写、改选项/数量/地址后会重算；骑手配送会加真实配送费。创建订单以后端重算为准，前端展示仅供参考。

服务表单页配置流程

保存后须在页面列表启用，并对目标区域生效。

1. 1
   说明与分组用表单说明写须知；用分割线划分取件信息、增值服务等区块
2. 2
   表单项每个需提交数据的组件须设唯一 fieldKey；取件/送达地址请设正确地址用途
3. 3
   费用展示建议放在表单项之后；可开启明细行与优惠券对接
4. 4
   提交底栏每页仅一个，固定吸底；也可额外使用提交按钮作为页内提交入口
5. 5
   页面级配置点击画布空白处，右侧服务表单 Tab 配置履约方式、基础价、计价方式

① 表单说明/分割线 → ② 表单项（输入、选项、地址等） → ③ 费用展示 → ④ 提交底栏（唯一）

页面级服务表单配置

点击画布空白处，右侧出现「服务表单配置」面板（与画布组件分开保存）。履约、基础价、计价方式、分成等均在此配置。

骑手配送时，用户填写取件/送达地址后会估算配送费；计价方式里需包含配送费（常规计价默认已含）。

服务场景自定义编码（同区域不可重复），用于区分不同服务模板，如 express_pickup

履约方式人工受理（平台/区域处理）/ 骑手配送（支付后派单）/ 仅登记统计（提交即完成，用于数据采集）

基础价起步价（元），试算弹窗第一行「基础价」

计价方式点「配置」打开「配置计价方式」弹窗，含实时试算

展示费用明细用户端是否展示基础价、加价、配送费等分项

下单后支付须先支付 / 可后付

分成设置（可选）开启后可设平台/区域/骑手分成比例；可排除基础价或指定表单项不参与分成

单行输入（xiaoyi-form-input）

单行文本输入框，用于姓名、备注、物品描述等短文本。

• 字段名不可与其他组件重复，否则表单值会联动

标题 / fieldKey / 占位提示 / 是否必填单行输入 / field_text / 请输入 / 必填

显示标题 / 标题位置显示 / 左侧上方 或 左侧同行

左侧图标无 / 字体图标 / 图片

计价默认「不计价」；若参与四则运算公式，可选「仅作变量」

多行输入（xiaoyi-form-textarea）

多行文本输入，适合详细描述、留言等较长内容。

• 无标题位置、左侧图标等单行输入的高级布局选项

标题 / fieldKey / 占位提示 / 是否必填多行输入 / field_textarea / 请输入 / 选填

计价默认「不计价」，长文本一般不影响价格

数字步进（xiaoyi-form-number）

带加减步进器的数字输入，常用于件数、份数、人数。

标题 / fieldKey / 是否必填数量 / package_count / 必填

单位 / 最小值 / 最大值 / 步长如「件」/ 1 / 99 / 1

计价默认「按数量乘单价」— 填每件单价（元），费用 = 用户填的数量 × 单价

滑动条（xiaoyi-form-slider）

可拖动的滑动条选值。上行显示标题与当前值，下行为轨道与滑块。

最小值 / 最大值 / 步长 / 默认值0 / 100 / 1 / 50

显示当前值 / 显示两端值 / 值前缀 / 值后缀后缀默认 %

小数位数当前值显示精度，默认 0

计价默认「不计价」；可选「按数量乘单价」— 费用 = 滑块当前值 × 单价

选项（xiaoyi-form-options）

单选或多选选项组。每个选项可设名称与选中加价。

• 单选仅能设一个默认项；多选可设多个默认项

选择模式单选 或 多选

最多可选 / 排列方式 / 选项对齐 / 选项间距多选时：不限或最多 N 项；横排/竖排；左/中/右；10rpx

选项列表每项：名称、默认选中、选中加价

计价默认「选项差价」— 单选取选中项加价，多选把各选中项加价相加

开关（xiaoyi-form-switch）

布尔开关，适合「需要小票」「加急处理」等是/否选项。

标题 / fieldKey / 是否必填需要小票 / field_switch / 选填

左侧图标无 / 字体图标 / 图片

计价默认「开关加价」— 分别填开启时/关闭时加价（元）

时间选择（xiaoyi-form-datetime）

从管理员预设的日期 + 时段中选择，用户不可自由输入时间。

标题 / fieldKey / 占位提示时间选择 / field_datetime / 请选择时间

时间类型文本时间（如明天 10:00-11:00）或 截止时间（时段结束时刻）

日期选项 / 上午时段 / 下午时段今天、明天、后天等；如 09:00-10:00

计价默认不计价

图片上传（xiaoyi-form-image）

用户上传图片，以缩略图网格展示。副标题显示在标题同行右侧。

标题 / fieldKey / 副标题上传图片 / field_images / 最多上传3张照片

图片对齐 / 最多张数 / 单张上限 (MB)左/中/右 / 3 / 5

计价默认「按数量乘单价」— 费用 = 已上传张数 × 每张单价

文件上传（xiaoyi-form-file）

上传 PDF、文档、表格等非图片文件。

小程序端暂不支持选择文件；主要面向 H5 / App。

标题 / fieldKey / 按钮文案文件上传 / field_files / + 文件

最多文件数 / 单文件上限 (MB) / 允许格式3 / 20 / .pdf,.doc,.docx,…

计价默认按数量乘单价 — 每个文件加价（元）

分割线（xiaoyi-form-divider）

带可选文案的分割线，用于表单分组标题或视觉分隔。不参与数据提交与计价。

• 无 fieldKey，不收集用户数据；同一页面可添加多个

文案 / 线条类型 / 布局分组标题 / 实线/虚线/点线/双线/无线条 / 居中夹标题或标题左对齐

左侧图标无 / 字体图标 / 图片

表单说明（xiaoyi-form-notice）

表单内提示条，用于填写须知、警告或注意事项。支持信息/警告/危险三种类型配色。

外层容器背景建议透明，避免与提示条背景叠色。

内容 / 类型请如实填写信息… / 信息/警告/危险

显示图标 / 左侧图标 / 内容对齐默认（随类型）/ 字体图标 / 图片；左/中/右

地址（xiaoyi-form-address）

点击跳转地址填写页，用于取件、送达或普通地址。

取件 + 送达地址配合骑手履约使用；编辑器内无法真实选地址，仅预览排版。

标题 / fieldKey / 占位提示 / 是否必填地址 / pickup_addr / 点击填写地址 / 必填

地址用途取件 / 送达 / 普通地址

预览展示编辑器内：未填写 / 已填写

计价默认「不计价」；可选「填写加价」或「仅作变量」（配送费与地址用途另算）

定位选择器（xiaoyi-form-location-picker）

从管理员预设的地点列表中单选。每项含名称、区县、地址、经纬度、联系人等。

• 须为每个定位填写有效经纬度（可用「搜索地址并填入」）

标题 / fieldKey / 是否必填选择定位 / location_pick / 选填

定位列表每项：图片、名称、区县、详细/完整地址、经纬度、联系人、手机号、选中加价

计价默认「定位差价」— 在每个定位卡片里单独填「选中加价（元）」

费用展示（xiaoyi-form-price-display）

在表单中实时展示价格，随用户填写内容更新。可展示分项明细、总计、优惠券抵扣。

建议放在表单项之后、提交底栏之前。

标题文案 / 说明文案价格明细 / 费用将随填写内容实时更新

计价公式 / 展示明细 / 对接优惠券公式留空=跟随页面级计价方式；可单独覆盖为「基础价+组件」等模板；展示分项行；试算优惠券

明细标签基础费、加价、配送、优惠券、总计、应付及辅助文案

提交底栏（xiaoyi-form-bottom-bar）

固定吸底的提交栏：左侧实时合计，右侧提交按钮。是服务表单页的标准提交入口。

左侧合计金额自动联动页面计价结果，无需在提交底栏单独设计费。

每页仅可添加一个提交底栏。重复添加时编辑器会提示或置灰。

价格标签 / 按钮文案合计 / 立即提交

按钮图标 / 大小 / 颜色可选 shopping-cart-o 等

确认弹窗 / 确认标题 / 确认说明开启 / 确认提交 / 确认提交当前表单？

提交按钮（xiaoyi-form-submit）

页内大按钮提交入口（非吸底）。可配主文案、副文案、顶部须知、图标与确认弹窗。

• 同一页面可多个（与提交底栏不同）
• 通常与提交底栏择一为主；若两者并存，请避免重复提交逻辑混淆

按钮文案 / 副文案 / 顶部说明立即提交 / — / 提交即表示您已阅读并同意…

按钮图标 / 位置 / 大小可选，左或右

确认弹窗 / 确认标题 / 确认说明同提交底栏

通用约束汇总

页面类型16 个组件仅 errand_service 页可添加

提交底栏唯一每页最多 1 个

fieldKey 唯一重复时编辑器警告，并提供一键修复重复字段名

样式双层属性 Tab 内嵌样式 + 顶部样式 Tab 外层容器

保存与启用编辑后须保存并在列表启用才对用户生效

相关文档

页面类型 — 服务表单跑腿业务