• page-frame 基础政务服务大厅模板
  • 示例
  • 页面内容
    • 服务大厅首页
    • 服务列表页
  • npm 依赖
  • Bug & Tip

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

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

成都创新互联公司为客户提供专业的成都网站建设、网站制作、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、手机网站制作设计等网站方面业务。

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

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

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

服务大厅首页

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

页面路径：pages/index

代码示例

• SWAN
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 
  
  
  
 s-else
  
  
  
 text="{{frameList.hoster}}"
  
  
  
 gov-layout-container="frame-content"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 {{frameList.name}}
  
  
  
 {{frameList.slogan}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 label="{{val.category}}"
  
  
  
 gov-label="gov-label"
  
  
  
 label-width="6em"
  
  
  
 border
  
  
  
 >
  
  
  
 
  
  
  
 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
  
  
  
 >
  
  
  
 
  
  
  
 slot="left"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

 
 
 
  
  
  
{
  
  
  
 "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"
  
  
  
 }
  
  
  
}
 
 

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

• JS

 
 
 
  
  
  
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' : ''
  
  
  
 });
  
  
  
}
 
 

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

• JS

 
 
 
  
  
  
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}'
  
  
  
 });
  
  
  
}
 
 

• 根据主题修改配色

• JS

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

服务列表页

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

页面路径：pages/services

代码示例

• SWAN
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 
  
  
  
 s-else
  
  
  
 text="{{services.hoster}}"
  
  
  
 gov-layout-container="frame-content"
  
  
  
 gov-layout-text="frame-footer"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 class="service-bg-img"
  
  
  
 src="{{headBg}}"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{services.name}}
  
  
  
 {{desc}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{val.name}}
  
  
  
 
  
  
  
 s-for="v in val.list"
  
  
  
 label="{{v.name}}"
  
  
  
 bindtap="clickService"
  
  
  
 gov-label="label-text"
  
  
  
 label-width="6em"
  
  
  
 arrow
  
  
  
 border
  
  
  
 clickable
  
  
  
 />
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

 
 
 
  
  
  
{
  
  
  
 "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"
  
  
  
 }
  
  
  
}
 
 

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

• JS

 
 
 
  
  
  
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
  
  
  
 });
  
  
  
}
 
 

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

• JS

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

npm 依赖

Bug & Tip

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