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

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

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

示例

掃碼體驗

代碼示例

請使用百度APP掃碼

頁面內(nèi)容

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

查詢參數(shù)填寫頁

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

頁面路徑：pages/index/index

代碼示例

SWAN
JSON

 
 
 
  
  
  
  
  
  
  
  
   

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

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

  
  
   placeholder="請選擇選項"
  
  
   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="請輸入密碼"
  
  
   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="身份證號"
  
  
   placeholder-content="請輸入身份證號"
  
  
   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ī)號"
  
  
   placeholder-content="請輸入手機(jī)號"
  
  
   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="請輸入短信驗證碼"
  
  
   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="請選擇日期"
  
  
   label-width="4em"
  
  
   mode="date"
  
  
   start="2020-01-01"
  
  
   end="2025-12-31"
  
  
   value="{{model.pickerDate.iptValue}}" 
  
  
   bindchange="pickerDate"
  
  
   label="日期">
  
  
   
  
  
   

  
  
   placeholder="請選擇所在地區(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ù)填寫中的注意事項及要求
  
  
   點擊查看


 
 
 
  
  
  {
  
  
   "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"
  
  
   }
  
  
  }
 
 
 


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

JS

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


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

JS

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


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

JS

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


點擊圖形驗證碼事件

JS

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


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

JS

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


頁面下方“溫馨提示”的“點擊查看”的事件

JS

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


查詢按鈕點擊事件

JS

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

 
 
 
  
  
  {
  
  
   "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ǎng)絡(luò)、不顯示錯誤頁則為空字符串
  
  
   statePageType: 'loading'
  
  
   },
  
  
  
  
  
   onLoad() {
  
  
   // 使用定時器模擬請求，模擬 loading 顯示兩秒鐘
  
  
   setTimeout(() => {
  
  
   this.data.statePageType = '';
  
  
   }, 2000)
  
  
   },
  
  
  
  
  
   /**
  
  
   * 點擊電話調(diào)起撥號
  
  
   *
  
  
   * @param {Event} e 事件對象
  
  
   */
  
  
   callPhone(e) {
  
  
   swan.makePhoneCall({
  
  
   phoneNumber: e.currentTarget.dataset.phoneNum
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 頁面下方“溫馨提示”的 “點擊查看” 事件處理
  
  
   */
  
  
   toView() {
  
  
   swan.showToast({
  
  
   title: '點擊查看',
  
  
   icon: 'none'
  
  
   });
  
  
   }
  
  
  });
 
 
 
npm 依賴


名稱
版本號


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

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

                                                當(dāng)前題目：創(chuàng)新互聯(lián)百度小程序教程：page-query-form查詢類服務(wù)模板                                                

                                                文章鏈接：http://www.5511xx.com/article/dhoddsc.html

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


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                Win10進(jìn)入VGA模式的方法（win10如何進(jìn)入vga模式）
                                                            

                                                                安卓手機(jī)里的虛擬專用網(wǎng)是什么?怎么設(shè)置？vpn虛擬服務(wù)器
                                                            

                                                                sql比較兩個數(shù)值大小并輸出
                                                            

                                                                內(nèi)部部署到云遷移：成為云原生的4個關(guān)鍵挑戰(zhàn)
                                                            

                                                                機(jī)房服務(wù)器功能