page-query-form 查詢類服務(wù)模板

從開發(fā)者工具 v2.25.1-rc 版本開始支持。

解釋：本模板適用于成績(jī)查詢、證書查詢等查詢類服務(wù)項(xiàng)開發(fā)工作，模板內(nèi)包含的組件豐富，覆蓋大多數(shù)查詢類服務(wù)項(xiàng)場(chǎng)景，開發(fā)者僅需通過(guò)調(diào)整組件屬性以及排序即可快速完成前端開發(fā)工作。

示例

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

頁(yè)面內(nèi)容

模板包含兩個(gè)頁(yè)面：查詢參數(shù)填寫頁(yè)、查詢結(jié)果頁(yè)。

查詢參數(shù)填寫頁(yè)

包括信息輸入操作常用組件，例如輸入框、日期選擇器、位置選擇器等，同時(shí)結(jié)合政務(wù)查詢類服務(wù)特性，模板內(nèi)包含了彈窗組件，當(dāng)用戶進(jìn)入服務(wù)頁(yè)面時(shí)，可通過(guò)彈窗對(duì)用戶進(jìn)行強(qiáng)提醒，加強(qiáng)信息的觸達(dá)效果，保障用戶辦理查詢類服務(wù)時(shí)的使用體驗(yàn)。

頁(yè)面路徑：pages/index/index

代碼示例

SWAN
JSON

 
 
 
  
  
  
  
  
  
  
  
   

  
  
   s-if="{{showNoticeBar}}"
  
  
   text="{{noticeContent}}">
  
  
   
  
  
   

  
  
   data-id="iptOne"
  
  
   ipt-item-type="short"
  
  
   type="text"
  
  
   ipt-title="輸入框"
  
  
   placeholder-content="請(qǐng)輸入內(nèi)容"
  
  
   ipt-value="{{model.iptOne.iptValue}}"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindiptclean="cleanRoad"
  
  
   ipt-error-info="{{model.iptOne.iptErrorInfo}}">
  
  
   
  
  
   

  
  
   placeholder="請(qǐng)選擇選項(xiàng)"
  
  
   label-width="4em"
  
  
   range-key="type"
  
  
   errColor="#C40311"
  
  
   value="{{model.pickerOne.iptValue}}"
  
  
   bindchange="pickerOne"
  
  
   label="選擇框"
  
  
   range="{{optionsOne}}">
  
  
   
  
  
   

  
  
   data-id="password"
  
  
   ipt-item-type="short"
  
  
   type="text"
  
  
   ipt-title="密碼框"
  
  
   placeholder-content="請(qǐng)輸入密碼"
  
  
   ipt-value="{{model.password.iptValue}}"
  
  
   password="true"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindiptclean="cleanRoad"
  
  
   ipt-error-info="{{model.password.iptErrorInfo}}">
  
  
   
  
  
   

  
  
   data-id="idCard"
  
  
   ipt-item-type="short"
  
  
   type="idcard"
  
  
   ipt-title="身份證號(hào)"
  
  
   placeholder-content="請(qǐng)輸入身份證號(hào)"
  
  
   ipt-value="{{model.idCard.iptValue}}"
  
  
   maxlength="18"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindiptclean="cleanRoad"
  
  
   ipt-error-info="{{model.idCard.iptErrorInfo}}">
  
  
   
  
  
   

  
  
   data-id="phone"
  
  
   ipt-item-type="short"
  
  
   type="number"
  
  
   maxlength="11"
  
  
   ipt-title="手機(jī)號(hào)"
  
  
   placeholder-content="請(qǐng)輸入手機(jī)號(hào)"
  
  
   ipt-value="{{model.phone.iptValue}}"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindiptclean="cleanRoad"
  
  
   ipt-error-info="{{model.phone.iptErrorInfo}}">
  
  
   
  
  
   

  
  
   data-id="smsInput"
  
  
   type="number"
  
  
   label-width="4em"
  
  
   max-length="{{6}}"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindsmssend="smssend"
  
  
   placeholder-content="請(qǐng)輸入短信驗(yàn)證碼"
  
  
   ipt-value="{{model.smsInput.iptValue}}"
  
  
   ipt-error-color="#C40311"
  
  
   ipt-error-flag="{{model.smsInput.iptErrorInfo.errFlag}}">
  
  
   
  
  
   
  
  
   

  
  
   data-id="govCaptcha"
  
  
   type="number"
  
  
   ipt-area-width="4em"
  
  
   max-length="{{4}}"
  
  
   verify-img-url="{{model.govCaptcha.codeImg}}"
  
  
   bindkeyinput="bindInput"
  
  
   bindiptblur="bindBlur"
  
  
   bindrefreshimg="reloadImg"
  
  
   ipt-value="{{model.govCaptcha.iptValue}}"
  
  
   ipt-error-info="{{model.govCaptcha.iptErrorInfo.errFlag}}">
  
  
   
  
  
   

  
  
   data-id="pickerDate"
  
  
   placeholder="請(qǐng)選擇日期"
  
  
   label-width="4em"
  
  
   mode="date"
  
  
   start="2020-01-01"
  
  
   end="2025-12-31"
  
  
   value="{{model.pickerDate.iptValue}}" 
  
  
   bindchange="pickerDate"
  
  
   label="日期">
  
  
   
  
  
   

  
  
   placeholder="請(qǐng)選擇所在地區(qū)"
  
  
   mode="region"
  
  
   label-width="4em"
  
  
   value="{{model.pickerRegion.iptValue}}" 
  
  
   bindchange="pickerRegion"
  
  
   label="所在地區(qū)">
  
  
   
  
  
   
  
  
   

  
  
   button-size="large"
  
  
   button-text="查詢"
  
  
   button-disabled="{{buttonDisabled}}"
  
  
   data-isValidata="true"
  
  
   button-color="#2772FB"
  
  
   bindtap="buttonImportant">
  
  
   
  
  
   
  
  
   

  
  
   button-size="large"
  
  
   button-text="輔助按鈕"
  
  
   button-color="plain"
  
  
   bindtap="buttonTap">
  
  
   
  
  
   
  
  
   
  
  
   溫馨提示：
  
  
   
  
  
   此板塊為提示區(qū)，可用于提醒用戶業(yè)務(wù)填寫中的注意事項(xiàng)及要求
  
  
   點(diǎn)擊查看


 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "標(biāo)題文字",
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "dark",
  
  
   "usingComponents": {
  
  
   "gov-picker": "@smt-ui/component-gov/src/picker",
  
  
   "gov-notice-bar": "@smt-ui/component-gov/src/notice-bar",
  
  
   "gov-sms-input": "@smt-ui/component-gov/src/sms-input",
  
  
   "gov-prompt": "@smt-ui/component-gov/src/prompt",
  
  
   "gov-captcha": "@smt-ui/component-gov/src/captcha",
  
  
   "gov-button": "@smt-ui/component-gov/src/button",
  
  
   "gov-input": "@smt-ui/component-gov/src/input"
  
  
   }
  
  
  }
 
 
 


頁(yè)面初始化?？蛇M(jìn)行辦理前提示和初始化數(shù)據(jù)等操作

JS

 
 
 
  
  
  onLoad() {
  
  
   // 初始化圖形驗(yàn)證碼
  
  
   this.reloadImg();
  
  
   // 辦理前提示
  
  
   swan.showModal({
  
  
   title: '提示',
  
  
   content: '此彈窗可在業(yè)務(wù)辦理前對(duì)用戶進(jìn)行預(yù)先提醒',
  
  
   showCancel: false,
  
  
   confirmText: '我知道了'
  
  
   });
  
  
  }
 
 
 


輸入框事件。包含普通輸入框、密碼輸入框、身份證輸入框、手機(jī)號(hào)輸入框、短信驗(yàn)證碼輸入框、圖形驗(yàn)證碼輸入框。

JS

 
 
 
  
  
  /**
  
  
   * 輸入框的 input 事件
  
  
   *
  
  
   * @param {Event} e 事件對(duì)象
  
  
   */
  
  
  bindInput(e) {
  
  
   // 將 input 輸入的值賦給 model 中對(duì)應(yīng)屬性的 iptValue 字段， 用于后續(xù)校驗(yàn)和提交表單使用
  
  
   this.setData({
  
  
   ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
  
  
   });
  
  
   // 每次輸入完成時(shí)判斷查詢按鈕是否高亮顯示
  
  
   this.buttonImportant({});
  
  
  }
  
  
  
  
  
  /**
  
  
   * 輸入框的 blur 事件，失焦時(shí)通過(guò) validata 方法對(duì)當(dāng)前輸入框的值進(jìn)行校驗(yàn)
  
  
   *
  
  
   * @param {Event} e 事件對(duì)象
  
  
   */
  
  
  bindBlur(e) {
  
  
   let iptvalue = e.detail.iptvalue;
  
  
   let iptid = e.currentTarget.dataset.id;
  
  
   let rulse = this.data.model[iptid].rulse;
  
  
   this.validata(rulse, iptvalue, iptid);
  
  
  }
  
  
  
  
  
  /**
  
  
   * 點(diǎn)擊輸入框右側(cè)清除按鈕事件，短信驗(yàn)證碼輸入框、圖形驗(yàn)證碼輸入框沒(méi)有該事件
  
  
   *
  
  
   * @param {Event} e 事件對(duì)象
  
  
   */
  
  
  cleanRoad(e) {
  
  
   // 清空當(dāng)前表單內(nèi)數(shù)據(jù)
  
  
   this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});
  
  
  }
 
 
 


選擇器的 change 事件處理。包含普通選擇器、日期選擇器、地區(qū)選擇器

JS

 
 
 
  
  
  /**
  
  
   * 普通選擇器的 change 事件
  
  
   *
  
  
   * @param {Object} detail 事件對(duì)象信息
  
  
   */
  
  
  pickerOne({detail}) {
  
  
   // 將 picker 選中值賦給 model 中對(duì)應(yīng)的屬性
  
  
   this.setData('model.pickerOne.iptValue', detail.detail.value);
  
  
   // 選擇完成時(shí)判斷查詢按鈕是否高亮顯示
  
  
   this.buttonImportant({});
  
  
  }
  
  
  
  
  
  /**
  
  
   * 時(shí)間選擇器的 change 事件
  
  
   *
  
  
   * @param {Object} detail 事件對(duì)象信息
  
  
   */
  
  
  pickerDate({detail}) {
  
  
   // 將 picker 選中值賦給 model 中對(duì)應(yīng)的屬性
  
  
   this.setData('model.pickerDate.iptValue', detail.detail.value);
  
  
   // 選擇完成時(shí)判斷查詢按鈕是否高亮顯示
  
  
   this.buttonImportant({});
  
  
  }
  
  
  
  
  
  /**
  
  
   * 地區(qū)選擇器的 change 事件
  
  
   *
  
  
   * @param {Object} detail 事件對(duì)象信息
  
  
   */
  
  
  pickerRegion({detail}) {
  
  
   // 將 picker 選中值賦給 model 中對(duì)應(yīng)的屬性
  
  
   this.setData('model.pickerRegion.iptValue', detail.detail.value);
  
  
   // 選擇完成時(shí)判斷查詢按鈕是否高亮顯示
  
  
   this.buttonImportant({});
  
  
  }
 
 
 


點(diǎn)擊圖形驗(yàn)證碼事件

JS

 
 
 
  
  
  /**
  
  
   * 圖形驗(yàn)證碼的點(diǎn)擊事件，可以增加刷新圖片驗(yàn)證碼或者其他需要的操作
  
  
   */
  
  
  reloadImg() {
  
  
   swan.request({
  
  
   // 僅為示例，并非真實(shí)的接口地址
  
  
   url: 'http://www.baidu.com',
  
  
   success: res => {
  
  
   this.setData({
  
  
   // codeImg 字段根據(jù)業(yè)務(wù)自行調(diào)整
  
  
   'model.govCaptcha.codeImg': res.data.codeImg
  
  
   })
  
  
   },
  
  
   fail: err => {
  
  
   // 接口異常的處理代碼
  
  
   }
  
  
   })
  
  
  }
 
 
 


獲取手機(jī)驗(yàn)證碼事件

JS

 
 
 
  
  
  /**
  
  
   * 手機(jī)號(hào)驗(yàn)證碼組件點(diǎn)擊獲取驗(yàn)證碼的事件
  
  
   */
  
  
  smssend() {
  
  
   // 該方法模擬收到短信驗(yàn)證碼的toast效果，實(shí)際場(chǎng)景請(qǐng)使用開發(fā)者自己的短信驗(yàn)證碼服務(wù)
  
  
   swan.showToast({
  
  
   title: '驗(yàn)證碼：123456',
  
  
   icon: 'none'
  
  
   });
  
  
  }
 
 
 


頁(yè)面下方“溫馨提示”的“點(diǎn)擊查看”的事件

JS

 
 
 
  
  
  /**
  
  
   * 頁(yè)面下方“溫馨提示”的 “點(diǎn)擊查看” 事件處理
  
  
   */
  
  
  toView() {
  
  
   // 此處僅為示例，您可以自定義該事件的邏輯，比如跳轉(zhuǎn)到某個(gè)頁(yè)面等
  
  
   swan.navigateTo({url: '/pages/index/index'});
  
  
  }
 
 
 


查詢按鈕點(diǎn)擊事件

JS

 
 
 
  
  
  /**
  
  
   * 查詢按鈕點(diǎn)擊事件
  
  
   *
  
  
   * @param {Event} e 事件對(duì)象
  
  
   */
  
  
  buttonImportant(e) {
  
  
   // 判斷表單是否全部填寫了
  
  
   for (let i in this.data.model) {
  
  
   if (!String(this.data.model[i].iptValue).trim()) {
  
  
   return;
  
  
   }
  
  
   }
  
  
   // 如果表單的必填項(xiàng)都已填寫則查詢按鈕高亮
  
  
   this.setData({buttonDisabled: false});
  
  
   // 只有手動(dòng)點(diǎn)擊查詢按鈕的時(shí)候才會(huì)執(zhí)行校驗(yàn)，通過(guò)按鈕組件的 data-isValidata 屬性控制是否需要走校驗(yàn)邏輯
  
  
   if (e.currentTarget && e.currentTarget.dataset.isValidata) {
  
  
   for (let i in this.data.model) {
  
  
   let itemData = this.data.model[i];
  
  
   if (itemData.iptErrorInfo) {
  
  
   if (this.validata(itemData.rulse, itemData.iptValue, i, true)) {
  
  
   return;
  
  
   }
  
  
   }
  
  
   }
  
  
   // 此處表單已校驗(yàn)通過(guò)，您可以自定義一些自己的邏輯，比如跳轉(zhuǎn)到查詢結(jié)果頁(yè)模板
  
  
   swan.navigateTo({
  
  
   url: '/@smt-ui-template-gov-query-form/pages/result/result'
  
  
   });
  
  
   }
  
  
  }
 
 
 
查詢結(jié)果頁(yè)
頁(yè)面用于承載查詢結(jié)果，將查詢結(jié)果信息結(jié)構(gòu)化呈現(xiàn)，便于用戶閱讀理解。
頁(yè)面路徑：pages/result/result
代碼示例

SWAN
JSON
JS

 
 
 
  
  
  
  
  
   

  
  
   s-if="{{statePageType}}"
  
  
   class="page-status"
  
  
   icon="{{statePageConfig[statePageType].icon}}"
  
  
   title="{{statePageConfig[statePageType].title}}"
  
  
   desc="{{statePageConfig[statePageType].desc}}"
  
  
   showBtn="{{statePageConfig[statePageType].showBtn}}"
  
  
   smtreloading="{{reLoad}}"
  
  
   loading="{{statePageType === 'loading'}}"
  
  
   >
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   label-width="6em"
  
  
   label="{{item.name}}"
  
  
   gov-label="list-label"
  
  
   border
  
  
   >
  
  
   
  
  
   
  
  
   

  
  
   s-for="ele in item.value"
  
  
   bindtap="callPhone"
  
  
   data-phoneNum="{{ele}}"
  
  
   >{{ele}} 
  
  
   
  
  
   

  
  
   s-else
  
  
   text="{{item.value}}"
  
  
   line="{{item.line}}"
  
  
   gov-text-collapse-content="list-text"
  
  
   >
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   溫馨提示：
  
  
   
  
  
   這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示
  
  
   點(diǎn)擊查看
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "查詢結(jié)果",
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "dark",
  
  
   "usingComponents": {
  
  
   "gov-page-title":"@smt-ui/component-gov/src/page-title",
  
  
   "gov-list-item": "@smt-ui/component-gov/src/list-item",
  
  
   "gov-text-collapse": "@smt-ui/component-gov/src/text-collapse",
  
  
   "smt-page-status": "@smt-ui/component/src/page-status",
  
  
   "gov-prompt": "@smt-ui/component-gov/src/prompt"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  Page({
  
  
   data: {
  
  
   // warning 服務(wù)開小差、noContent 未查詢到信息、noNetwork 無(wú)網(wǎng)絡(luò)、不顯示錯(cuò)誤頁(yè)則為空字符串
  
  
   statePageType: 'loading'
  
  
   },
  
  
  
  
  
   onLoad() {
  
  
   // 使用定時(shí)器模擬請(qǐng)求，模擬 loading 顯示兩秒鐘
  
  
   setTimeout(() => {
  
  
   this.data.statePageType = '';
  
  
   }, 2000)
  
  
   },
  
  
  
  
  
   /**
  
  
   * 點(diǎn)擊電話調(diào)起撥號(hào)
  
  
   *
  
  
   * @param {Event} e 事件對(duì)象
  
  
   */
  
  
   callPhone(e) {
  
  
   swan.makePhoneCall({
  
  
   phoneNumber: e.currentTarget.dataset.phoneNum
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 頁(yè)面下方“溫馨提示”的 “點(diǎn)擊查看” 事件處理
  
  
   */
  
  
   toView() {
  
  
   swan.showToast({
  
  
   title: '點(diǎn)擊查看',
  
  
   icon: 'none'
  
  
   });
  
  
   }
  
  
  });
 
 
 
npm 依賴


名稱
版本號(hào)


@smt-ui/component-gov latest
@smt-ui/component latest
Bug & Tip

Tip：該模板使用了 ES6 語(yǔ)法，需要開啟開發(fā)者工具的增強(qiáng)編譯，操作步驟參看開啟說(shuō)明；同時(shí)也需開啟上傳代碼時(shí)樣式自動(dòng)補(bǔ)全。
Tip：以上代碼示例為純客戶端代碼，可直接在模擬器和真機(jī)預(yù)覽。
Tip：模板中使用的是測(cè)試數(shù)據(jù)，你需要從接口中獲取真實(shí)的數(shù)據(jù)。
                                                

                                                網(wǎng)頁(yè)標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：page-query-form查詢類服務(wù)模板                                                

                                                URL標(biāo)題：http://m.5511xx.com/article/dhoddsc.html

名稱	版本號(hào)
@smt-ui/component-gov	latest
@smt-ui/component	latest


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                常用CSS+DIV排版技術(shù)用法剖析
                                                            

                                                                wcf證書怎么看是不是真的？wcfwindows身份驗(yàn)證
                                                            

                                                                如何安裝vps
                                                            

                                                                教您sqlserver表結(jié)構(gòu)的修改方法
                                                            

                                                                有些小說(shuō)網(wǎng)里不能復(fù)制小說(shuō)要怎么復(fù)制？(盜版小說(shuō)是怎么復(fù)制的呢)