招商 H5（考察预约版）

特许经营资质满足前，招商 H5 以**「考察预约」**的形态上线：介绍品牌与店型，引导预约到样板店实地考察。

预览

手机预览 · 宽 390

页面结构

区块	内容	规则
头图	「开一家胶膳师」+ 副标 + 预约按钮	头图 AI 整图生成，左侧留白放标题
品牌	口号、三个理由、东阿阿胶背书条	背书条放在品牌介绍后、顾客形成判断的位置
店型	体验店、社区店、店中店	面积座位与 SI 标准一致
合作条件	由总部提供的条款表	showTerms 默认关闭，资质满足并经总部确认后才打开
考察流程	预约 → 考察 → 沟通 → 意向登记	只说「考察」「意向登记」
表单	JssVisitForm	手机号校验、同意勾选
页脚	免责声明	「按假设测算，不构成收益承诺」

参数

属性	说明
banner logo seal	头图、胶膳师标志、东阿阿胶印章地址
storeImages	{ experience, community, shopinshop } 三种店型配图
showTerms	是否显示合作条件区块，默认 false
terms	合作条件 [{ label, value }]，由总部提供，组件不内置任何金额
submit	提交函数 async (payload) => {}，抛出异常即显示失败提示

接入示例

<InvestH5
  :banner="banner" :logo="logo" :seal="seal" :store-images="storeImages"
  :show-terms="config.termsReleased" :terms="config.terms"
  :submit="(p) => api.post('/visit-appointments', p)"
/>

考察预约接口（/visit-appointments）由主系统提供，预约记录进入门店经营看板的「考察预约」列表。

源码

InvestH5.vue