深浅模式
表单 / 服务组件
本文档面向 服务表单（errand_service） 页面的 16 个表单组件。此类页面组件库 仅显示「表单 / 服务」分类，用于跑腿下单、可配置服务等场景。
页面类型
表单组件 只能 添加到 服务表单 页。首页、圈子页等内容组件在此类页面不可用。详见 页面类型 — 服务表单。
计价角色（pricingRole）说明
多个表单项支持 计价方式，与页面级 服务表单配置（基础价、计价公式）配合使用：
| 计价方式 | 含义 | 适用组件 |
|---|---|---|
| 不计价 | 不参与费用计算 | 多数组件默认 |
| 按数量乘单价 | 数值 × 单价（如件数、滑动条数值、图片张数） | 数字步进、滑动条、图片上传、文件上传 |
| 选项 / 开关 / 填写 / 定位差价 | 选中项或状态对应的固定加价 | 选项、开关、地址、定位选择器 |
| 仅作变量 | 不直接加价，但可写入页面计价公式作为变量 | 选项、地址、定位选择器等 |
服务表单页配置流程
推荐按以下顺序搭建服务表单页：
① 表单说明 / 分割线 → 告知用户填写须知、划分区块
② 表单项（输入、选项、地址等） → 收集业务字段，按需开启计价
③ 费用展示 → 实时展示价格明细与优惠券
④ 提交底栏（唯一） → 吸底合计 + 提交按钮补充说明：
| 步骤 | 要点 |
|---|---|
| 说明与分组 | 用 表单说明 写须知；用 分割线 划分「取件信息」「增值服务」等区块 |
| 表单项 | 每个需提交数据的组件须设 唯一 fieldKey；取件/送达地址请设正确 地址用途 |
| 费用展示 | 建议放在表单项之后；可开启明细行与优惠券对接 |
| 提交底栏 | 每页仅一个，固定吸底；也可额外使用 提交按钮 作为页内提交入口（非吸底） |
| 页面级配置 | 点击画布空白处，右侧 服务表单 Tab 配置履约方式、基础价、计价方式 |
保存后须在页面列表 启用，并对目标 区域 生效。
页面级 errandMeta（履约与计价）
服务表单页除画布组件外，还有 页面级业务配置（保存在 errandMeta，与画布同级）。在编辑器右侧 服务表单 Tab 中编辑：
| 配置项 | 说明 |
|---|---|
| 服务场景（templateCode） | 自定义编码，同区域不可重复；用于区分不同服务模板 |
| 履约方式 | 平台处理 / 骑手配送 / 无需配送 |
| 基础价 | 起步价（元），计入订单基础费用 |
| 计价方式 | 按模板选择（如基础价 + 组件加价 + 配送费等），无需手写公式 |
| 展示费用明细 | 是否在用户端展示分项明细 |
| 下单后支付 | 须先支付 或 可后付 |
取件/送达地址填写后，系统可估算 配送距离费；若使用骑手配送，请在计价方式中包含配送费变量。
更完整的页面类型与互斥规则见 页面类型说明。
1. 单行输入（xiaoyi-form-input）
说明
单行文本输入框，用于姓名、备注、物品描述等短文本。支持标题上方/左侧同行两种布局，可选左侧图标或图片。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 | 用户看到的字段名 | 单行输入 |
| 字段名 fieldKey | 提交时的键名，须唯一 | field_text |
| 占位提示 | 输入框占位文字 | 请输入 |
| 是否必填 | 必填 / 选填 | 必填 |
| 显示标题 | 显示 / 隐藏标题 | 显示 |
| 标题位置 | 左侧上方 / 左侧同行 | 左侧上方 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
| 图标名 / 图片 URL | 选图标或图片时填写 | — |
计价相关
| 计价方式 | 默认 |
|---|---|
| 不计价 | ✅ 默认 |
可选：仅作变量（供页面计价公式引用，不直接加价）。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 内容字号/颜色、占位颜色、内容对齐、边框颜色、圆角、背景色 |
| 前导图标 | 前导间距、图标大小/颜色（或图片大小/圆角） |
| 外层样式 | 宽高、外边距、内边距、背景等 → 「样式」 Tab |
约束
- 字段名 不可与其他组件重复，否则表单值会联动
- 横向布局结构：图标 / 标题 / 输入框（图标与标题在输入框容器外侧）
2. 多行输入（xiaoyi-form-textarea）
说明
多行文本输入，适合详细描述、留言等较长内容。标题显示在输入框上方。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 | 字段名称 | 多行输入 |
| 字段名 fieldKey | 须唯一 | field_textarea |
| 占位提示 | 占位文字 | 请输入 |
| 是否必填 | 必填 / 选填 | 选填 |
计价相关
默认 不计价，不参与费用计算。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 内容字号/颜色、占位颜色、边框颜色/粗细、圆角、背景色 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 无标题位置、左侧图标等单行输入的高级布局选项
3. 数字步进（xiaoyi-form-number）
说明
带 加减步进器 的数字输入，常用于件数、份数、人数。可配置最小/最大值、步长、单位。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 同通用表单字段 | 数量 / package_count / 必填 |
| 显示标题 / 标题位置 | 显示标题及位置 | 显示 / 左侧同行 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
| 单位 | 如「件」，可留空 | — |
| 最小值 / 最大值 / 步长 | 数值范围与步进 | 1 / 99 / 1 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 按数量乘单价（默认） | 填写 每件单价（元）；费用 = 当前数量 × 单价 |
| 不计价 / 开关加价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 步进器样式 | 按钮边长、按钮间距、内容字号/颜色、单位颜色、按钮圆角、按钮背景色 |
| 前导图标 | 同单行输入 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 布局：图标 / 标题 / 步进器，步进按钮在右侧独立显示
4. 滑动条（xiaoyi-form-slider）
说明
可拖动的 滑动条 选值。上行显示标题与当前值，下行为轨道与滑块。适合比例、权重、满意度等场景。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 标题 / field_slider / 选填 |
| 显示标题 / 左侧图标 | 标题与图标配置 | 显示 / 无 |
| 最小值 / 最大值 / 步长 | 取值范围 | 0 / 100 / 1 |
| 默认值 | 初始滑块位置 | 50 |
| 显示当前值 / 显示两端值 | 是否展示数值 | 显示 / 隐藏 |
| 值前缀 / 值后缀 | 如 ¥、%、件 | 后缀默认 % |
| 小数位数 | 当前值显示精度 | 0 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 不计价（默认） | — |
| 按数量乘单价 | 填写 每单位单价；费用 = 滑块值 × 单价 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 内容字号/颜色、边框、圆角、背景（滑动条容器） |
| 滑动条轨道 | 已选/未选轨道色、轨道高度/圆角、点击热区高度 |
| 滑块与数值 | 滑块大小/填充色/描边、当前值字号/颜色/字重、两端值字号/颜色 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 标题位置固定为：上行标题 + 当前值，下行滑动条
5. 选项（xiaoyi-form-options）
说明
单选或多选 选项组（旧画布中的「单选」「多选」节点已合并为此组件）。每个选项可设名称与选中加价。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 选项 / field_options / 选填 |
| 选择模式 | 单选 或 多选 | 单选 |
| 最多可选 | 多选时：不限 / 最多 N 项 | 不限 |
| 排列方式 | 横排 / 竖排 | 横排 |
| 选项对齐 | 左 / 中 / 右 | 左 |
| 选项间距 | 选项之间的间距 | 10rpx |
| 显示标题 / 标题位置 | 选项上方 / 选项左侧 | 显示 / 选项上方 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
| 选项列表 | 每项：名称、默认选中、选中加价 | 见编辑器 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 选项差价（默认） | 每项配置 选中加价（元）；单选取选中项，多选累加 |
| 不计价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 选项样式 | 选项字号、未选/选中文字色、边框色、选中背景色、圆角 |
| 前导图标 | 同单行输入 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 单选仅能设 一个 默认项；多选可设多个默认项
- 多选时各选中项加价 一起累加
6. 开关（xiaoyi-form-switch）
说明
布尔开关，布局为：左侧图标/标题 + 右侧开关。适合「需要小票」「加急处理」等是/否选项。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 需要小票 / field_switch / 选填 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 开关加价（默认） | 开启时加价、关闭时加价（元），按当前状态取对应金额 |
| 不计价 / 按数量乘单价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 前导图标间距与样式 |
| 开关样式 | 开启颜色 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
7. 时间选择（xiaoyi-form-datetime）
说明
从管理员预设的 日期 + 时段 中选择，用户 不可自由输入 时间。支持「文本时间」与「截止时间」两种提交格式。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 占位提示 / 是否必填 | 通用字段 | 时间选择 / field_datetime / 请选择时间 |
| 显示标题 / 标题位置 | 选择框上方 / 选择框左侧 | 显示 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
| 时间类型 | 文本时间（如「明天 10:00-11:00」）或 截止时间（时段结束时刻） | 文本时间 |
| 日期选项 | 今天、明天、后天等 | 可勾选 |
| 上午时段 / 下午时段 | 各时段起止时间，可增删 | 如 09:00-10:00 |
计价相关
默认 不计价。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 内容字号/颜色/对齐、占位颜色、箭头颜色、边框、圆角、背景 |
| 前导图标 | 同单行输入 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 用户只能从配置的日期与时段中选择
8. 图片上传（xiaoyi-form-image）
说明
用户上传图片，以缩略图网格展示。副标题显示在标题同行右侧（如「最多上传 3 张」）。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 上传图片 / field_images / 选填 |
| 显示标题 / 左侧图标 | — | 显示 / 无 |
| 副标题 | 标题右侧说明，留空不显示 | 最多上传3张照片 |
| 图片对齐 | 左 / 中 / 右 | 左 |
| 最多张数 | 上传上限 | 3 |
| 单张上限 (MB) | 单文件大小限制 | 5 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 按数量乘单价（默认） | 每张图片加价（元）；费用 = 已上传张数 × 单价 |
| 不计价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 前导图标样式 |
| 图片样式 | 缩略图边长/圆角、添加框边框色、副标题字号/颜色 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
9. 文件上传（xiaoyi-form-file）
说明
上传 PDF、文档、表格等 非图片文件。标题旁显示「已选/上限」计数。
平台限制
小程序端暂不支持 选择文件；主要面向 H5 / App。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 文件上传 / field_files / 选填 |
| 显示标题 / 左侧图标 | — | 显示 / 无 |
| 按钮文案 | 添加文件按钮文字 | + 文件 |
| 最多文件数 | 上传上限 | 3 |
| 单文件上限 (MB) | 单文件大小 | 20 |
| 允许格式 | 扩展名列表，逗号分隔 | .pdf,.doc,.docx,… |
计价相关
| 计价方式 | 说明 |
|---|---|
| 按数量乘单价（默认） | 每个文件加价（元） |
| 不计价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 前导图标样式 |
| 文件样式 | 按钮背景/文字色/字号/圆角；列表项背景/圆角/内边距/间距；文件名字号/颜色；删除图标色/大小 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 小程序端不可用
10. 分割线（xiaoyi-form-divider）
说明
带可选文案的分割线，用于表单 分组标题 或视觉分隔。不参与数据提交与计价。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 文案 | 分组标题，可留空 | 分组标题 |
| 线条类型 | 实线 / 虚线 / 点线 / 双线 / 无线条 | 实线 |
| 布局 | 居中夹标题 / 标题左对齐 | 居中夹标题 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
计价相关
无。不参与计价。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 分割线样式 | 线条颜色/粗细、文字字号/颜色、前导图标样式 |
| 外层样式 | 「样式」 Tab（建议外层背景透明） |
约束
- 无 fieldKey，不收集用户数据
- 同一页面可添加多个
11. 表单说明（xiaoyi-form-notice）
说明
表单内 提示条，用于填写须知、警告或注意事项。支持信息 / 警告 / 危险三种类型配色。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 内容 | 说明正文 | 请如实填写信息… |
| 类型 | 信息 / 警告 / 危险 | 信息 |
| 显示图标 | 是否显示左侧类型图标 | 显示 |
| 左侧图标 | 默认（随类型）/ 字体图标 / 图片 | 默认 |
| 内容对齐 | 左 / 中 / 右 | 左 |
计价相关
无。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 说明样式 | 字号、提示条文案色/背景色（留空跟随类型）、前导图标样式 |
| 外层样式 | 「样式」 Tab；外层容器背景建议透明，避免与提示条背景叠色 |
约束
- 无 fieldKey
- 选「默认」图标且开启显示图标时，按类型自动使用对应图标
12. 地址（xiaoyi-form-address）
说明
点击跳转 地址填写页，用于取件、送达或普通地址。编辑器内可切换「未填写 / 已填写」预览排版。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 占位提示 / 是否必填 | 通用字段 | 地址 / pickup_addr / 点击填写地址 / 必填 |
| 地址用途 | 取件 / 送达 / 普通地址 | 取件 |
| 显示标题 / 标题位置 | 输入框上方 / 输入框左侧 | 显示 |
| 左侧图标 | 无 / 字体图标 / 图片 | 无 |
| 预览展示 | 编辑器内：未填写 / 已填写 | 已填写 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 不计价（默认） | — |
| 填写加价 | 用户填写地址后固定加价（元） |
| 仅作变量 | 供公式引用 |
取件、送达地址填写后，系统可 自动估算配送距离费；使用骑手配送时请在页面计价方式中加入 配送费。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 输入区样式 | 内容字号/颜色/对齐、占位颜色、箭头颜色、边框、圆角、背景 |
| 前导图标 | 同单行输入 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 编辑器内无法真实选地址，仅预览排版
- 取件 + 送达地址配合骑手履约使用
13. 定位选择器（xiaoyi-form-location-picker）
说明
从管理员预设的 地点列表 中单选。每项含名称、区县、地址、经纬度、联系人等；可通过地图搜索填入。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题 / fieldKey / 是否必填 | 通用字段 | 选择定位 / location_pick / 选填 |
| 显示标题 / 显示箭头 | — | 显示 / 显示 |
| 定位列表 | 每项：图片、名称、区县、详细/完整地址、经纬度、联系人、手机号、选中加价 | 可增删 |
计价相关
| 计价方式 | 说明 |
|---|---|
| 定位差价（默认） | 每个定位单独配置 选中加价（元） |
| 不计价 / 仅作变量 | 可选 |
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题样式 | 字号、颜色、字重 |
| 定位卡片样式 | 卡片间距/内边距/圆角、默认/选中背景、图片边长/圆角、标题/副标题字号颜色、箭头颜色 |
| 外层样式 | 「样式」 Tab |
约束
- 字段名须唯一
- 须为每个定位填写有效经纬度（可用「搜索地址并填入」）
14. 费用展示（xiaoyi-form-price-display）
说明
在表单中 实时展示价格，随用户填写内容更新。可展示分项明细、总计、优惠券抵扣。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 标题文案 | 区块标题 | 价格明细 |
| 说明文案 | 标题旁辅助说明 | 费用将随填写内容实时更新 |
| 计价公式 | 可选自定义表达式；留空则用页面级计价 | — |
| 展示明细 | 展示 / 不展示分项 | 展示 |
| 右侧辅助文案 | 标题行右侧提示 | 显示 |
| 对接优惠券 | 开启后试算最优券、支持用户换券 | 开启 |
| 明细标签（展示明细时） | 基础费、加价、配送、优惠券、总计、应付及辅助文案 | 可自定义 |
计价相关
本组件 展示 计价结果，本身不参与 field 级 pricingRole。价格由页面 errandMeta 与各表单项加价共同计算。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 标题与说明 | 标题字号/颜色/字重、说明字号/颜色 |
| 明细行样式 | 标签/辅助文/行金额字号颜色、行间距 |
| 总计样式 | 总计标签/金额字号颜色、分隔线、简模式金额字号 |
| 内嵌面板 | 面板背景/圆角/内边距（留空则铺在卡片上） |
| 外层样式 | 「样式」 Tab 控制外层卡片 |
约束
- 建议放在表单项之后、提交底栏之前
- 关闭「展示明细」时仅显示合计与辅助文案
15. 提交底栏（xiaoyi-form-bottom-bar）
说明
固定吸底 的提交栏：左侧 实时合计，右侧 提交按钮。是服务表单页的标准提交入口。
唯一性
每页仅可添加一个 提交底栏。重复添加时编辑器会提示或置灰。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 价格标签 | 左侧金额前的文字 | 合计 |
| 按钮文案 | 提交按钮文字 | 立即提交 |
| 按钮图标 / 大小 / 颜色 | 可选购物车等图标 | shopping-cart-o |
| 确认弹窗 | 提交前是否二次确认 | 开启 |
| 确认标题 / 确认说明 | 弹窗文案 | 确认提交 / 确认提交当前表单？ |
计价相关
左侧合计金额 自动联动 页面计价结果，无需单独配置 pricingRole。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 价格样式 | 标签字号/颜色、金额字号/单位字号/颜色 |
| 按钮与底栏 | 按钮背景/文字色/字号/高度/圆角/最小宽度、底栏背景、顶部分割线色 |
| 外层样式 | 「样式」 Tab（底栏内边距等） |
约束
- 每页唯一，固定吸底
- 与 提交按钮 二选一或并存：底栏吸底，提交按钮在页内滚动区域
16. 提交按钮（xiaoyi-form-submit）
说明
页内 大按钮 提交入口（非吸底）。可配主文案、副文案、顶部须知、图标与确认弹窗。布局参考结算页：顶部灰色须知 + 胶囊主按钮。
属性
| 属性 | 说明 | 默认值 / 备注 |
|---|---|---|
| 按钮文案 | 主按钮文字 | 立即提交 |
| 副文案 | 按钮内第二行，可选 | — |
| 顶部说明 | 按钮上方须知 | 提交即表示您已阅读并同意… |
| 按钮图标 / 位置 / 大小 | 可选，左或右 | — |
| 确认弹窗 / 确认标题 / 确认说明 | 同提交底栏 | 开启 |
计价相关
无 field 级计价。点击后按页面计价结果创建订单。
内嵌样式分组
| 分组 | 主要字段 |
|---|---|
| 按钮外观 | 背景色、文字色、字号、字重、高度、圆角、边框 |
| 副文案与说明 | 副文/说明字号颜色、说明对齐 |
| 外层样式 | 「样式」 Tab |
约束
- 同一页面 可多个（ unlike 提交底栏）
- 通常与 提交底栏 择一为主；若两者并存，请避免重复提交逻辑混淆
通用约束汇总
| 规则 | 说明 |
|---|---|
| 页面类型 | 16 个组件 仅 errand_service 页 可添加 |
| 提交底栏唯一 | 每页 最多 1 个 |
| fieldKey 唯一 | 重复时编辑器警告，并提供「一键修复重复字段名」 |
| 样式双层 | 属性 Tab 内嵌样式 + 顶部 「样式」 Tab 外层容器 |
| 保存与启用 | 编辑后须 保存 并在列表 启用 才对用户生效 |