阅读(1768) 赞(8)

百度智能小程序办理类服务（单流程）模板

2020-09-03 11:19:54 更新

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

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

示例

前提条件

已完成小程序创建。
已下载并安装百度小程序开发者工具（简称 IDE）。

使用说明

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

使用方式

方式一【 NPM 】

在小程序根目录执行下方命令，下载页面模板的 npm 包：
```
npm i @smt-ui-template/page-singlepage-form
```

将 /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    // 模板文件

在小程序根目录的 app.json 中配置模板页面的 path 路径，查看效果，如：

{
    "pages": [
        ...
        "pages/@smt-ui-template-page-singlepage-form/index/index",
        "pages/@smt-ui-template-page-singlepage-form/result/result",
        ...
    ]
}

为了方便在开发者工具中查看模板页的效果，可以设置模板页为小程序预览的首页。详情请见自定义编译文档。

页面内容

方式二【开发者工具-页面模板】

打开开发者工具，点击 ”页面模板“，在下方找到 ”办理类服务（单流程）模板“，选中该模板后点击右下角 ”立即使用”，填写相关信息点击右下角 ”完成“ 按钮。
使用开发者工具的编辑器或者选择自己熟悉的编辑器对模板进行二次开发。

模板包含 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>

获取页面数据

/**
 * 发送请求
 *
 * @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

← 百度智能小程序办理类服务（多流程）模板

百度智能小程序短视频详情页模板 →

百度智能小程序 办理类服务（单流程）模板

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

示例

前提条件

使用说明

使用方式

方式一 【 NPM 】

页面内容

方式二 【 开发者工具-页面模板 】

表单页

提交状态页

NPM 依赖

推荐文章

推荐教程

最新教程

百度智能小程序办理类服务（单流程）模板

方式一【 NPM 】

方式二【开发者工具-页面模板】