后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板

后浪云

2023-4-12

小程序

page-singlepage-form 办理类服务（单流程）模板
- 示例
- 页面内容
  - 表单页
  - 提交状态页
- npm 依赖
- Bug & Tip

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

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

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

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

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

表单页

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

页面路径：index/index

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

SWAN
JSON

 
 
 
  
  
  <!-- 页面加载, 错误页面 -->
  
  
  <smt-page-status s-if="isPageLoading || pageResult"
  
  
   class="content"
  
  
   loading="{{isPageLoading}}"
  
  
   icon="{{errorConfig[pageResult].icon}}"
  
  
   title="{{errorConfig[pageResult].title}}"
  
  
   desc="{{errorConfig[pageResult].desc}}"
  
  
   showBtn="{{errorConfig[pageResult].showBtn}}"
  
  
   bind:smtreloading="check">
  
  
  </smt-page-status>
  
  
  <!-- 办理类服务（单流程）模板 -->
  
  
  <view s-else class="{{isFullScreen ? 'iphonexs': 'normal'}}">
  
  
   <view class="thick-divid">
  
  
   <gov-page-title title="标题一" size="middle" hasBorder></gov-page-title>
  
  
   <!-- 
  
  
   gov-input 输入框
  
  
   1. ipt-item-type： short/long 标题可是四字或六字
  
  
   在一个表单内，建议使用一致的标题宽度设置
  
  
  
  
  
   2.ipt-value= "{{formData.key}}" // 
  
  
   ipt-name="key"
  
  
   ipt-error-info="{{errorInfp.key+Error}}"
  
  
   三项必配置，且key要一致
  
  
  
  
  
   3. 输入框中清除事件 iptKeyClean， input事件 iptKeyInput
  
  
   -->
  
  
   <gov-input
  
  
   type="idcard"
  
  
   ipt-item-type="idcard"
  
  
   ipt-title="身份证号"
  
  
   maxlength="18"
  
  
   ipt-value="{{formData.idcard}}"
  
  
   iptErrorInfo="{{errorInfo.idcardError}}"
  
  
   ipt-name="idcard"
  
  
   ipt-item-width="100%"
  
  
   placeholder-content="请输入"
  
  
   bindiptclean="iptKeyClean"
  
  
   bindkeyinput="iptKeyInput"
  
  
   bindiptblur="iptblursfz">
  
  
   </gov-input>
  
  
   <gov-input
  
  
   type="number"
  
  
   ipt-item-type="phone"
  
  
   ipt-title="手机号"
  
  
   maxlength="11"
  
  
   ipt-value="{{formData.phone}}"
  
  
   ipt-error-info="{{errorInfo.phoneError}}"
  
  
   ipt-name="phone"
  
  
   ipt-item-width="100%"
  
  
   placeholder-content="请输入"
  
  
   bindiptclean="iptKeyClean"
  
  
   bindkeyinput="iptKeyInput"
  
  
   bindiptblur="iptblursjh">
  
  
   </gov-input>
  
  
   <gov-picker
  
  
   label="日期"
  
  
   mode=date
  
  
   placeholder="请选择"
  
  
   labelWidth="4em"
  
  
   data-value="date"
  
  
   start="{{startDate}}"
  
  
   end="{{endDate}}"
  
  
   errStatus="{{errorInfo.dateError}}"
  
  
   value="{{formData.date}}"
  
  
   bindchange="handleChange1">
  
  
   </gov-picker>
  
  
   <gov-picker
  
  
   label="所在位置"
  
  
   mode="location"
  
  
   placeholder="请选择"
  
  
   labelWidth="4em"
  
  
   noborder="{{true}}"
  
  
   display-type="{{false}}"
  
  
   errStatus="{{errorInfo.placeError}}"
  
  
   locationName="{{formData.place}}"
  
  
   bindchoosesuccess="choosesuccess"
  
  
   bindchoosefail="choosefail">
  
  
   </gov-picker>
  
  
   </view>
  
  
   <view class="thick-divid">
  
  
   <gov-page-title title="标题二" size="middle" hasBorder></gov-page-title>
  
  
   <gov-input
  
  
   type="text"
  
  
   ipt-item-type="short"
  
  
   ipt-title="输入框"
  
  
   ipt-value="{{formData.iptone}}"
  
  
   ipt-error-info="{{errorInfo.iptoneError}}"
  
  
   ipt-name="iptone"
  
  
   ipt-item-width="100%"
  
  
   placeholder-content="请输入"
  
  
   bindiptclean="iptKeyClean"
  
  
   bindkeyinput="iptKeyInput">
  
  
   </gov-input>
  
  
   <gov-input
  
  
   type="text"
  
  
   ipt-item-type="short"
  
  
   ipt-title="输入框"
  
  
   ipt-value="{{formData.ipttwo}}"
  
  
   ipt-error-info="{{errorInfo.ipttwoError}}"
  
  
   ipt-notic-info="{{noticInfo.iptNoticInfo}}"
  
  
   ipt-name="ipttwo"
  
  
   ipt-item-width="100%"
  
  
   placeholder-content="请输入"
  
  
   bindiptclean="iptKeyClean"
  
  
   bindkeyinput="iptKeyInput">
  
  
   </gov-input>
  
  
   <gov-picker 
  
  
   mode="selector"
  
  
   range="{{options.singPicker}}"
  
  
   label="选择框"
  
  
   labelWidth="4em"
  
  
   bindchange="handleChange3"
  
  
   value="{{formData.sltsingle}}"
  
  
   rangeKey="name"
  
  
   errStatus="{{errorInfo.sltsingleError}}"
  
  
   placeholder="请选择">
  
  
   </gov-picker>
  
  
   <gov-cascade
  
  
   range="{{options.cascader}}"
  
  
   label="选择框"
  
  
   value="{{formData.sltdouble}}"
  
  
   rangeKey="name"
  
  
   labelWidth="4em"
  
  
   noborder="{{true}}"
  
  
   bindchange="cacadaChange"
  
  
   tips="{{['请选择', '请选择', '请选择']}}"
  
  
   errStatus= "{{errorInfo.sltdoubleError}}"
  
  
   placeholder="{{['请选择', '请选择', '请选择']}}">
  
  
   </gov-cascade> 
  
  
   </view>
  
  
   <view class="thick-divid">
  
  
   <gov-page-title title="单选标题" size="middle" hasBorder></gov-page-title>
  
  
   <view class="radios">
  
  
   <gov-radio-group
  
  
   options="{{options.radiosValue}}"
  
  
   inline="{{false}}"
  
  
   activeColor="#2772fb"
  
  
   option-key="name"
  
  
   bindchange="radioChange"
  
  
   groupStyle="{{border}}"
  
  
   value="{{formData.radios}}">
  
  
   </gov-radio-group>
  
  
   </view>
  
  
   </view>
  
  
   <view class="thick-divid">
  
  
   <gov-page-title title="多选标题" size="middle" hasBorder></gov-page-title>
  
  
   <view class="checkboxs">
  
  
   <gov-checkbox-group
  
  
   inline="{{false}}"
  
  
   option-key="name"
  
  
   activeColor="#2772fb"
  
  
   options="{{options.checkboxsValue}}"
  
  
   bindchange="checkboxChange"
  
  
   gov-checkbox-group="border"
  
  
   value="{{formData.checkbox}}">
  
  
   </gov-checkbox-group>
  
  
   <gov-checkbox
  
  
   bindchange="noHas"
  
  
   activeColor="#2772fb"
  
  
   value="{{formData.nochecked}}">
  
  
   不含以上情况
  
  
   </gov-checkbox>
  
  
   </view>
  
  
   </view>
  
  
   <view class="thick-divid">
  
  
   <gov-textarea
  
  
   gov-textarea-wrap="textarea-wrap"
  
  
   gov-textarea-element="textarea-element"
  
  
   bindinput="iptTextarea"
  
  
   placeholder="请输入"
  
  
   head="长文本输入框标题"
  
  
   value="{{formData.textBox}}"
  
  
   maxlength="100">
  
  
   </gov-textarea>
  
  
   </view>
  
  
   <view>
  
  
   <view class="upload-title">
  
  
   <gov-page-title
  
  
   title="上传照片标题"
  
  
   size="middle"
  
  
   hasBorder>
  
  
   </gov-page-title>
  
  
   </view>
  
  
   <gov-upload
  
  
   count="5"
  
  
   gov-tips="tips"
  
  
   binddelete="clickDelete"
  
  
   binduploadsuccess="uploadsuccess"
  
  
   bindurlempty="urlempty"
  
  
   bindpreviewfail="previewfail"
  
  
   tips="最多支持5张图片,单张体积10M一下"
  
  
   imageList="{{formData.imageList}}"
  
  
   limitSize="10"> 
  
  
   </gov-upload>
  
  
   </view>
  
  
   <view class="wen">
  
  
   <gov-prompt>
  
  
   <view slot="title">温馨提示：</view>
  
  
   <view slot="content">此板块为提示区，可用户提醒用户业务填写中的注意事项及要求<view class="prompt-view" bindtap="toView">点击查看</view>
  
  
   </view>
  
  
   </gov-prompt>
  
  
   </view>
  
  
   <view class="btn">
  
  
   <gov-ga-button
  
  
   button-size="large"
  
  
   button-text="提交"
  
  
   button-color="default"
  
  
   bindtap="submit">
  
  
   </gov-ga-button>
  
  
   <view s-if="{{isFullScreen}}" class="{{isFullScreen ? 'iphonex-safe-height': 'normal-height'}}"></view>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "办理类服务（单流程）模板",
  
  
   "backgroundColor": "#fff",
  
  
   "navigationBarBackgroundColor": "#fff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "usingComponents": {
  
  
   "gov-picker": "@smt-ui/component-gov/src/picker",
  
  
   "gov-upload": "@smt-ui/component-gov/src/upload",
  
  
   "gov-prompt": "@smt-ui/component-gov/src/prompt",
  
  
   "gov-input": "@smt-ui/component-gov/src/input",
  
  
   "gov-ga-button": "@smt-ui/component-gov/src/button",
  
  
   "gov-cascade": "@smt-ui/component-gov/src/cascade",
  
  
   "gov-textarea": "@smt-ui/component-gov/src/textarea",
  
  
   "smt-page-status":"@smt-ui/component/src/page-status",
  
  
   "gov-page-title": "@smt-ui/component-gov/src/page-title",
  
  
   "gov-checkbox": "@smt-ui/component-gov/src/checkbox",
  
  
   "gov-radio-group": "@smt-ui/component-gov/src/radio-group",
  
  
   "gov-checkbox-group": "@smt-ui/component-gov/src/checkbox-group"
  
  
   }
  
  
  }

获取页面数据
JS

 
 
 
  
  
  /**
  
  
   * 发送请求
  
  
   *
  
  
   * @param {Object} data 请求接口参数
  
  
   */
  
  
  getDetail(data) {
  
  
   //【需替换】：获取内容详情所需要的数据，请修改 url 字段为真实的请求地址，该接口仅做示例
  
  
   let params = {
  
  
   url: 'https://www.ceshi.com',
  
  
   method: 'GET',
  
  
   data,
  
  
   success: res => {
  
  
   // 接口正常返回处理逻辑
  
  
   if (+res.code === 0) {
  
  
   if (Object.keys(res.data).length) {
  
  
   this.setData({
  
  
   // merge 本地数据和异步数据赋值给 options
  
  
   options: {...this.data.options, ...res.data}
  
  
   }, () => {
  
  
   this.setData({
  
  
   isPageLoading: false,
  
  
   pageResult: ''
  
  
   });
  
  
   });
  
  
   }
  
  
   else {
  
  
   // 没有数据
  
  
   this.setData({
  
  
   isPageLoading: false,
  
  
   pageResult: 'noData'
  
  
   });
  
  
   }
  
  
   }
  
  
   else {
  
  
   // 接口异常处理逻辑
  
  
   this.setData({
  
  
   isPageLoading: false,
  
  
   pageResult: 'warning'
  
  
   });
  
  
   }
  
  
   },
  
  
   fail: err => {
  
  
   // 接口异常处理逻辑
  
  
   this.setData({
  
  
   isPageLoading: false,
  
  
   pageResult: 'warning'
  
  
   });
  
  
   }
  
  
   };
  
  
   swan.request(params);
  
  
  }

点击提交按钮触发事件
JS

 
 
 
  
  
  /**
  
  
   * 点击提交按钮触发事件
  
  
   */
  
  
  submit() {
  
  
   // 输入框,选择框根据错误状态 判断toast文案
  
  
   // 多选，单选，长文本，上传照片根据value值 判断toast文案
  
  
   const formData = this.data.formData;
  
  
   // 错误信息整理 设置error状态
  
  
   let errorInfo = {
  
  
   // checkIdcard、checkPhone、checkEmpty校验方法的详细说明可看 utils.js
  
  
   idcardError: checkIdcard(formData.idcard),
  
  
   phoneError: checkPhone(formData.phone),
  
  
   dateError: !formData.date,
  
  
   placeError: !formData.place,
  
  
   iptoneError: checkEmpty(formData.iptone, '请输入输入框一'),
  
  
   ipttwoError: checkEmpty(formData.ipttwo, '请输入输入框二'),
  
  
   sltsingleError: formData.sltsingle < 0,
  
  
   sltdoubleError: formData.sltdouble.length !== 3
  
  
   };
  
  
   this.setData({errorInfo}, () => {
  
  
   if (this.showCurToast()) {
  
  
   let that = this;
  
  
   let params = JSON.stringify(that.parameter());
  
  
   swan.showModal({
  
  
   title: '信息确认信息',
  
  
   content: '请确认填写的信息无误，提交后不支持修改',
  
  
   confirmText: '确认提交',
  
  
   confirmColor: '#108EE9',
  
  
   cancelText: '返回修改',
  
  
   cancelColor: '#999',
  
  
   success(res) {
  
  
   // 此处可自定义业务逻辑
  
  
   if (res.confirm) {
  
  
   swan.redirectTo({
  
  
   url: `../result/result?result=${params}`
  
  
   });
  
  
   }
  
  
   }
  
  
   });
  
  
   }
  
  
   });
  
  
  }

提交状态页

用于展示表单提交结果。

页面路径：result/result

代码示例

SWAN
JSON

 
 
 
  
  
  <smt-page-status s-if="isPageLoading || errorPage"
  
  
   class="content"
  
  
   loading="{{isPageLoading}}"
  
  
   icon="{{errorConfig[errorPage].icon}}"
  
  
   title="{{errorConfig[errorPage].title}}"
  
  
   desc="{{errorConfig[errorPage].desc}}"
  
  
   showBtn="{{errorConfig[errorPage].showBtn}}"
  
  
   bind:smtreloading="check">
  
  
  </smt-page-status>
  
  
  <view s-else class='wrap'>
  
  
   <gov-page-result
  
  
   iconName="{{icon.iconName}}"
  
  
   iconColor="{{icon.iconColor}}"
  
  
   gov-main-btn="gov-main-btn" 
  
  
   gov-ext-info-text="gov-ext-info-text" 
  
  
   title="{{pageResult.title}}" 
  
  
   desc="{{pageResult.desc}}"
  
  
   main-btn-text="回到首页" 
  
  
   sub-btn-text="辅助按钮"
  
  
   bind:goback="goBack" 
  
  
   bind:viewdetails="viewDetails"> 
  
  
   <view slot="suppl-cont" class="list" s-if="{{pageResult.list}}">
  
  
   <view s-for="pageResult.list trackBy item" class='every'>
  
  
   <text>{{item.title}}</text>
  
  
   <text>{{item.sub}}</text>
  
  
   </view>
  
  
   </view>
  
  
   </gov-page-result>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "结果页",
  
  
   "backgroundColor": "#fff",
  
  
   "navigationBarBackgroundColor": "#fff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "usingComponents": {
  
  
   "ga-button": "@smt-ui/component-gov/src/button",
  
  
   "smt-page-status": "@smt-ui/component/src/page-status",
  
  
   "gov-page-result": "@smt-ui/component-gov/src/page-result"
  
  
   }
  
  
  }

页面初始化
JS

 
 
 
  
  
  /**
  
  
   * 页面加载时触发
  
  
   *
  
  
   * @param {Object} options 提交页面传的参数
  
  
   * @param {string} options.result 传的数据
  
  
   */
  
  
  onLoad(options) {
  
  
   this.setData({
  
  
   // 页面需要展示的数据，依赖server端返回
  
  
   pageResult: '',
  
  
   options: JSON.parse(options.result)
  
  
   });
  
  
   let icon;
  
  
   if (pageResult.data.type !== 'success') {
  
  
   icon = {
  
  
   iconName: 'warning-o',
  
  
   iconColor: '#c40311'
  
  
   };
  
  
   this.setData({icon});
  
  
   }
  
  
  }

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

 
 
 
  
  
  /**
  
  
   * 返回首页
  
  
   */
  
  
  goBack() {
  
  
   //【需替换】：请为 url 设置真实的首页路径
  
  
   swan.redirectTo({
  
  
   url: ''
  
  
   });
  
  
  }

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

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

npm 依赖

名称	版本号
@smt-ui/component-gov	latest
@smt-ui/component	latest

Bug & Tip

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

作者：后浪云

链接：https://idc.net/help/185955/

文章版权归作者所有，未经允许请勿转载。

THE END

香港云服务器
1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板

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

示例

页面内容

表单页

提交状态页

npm 依赖

Bug & Tip

香港云服务器 1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板

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

示例

页面内容

表单页

提交状态页

npm 依赖

Bug & Tip

香港云服务器
1核2G内存30G硬盘