百度智能小程序 辦理類服務(wù)(單流程)模板

2020-09-04 15:44 更新

page-singlepage-form 辦理類服務(wù)(單流程)模板

解釋: 辦理類服務(wù)(單流程)模板、通常用來完成簡單表單的填寫提交工作。本模板包含多個組件,可根據(jù)實際需要進行增刪,支持代碼的二次開發(fā)滿足個性化訴求。

示例


前提條件

使用說明

  • 本示例為小程序前端代碼,可直接在模擬器和真機預覽。
  • 模板中使用的是測試數(shù)據(jù),你需要從接口中獲取真實的數(shù)據(jù)。
  • 頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持。
  • 該模板使用了 es6 語法,需要開啟開發(fā)者工具的增強編譯,操作步驟參看開啟說明;同時也需開啟上傳代碼時樣式自動補全。

使用方式

方式一 【 NPM 】

  1. 在小程序根目錄執(zhí)行下方命令,下載頁面模板的 npm 包:
    npm i @smt-ui-template/page-singlepage-form
    
  2. 將 /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    // 模板文件
    
  3. 在小程序根目錄的 app.json 中配置模板頁面的 path 路徑,查看效果,如:
    {
        "pages": [
            ...
            "pages/@smt-ui-template-page-singlepage-form/index/index",
            "pages/@smt-ui-template-page-singlepage-form/result/result",
            ...
        ]
    }
    
  4. 為了方便在開發(fā)者工具中查看模板頁的效果,可以設(shè)置模板頁為小程序預覽的首頁。詳情請見自定義編譯文檔。


頁面內(nèi)容

方式二 【 開發(fā)者工具-頁面模板 】

  1. 打開開發(fā)者工具,點擊 ”頁面模板“,在下方找到 ”辦理類服務(wù)(單流程)模板“,選中該模板后點擊右下角 ”立即使用”,填寫相關(guān)信息點擊右下角 ”完成“ 按鈕。
  2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

模板包含 2 個頁面,分別是:表單頁、提交狀態(tài)頁(成功/失?。?/p>

表單頁

頁面路徑:index/index

頁面包含常用的表單組件,如日期選擇、三級聯(lián)動選擇、地理位置選擇、手機號輸入、長文本輸入、圖片上傳等


以下為部分代碼示例注解,運行模板請按照上面的【使用步驟】

<!--  頁面加載, 錯誤頁面 -->
<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>
<!--  辦理類服務(wù)(單流程)模板 -->
<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 標題可是四字或六字
                在一個表單內(nèi),建議使用一致的標題寬度設(shè)置

            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">此板塊為提示區(qū),可用戶提醒用戶業(yè)務(wù)填寫中的注意事項及要求<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>
  • 獲取頁面數(shù)據(jù)
    /**
     * 發(fā)送請求
     *
     * @param {Object} data 請求接口參數(shù)
     */
    getDetail(data) {
        //【需替換】:獲取內(nèi)容詳情所需要的數(shù)據(jù),請修改 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 本地數(shù)據(jù)和異步數(shù)據(jù)賦值給 options
                            options: {...this.data.options, ...res.data}
                        }, () => {
                            this.setData({
                                isPageLoading: false,
                                pageResult: ''
                            });
                        });
                    }
                    else {
                        // 沒有數(shù)據(jù)
                        this.setData({
                            isPageLoading: false,
                            pageResult: 'noData'
                        });
                    }
                }
                else {
                    // 接口異常處理邏輯
                    this.setData({
                        isPageLoading: false,
                        pageResult: 'warning'
                    });
                }
            },
            fail: err => {
                // 接口異常處理邏輯
                this.setData({
                    isPageLoading: false,
                    pageResult: 'warning'
                });
            }
        };
        swan.request(params);
    }
    
  • 點擊提交按鈕觸發(fā)事件
    /**
     * 點擊提交按鈕觸發(fā)事件
     */
    submit() {
        // 輸入框,選擇框根據(jù)錯誤狀態(tài) 判斷toast文案
        // 多選,單選,長文本,上傳照片根據(jù)value值 判斷toast文案
        const formData = this.data.formData;
        // 錯誤信息整理 設(shè)置error狀態(tài)
        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) {
                        // 此處可自定義業(yè)務(wù)邏輯
                        if (res.confirm) {
                            swan.redirectTo({
                                url: `../result/result?result=${params}`
                            });
                        }
                    }
                });
            }
        });
    }
    

提交狀態(tài)頁

頁面路徑:result/result

用于展示表單提交結(jié)果。


<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": "結(jié)果頁",
    "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"
    }
}
  • 頁面初始化
    /**
     * 頁面加載時觸發(fā)
     *
     * @param {Object} options 提交頁面?zhèn)鞯膮?shù)
     * @param {string} options.result 傳的數(shù)據(jù)
     */
    onLoad(options) {
        this.setData({
            // 頁面需要展示的數(shù)據(jù),依賴server端返回
            pageResult: '',
            options: JSON.parse(options.result)
        });
        let icon;
        if (pageResult.data.type !== 'success') {
            icon = {
                iconName: 'warning-o',
                iconColor: '#c40311'
            };
            this.setData({icon});
        }
    }
    
  • 點擊 ”返回首頁“ 按鈕觸發(fā)事件
    /**
     * 返回首頁
     */
    goBack() {
        //【需替換】:請為 url 設(shè)置真實的首頁路徑
        swan.redirectTo({
            url: ''
        });
    }
    
  • 點擊 ”輔助按鈕“ 按鈕觸發(fā)事件
    /**
     * 輔助按鈕
     */
    viewDetails() {
        //【需替換】:請為 url 設(shè)置真實的跳轉(zhuǎn)頁面路徑
        swan.redirectTo({
            url: ''
        });
    }
    

NPM 依賴

名稱 版本號
@smt-ui/component-gov latest
@smt-ui/component latest


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號