page-query-form 查询类服务模板

 
 
 

  
  
  
{
  
  
  
 "navigationBarTitleText": "标题文字",
  
  
  
 "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"
  
  
  
 }
  
  
  
}
 
 
 

• 页面初始化。可进行办理前提示和初始化数据等操作

• JS

 
 
 

  
  
  
onLoad() {
  
  
  
 // 初始化图形验证码
  
  
  
 this.reloadImg();
  
  
  
 // 办理前提示
  
  
  
 swan.showModal({
  
  
  
 title: '提示',
  
  
  
 content: '此弹窗可在业务办理前对用户进行预先提醒',
  
  
  
 showCancel: false,
  
  
  
 confirmText: '我知道了'
  
  
  
 });
  
  
  
}
 
 
 

• 输入框事件。包含普通输入框、密码输入框、身份证输入框、手机号输入框、短信验证码输入框、图形验证码输入框。

• JS

 
 
 

  
  
  
/**
  
  
  
 * 输入框的 input 事件
  
  
  
 *
  
  
  
 * @param {Event} e 事件对象
  
  
  
 */
  
  
  
bindInput(e) {
  
  
  
 // 将 input 输入的值赋给 model 中对应属性的 iptValue 字段， 用于后续校验和提交表单使用
  
  
  
 this.setData({
  
  
  
 ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
  
  
  
 });
  
  
  
 // 每次输入完成时判断查询按钮是否高亮显示
  
  
  
 this.buttonImportant({});
  
  
  
}
  
  
  

  
  
  
/**
  
  
  
 * 输入框的 blur 事件，失焦时通过 validata 方法对当前输入框的值进行校验
  
  
  
 *
  
  
  
 * @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);
  
  
  
}
  
  
  

  
  
  
/**
  
  
  
 * 点击输入框右侧清除按钮事件，短信验证码输入框、图形验证码输入框没有该事件
  
  
  
 *
  
  
  
 * @param {Event} e 事件对象
  
  
  
 */
  
  
  
cleanRoad(e) {
  
  
  
 // 清空当前表单内数据
  
  
  
 this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});
  
  
  
}
 
 
 

• 选择器的 change 事件处理。包含普通选择器、日期选择器、地区选择器

• JS

 
 
 

  
  
  
/**
  
  
  
 * 普通选择器的 change 事件
  
  
  
 *
  
  
  
 * @param {Object} detail 事件对象信息
  
  
  
 */
  
  
  
pickerOne({detail}) {
  
  
  
 // 将 picker 选中值赋给 model 中对应的属性
  
  
  
 this.setData('model.pickerOne.iptValue', detail.detail.value);
  
  
  
 // 选择完成时判断查询按钮是否高亮显示
  
  
  
 this.buttonImportant({});
  
  
  
}
  
  
  

  
  
  
/**
  
  
  
 * 时间选择器的 change 事件
  
  
  
 *
  
  
  
 * @param {Object} detail 事件对象信息
  
  
  
 */
  
  
  
pickerDate({detail}) {
  
  
  
 // 将 picker 选中值赋给 model 中对应的属性
  
  
  
 this.setData('model.pickerDate.iptValue', detail.detail.value);
  
  
  
 // 选择完成时判断查询按钮是否高亮显示
  
  
  
 this.buttonImportant({});
  
  
  
}
  
  
  

  
  
  
/**
  
  
  
 * 地区选择器的 change 事件
  
  
  
 *
  
  
  
 * @param {Object} detail 事件对象信息
  
  
  
 */
  
  
  
pickerRegion({detail}) {
  
  
  
 // 将 picker 选中值赋给 model 中对应的属性
  
  
  
 this.setData('model.pickerRegion.iptValue', detail.detail.value);
  
  
  
 // 选择完成时判断查询按钮是否高亮显示
  
  
  
 this.buttonImportant({});
  
  
  
}
 
 
 

• 点击图形验证码事件

• JS

 
 
 

  
  
  
/**
  
  
  
 * 图形验证码的点击事件，可以增加刷新图片验证码或者其他需要的操作
  
  
  
 */
  
  
  
reloadImg() {
  
  
  
 swan.request({
  
  
  
 // 仅为示例，并非真实的接口地址
  
  
  
 url: 'http://www.baidu.com',
  
  
  
 success: res => {
  
  
  
 this.setData({
  
  
  
 // codeImg 字段根据业务自行调整
  
  
  
 'model.govCaptcha.codeImg': res.data.codeImg
  
  
  
 })
  
  
  
 },
  
  
  
 fail: err => {
  
  
  
 // 接口异常的处理代码
  
  
  
 }
  
  
  
 })
  
  
  
}
 
 
 

• 获取手机验证码事件

• JS

 
 
 

  
  
  
/**
  
  
  
 * 手机号验证码组件点击获取验证码的事件
  
  
  
 */
  
  
  
smssend() {
  
  
  
 // 该方法模拟收到短信验证码的toast效果，实际场景请使用开发者自己的短信验证码服务
  
  
  
 swan.showToast({
  
  
  
 title: '验证码：123456',
  
  
  
 icon: 'none'
  
  
  
 });
  
  
  
}
 
 
 

• 页面下方“温馨提示”的“点击查看”的事件

• JS

 
 
 

  
  
  
/**
  
  
  
 * 页面下方“温馨提示”的 “点击查看” 事件处理
  
  
  
 */
  
  
  
toView() {
  
  
  
 // 此处仅为示例，您可以自定义该事件的逻辑，比如跳转到某个页面等
  
  
  
 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});
  
  
  
 // 只有手动点击查询按钮的时候才会执行校验，通过按钮组件的 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;
  
  
  
 }
  
  
  
 }
  
  
  
 }
  
  
  
 // 此处表单已校验通过，您可以自定义一些自己的逻辑，比如跳转到查询结果页模板
  
  
  
 swan.navigateTo({
  
  
  
 url: '/@smt-ui-template-gov-query-form/pages/result/result'
  
  
  
 });
  
  
  
 }
  
  
  
}
 
 
 

查询结果页

页面用于承载查询结果，将查询结果信息结构化呈现，便于用户阅读理解。
页面路径：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": "查询结果",
  
  
  
 "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 服务开小差、noContent 未查询到信息、noNetwork 无网络、不显示错误页则为空字符串
  
  
  
 statePageType: 'loading'
  
  
  
 },
  
  
  

  
  
  
 onLoad() {
  
  
  
 // 使用定时器模拟请求，模拟 loading 显示两秒钟
  
  
  
 setTimeout(() => {
  
  
  
 this.data.statePageType = '';
  
  
  
 }, 2000)
  
  
  
 },
  
  
  

  
  
  
 /**
  
  
  
 * 点击电话调起拨号
  
  
  
 *
  
  
  
 * @param {Event} e 事件对象
  
  
  
 */
  
  
  
 callPhone(e) {
  
  
  
 swan.makePhoneCall({
  
  
  
 phoneNumber: e.currentTarget.dataset.phoneNum
  
  
  
 });
  
  
  
 },
  
  
  

  
  
  
 /**
  
  
  
 * 页面下方“温馨提示”的 “点击查看” 事件处理
  
  
  
 */
  
  
  
 toView() {
  
  
  
 swan.showToast({
  
  
  
 title: '点击查看',
  
  
  
 icon: 'none'
  
  
  
 });
  
  
  
 }
  
  
  
});