W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
解釋: 辦理類服務(wù)(單流程)模板、通常用來完成簡單表單的填寫提交工作。本模板包含多個組件,可根據(jù)實際需要進行增刪,支持代碼的二次開發(fā)滿足個性化訴求。
npm i @smt-ui-template/page-singlepage-form
.
├── project.swan.json
├── app.json
├── app.js
├── pages
└── @smt-ui-template-page-singlepage-form // 模板文件
{
"pages": [
...
"pages/@smt-ui-template-page-singlepage-form/index/index",
"pages/@smt-ui-template-page-singlepage-form/result/result",
...
]
}
模板包含 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>
/**
* 發(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ā)事件
*/
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}`
});
}
}
});
}
});
}
頁面路徑: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});
}
}
/**
* 返回首頁
*/
goBack() {
//【需替換】:請為 url 設(shè)置真實的首頁路徑
swan.redirectTo({
url: ''
});
}
/**
* 輔助按鈕
*/
viewDetails() {
//【需替換】:請為 url 設(shè)置真實的跳轉(zhuǎn)頁面路徑
swan.redirectTo({
url: ''
});
}
名稱 | 版本號 |
---|---|
@smt-ui/component-gov | latest |
@smt-ui/component | latest |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: