page-singlepage-form 办理类服务（单流程）模板

从开发者工具 v2.25.1-rc 版本开始支持。

解释：办理类服务（单流程）模板、通常用来完成简单表单的填写提交工作。本模板包含多个组件，可根据实际需要进行增删，支持代码的二次开发满足个性化诉求。

示例

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

页面内容

模板包含两个页面：表单页、提交状态页（成功 / 失败）。

表单页

页面包含常用的表单组件，如日期选择、三级联动选择、地理位置选择、手机号输入、长文本输入、图片上传等。

页面路径：index/index

page-singlepage-form 办理类服务（单流程）模板 - 图2

page-singlepage-form 办理类服务（单流程）模板 - 图3

代码示例
以下为部分代码示例注解

  • SWAN
  • JSON
  1. <!--  页面加载, 错误页面 -->
  2. <smt-page-status s-if="isPageLoading || pageResult"
  3.     class="content"
  4.     loading="{{isPageLoading}}"
  5.     icon="{{errorConfig[pageResult].icon}}"
  6.     title="{{errorConfig[pageResult].title}}"
  7.     desc="{{errorConfig[pageResult].desc}}"
  8.     showBtn="{{errorConfig[pageResult].showBtn}}"
  9.     bind:smtreloading="check">
  10. </smt-page-status>
  11. <!--  办理类服务（单流程）模板 -->
  12. <view s-else class="{{isFullScreen ? 'iphonexs': 'normal'}}">
  13.     <view class="thick-divid">
  14.         <gov-page-title title="标题一" size="middle" hasBorder></gov-page-title>
  15.         <!-- 
  16.             gov-input 输入框
  17.             1. ipt-item-type： short/long 标题可是四字或六字
  18.                 在一个表单内，建议使用一致的标题宽度设置
  20.             2.ipt-value= "{{formData.key}}" // 
  21.               ipt-name="key"
  22.               ipt-error-info="{{errorInfp.key+Error}}"
  23.               三项必配置，且key要一致
  25.             3. 输入框中清除事件 iptKeyClean， input事件 iptKeyInput
  26.          -->
  27.         <gov-input
  28.             type="idcard"
  29.             ipt-item-type="idcard"
  30.             ipt-title="身份证号"
  31.             maxlength="18"
  32.             ipt-value="{{formData.idcard}}"
  33.             iptErrorInfo="{{errorInfo.idcardError}}"
  34.             ipt-name="idcard"
  35.             ipt-item-width="100%"
  36.             placeholder-content="请输入"
  37.             bindiptclean="iptKeyClean"
  38.             bindkeyinput="iptKeyInput"
  39.             bindiptblur="iptblursfz">
  40.         </gov-input>
  41.         <gov-input
  42.             type="number"
  43.             ipt-item-type="phone"
  44.             ipt-title="手机号"
  45.             maxlength="11"
  46.             ipt-value="{{formData.phone}}"
  47.             ipt-error-info="{{errorInfo.phoneError}}"
  48.             ipt-name="phone"
  49.             ipt-item-width="100%"
  50.             placeholder-content="请输入"
  51.             bindiptclean="iptKeyClean"
  52.             bindkeyinput="iptKeyInput"
  53.             bindiptblur="iptblursjh">
  54.         </gov-input>
  55.         <gov-picker
  56.             label="日期"
  57.             mode=date
  58.             placeholder="请选择"
  59.             labelWidth="4em"
  60.             data-value="date"
  61.             start="{{startDate}}"
  62.             end="{{endDate}}"
  63.             errStatus="{{errorInfo.dateError}}"
  64.             value="{{formData.date}}"
  65.             bindchange="handleChange1">
  66.         </gov-picker>
  67.         <gov-picker
  68.             label="所在位置"
  69.             mode="location"
  70.             placeholder="请选择"
  71.             labelWidth="4em"
  72.             noborder="{{true}}"
  73.             display-type="{{false}}"
  74.             errStatus="{{errorInfo.placeError}}"
  75.             locationName="{{formData.place}}"
  76.             bindchoosesuccess="choosesuccess"
  77.             bindchoosefail="choosefail">
  78.         </gov-picker>
  79.     </view>
  80.     <view class="thick-divid">
  81.         <gov-page-title title="标题二" size="middle" hasBorder></gov-page-title>
  82.         <gov-input
  83.             type="text"
  84.             ipt-item-type="short"
  85.             ipt-title="输入框"
  86.             ipt-value="{{formData.iptone}}"
  87.             ipt-error-info="{{errorInfo.iptoneError}}"
  88.             ipt-name="iptone"
  89.             ipt-item-width="100%"
  90.             placeholder-content="请输入"
  91.             bindiptclean="iptKeyClean"
  92.             bindkeyinput="iptKeyInput">
  93.         </gov-input>
  94.         <gov-input
  95.             type="text"
  96.             ipt-item-type="short"
  97.             ipt-title="输入框"
  98.             ipt-value="{{formData.ipttwo}}"
  99.             ipt-error-info="{{errorInfo.ipttwoError}}"
  100.             ipt-notic-info="{{noticInfo.iptNoticInfo}}"
  101.             ipt-name="ipttwo"
  102.             ipt-item-width="100%"
  103.             placeholder-content="请输入"
  104.             bindiptclean="iptKeyClean"
  105.             bindkeyinput="iptKeyInput">
  106.         </gov-input>
  107.         <gov-picker 
  108.             mode="selector"
  109.             range="{{options.singPicker}}"
  110.             label="选择框"
  111.             labelWidth="4em"
  112.             bindchange="handleChange3"
  113.             value="{{formData.sltsingle}}"
  114.             rangeKey="name"
  115.             errStatus="{{errorInfo.sltsingleError}}"
  116.             placeholder="请选择">
  117.         </gov-picker>
  118.         <gov-cascade
  119.             range="{{options.cascader}}"
  120.             label="选择框"
  121.             value="{{formData.sltdouble}}"
  122.             rangeKey="name"
  123.             labelWidth="4em"
  124.             noborder="{{true}}"
  125.             bindchange="cacadaChange"
  126.             tips="{{['请选择', '请选择', '请选择']}}"
  127.             errStatus= "{{errorInfo.sltdoubleError}}"
  128.             placeholder="{{['请选择', '请选择', '请选择']}}">
  129.         </gov-cascade> 
  130.     </view>
  131.     <view class="thick-divid">
  132.         <gov-page-title title="单选标题" size="middle" hasBorder></gov-page-title>
  133.         <view class="radios">
  134.             <gov-radio-group
  135.                 options="{{options.radiosValue}}"
  136.                 inline="{{false}}"
  137.                 activeColor="#2772fb"
  138.                 option-key="name"
  139.                 bindchange="radioChange"
  140.                 groupStyle="{{border}}"
  141.                 value="{{formData.radios}}">
  142.             </gov-radio-group>
  143.         </view>
  144.     </view>
  145.     <view class="thick-divid">
  146.         <gov-page-title title="多选标题" size="middle" hasBorder></gov-page-title>
  147.         <view class="checkboxs">
  148.             <gov-checkbox-group
  149.                 inline="{{false}}"
  150.                 option-key="name"
  151.                 activeColor="#2772fb"
  152.                 options="{{options.checkboxsValue}}"
  153.                 bindchange="checkboxChange"
  154.                 gov-checkbox-group="border"
  155.                 value="{{formData.checkbox}}">
  156.             </gov-checkbox-group>
  157.             <gov-checkbox
  158.                 bindchange="noHas"
  159.                 activeColor="#2772fb"
  160.                 value="{{formData.nochecked}}">
  161.                 不含以上情况
  162.             </gov-checkbox>
  163.         </view>
  164.     </view>
  165.     <view class="thick-divid">
  166.         <gov-textarea
  167.             gov-textarea-wrap="textarea-wrap"
  168.             gov-textarea-element="textarea-element"
  169.             bindinput="iptTextarea"
  170.             placeholder="请输入"
  171.             head="长文本输入框标题"
  172.             value="{{formData.textBox}}"
  173.             maxlength="100">
  174.         </gov-textarea>
  175.     </view>
  176.      <view>
  177.         <view class="upload-title">
  178.             <gov-page-title
  179.                 title="上传照片标题"
  180.                 size="middle"
  181.                 hasBorder>
  182.             </gov-page-title>
  183.         </view>
  184.         <gov-upload
  185.             count="5"
  186.             gov-tips="tips"
  187.             binddelete="clickDelete"
  188.             binduploadsuccess="uploadsuccess"
  189.             bindurlempty="urlempty"
  190.             bindpreviewfail="previewfail"
  191.             tips="最多支持5张图片,单张体积10M一下"
  192.             imageList="{{formData.imageList}}"
  193.             limitSize="10"> 
  194.         </gov-upload>
  195.     </view>
  196.     <view class="wen">
  197.         <gov-prompt>
  198.             <view slot="title">温馨提示：</view>
  199.             <view slot="content">此板块为提示区，可用户提醒用户业务填写中的注意事项及要求<view class="prompt-view" bindtap="toView">点击查看</view>
  200.             </view>
  201.         </gov-prompt>
  202.     </view>
  203.     <view class="btn">
  204.         <gov-ga-button
  205.             button-size="large"
  206.             button-text="提交"
  207.             button-color="default"
  208.             bindtap="submit">
  209.         </gov-ga-button>
  210.         <view s-if="{{isFullScreen}}" class="{{isFullScreen ? 'iphonex-safe-height': 'normal-height'}}"></view>
  211.     </view>
  212. </view>
  1. {
  2.     "navigationBarTitleText": "办理类服务（单流程）模板",
  3.     "backgroundColor": "#fff",
  4.     "navigationBarBackgroundColor": "#fff",
  5.     "navigationBarTextStyle": "black",
  6.     "usingComponents": {
  7.         "gov-picker": "@smt-ui/component-gov/src/picker",
  8.         "gov-upload": "@smt-ui/component-gov/src/upload",
  9.         "gov-prompt": "@smt-ui/component-gov/src/prompt",
  10.         "gov-input": "@smt-ui/component-gov/src/input",
  11.         "gov-ga-button": "@smt-ui/component-gov/src/button",
  12.         "gov-cascade": "@smt-ui/component-gov/src/cascade",
  13.         "gov-textarea": "@smt-ui/component-gov/src/textarea",
  14.         "smt-page-status":"@smt-ui/component/src/page-status",
  15.         "gov-page-title": "@smt-ui/component-gov/src/page-title",
  16.         "gov-checkbox": "@smt-ui/component-gov/src/checkbox",
  17.         "gov-radio-group": "@smt-ui/component-gov/src/radio-group",
  18.         "gov-checkbox-group": "@smt-ui/component-gov/src/checkbox-group"
  19.     }
  20. }

  • 获取页面数据

  • JS

  1. /**
  2.  * 发送请求
  3.  *
  4.  * @param {Object} data 请求接口参数
  5.  */
  6. getDetail(data) {
  7.     //【需替换】：获取内容详情所需要的数据，请修改 url 字段为真实的请求地址，该接口仅做示例
  8.     let params = {
  9.         url: 'https://www.ceshi.com',
  10.         method: 'GET',
  11.         data,
  12.         success: res => {
  13.             // 接口正常返回处理逻辑
  14.             if (+res.code === 0) {
  15.                 if (Object.keys(res.data).length) {
  16.                     this.setData({
  17.                         // merge 本地数据和异步数据赋值给 options
  18.                         options: {...this.data.options, ...res.data}
  19.                     }, () => {
  20.                         this.setData({
  21.                             isPageLoading: false,
  22.                             pageResult: ''
  23.                         });
  24.                     });
  25.                 }
  26.                 else {
  27.                     // 没有数据
  28.                     this.setData({
  29.                         isPageLoading: false,
  30.                         pageResult: 'noData'
  31.                     });
  32.                 }
  33.             }
  34.             else {
  35.                 // 接口异常处理逻辑
  36.                 this.setData({
  37.                     isPageLoading: false,
  38.                     pageResult: 'warning'
  39.                 });
  40.             }
  41.         },
  42.         fail: err => {
  43.             // 接口异常处理逻辑
  44.             this.setData({
  45.                 isPageLoading: false,
  46.                 pageResult: 'warning'
  47.             });
  48.         }
  49.     };
  50.     swan.request(params);
  51. }

  • 点击提交按钮触发事件

  • JS

  1. /**
  2.  * 点击提交按钮触发事件
  3.  */
  4. submit() {
  5.     // 输入框,选择框根据错误状态 判断toast文案
  6.     // 多选，单选，长文本，上传照片根据value值 判断toast文案
  7.     const formData = this.data.formData;
  8.     // 错误信息整理 设置error状态
  9.     let errorInfo = {
  10.         // checkIdcard、checkPhone、checkEmpty校验方法的详细说明可看 utils.js
  11.         idcardError: checkIdcard(formData.idcard),
  12.         phoneError: checkPhone(formData.phone),
  13.         dateError: !formData.date,
  14.         placeError: !formData.place,
  15.         iptoneError: checkEmpty(formData.iptone, '请输入输入框一'),
  16.         ipttwoError: checkEmpty(formData.ipttwo, '请输入输入框二'),
  17.         sltsingleError: formData.sltsingle < 0,
  18.         sltdoubleError: formData.sltdouble.length !== 3
  19.     };
  20.     this.setData({errorInfo}, () => {
  21.         if (this.showCurToast()) {
  22.             let that = this;
  23.             let params = JSON.stringify(that.parameter());
  24.             swan.showModal({
  25.                 title: '信息确认信息',
  26.                 content: '请确认填写的信息无误，提交后不支持修改',
  27.                 confirmText: '确认提交',
  28.                 confirmColor: '#108EE9',
  29.                 cancelText: '返回修改',
  30.                 cancelColor: '#999',
  31.                 success(res) {
  32.                     // 此处可自定义业务逻辑
  33.                     if (res.confirm) {
  34.                         swan.redirectTo({
  35.                             url: `../result/result?result=${params}`
  36.                         });
  37.                     }
  38.                 }
  39.             });
  40.         }
  41.     });
  42. }

提交状态页

用于展示表单提交结果。

页面路径：result/result

page-singlepage-form 办理类服务（单流程）模板 - 图4

page-singlepage-form 办理类服务（单流程）模板 - 图5

代码示例

  • SWAN
  • JSON
  1. <smt-page-status s-if="isPageLoading || errorPage"
  2.     class="content"
  3.     loading="{{isPageLoading}}"
  4.     icon="{{errorConfig[errorPage].icon}}"
  5.     title="{{errorConfig[errorPage].title}}"
  6.     desc="{{errorConfig[errorPage].desc}}"
  7.     showBtn="{{errorConfig[errorPage].showBtn}}"
  8.     bind:smtreloading="check">
  9. </smt-page-status>
  10. <view s-else class='wrap'>
  11.     <gov-page-result
  12.         iconName="{{icon.iconName}}"
  13.         iconColor="{{icon.iconColor}}"
  14.         gov-main-btn="gov-main-btn" 
  15.         gov-ext-info-text="gov-ext-info-text" 
  16.         title="{{pageResult.title}}" 
  17.         desc="{{pageResult.desc}}"
  18.         main-btn-text="回到首页" 
  19.         sub-btn-text="辅助按钮"
  20.         bind:goback="goBack" 
  21.         bind:viewdetails="viewDetails"> 
  22.         <view slot="suppl-cont" class="list" s-if="{{pageResult.list}}">
  23.             <view s-for="pageResult.list trackBy item" class='every'>
  24.                 <text>{{item.title}}</text>
  25.                 <text>{{item.sub}}</text>
  26.             </view>
  27.         </view>
  28.     </gov-page-result>
  29. </view>
  1. {
  2.     "navigationBarTitleText": "结果页",
  3.     "backgroundColor": "#fff",
  4.     "navigationBarBackgroundColor": "#fff",
  5.     "navigationBarTextStyle": "black",
  6.     "usingComponents": {
  7.         "ga-button": "@smt-ui/component-gov/src/button",
  8.         "smt-page-status": "@smt-ui/component/src/page-status",
  9.         "gov-page-result": "@smt-ui/component-gov/src/page-result"
  10.     }
  11. }

  • 页面初始化

  • JS

  1. /**
  2.  * 页面加载时触发
  3.  *
  4.  * @param {Object} options 提交页面传的参数
  5.  * @param {string} options.result 传的数据
  6.  */
  7. onLoad(options) {
  8.     this.setData({
  9.         // 页面需要展示的数据，依赖server端返回
  10.         pageResult: '',
  11.         options: JSON.parse(options.result)
  12.     });
  13.     let icon;
  14.     if (pageResult.data.type !== 'success') {
  15.         icon = {
  16.             iconName: 'warning-o',
  17.             iconColor: '#c40311'
  18.         };
  19.         this.setData({icon});
  20.     }
  21. }

  • 点击“返回首页”按钮触发事件

  • JS

  1. /**
  2.  * 返回首页
  3.  */
  4. goBack() {
  5.     //【需替换】：请为 url 设置真实的首页路径
  6.     swan.redirectTo({
  7.         url: ''
  8.     });
  9. }

  • 点击“辅助按钮”按钮触发事件

  • JS

  1. /**
  2.  * 辅助按钮
  3.  */
  4. viewDetails() {
  5.     //【需替换】：请为 url 设置真实的跳转页面路径
  6.     swan.redirectTo({
  7.         url: ''
  8.     });
  9. }

npm 依赖

名称版本号
@smt-ui/component-govlatest
@smt-ui/componentlatest

Bug & Tip

  • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
  • Tip：以上代码示例为小程序前端代码，可直接在模拟器和真机预览。
  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。