page-frame 基础政务服务大厅模板

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

解释：本模板适用于各政府部门或区县政务服务线上办事大厅快速搭建工作，如社保、公安、税务、教育等部门，模板包含服务类目列表页、二级服务列表页，开发者可根据实际业务分类方式进行二次开发，以实现服务列表清晰、直观、结构化的展现形式。

示例

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

页面内容

模板包含两个页面：服务大厅首页、服务列表页。

服务大厅首页

页面包含首页头部板块、小程序名称及描述区域、服务提供方描述区域可对开发者主体进行介绍。模板提供红、蓝两种配色供选择。

页面路径：pages/index

page-frame 基础政务服务大厅模板 - 图2

page-frame 基础政务服务大厅模板 - 图3

代码示例

  • SWAN
  • JSON
  1. <view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
  2.     <gov-custom-title-bar
  3.         s-if="{{!loading && !statusType && showBar}}"
  4.         animation
  5.         show-fixed-bar
  6.         fixed-title="{{frameList.name}}"
  7.         fixed-front-color="#000000"
  8.         common-front-color="#ffffff"
  9.         common-bg-color="{{theme}}"
  10.         common-bg-opacity="{{true}}"
  11.         switch-start-position="10"
  12.         switch-end-position="60"
  13.     ></gov-custom-title-bar>
  14.     <smt-page-status
  15.         s-if="{{!loading && statusType}}"
  16.         class="frame-status"
  17.         icon="{{statusConfig[statusType].icon}}"
  18.         title="{{statusConfig[statusType].title}}"
  19.         desc="{{statusConfig[statusType].desc}}"
  20.         showBtn="{{statusConfig[statusType].showBtn}}"
  21.         bindsmtreloading="requestList"
  22.     ></smt-page-status>
  23.     <gov-layout
  24.         s-else
  25.         text="{{frameList.hoster}}"
  26.         gov-layout-container="frame-content"
  27.     >
  28.         <view slot="container">
  29.             <view class="frame-head" style="background: {{theme}}">
  30.                 <view class="name">{{frameList.name}}</view>
  31.                 <view class="slogan">{{frameList.slogan}}</view>
  32.             </view>
  33.             <view class="frame-service">
  34.                 <view class="service-card" s-for="val, i in frameList.service">
  35.                     <gov-list-item
  36.                         label="{{val.category}}"
  37.                         gov-label="gov-label"
  38.                         label-width="6em"
  39.                         border
  40.                     ></gov-list-item>
  41.                     <gov-list-item
  42.                         s-for="item, s in val.subCategory"
  43.                         content="{{item.name}}"
  44.                         border="{{s !== val.subCategory.length - 1}}"
  45.                         contentDesc="{{item.desc}}"
  46.                         gov-content="gov-content"
  47.                         label-width="0"
  48.                         data-service="{{i}}"
  49.                         data-list="{{s}}"
  50.                         bindtap="goService"
  51.                         arrow
  52.                         clickable
  53.                     >
  54.                         <view
  55.                             slot="left"
  56.                         >
  57.                             <image class="sub-category-icon" mode="aspectFit" src="{{item.icon}}"/>
  58.                         </view>
  59.                     </gov-list-item>
  60.                 </view>
  61.             </view>
  62.         </view>
  63.     </gov-layout>
  64. </view>
  1. {
  2.     "navigationStyle": "custom",
  3.     "navigationBarTextStyle": "white",
  4.     "usingComponents": {
  5.         "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
  6.         "gov-list-item": "@smt-ui/component-gov/src/list-item",
  7.         "gov-layout": "@smt-ui/component-gov/src/layout",
  8.         "smt-page-status": "@smt-ui/component/src/page-status"
  9.     }
  10. }

  • 页面初始化，可设置服务项、主题色，页面状态

  • JS

  1. onLoad(options) {
  2.     // frameList为mock的数据
  3.     const {code, theme} = frameList;
  4.     this.setData({
  5.         // 服务项
  6.         frameList: frameList,
  7.         // 根据主题修改配色
  8.         theme: theme === 'blue' ? COLOR_BLUE : COLOR_RED,
  9.         // code 0: 正常获取数据   99999: 无网络   其他: 服务异常
  10.         statusType: code === 99999 ? 'noNetwork' : code !== 0 ? 'warning' : ''
  11.     });
  12. }

  • 跳转服务列表页，开发者可以按需传递参数到列表页

  • JS

  1. goService({currentTarget}) {
  2.     const {service, list} = currentTarget.dataset;
  3.     // 跳转服务列表页，跳转的list和theme参数只是mock数据举例，具体是否需要带参数跳转、参数名称、参数值可自定义。
  4.     swan.navigateTo({
  5.         url: 'pages/@smt-ui-template-page-frame/pages/services/index?list=${JSON.stringify(this.data.frameList.service[service].subCategory[list])}&theme=${this.data.frameList.theme}'
  6.     });
  7. }

  • 根据主题修改配色

  • JS

  1. import {COLOR_BLUE, COLOR_RED} from '../../common/style/color.js';
  3. ...
  5. this.setData({
  6.     // 根据主题修改配色
  7.     theme: theme === 'blue' ? COLOR_BLUE : COLOR_RED,
  8. });

服务列表页

页面包含服务类目列表，可以将服务项进行清晰直观的分类展示。

页面路径：pages/services

page-frame 基础政务服务大厅模板 - 图4

page-frame 基础政务服务大厅模板 - 图5

代码示例

  • SWAN
  • JSON
  1. <view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
  2.     <gov-custom-title-bar
  3.         animation
  4.         show-fixed-bar
  5.         fixed-title="{{services.name}}"
  6.         common-front-color="#000000"
  7.         fixed-bg-color='#ffffff'
  8.         common-bg-opacity="{{true}}"
  9.         need-to-return="{{true}}"
  10.         gov-fixed-nav-bar="{{isOpacity || statusType ? 'gov-fixed' : ''}}"
  11.         switch-start-position="10"
  12.         switch-end-position="60"
  13.     >
  14.     </gov-custom-title-bar>
  15.     <smt-page-status
  16.         s-if="{{!loading && statusType}}"
  17.         class="frame-status"
  18.         icon="{{statusConfig[statusType].icon}}"
  19.         title="{{statusConfig[statusType].title}}"
  20.         desc="{{statusConfig[statusType].desc}}"
  21.         showBtn="{{statusConfig[statusType].showBtn}}"
  22.         bindsmtreloading="requestList"
  23.     ></smt-page-status>
  24.     <gov-layout
  25.         s-else
  26.         text="{{services.hoster}}"
  27.         gov-layout-container="frame-content"
  28.         gov-layout-text="frame-footer"
  29.     >
  30.         <view slot="container">
  31.             <view class="service-container">
  32.                 <view class="service-bg">
  33.                     <image
  34.                         class="service-bg-img"
  35.                         src="{{headBg}}"
  36.                     ></image>
  37.                 </view>
  38.                 <view class="service-content">
  39.                     <view class="service-header">
  40.                         <view class="header-title" style="{{theme}}">{{services.name}}</view>
  41.                         <view class="header-desc" style="{{theme}}">{{desc}}</view>
  42.                     </view>
  43.                 </view>
  44.             </view>
  45.             <view class="service-list" s-for="val in services.service">
  46.                 <view class="service-title" >{{val.name}}</view>
  47.                 <gov-list-item
  48.                     s-for="v in val.list"
  49.                     label="{{v.name}}"
  50.                     bindtap="clickService"
  51.                     gov-label="label-text"
  52.                     label-width="6em"
  53.                     arrow
  54.                     border
  55.                     clickable
  56.                 />
  57.             </view>
  58.         </view>
  59.     </gov-layout>
  60. </view>
  1. {
  2.     "navigationBarTextStyle": "black",
  3.     "navigationStyle": "custom",
  4.     "usingComponents": {
  5.         "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
  6.         "gov-list-item": "@smt-ui/component-gov/src/list-item",
  7.         "gov-layout": "@smt-ui/component-gov/src/layout",
  8.         "smt-page-status": "@smt-ui/component/src/page-status"
  9.     }
  10. }

  • 页面初始化，可设置服务列表项、主题色、欢迎语

  • JS

  1. onLoad({list, theme, type}) {
  2.     this.setData({
  3.         // 设置服务列表项
  4.         services: JSON.parse(list),
  5.         // 根据当前主题切换头部背景
  6.         headBg: '../../images/bg${theme}.png',
  7.         desc: this.getGreet() + '，欢迎使用该服务！',
  8.         theme: {
  9.             // 根据当前主题切换配色
  10.             color: theme === 'blue' ? COLOR_BLUE_1 : COLOR_RED_1
  11.         },
  12.         statusType: type
  13.     });
  14. }

  • 点击服务项事件，可自定义落地页

  • JS

  1. clickService() {
  2.     // url路径可根据实际落地页路径替换
  3.     swan.navigateTo({
  4.         url: './nextPage'
  5.     });
  6. }

npm 依赖

名称版本号
@smt-ui/component-gov1.1.19-alpha.0
@smt-ui/componentlatest

Bug & Tip

  • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
  • Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。