后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板

2023-4-12
  • page-singlepage-form 办理类服务（单流程）模板
    • 示例
    • 页面内容
      • 表单页
      • 提交状态页
    • npm 依赖
    • Bug & Tip

    page-singlepage-form 办理类服务（单流程）模板

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

    解释：办理类服务（单流程）模板、通常用来完成简单表单的填写提交工作。本模板包含多个组件，可根据实际需要进行增删，支持代码的二次开发满足个性化诉求。

    示例

    扫码体验

    代码示例

    后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板插图

    请使用百度APP扫码

    页面内容

    模板包含两个页面：表单页、提交状态页（成功 / 失败）。

    表单页

    页面包含常用的表单组件，如日期选择、三级联动选择、地理位置选择、手机号输入、长文本输入、图片上传等。

    页面路径：index/index

    后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板插图1

    后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板插图2

    代码示例
    以下为部分代码示例注解

    • SWAN
    • JSON
     
 
 
      
  
  
  
    1. <!-- 页面加载, 错误页面 -->
      2. 
  
  
  
    2. <smt-page-status s-if="isPageLoading || pageResult"
      3. 
  
  
  
    3.  class="content"
      4. 
  
  
  
    4.  loading="{{isPageLoading}}"
      5. 
  
  
  
    5.  icon="{{errorConfig[pageResult].icon}}"
      6. 
  
  
  
    6.  title="{{errorConfig[pageResult].title}}"
      7. 
  
  
  
    7.  desc="{{errorConfig[pageResult].desc}}"
      8. 
  
  
  
    8.  showBtn="{{errorConfig[pageResult].showBtn}}"
      9. 
  
  
  
    9.  bind:smtreloading="check">
      10. 
  
  
  
    10. </smt-page-status>
      11. 
  
  
  
    11. <!-- 办理类服务（单流程）模板 -->
      12. 
  
  
  
    12. <view s-else class="{{isFullScreen ? 'iphonexs': 'normal'}}">
      13. 
  
  
  
    13.  <view class="thick-divid">
      14. 
  
  
  
    14.  <gov-page-title title="标题一" size="middle" hasBorder></gov-page-title>
      15. 
  
  
  
    15.  <!-- 
      16. 
  
  
  
    16.  gov-input 输入框
      17. 
  
  
  
    17.  1. ipt-item-type： short/long 标题可是四字或六字
      18. 
  
  
  
    18.  在一个表单内，建议使用一致的标题宽度设置
      19. 
  
  
  
      20. 
  
  
  
    20.  2.ipt-value= "{{formData.key}}" // 
      21. 
  
  
  
    21.  ipt-name="key"
      22. 
  
  
  
    22.  ipt-error-info="{{errorInfp.key+Error}}"
      23. 
  
  
  
    23.  三项必配置，且key要一致
      24. 
  
  
  
      25. 
  
  
  
    25.  3. 输入框中清除事件 iptKeyClean， input事件 iptKeyInput
      26. 
  
  
  
    26.  -->
      27. 
  
  
  
    27.  <gov-input
      28. 
  
  
  
    28.  type="idcard"
      29. 
  
  
  
    29.  ipt-item-type="idcard"
      30. 
  
  
  
    30.  ipt-title="身份证号"
      31. 
  
  
  
    31.  maxlength="18"
      32. 
  
  
  
    32.  ipt-value="{{formData.idcard}}"
      33. 
  
  
  
    33.  iptErrorInfo="{{errorInfo.idcardError}}"
      34. 
  
  
  
    34.  ipt-name="idcard"
      35. 
  
  
  
    35.  ipt-item-width="100%"
      36. 
  
  
  
    36.  placeholder-content="请输入"
      37. 
  
  
  
    37.  bindiptclean="iptKeyClean"
      38. 
  
  
  
    38.  bindkeyinput="iptKeyInput"
      39. 
  
  
  
    39.  bindiptblur="iptblursfz">
      40. 
  
  
  
    40.  </gov-input>
      41. 
  
  
  
    41.  <gov-input
      42. 
  
  
  
    42.  type="number"
      43. 
  
  
  
    43.  ipt-item-type="phone"
      44. 
  
  
  
    44.  ipt-title="手机号"
      45. 
  
  
  
    45.  maxlength="11"
      46. 
  
  
  
    46.  ipt-value="{{formData.phone}}"
      47. 
  
  
  
    47.  ipt-error-info="{{errorInfo.phoneError}}"
      48. 
  
  
  
    48.  ipt-name="phone"
      49. 
  
  
  
    49.  ipt-item-width="100%"
      50. 
  
  
  
    50.  placeholder-content="请输入"
      51. 
  
  
  
    51.  bindiptclean="iptKeyClean"
      52. 
  
  
  
    52.  bindkeyinput="iptKeyInput"
      53. 
  
  
  
    53.  bindiptblur="iptblursjh">
      54. 
  
  
  
    54.  </gov-input>
      55. 
  
  
  
    55.  <gov-picker
      56. 
  
  
  
    56.  label="日期"
      57. 
  
  
  
    57.  mode=date
      58. 
  
  
  
    58.  placeholder="请选择"
      59. 
  
  
  
    59.  labelWidth="4em"
      60. 
  
  
  
    60.  data-value="date"
      61. 
  
  
  
    61.  start="{{startDate}}"
      62. 
  
  
  
    62.  end="{{endDate}}"
      63. 
  
  
  
    63.  errStatus="{{errorInfo.dateError}}"
      64. 
  
  
  
    64.  value="{{formData.date}}"
      65. 
  
  
  
    65.  bindchange="handleChange1">
      66. 
  
  
  
    66.  </gov-picker>
      67. 
  
  
  
    67.  <gov-picker
      68. 
  
  
  
    68.  label="所在位置"
      69. 
  
  
  
    69.  mode="location"
      70. 
  
  
  
    70.  placeholder="请选择"
      71. 
  
  
  
    71.  labelWidth="4em"
      72. 
  
  
  
    72.  noborder="{{true}}"
      73. 
  
  
  
    73.  display-type="{{false}}"
      74. 
  
  
  
    74.  errStatus="{{errorInfo.placeError}}"
      75. 
  
  
  
    75.  locationName="{{formData.place}}"
      76. 
  
  
  
    76.  bindchoosesuccess="choosesuccess"
      77. 
  
  
  
    77.  bindchoosefail="choosefail">
      78. 
  
  
  
    78.  </gov-picker>
      79. 
  
  
  
    79.  </view>
      80. 
  
  
  
    80.  <view class="thick-divid">
      81. 
  
  
  
    81.  <gov-page-title title="标题二" size="middle" hasBorder></gov-page-title>
      82. 
  
  
  
    82.  <gov-input
      83. 
  
  
  
    83.  type="text"
      84. 
  
  
  
    84.  ipt-item-type="short"
      85. 
  
  
  
    85.  ipt-title="输入框"
      86. 
  
  
  
    86.  ipt-value="{{formData.iptone}}"
      87. 
  
  
  
    87.  ipt-error-info="{{errorInfo.iptoneError}}"
      88. 
  
  
  
    88.  ipt-name="iptone"
      89. 
  
  
  
    89.  ipt-item-width="100%"
      90. 
  
  
  
    90.  placeholder-content="请输入"
      91. 
  
  
  
    91.  bindiptclean="iptKeyClean"
      92. 
  
  
  
    92.  bindkeyinput="iptKeyInput">
      93. 
  
  
  
    93.  </gov-input>
      94. 
  
  
  
    94.  <gov-input
      95. 
  
  
  
    95.  type="text"
      96. 
  
  
  
    96.  ipt-item-type="short"
      97. 
  
  
  
    97.  ipt-title="输入框"
      98. 
  
  
  
    98.  ipt-value="{{formData.ipttwo}}"
      99. 
  
  
  
    99.  ipt-error-info="{{errorInfo.ipttwoError}}"
      100. 
  
  
  
    100.  ipt-notic-info="{{noticInfo.iptNoticInfo}}"
      101. 
  
  
  
    101.  ipt-name="ipttwo"
      102. 
  
  
  
    102.  ipt-item-width="100%"
      103. 
  
  
  
    103.  placeholder-content="请输入"
      104. 
  
  
  
    104.  bindiptclean="iptKeyClean"
      105. 
  
  
  
    105.  bindkeyinput="iptKeyInput">
      106. 
  
  
  
    106.  </gov-input>
      107. 
  
  
  
    107.  <gov-picker 
      108. 
  
  
  
    108.  mode="selector"
      109. 
  
  
  
    109.  range="{{options.singPicker}}"
      110. 
  
  
  
    110.  label="选择框"
      111. 
  
  
  
    111.  labelWidth="4em"
      112. 
  
  
  
    112.  bindchange="handleChange3"
      113. 
  
  
  
    113.  value="{{formData.sltsingle}}"
      114. 
  
  
  
    114.  rangeKey="name"
      115. 
  
  
  
    115.  errStatus="{{errorInfo.sltsingleError}}"
      116. 
  
  
  
    116.  placeholder="请选择">
      117. 
  
  
  
    117.  </gov-picker>
      118. 
  
  
  
    118.  <gov-cascade
      119. 
  
  
  
    119.  range="{{options.cascader}}"
      120. 
  
  
  
    120.  label="选择框"
      121. 
  
  
  
    121.  value="{{formData.sltdouble}}"
      122. 
  
  
  
    122.  rangeKey="name"
      123. 
  
  
  
    123.  labelWidth="4em"
      124. 
  
  
  
    124.  noborder="{{true}}"
      125. 
  
  
  
    125.  bindchange="cacadaChange"
      126. 
  
  
  
    126.  tips="{{['请选择', '请选择', '请选择']}}"
      127. 
  
  
  
    127.  errStatus= "{{errorInfo.sltdoubleError}}"
      128. 
  
  
  
    128.  placeholder="{{['请选择', '请选择', '请选择']}}">
      129. 
  
  
  
    129.  </gov-cascade> 
      130. 
  
  
  
    130.  </view>
      131. 
  
  
  
    131.  <view class="thick-divid">
      132. 
  
  
  
    132.  <gov-page-title title="单选标题" size="middle" hasBorder></gov-page-title>
      133. 
  
  
  
    133.  <view class="radios">
      134. 
  
  
  
    134.  <gov-radio-group
      135. 
  
  
  
    135.  options="{{options.radiosValue}}"
      136. 
  
  
  
    136.  inline="{{false}}"
      137. 
  
  
  
    137.  activeColor="#2772fb"
      138. 
  
  
  
    138.  option-key="name"
      139. 
  
  
  
    139.  bindchange="radioChange"
      140. 
  
  
  
    140.  groupStyle="{{border}}"
      141. 
  
  
  
    141.  value="{{formData.radios}}">
      142. 
  
  
  
    142.  </gov-radio-group>
      143. 
  
  
  
    143.  </view>
      144. 
  
  
  
    144.  </view>
      145. 
  
  
  
    145.  <view class="thick-divid">
      146. 
  
  
  
    146.  <gov-page-title title="多选标题" size="middle" hasBorder></gov-page-title>
      147. 
  
  
  
    147.  <view class="checkboxs">
      148. 
  
  
  
    148.  <gov-checkbox-group
      149. 
  
  
  
    149.  inline="{{false}}"
      150. 
  
  
  
    150.  option-key="name"
      151. 
  
  
  
    151.  activeColor="#2772fb"
      152. 
  
  
  
    152.  options="{{options.checkboxsValue}}"
      153. 
  
  
  
    153.  bindchange="checkboxChange"
      154. 
  
  
  
    154.  gov-checkbox-group="border"
      155. 
  
  
  
    155.  value="{{formData.checkbox}}">
      156. 
  
  
  
    156.  </gov-checkbox-group>
      157. 
  
  
  
    157.  <gov-checkbox
      158. 
  
  
  
    158.  bindchange="noHas"
      159. 
  
  
  
    159.  activeColor="#2772fb"
      160. 
  
  
  
    160.  value="{{formData.nochecked}}">
      161. 
  
  
  
    161.  不含以上情况
      162. 
  
  
  
    162.  </gov-checkbox>
      163. 
  
  
  
    163.  </view>
      164. 
  
  
  
    164.  </view>
      165. 
  
  
  
    165.  <view class="thick-divid">
      166. 
  
  
  
    166.  <gov-textarea
      167. 
  
  
  
    167.  gov-textarea-wrap="textarea-wrap"
      168. 
  
  
  
    168.  gov-textarea-element="textarea-element"
      169. 
  
  
  
    169.  bindinput="iptTextarea"
      170. 
  
  
  
    170.  placeholder="请输入"
      171. 
  
  
  
    171.  head="长文本输入框标题"
      172. 
  
  
  
    172.  value="{{formData.textBox}}"
      173. 
  
  
  
    173.  maxlength="100">
      174. 
  
  
  
    174.  </gov-textarea>
      175. 
  
  
  
    175.  </view>
      176. 
  
  
  
    176.  <view>
      177. 
  
  
  
    177.  <view class="upload-title">
      178. 
  
  
  
    178.  <gov-page-title
      179. 
  
  
  
    179.  title="上传照片标题"
      180. 
  
  
  
    180.  size="middle"
      181. 
  
  
  
    181.  hasBorder>
      182. 
  
  
  
    182.  </gov-page-title>
      183. 
  
  
  
    183.  </view>
      184. 
  
  
  
    184.  <gov-upload
      185. 
  
  
  
    185.  count="5"
      186. 
  
  
  
    186.  gov-tips="tips"
      187. 
  
  
  
    187.  binddelete="clickDelete"
      188. 
  
  
  
    188.  binduploadsuccess="uploadsuccess"
      189. 
  
  
  
    189.  bindurlempty="urlempty"
      190. 
  
  
  
    190.  bindpreviewfail="previewfail"
      191. 
  
  
  
    191.  tips="最多支持5张图片,单张体积10M一下"
      192. 
  
  
  
    192.  imageList="{{formData.imageList}}"
      193. 
  
  
  
    193.  limitSize="10"> 
      194. 
  
  
  
    194.  </gov-upload>
      195. 
  
  
  
    195.  </view>
      196. 
  
  
  
    196.  <view class="wen">
      197. 
  
  
  
    197.  <gov-prompt>
      198. 
  
  
  
    198.  <view slot="title">温馨提示：</view>
      199. 
  
  
  
    199.  <view slot="content">此板块为提示区，可用户提醒用户业务填写中的注意事项及要求<view class="prompt-view" bindtap="toView">点击查看</view>
      200. 
  
  
  
    200.  </view>
      201. 
  
  
  
    201.  </gov-prompt>
      202. 
  
  
  
    202.  </view>
      203. 
  
  
  
    203.  <view class="btn">
      204. 
  
  
  
    204.  <gov-ga-button
      205. 
  
  
  
    205.  button-size="large"
      206. 
  
  
  
    206.  button-text="提交"
      207. 
  
  
  
    207.  button-color="default"
      208. 
  
  
  
    208.  bindtap="submit">
      209. 
  
  
  
    209.  </gov-ga-button>
      210. 
  
  
  
    210.  <view s-if="{{isFullScreen}}" class="{{isFullScreen ? 'iphonex-safe-height': 'normal-height'}}"></view>
      211. 
  
  
  
    211.  </view>
      212. 
  
  
  
    212. </view>
      213. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "办理类服务（单流程）模板",
      3. 
  
  
  
    3.  "backgroundColor": "#fff",
      4. 
  
  
  
    4.  "navigationBarBackgroundColor": "#fff",
      5. 
  
  
  
    5.  "navigationBarTextStyle": "black",
      6. 
  
  
  
    6.  "usingComponents": {
      7. 
  
  
  
    7.  "gov-picker": "@smt-ui/component-gov/src/picker",
      8. 
  
  
  
    8.  "gov-upload": "@smt-ui/component-gov/src/upload",
      9. 
  
  
  
    9.  "gov-prompt": "@smt-ui/component-gov/src/prompt",
      10. 
  
  
  
    10.  "gov-input": "@smt-ui/component-gov/src/input",
      11. 
  
  
  
    11.  "gov-ga-button": "@smt-ui/component-gov/src/button",
      12. 
  
  
  
    12.  "gov-cascade": "@smt-ui/component-gov/src/cascade",
      13. 
  
  
  
    13.  "gov-textarea": "@smt-ui/component-gov/src/textarea",
      14. 
  
  
  
    14.  "smt-page-status":"@smt-ui/component/src/page-status",
      15. 
  
  
  
    15.  "gov-page-title": "@smt-ui/component-gov/src/page-title",
      16. 
  
  
  
    16.  "gov-checkbox": "@smt-ui/component-gov/src/checkbox",
      17. 
  
  
  
    17.  "gov-radio-group": "@smt-ui/component-gov/src/radio-group",
      18. 
  
  
  
    18.  "gov-checkbox-group": "@smt-ui/component-gov/src/checkbox-group"
      19. 
  
  
  
    19.  }
      20. 
  
  
  
    20. }
      21.

    • 获取页面数据

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 发送请求
      3. 
  
  
  
    3.  *
      4. 
  
  
  
    4.  * @param {Object} data 请求接口参数
      5. 
  
  
  
    5.  */
      6. 
  
  
  
    6. getDetail(data) {
      7. 
  
  
  
    7.  //【需替换】：获取内容详情所需要的数据，请修改 url 字段为真实的请求地址，该接口仅做示例
      8. 
  
  
  
    8.  let params = {
      9. 
  
  
  
    9.  url: 'https://www.ceshi.com',
      10. 
  
  
  
    10.  method: 'GET',
      11. 
  
  
  
    11.  data,
      12. 
  
  
  
    12.  success: res => {
      13. 
  
  
  
    13.  // 接口正常返回处理逻辑
      14. 
  
  
  
    14.  if (+res.code === 0) {
      15. 
  
  
  
    15.  if (Object.keys(res.data).length) {
      16. 
  
  
  
    16.  this.setData({
      17. 
  
  
  
    17.  // merge 本地数据和异步数据赋值给 options
      18. 
  
  
  
    18.  options: {...this.data.options, ...res.data}
      19. 
  
  
  
    19.  }, () => {
      20. 
  
  
  
    20.  this.setData({
      21. 
  
  
  
    21.  isPageLoading: false,
      22. 
  
  
  
    22.  pageResult: ''
      23. 
  
  
  
    23.  });
      24. 
  
  
  
    24.  });
      25. 
  
  
  
    25.  }
      26. 
  
  
  
    26.  else {
      27. 
  
  
  
    27.  // 没有数据
      28. 
  
  
  
    28.  this.setData({
      29. 
  
  
  
    29.  isPageLoading: false,
      30. 
  
  
  
    30.  pageResult: 'noData'
      31. 
  
  
  
    31.  });
      32. 
  
  
  
    32.  }
      33. 
  
  
  
    33.  }
      34. 
  
  
  
    34.  else {
      35. 
  
  
  
    35.  // 接口异常处理逻辑
      36. 
  
  
  
    36.  this.setData({
      37. 
  
  
  
    37.  isPageLoading: false,
      38. 
  
  
  
    38.  pageResult: 'warning'
      39. 
  
  
  
    39.  });
      40. 
  
  
  
    40.  }
      41. 
  
  
  
    41.  },
      42. 
  
  
  
    42.  fail: err => {
      43. 
  
  
  
    43.  // 接口异常处理逻辑
      44. 
  
  
  
    44.  this.setData({
      45. 
  
  
  
    45.  isPageLoading: false,
      46. 
  
  
  
    46.  pageResult: 'warning'
      47. 
  
  
  
    47.  });
      48. 
  
  
  
    48.  }
      49. 
  
  
  
    49.  };
      50. 
  
  
  
    50.  swan.request(params);
      51. 
  
  
  
    51. }
      52.

    • 点击提交按钮触发事件

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 点击提交按钮触发事件
      3. 
  
  
  
    3.  */
      4. 
  
  
  
    4. submit() {
      5. 
  
  
  
    5.  // 输入框,选择框根据错误状态 判断toast文案
      6. 
  
  
  
    6.  // 多选，单选，长文本，上传照片根据value值 判断toast文案
      7. 
  
  
  
    7.  const formData = this.data.formData;
      8. 
  
  
  
    8.  // 错误信息整理 设置error状态
      9. 
  
  
  
    9.  let errorInfo = {
      10. 
  
  
  
    10.  // checkIdcard、checkPhone、checkEmpty校验方法的详细说明可看 utils.js
      11. 
  
  
  
    11.  idcardError: checkIdcard(formData.idcard),
      12. 
  
  
  
    12.  phoneError: checkPhone(formData.phone),
      13. 
  
  
  
    13.  dateError: !formData.date,
      14. 
  
  
  
    14.  placeError: !formData.place,
      15. 
  
  
  
    15.  iptoneError: checkEmpty(formData.iptone, '请输入输入框一'),
      16. 
  
  
  
    16.  ipttwoError: checkEmpty(formData.ipttwo, '请输入输入框二'),
      17. 
  
  
  
    17.  sltsingleError: formData.sltsingle < 0,
      18. 
  
  
  
    18.  sltdoubleError: formData.sltdouble.length !== 3
      19. 
  
  
  
    19.  };
      20. 
  
  
  
    20.  this.setData({errorInfo}, () => {
      21. 
  
  
  
    21.  if (this.showCurToast()) {
      22. 
  
  
  
    22.  let that = this;
      23. 
  
  
  
    23.  let params = JSON.stringify(that.parameter());
      24. 
  
  
  
    24.  swan.showModal({
      25. 
  
  
  
    25.  title: '信息确认信息',
      26. 
  
  
  
    26.  content: '请确认填写的信息无误，提交后不支持修改',
      27. 
  
  
  
    27.  confirmText: '确认提交',
      28. 
  
  
  
    28.  confirmColor: '#108EE9',
      29. 
  
  
  
    29.  cancelText: '返回修改',
      30. 
  
  
  
    30.  cancelColor: '#999',
      31. 
  
  
  
    31.  success(res) {
      32. 
  
  
  
    32.  // 此处可自定义业务逻辑
      33. 
  
  
  
    33.  if (res.confirm) {
      34. 
  
  
  
    34.  swan.redirectTo({
      35. 
  
  
  
    35.  url: `../result/result?result=${params}`
      36. 
  
  
  
    36.  });
      37. 
  
  
  
    37.  }
      38. 
  
  
  
    38.  }
      39. 
  
  
  
    39.  });
      40. 
  
  
  
    40.  }
      41. 
  
  
  
    41.  });
      42. 
  
  
  
    42. }
      43.

    提交状态页

    用于展示表单提交结果。

    页面路径：result/result

    后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板插图3

    后浪云百度小程序教程：page-singlepage-form 办理类服务（单流程）模板插图4

    代码示例

    • SWAN
    • JSON
     
 
 
      
  
  
  
    1. <smt-page-status s-if="isPageLoading || errorPage"
      2. 
  
  
  
    2.  class="content"
      3. 
  
  
  
    3.  loading="{{isPageLoading}}"
      4. 
  
  
  
    4.  icon="{{errorConfig[errorPage].icon}}"
      5. 
  
  
  
    5.  title="{{errorConfig[errorPage].title}}"
      6. 
  
  
  
    6.  desc="{{errorConfig[errorPage].desc}}"
      7. 
  
  
  
    7.  showBtn="{{errorConfig[errorPage].showBtn}}"
      8. 
  
  
  
    8.  bind:smtreloading="check">
      9. 
  
  
  
    9. </smt-page-status>
      10. 
  
  
  
    10. <view s-else class='wrap'>
      11. 
  
  
  
    11.  <gov-page-result
      12. 
  
  
  
    12.  iconName="{{icon.iconName}}"
      13. 
  
  
  
    13.  iconColor="{{icon.iconColor}}"
      14. 
  
  
  
    14.  gov-main-btn="gov-main-btn" 
      15. 
  
  
  
    15.  gov-ext-info-text="gov-ext-info-text" 
      16. 
  
  
  
    16.  title="{{pageResult.title}}" 
      17. 
  
  
  
    17.  desc="{{pageResult.desc}}"
      18. 
  
  
  
    18.  main-btn-text="回到首页" 
      19. 
  
  
  
    19.  sub-btn-text="辅助按钮"
      20. 
  
  
  
    20.  bind:goback="goBack" 
      21. 
  
  
  
    21.  bind:viewdetails="viewDetails"> 
      22. 
  
  
  
    22.  <view slot="suppl-cont" class="list" s-if="{{pageResult.list}}">
      23. 
  
  
  
    23.  <view s-for="pageResult.list trackBy item" class='every'>
      24. 
  
  
  
    24.  <text>{{item.title}}</text>
      25. 
  
  
  
    25.  <text>{{item.sub}}</text>
      26. 
  
  
  
    26.  </view>
      27. 
  
  
  
    27.  </view>
      28. 
  
  
  
    28.  </gov-page-result>
      29. 
  
  
  
    29. </view>
      30. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "结果页",
      3. 
  
  
  
    3.  "backgroundColor": "#fff",
      4. 
  
  
  
    4.  "navigationBarBackgroundColor": "#fff",
      5. 
  
  
  
    5.  "navigationBarTextStyle": "black",
      6. 
  
  
  
    6.  "usingComponents": {
      7. 
  
  
  
    7.  "ga-button": "@smt-ui/component-gov/src/button",
      8. 
  
  
  
    8.  "smt-page-status": "@smt-ui/component/src/page-status",
      9. 
  
  
  
    9.  "gov-page-result": "@smt-ui/component-gov/src/page-result"
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11. }
      12.

    • 页面初始化

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 页面加载时触发
      3. 
  
  
  
    3.  *
      4. 
  
  
  
    4.  * @param {Object} options 提交页面传的参数
      5. 
  
  
  
    5.  * @param {string} options.result 传的数据
      6. 
  
  
  
    6.  */
      7. 
  
  
  
    7. onLoad(options) {
      8. 
  
  
  
    8.  this.setData({
      9. 
  
  
  
    9.  // 页面需要展示的数据，依赖server端返回
      10. 
  
  
  
    10.  pageResult: '',
      11. 
  
  
  
    11.  options: JSON.parse(options.result)
      12. 
  
  
  
    12.  });
      13. 
  
  
  
    13.  let icon;
      14. 
  
  
  
    14.  if (pageResult.data.type !== 'success') {
      15. 
  
  
  
    15.  icon = {
      16. 
  
  
  
    16.  iconName: 'warning-o',
      17. 
  
  
  
    17.  iconColor: '#c40311'
      18. 
  
  
  
    18.  };
      19. 
  
  
  
    19.  this.setData({icon});
      20. 
  
  
  
    20.  }
      21. 
  
  
  
    21. }
      22.

    • 点击“返回首页”按钮触发事件

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 返回首页
      3. 
  
  
  
    3.  */
      4. 
  
  
  
    4. goBack() {
      5. 
  
  
  
    5.  //【需替换】：请为 url 设置真实的首页路径
      6. 
  
  
  
    6.  swan.redirectTo({
      7. 
  
  
  
    7.  url: ''
      8. 
  
  
  
    8.  });
      9. 
  
  
  
    9. }
      10.

    • 点击“辅助按钮”按钮触发事件

    • JS

     
 
 
      
  
  
  
    1. /**
      2. 
  
  
  
    2.  * 辅助按钮
      3. 
  
  
  
    3.  */
      4. 
  
  
  
    4. viewDetails() {
      5. 
  
  
  
    5.  //【需替换】：请为 url 设置真实的跳转页面路径
      6. 
  
  
  
    6.  swan.redirectTo({
      7. 
  
  
  
    7.  url: ''
      8. 
  
  
  
    8.  });
      9. 
  
  
  
    9. }
      10.

    npm 依赖

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

    Bug & Tip

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