后浪云百度小程序教程：page-query-form 查询类服务模板

2023-2-14
  • page-query-form 查询类服务模板
    • 示例
    • 页面内容
      • 查询参数填写页
      • 查询结果页
    • npm 依赖
    • Bug & Tip

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

    从开发者工具 v2.25.1-rc 版本开始支持。

    解释：本模板适用于成绩查询、证书查询等查询类服务项开发工作，模板内包含的组件丰富，覆盖大多数查询类服务项场景，开发者仅需通过调整组件属性以及排序即可快速完成前端开发工作。

    示例

    扫码体验

    代码示例

    后浪云百度小程序教程：page-query-form 查询类服务模板插图

    请使用百度APP扫码

    页面内容

    模板包含两个页面：查询参数填写页、查询结果页。

    查询参数填写页

    包括信息输入操作常用组件，例如输入框、日期选择器、位置选择器等，同时结合政务查询类服务特性，模板内包含了弹窗组件，当用户进入服务页面时，可通过弹窗对用户进行强提醒，加强信息的触达效果，保障用户办理查询类服务时的使用体验。

    页面路径：pages/index/index

    后浪云百度小程序教程：page-query-form 查询类服务模板插图1

    后浪云百度小程序教程：page-query-form 查询类服务模板插图2

    代码示例

    • SWAN
    • JSON
     
 
 
      
  
  
  
    1. <!-- index.swan -->
      2. 
  
  
  
    2. <view class="{{checkFullScreen ? 'wrap container-bottom' : 'wrap'}}">
      3. 
  
  
  
    3.  <gov-notice-bar
      4. 
  
  
  
    4.  s-if="{{showNoticeBar}}"
      5. 
  
  
  
    5.  text="{{noticeContent}}">
      6. 
  
  
  
    6.  </gov-notice-bar>
      7. 
  
  
  
    7.  <gov-input
      8. 
  
  
  
    8.  data-id="iptOne"
      9. 
  
  
  
    9.  ipt-item-type="short"
      10. 
  
  
  
    10.  type="text"
      11. 
  
  
  
    11.  ipt-title="输入框"
      12. 
  
  
  
    12.  placeholder-content="请输入内容"
      13. 
  
  
  
    13.  ipt-value="{{model.iptOne.iptValue}}"
      14. 
  
  
  
    14.  bindkeyinput="bindInput"
      15. 
  
  
  
    15.  bindiptblur="bindBlur"
      16. 
  
  
  
    16.  bindiptclean="cleanRoad"
      17. 
  
  
  
    17.  ipt-error-info="{{model.iptOne.iptErrorInfo}}">
      18. 
  
  
  
    18.  </gov-input>
      19. 
  
  
  
    19.  <gov-picker
      20. 
  
  
  
    20.  placeholder="请选择选项"
      21. 
  
  
  
    21.  label-width="4em"
      22. 
  
  
  
    22.  range-key="type"
      23. 
  
  
  
    23.  errColor="#C40311"
      24. 
  
  
  
    24.  value="{{model.pickerOne.iptValue}}"
      25. 
  
  
  
    25.  bindchange="pickerOne"
      26. 
  
  
  
    26.  label="选择框"
      27. 
  
  
  
    27.  range="{{optionsOne}}">
      28. 
  
  
  
    28.  </gov-picker>
      29. 
  
  
  
    29.  <gov-input
      30. 
  
  
  
    30.  data-id="password"
      31. 
  
  
  
    31.  ipt-item-type="short"
      32. 
  
  
  
    32.  type="text"
      33. 
  
  
  
    33.  ipt-title="密码框"
      34. 
  
  
  
    34.  placeholder-content="请输入密码"
      35. 
  
  
  
    35.  ipt-value="{{model.password.iptValue}}"
      36. 
  
  
  
    36.  password="true"
      37. 
  
  
  
    37.  bindkeyinput="bindInput"
      38. 
  
  
  
    38.  bindiptblur="bindBlur"
      39. 
  
  
  
    39.  bindiptclean="cleanRoad"
      40. 
  
  
  
    40.  ipt-error-info="{{model.password.iptErrorInfo}}">
      41. 
  
  
  
    41.  </gov-input>
      42. 
  
  
  
    42.  <gov-input
      43. 
  
  
  
    43.  data-id="idCard"
      44. 
  
  
  
    44.  ipt-item-type="short"
      45. 
  
  
  
    45.  type="idcard"
      46. 
  
  
  
    46.  ipt-title="身份证号"
      47. 
  
  
  
    47.  placeholder-content="请输入身份证号"
      48. 
  
  
  
    48.  ipt-value="{{model.idCard.iptValue}}"
      49. 
  
  
  
    49.  maxlength="18"
      50. 
  
  
  
    50.  bindkeyinput="bindInput"
      51. 
  
  
  
    51.  bindiptblur="bindBlur"
      52. 
  
  
  
    52.  bindiptclean="cleanRoad"
      53. 
  
  
  
    53.  ipt-error-info="{{model.idCard.iptErrorInfo}}">
      54. 
  
  
  
    54.  </gov-input>
      55. 
  
  
  
    55.  <gov-input
      56. 
  
  
  
    56.  data-id="phone"
      57. 
  
  
  
    57.  ipt-item-type="short"
      58. 
  
  
  
    58.  type="number"
      59. 
  
  
  
    59.  maxlength="11"
      60. 
  
  
  
    60.  ipt-title="手机号"
      61. 
  
  
  
    61.  placeholder-content="请输入手机号"
      62. 
  
  
  
    62.  ipt-value="{{model.phone.iptValue}}"
      63. 
  
  
  
    63.  bindkeyinput="bindInput"
      64. 
  
  
  
    64.  bindiptblur="bindBlur"
      65. 
  
  
  
    65.  bindiptclean="cleanRoad"
      66. 
  
  
  
    66.  ipt-error-info="{{model.phone.iptErrorInfo}}">
      67. 
  
  
  
    67.  </gov-input>
      68. 
  
  
  
    68.  <gov-sms-input
      69. 
  
  
  
    69.  data-id="smsInput"
      70. 
  
  
  
    70.  type="number"
      71. 
  
  
  
    71.  label-width="4em"
      72. 
  
  
  
    72.  max-length="{{6}}"
      73. 
  
  
  
    73.  bindkeyinput="bindInput"
      74. 
  
  
  
    74.  bindiptblur="bindBlur"
      75. 
  
  
  
    75.  bindsmssend="smssend"
      76. 
  
  
  
    76.  placeholder-content="请输入短信验证码"
      77. 
  
  
  
    77.  ipt-value="{{model.smsInput.iptValue}}"
      78. 
  
  
  
    78.  ipt-error-color="#C40311"
      79. 
  
  
  
    79.  ipt-error-flag="{{model.smsInput.iptErrorInfo.errFlag}}">
      80. 
  
  
  
    80.  </gov-sms-input>
      81. 
  
  
  
    81.  <!-- 验证码图片(verify-img-url属性值)为示例，线上使用应替换为开发者自己的验证码图片 -->
      82. 
  
  
  
    82.  <gov-captcha
      83. 
  
  
  
    83.  data-id="govCaptcha"
      84. 
  
  
  
    84.  type="number"
      85. 
  
  
  
    85.  ipt-area-width="4em"
      86. 
  
  
  
    86.  max-length="{{4}}"
      87. 
  
  
  
    87.  verify-img-url="{{model.govCaptcha.codeImg}}"
      88. 
  
  
  
    88.  bindkeyinput="bindInput"
      89. 
  
  
  
    89.  bindiptblur="bindBlur"
      90. 
  
  
  
    90.  bindrefreshimg="reloadImg"
      91. 
  
  
  
    91.  ipt-value="{{model.govCaptcha.iptValue}}"
      92. 
  
  
  
    92.  ipt-error-info="{{model.govCaptcha.iptErrorInfo.errFlag}}">
      93. 
  
  
  
    93.  </gov-captcha>
      94. 
  
  
  
    94.  <gov-picker
      95. 
  
  
  
    95.  data-id="pickerDate"
      96. 
  
  
  
    96.  placeholder="请选择日期"
      97. 
  
  
  
    97.  label-width="4em"
      98. 
  
  
  
    98.  mode="date"
      99. 
  
  
  
    99.  start="2020-01-01"
      100. 
  
  
  
    100.  end="2025-12-31"
      101. 
  
  
  
    101.  value="{{model.pickerDate.iptValue}}" 
      102. 
  
  
  
    102.  bindchange="pickerDate"
      103. 
  
  
  
    103.  label="日期">
      104. 
  
  
  
    104.  </gov-picker>
      105. 
  
  
  
    105.  <gov-picker
      106. 
  
  
  
    106.  placeholder="请选择所在地区"
      107. 
  
  
  
    107.  mode="region"
      108. 
  
  
  
    108.  label-width="4em"
      109. 
  
  
  
    109.  value="{{model.pickerRegion.iptValue}}" 
      110. 
  
  
  
    110.  bindchange="pickerRegion"
      111. 
  
  
  
    111.  label="所在地区">
      112. 
  
  
  
    112.  </gov-picker>
      113. 
  
  
  
    113.  <view class="btn-important">
      114. 
  
  
  
    114.  <gov-button
      115. 
  
  
  
    115.  button-size="large"
      116. 
  
  
  
    116.  button-text="查询"
      117. 
  
  
  
    117.  button-disabled="{{buttonDisabled}}"
      118. 
  
  
  
    118.  data-isValidata="true"
      119. 
  
  
  
    119.  button-color="#2772FB"
      120. 
  
  
  
    120.  bindtap="buttonImportant">
      121. 
  
  
  
    121.  </gov-button>
      122. 
  
  
  
    122.  </view>
      123. 
  
  
  
    123.  <gov-button
      124. 
  
  
  
    124.  button-size="large"
      125. 
  
  
  
    125.  button-text="辅助按钮"
      126. 
  
  
  
    126.  button-color="plain"
      127. 
  
  
  
    127.  bindtap="buttonTap">
      128. 
  
  
  
    128.  </gov-button>
      129. 
  
  
  
    129.  <view class="prompt">
      130. 
  
  
  
    130.  <gov-prompt>
      131. 
  
  
  
    131.  <view slot="title">温馨提示：</view>
      132. 
  
  
  
    132.  <view slot="content">
      133. 
  
  
  
    133.  此板块为提示区，可用于提醒用户业务填写中的注意事项及要求
      134. 
  
  
  
    134.  <text class="prompt-text" bindtap="toView">点击查看</text>
      135. 
  
  
  
    135.  </view>
      136. 
  
  
  
    136.  </gov-prompt>
      137. 
  
  
  
    137.  </view>
      138. 
  
  
  
    138. </view>
      139. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "标题文字",
      3. 
  
  
  
    3.  "navigationBarBackgroundColor": "#ffffff",
      4. 
  
  
  
    4.  "navigationBarTextStyle": "dark",
      5. 
  
  
  
    5.  "usingComponents": {
      6. 
  
  
  
    6.  "gov-picker": "@smt-ui/component-gov/src/picker",
      7. 
  
  
  
    7.  "gov-notice-bar": "@smt-ui/component-gov/src/notice-bar",
      8. 
  
  
  
    8.  "gov-sms-input": "@smt-ui/component-gov/src/sms-input",
      9. 
  
  
  
    9.  "gov-prompt": "@smt-ui/component-gov/src/prompt",
      10. 
  
  
  
    10.  "gov-captcha": "@smt-ui/component-gov/src/captcha",
      11. 
  
  
  
    11.  "gov-button": "@smt-ui/component-gov/src/button",
      12. 
  
  
  
    12.  "gov-input": "@smt-ui/component-gov/src/input"
      13. 
  
  
  
    13.  }
      14. 
  
  
  
    14. }
      15.

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

    • JS

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

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

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 输入框的 input 事件
      3. 
  
  
  
    3.  *
      4. 
  
  
  
    4.  * @param {Event} e 事件对象
      5. 
  
  
  
    5.  */
      6. 
  
  
  
    6. bindInput(e) {
      7. 
  
  
  
    7.  // 将 input 输入的值赋给 model 中对应属性的 iptValue 字段， 用于后续校验和提交表单使用
      8. 
  
  
  
    8.  this.setData({
      9. 
  
  
  
    9.  ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
      10. 
  
  
  
    10.  });
      11. 
  
  
  
    11.  // 每次输入完成时判断查询按钮是否高亮显示
      12. 
  
  
  
    12.  this.buttonImportant({});
      13. 
  
  
  
    13. }
      14. 
  
  
  
      15. 
  
  
  
    15. /**
      16. 
  
  
  
    16.  * 输入框的 blur 事件，失焦时通过 validata 方法对当前输入框的值进行校验
      17. 
  
  
  
    17.  *
      18. 
  
  
  
    18.  * @param {Event} e 事件对象
      19. 
  
  
  
    19.  */
      20. 
  
  
  
    20. bindBlur(e) {
      21. 
  
  
  
    21.  let iptvalue = e.detail.iptvalue;
      22. 
  
  
  
    22.  let iptid = e.currentTarget.dataset.id;
      23. 
  
  
  
    23.  let rulse = this.data.model[iptid].rulse;
      24. 
  
  
  
    24.  this.validata(rulse, iptvalue, iptid);
      25. 
  
  
  
    25. }
      26. 
  
  
  
      27. 
  
  
  
    27. /**
      28. 
  
  
  
    28.  * 点击输入框右侧清除按钮事件，短信验证码输入框、图形验证码输入框没有该事件
      29. 
  
  
  
    29.  *
      30. 
  
  
  
    30.  * @param {Event} e 事件对象
      31. 
  
  
  
    31.  */
      32. 
  
  
  
    32. cleanRoad(e) {
      33. 
  
  
  
    33.  // 清空当前表单内数据
      34. 
  
  
  
    34.  this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});
      35. 
  
  
  
    35. }
      36.

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

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 普通选择器的 change 事件
      3. 
  
  
  
    3.  *
      4. 
  
  
  
    4.  * @param {Object} detail 事件对象信息
      5. 
  
  
  
    5.  */
      6. 
  
  
  
    6. pickerOne({detail}) {
      7. 
  
  
  
    7.  // 将 picker 选中值赋给 model 中对应的属性
      8. 
  
  
  
    8.  this.setData('model.pickerOne.iptValue', detail.detail.value);
      9. 
  
  
  
    9.  // 选择完成时判断查询按钮是否高亮显示
      10. 
  
  
  
    10.  this.buttonImportant({});
      11. 
  
  
  
    11. }
      12. 
  
  
  
      13. 
  
  
  
    13. /**
      14. 
  
  
  
    14.  * 时间选择器的 change 事件
      15. 
  
  
  
    15.  *
      16. 
  
  
  
    16.  * @param {Object} detail 事件对象信息
      17. 
  
  
  
    17.  */
      18. 
  
  
  
    18. pickerDate({detail}) {
      19. 
  
  
  
    19.  // 将 picker 选中值赋给 model 中对应的属性
      20. 
  
  
  
    20.  this.setData('model.pickerDate.iptValue', detail.detail.value);
      21. 
  
  
  
    21.  // 选择完成时判断查询按钮是否高亮显示
      22. 
  
  
  
    22.  this.buttonImportant({});
      23. 
  
  
  
    23. }
      24. 
  
  
  
      25. 
  
  
  
    25. /**
      26. 
  
  
  
    26.  * 地区选择器的 change 事件
      27. 
  
  
  
    27.  *
      28. 
  
  
  
    28.  * @param {Object} detail 事件对象信息
      29. 
  
  
  
    29.  */
      30. 
  
  
  
    30. pickerRegion({detail}) {
      31. 
  
  
  
    31.  // 将 picker 选中值赋给 model 中对应的属性
      32. 
  
  
  
    32.  this.setData('model.pickerRegion.iptValue', detail.detail.value);
      33. 
  
  
  
    33.  // 选择完成时判断查询按钮是否高亮显示
      34. 
  
  
  
    34.  this.buttonImportant({});
      35. 
  
  
  
    35. }
      36.

    • 点击图形验证码事件

    • JS

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

    • 获取手机验证码事件

    • JS

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

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

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 页面下方“温馨提示”的 “点击查看” 事件处理
      3. 
  
  
  
    3.  */
      4. 
  
  
  
    4. toView() {
      5. 
  
  
  
    5.  // 此处仅为示例，您可以自定义该事件的逻辑，比如跳转到某个页面等
      6. 
  
  
  
    6.  swan.navigateTo({url: '/pages/index/index'});
      7. 
  
  
  
    7. }
      8.

    • 查询按钮点击事件

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 查询按钮点击事件
      3. 
  
  
  
    3.  *
      4. 
  
  
  
    4.  * @param {Event} e 事件对象
      5. 
  
  
  
    5.  */
      6. 
  
  
  
    6. buttonImportant(e) {
      7. 
  
  
  
    7.  // 判断表单是否全部填写了
      8. 
  
  
  
    8.  for (let i in this.data.model) {
      9. 
  
  
  
    9.  if (!String(this.data.model[i].iptValue).trim()) {
      10. 
  
  
  
    10.  return;
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12.  }
      13. 
  
  
  
    13.  // 如果表单的必填项都已填写则查询按钮高亮
      14. 
  
  
  
    14.  this.setData({buttonDisabled: false});
      15. 
  
  
  
    15.  // 只有手动点击查询按钮的时候才会执行校验，通过按钮组件的 data-isValidata 属性控制是否需要走校验逻辑
      16. 
  
  
  
    16.  if (e.currentTarget && e.currentTarget.dataset.isValidata) {
      17. 
  
  
  
    17.  for (let i in this.data.model) {
      18. 
  
  
  
    18.  let itemData = this.data.model[i];
      19. 
  
  
  
    19.  if (itemData.iptErrorInfo) {
      20. 
  
  
  
    20.  if (this.validata(itemData.rulse, itemData.iptValue, i, true)) {
      21. 
  
  
  
    21.  return;
      22. 
  
  
  
    22.  }
      23. 
  
  
  
    23.  }
      24. 
  
  
  
    24.  }
      25. 
  
  
  
    25.  // 此处表单已校验通过，您可以自定义一些自己的逻辑，比如跳转到查询结果页模板
      26. 
  
  
  
    26.  swan.navigateTo({
      27. 
  
  
  
    27.  url: '/@smt-ui-template-gov-query-form/pages/result/result'
      28. 
  
  
  
    28.  });
      29. 
  
  
  
    29.  }
      30. 
  
  
  
    30. }
      31.

    查询结果页

    页面用于承载查询结果，将查询结果信息结构化呈现，便于用户阅读理解。
    页面路径：pages/result/result

    后浪云百度小程序教程：page-query-form 查询类服务模板插图3

    代码示例

    • SWAN
    • JSON
    • JS
     
 
 
      
  
  
  
    1. <view class="{{checkFullScreen ? 'container container-bottom' : 'container'}}">
      2. 
  
  
  
    2.  <smt-page-status
      3. 
  
  
  
    3.  s-if="{{statePageType}}"
      4. 
  
  
  
    4.  class="page-status"
      5. 
  
  
  
    5.  icon="{{statePageConfig[statePageType].icon}}"
      6. 
  
  
  
    6.  title="{{statePageConfig[statePageType].title}}"
      7. 
  
  
  
    7.  desc="{{statePageConfig[statePageType].desc}}"
      8. 
  
  
  
    8.  showBtn="{{statePageConfig[statePageType].showBtn}}"
      9. 
  
  
  
    9.  smtreloading="{{reLoad}}"
      10. 
  
  
  
    10.  loading="{{statePageType === 'loading'}}"
      11. 
  
  
  
    11.  ></smt-page-status>
      12. 
  
  
  
    12.  <view s-else>
      13. 
  
  
  
    13.  <gov-page-title title="{{dataList.data.title}}" size="large" hasBorder="{{true}}"></gov-page-title>
      14. 
  
  
  
    14.  <block s-for="item, index in dataList.data.list">
      15. 
  
  
  
    15.  <gov-list-item
      16. 
  
  
  
    16.  label-width="6em"
      17. 
  
  
  
    17.  label="{{item.name}}"
      18. 
  
  
  
    18.  gov-label="list-label"
      19. 
  
  
  
    19.  border
      20. 
  
  
  
    20.  >
      21. 
  
  
  
    21.  <view slot="content" class="list-content">
      22. 
  
  
  
    22.  <view s-if="{{item.name === '联系电话'}}" class="phone">
      23. 
  
  
  
    23.  <text
      24. 
  
  
  
    24.  s-for="ele in item.value"
      25. 
  
  
  
    25.  bindtap="callPhone"
      26. 
  
  
  
    26.  data-phoneNum="{{ele}}"
      27. 
  
  
  
    27.  >{{ele}} </text>
      28. 
  
  
  
    28.  </view>
      29. 
  
  
  
    29.  <gov-text-collapse
      30. 
  
  
  
    30.  s-else
      31. 
  
  
  
    31.  text="{{item.value}}"
      32. 
  
  
  
    32.  line="{{item.line}}"
      33. 
  
  
  
    33.  gov-text-collapse-content="list-text"
      34. 
  
  
  
    34.  ></gov-text-collapse>
      35. 
  
  
  
    35.  </view>
      36. 
  
  
  
    36.  </gov-list-item>
      37. 
  
  
  
    37.  </block>
      38. 
  
  
  
    38.  <view class="prompt">
      39. 
  
  
  
    39.  <gov-prompt>
      40. 
  
  
  
    40.  <view slot="title">温馨提示：</view>
      41. 
  
  
  
    41.  <view slot="content">
      42. 
  
  
  
    42.  这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示
      43. 
  
  
  
    43.  <text class="prompt-text" bindtap="toView">点击查看</text>
      44. 
  
  
  
    44.  </view>
      45. 
  
  
  
    45.  </gov-prompt>
      46. 
  
  
  
    46.  </view>
      47. 
  
  
  
    47.  </view>
      48. 
  
  
  
    48. </view>
      49. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "查询结果",
      3. 
  
  
  
    3.  "navigationBarBackgroundColor": "#ffffff",
      4. 
  
  
  
    4.  "navigationBarTextStyle": "dark",
      5. 
  
  
  
    5.  "usingComponents": {
      6. 
  
  
  
    6.  "gov-page-title":"@smt-ui/component-gov/src/page-title",
      7. 
  
  
  
    7.  "gov-list-item": "@smt-ui/component-gov/src/list-item",
      8. 
  
  
  
    8.  "gov-text-collapse": "@smt-ui/component-gov/src/text-collapse",
      9. 
  
  
  
    9.  "smt-page-status": "@smt-ui/component/src/page-status",
      10. 
  
  
  
    10.  "gov-prompt": "@smt-ui/component-gov/src/prompt"
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. }
      13. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  // warning 服务开小差、noContent 未查询到信息、noNetwork 无网络、不显示错误页则为空字符串
      4. 
  
  
  
    4.  statePageType: 'loading'
      5. 
  
  
  
    5.  },
      6. 
  
  
  
      7. 
  
  
  
    7.  onLoad() {
      8. 
  
  
  
    8.  // 使用定时器模拟请求，模拟 loading 显示两秒钟
      9. 
  
  
  
    9.  setTimeout(() => {
      10. 
  
  
  
    10.  this.data.statePageType = '';
      11. 
  
  
  
    11.  }, 2000)
      12. 
  
  
  
    12.  },
      13. 
  
  
  
      14. 
  
  
  
    14.  /**
      15. 
  
  
  
    15.  * 点击电话调起拨号
      16. 
  
  
  
    16.  *
      17. 
  
  
  
    17.  * @param {Event} e 事件对象
      18. 
  
  
  
    18.  */
      19. 
  
  
  
    19.  callPhone(e) {
      20. 
  
  
  
    20.  swan.makePhoneCall({
      21. 
  
  
  
    21.  phoneNumber: e.currentTarget.dataset.phoneNum
      22. 
  
  
  
    22.  });
      23. 
  
  
  
    23.  },
      24. 
  
  
  
      25. 
  
  
  
    25.  /**
      26. 
  
  
  
    26.  * 页面下方“温馨提示”的 “点击查看” 事件处理
      27. 
  
  
  
    27.  */
      28. 
  
  
  
    28.  toView() {
      29. 
  
  
  
    29.  swan.showToast({
      30. 
  
  
  
    30.  title: '点击查看',
      31. 
  
  
  
    31.  icon: 'none'
      32. 
  
  
  
    32.  });
      33. 
  
  
  
    33.  }
      34. 
  
  
  
    34. });
      35.

    npm 依赖

    名称 版本号
    @smt-ui/component-gov latest
    @smt-ui/component latest

    Bug & Tip

    • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
    • Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
    • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/185959/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图