百度智能小程序 基础政务服务大厅模板

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

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

示例

前提条件

• 已完成小程序创建。
• 已下载并安装百度小程序开发者工具（简称 IDE）。

使用说明

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

使用方式

方式一 【 NPM 】

1. 在小程序根目录执行下方命令，下载页面模板的 npm 包：

   npm i @smt-ui-template/page-frame
   

2. 将/node_modules/@smt-ui-template/page-frame 下的@smt-ui-template-page-frame 文件夹拷贝到当前小程序合适的目录下 （如pages）:

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └── @smt-ui-template-page-frame     // 模板文件
   

3. 在小程序根目录的 app.json 中配置模板页面的 path 路径，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-page-frame/pages/index/index",
           "pages/@smt-ui-template-page-frame/pages/services/index",
           ...
       ]
   }
   

4. 为了方便在开发者工具中查看模板页的效果，可以设置模板页为小程序预览的首页。详情请见自定义编译文档。
   

页面内容

方式二 【 开发者工具-页面模板 】

1. 打开开发者工具，点击 ”页面模板“，在下方找到 ”政务服务大厅模板“，选中该模板后点击右下角 ”立即使用”，填写相关信息点击右下角 ”完成“ 按钮。
2. 使用开发者工具的编辑器或者选择自己熟悉的编辑器对模板进行二次开发。

页面内容

模板包含 2 个页面，分别是：服务大厅首页、服务列表页。

服务大厅首页

页面路径：pages/index

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

<view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
    <gov-custom-title-bar
        s-if="{{!loading && !statusType && showBar}}"
        animation
        show-fixed-bar
        fixed-title="{{frameList.name}}"
        fixed-front-color="#000000"
        common-front-color="#ffffff"
        common-bg-color="{{theme}}"
        common-bg-opacity="{{true}}"
        switch-start-position="10"
        switch-end-position="60"
    ></gov-custom-title-bar>
    <smt-page-status
        s-if="{{!loading && statusType}}"
        class="frame-status"
        icon="{{statusConfig[statusType].icon}}"
        title="{{statusConfig[statusType].title}}"
        desc="{{statusConfig[statusType].desc}}"
        showBtn="{{statusConfig[statusType].showBtn}}"
        bindsmtreloading="requestList"
    ></smt-page-status>
    <gov-layout
        s-else
        text="{{frameList.hoster}}"
        gov-layout-container="frame-content"
    >
        <view slot="container">
            <view class="frame-head" style="background: {{theme}}">
                <view class="name">{{frameList.name}}</view>
                <view class="slogan">{{frameList.slogan}}</view>
            </view>
            <view class="frame-service">
                <view class="service-card" s-for="val, i in frameList.service">
                    <gov-list-item
                        label="{{val.category}}"
                        gov-label="gov-label"
                        label-width="6em"
                        border
                    ></gov-list-item>
                    <gov-list-item
                        s-for="item, s in val.subCategory"
                        content="{{item.name}}"
                        border="{{s !== val.subCategory.length - 1}}"
                        contentDesc="{{item.desc}}"
                        gov-content="gov-content"
                        label-width="0"
                        data-service="{{i}}"
                        data-list="{{s}}"
                        bindtap="goService"
                        arrow
                        clickable
                    >
                        <view
                            slot="left"
                        >
                            <image class="sub-category-icon" mode="aspectFit" src="{{item.icon}}"/>
                        </view>
                    </gov-list-item>
                </view>
            </view>
        </view>
    </gov-layout>
</view>

{
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white",
    "usingComponents": {
        "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
        "gov-list-item": "@smt-ui/component-gov/src/list-item",
        "gov-layout": "@smt-ui/component-gov/src/layout",
        "smt-page-status": "@smt-ui/component/src/page-status"
    }
}

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

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

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

  goService({currentTarget}) {
      const {service, list} = currentTarget.dataset;
      // 跳转服务列表页，跳转的list和theme参数只是mock数据举例，具体是否需要带参数跳转、参数名称、参数值可自定义。
      swan.navigateTo({
          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}`
      });
  }
  

• 根据主题修改配色

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

服务列表页

页面路径：pages/services

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

<view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
    <gov-custom-title-bar
        animation
        show-fixed-bar
        fixed-title="{{services.name}}"
        common-front-color="#000000"
        fixed-bg-color='#ffffff'
        common-bg-opacity="{{true}}"
        need-to-return="{{true}}"
        gov-fixed-nav-bar="{{isOpacity || statusType ? 'gov-fixed' : ''}}"
        switch-start-position="10"
        switch-end-position="60"
    >
    </gov-custom-title-bar>
    <smt-page-status
        s-if="{{!loading && statusType}}"
        class="frame-status"
        icon="{{statusConfig[statusType].icon}}"
        title="{{statusConfig[statusType].title}}"
        desc="{{statusConfig[statusType].desc}}"
        showBtn="{{statusConfig[statusType].showBtn}}"
        bindsmtreloading="requestList"
    ></smt-page-status>
    <gov-layout
        s-else
        text="{{services.hoster}}"
        gov-layout-container="frame-content"
        gov-layout-text="frame-footer"
    >
        <view slot="container">
            <view class="service-container">
                <view class="service-bg">
                    <image
                        class="service-bg-img"
                        src="{{headBg}}"
                    ></image>
                </view>
                <view class="service-content">
                    <view class="service-header">
                        <view class="header-title" style="{{theme}}">{{services.name}}</view>
                        <view class="header-desc" style="{{theme}}">{{desc}}</view>
                    </view>
                </view>
            </view>
            <view class="service-list" s-for="val in services.service">
                <view class="service-title" >{{val.name}}</view>
                <gov-list-item
                    s-for="v in val.list"
                    label="{{v.name}}"
                    bindtap="clickService"
                    gov-label="label-text"
                    label-width="6em"
                    arrow
                    border
                    clickable
                />
            </view>
        </view>
    </gov-layout>
</view>

{
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom",
    "usingComponents": {
        "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
        "gov-list-item": "@smt-ui/component-gov/src/list-item",
        "gov-layout": "@smt-ui/component-gov/src/layout",
        "smt-page-status": "@smt-ui/component/src/page-status"
    }
}

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

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

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

  clickService() {
      // url路径可根据实际落地页路径替换
      swan.navigateTo({
          url: `./nextPage`
      });
  }
  

NPM 依赖