page-frame 基礎(chǔ)政務(wù)服務(wù)大廳模板

從開(kāi)發(fā)者工具 v2.25.1-rc 版本開(kāi)始支持。
成都創(chuàng)新互聯(lián)公司為客戶(hù)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開(kāi)發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開(kāi)發(fā)、WEB系統(tǒng)開(kāi)發(fā)、微信二次開(kāi)發(fā)、手機(jī)網(wǎng)站制作設(shè)計(jì)等網(wǎng)站方面業(yè)務(wù)。

解釋：本模板適用于各政府部門(mén)或區(qū)縣政務(wù)服務(wù)線(xiàn)上辦事大廳快速搭建工作，如社保、公安、稅務(wù)、教育等部門(mén)，模板包含服務(wù)類(lèi)目列表頁(yè)、二級(jí)服務(wù)列表頁(yè)，開(kāi)發(fā)者可根據(jù)實(shí)際業(yè)務(wù)分類(lèi)方式進(jìn)行二次開(kāi)發(fā)，以實(shí)現(xiàn)服務(wù)列表清晰、直觀、結(jié)構(gòu)化的展現(xiàn)形式。

示例

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

頁(yè)面內(nèi)容

模板包含兩個(gè)頁(yè)面：服務(wù)大廳首頁(yè)、服務(wù)列表頁(yè)。

服務(wù)大廳首頁(yè)

頁(yè)面包含首頁(yè)頭部板塊、小程序名稱(chēng)及描述區(qū)域、服務(wù)提供方描述區(qū)域可對(duì)開(kāi)發(fā)者主體進(jìn)行介紹。模板提供紅、藍(lán)兩種配色供選擇。

頁(yè)面路徑：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"  
  
   }  
  
  }

頁(yè)面初始化，可設(shè)置服務(wù)項(xiàng)、主題色，頁(yè)面狀態(tài)
JS

 
 
   
  
  onLoad(options) {  
  
   // frameList為mock的數(shù)據(jù)  
  
   const {code, theme} = frameList;  
  
   this.setData({  
  
   // 服務(wù)項(xiàng)  
  
   frameList: frameList,  
  
   // 根據(jù)主題修改配色  
  
   theme: theme === 'blue' ? COLOR_BLUE : COLOR_RED,  
  
   // code 0: 正常獲取數(shù)據(jù) 99999: 無(wú)網(wǎng)絡(luò) 其他: 服務(wù)異常  
  
   statusType: code === 99999 ? 'noNetwork' : code !== 0 ? 'warning' : ''  
  
   });  
  
  }

跳轉(zhuǎn)服務(wù)列表頁(yè)，開(kāi)發(fā)者可以按需傳遞參數(shù)到列表頁(yè)
JS

 
 
   
  
  goService({currentTarget}) {  
  
   const {service, list} = currentTarget.dataset;  
  
   // 跳轉(zhuǎn)服務(wù)列表頁(yè)，跳轉(zhuǎn)的list和theme參數(shù)只是mock數(shù)據(jù)舉例，具體是否需要帶參數(shù)跳轉(zhuǎn)、參數(shù)名稱(chēng)、參數(shù)值可自定義。  
  
   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}'  
  
   });  
  
  }

根據(jù)主題修改配色
JS

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

`服務(wù)列表頁(yè)`

頁(yè)面包含服務(wù)類(lèi)目列表，可以將服務(wù)項(xiàng)進(jìn)行清晰直觀的分類(lèi)展示。

頁(yè)面路徑：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"  
  
   }  
  
  }

頁(yè)面初始化，可設(shè)置服務(wù)列表項(xiàng)、主題色、歡迎語(yǔ)
JS

 
 
   
  
  onLoad({list, theme, type}) {  
  
   this.setData({  
  
   // 設(shè)置服務(wù)列表項(xiàng)  
  
   services: JSON.parse(list),  
  
   // 根據(jù)當(dāng)前主題切換頭部背景  
  
   headBg: '../../images/bg${theme}.png',  
  
   desc: this.getGreet() + '，歡迎使用該服務(wù)！',  
  
   theme: {  
  
   // 根據(jù)當(dāng)前主題切換配色  
  
   color: theme === 'blue' ? COLOR_BLUE_1 : COLOR_RED_1  
  
   },  
  
   statusType: type  
  
   });  
  
  }

點(diǎn)擊服務(wù)項(xiàng)事件，可自定義落地頁(yè)
JS

 
 
   
  
  clickService() {  
  
   // url路徑可根據(jù)實(shí)際落地頁(yè)路徑替換  
  
   swan.navigateTo({  
  
   url: './nextPage'  
  
   });  
  
  }

`npm 依賴(lài)`

名稱(chēng)	版本號(hào)
@smt-ui/component-gov	1.1.19-alpha.0
@smt-ui/component	latest

`Bug & Tip`

Tip：該模板使用了 ES6 語(yǔ)法，需要開(kāi)啟開(kāi)發(fā)者工具的增強(qiáng)編譯，操作步驟參看開(kāi)啟說(shuō)明；同時(shí)也需開(kāi)啟上傳代碼時(shí)樣式自動(dòng)補(bǔ)全。
Tip：以上代碼示例為純客戶(hù)端代碼，可直接在模擬器和真機(jī)預(yù)覽。
Tip：模板中使用的是測(cè)試數(shù)據(jù)，你需要從接口中獲取真實(shí)的數(shù)據(jù)。

                                                

                                                當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：page-frame 基礎(chǔ)政務(wù)服務(wù)大廳模板                                                

                                                網(wǎng)址分享：http://m.5511xx.com/article/ccdjepi.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                Oracle移植到MySQL會(huì)碰到那些問(wèn)題？
                                                            

                                                                四川服務(wù)器，四川服務(wù)器散熱器2022年年更新
                                                            

                                                                國(guó)外穩(wěn)定的虛擬主機(jī)怎么租用
                                                            

                                                                網(wǎng)站服務(wù)器帶寬選多大才夠用呢
                                                            

                                                                怎樣在手機(jī)上運(yùn)行云服務(wù)器軟件(怎么開(kāi)啟手機(jī)的云服務(wù)？)