page-singlepage-form 办理类服务(单流程)模板

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

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 前提条件

# 使用说明

  • 本示例为小程序前端代码,可直接在模拟器和真机预览。
  • 模板中使用的是测试数据,你需要从接口中获取真实的数据。
  • 页面模板功能从开发者工具 v2.25.1-rc 版本开始支持。
  • 该模板使用了 es6 语法,需要开启开发者工具的增强编译,操作步骤参看开启说明;同时也需开启上传代码时样式自动补全。

# 使用步骤

  1. 在小程序根目录执行下方命令,下载页面模板的 npm 包:
npm i @smt-ui-template/page-singlepage-form
  1. 将 /node_modules/@smt-ui-template/page-singlepage-form 下的 @smt-ui-template-page-singlepage-form 文件夹拷贝到当前小程序合适的目录下 (如pages):
.
├── project.swan.json                   
├── app.json                            
├── app.js                              
├── pages
    └── @smt-ui-template-page-singlepage-form    // 模板文件
  1. 在小程序根目录的 app.json 中配置模板页面的 path 路径,查看效果,如:
{
    "pages": [
        ...
        "pages/@smt-ui-template-page-singlepage-form/index/index",
        "pages/@smt-ui-template-page-singlepage-form/result/result",
        ...
    ]
}
  1. 为了方便在开发者工具中查看模板页的效果,可以设置模板页为小程序预览的首页。详情请见自定义编译文档

# 页面内容

模板包含 2 个页面,分别是:表单页、提交状态页(成功/失败)

# 表单页

页面路径:index/index

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

以下为部分代码示例注解,运行模板请按照上面的【使用步骤】

    <!--  页面加载, 错误页面 -->
    <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"
        }
    }
    
    • 获取页面数据
      /**
       * 发送请求
       *
       * @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);
      }
      
      • 点击提交按钮触发事件
        /**
         * 点击提交按钮触发事件
         */
        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

        用于展示表单提交结果。

          <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"
              }
          }
          
          • 页面初始化
            /**
             * 页面加载时触发
             *
             * @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});
                }
            }
            
            • 点击 ”返回首页“ 按钮触发事件
              /**
               * 返回首页
               */
              goBack() {
                  //【需替换】:请为 url 设置真实的首页路径
                  swan.redirectTo({
                      url: ''
                  });
              }
              
              • 点击 ”辅助按钮“ 按钮触发事件
                /**
                 * 辅助按钮
                 */
                viewDetails() {
                    //【需替换】:请为 url 设置真实的跳转页面路径
                    swan.redirectTo({
                        url: ''
                    });
                }
                

                # NPM 依赖

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