主頁開發(fā)

保存主頁數(shù)據(jù)

<script>
import { indexData, base } from '@/service'export default {data() {return {base,				//把服務(wù)器基礎(chǔ)地址變量設(shè)置為數(shù)據(jù)屬性carousels:[],		//輪播廣告條目列表menuItems:[],		//當(dāng)前用戶選中的功能菜單列表activities:[],		//最新的社區(qū)活動(dòng)列表}},//生命周期方法：組件加載完成async onLoad() {	//彈出“歡迎回來”提示框uni.showToast({title:'歡迎回來',icon: 'none',duration: 3000})//向服務(wù)器請求首頁數(shù)據(jù)let data = await indexData()this.carousels = data.carousels		//輪播廣告this.menuItems = data.menuItems		//功能菜單this.activities = data.activities	//社區(qū)活動(dòng)},methods: {}}
</script>

輪播圖實(shí)現(xiàn)

swiper

滑塊視圖容器。

一般用于左右滑動(dòng)或上下滑動(dòng)，比如banner輪播圖。

注意滑動(dòng)切換和滾動(dòng)的區(qū)別，滑動(dòng)切換是一屏一屏的切換。swiper下的每個(gè)swiper-item是一個(gè)滑動(dòng)切換區(qū)域，不能停留在2個(gè)滑動(dòng)區(qū)域之間。

屬性說明

屬性名	類型	默認(rèn)值	說明	平臺差異說明
indicator-dots	Boolean	false	是否顯示面板指示點(diǎn)
indicator-color	Color	rgba(0, 0, 0, .3)	指示點(diǎn)顏色
indicator-active-color	Color	#000000	當(dāng)前選中的指示點(diǎn)顏色
active-class	String		swiper-item 可見時(shí)的 class	支付寶小程序
changing-class	String		acceleration 設(shè)置為 true 時(shí)且處于滑動(dòng)過程中，中間若干屏處于可見時(shí)的class	支付寶小程序
autoplay	Boolean	false	是否自動(dòng)切換
current	Number	0	當(dāng)前所在滑塊的 index
current-item-id	String		當(dāng)前所在滑塊的 item-id ，不能與 current 被同時(shí)指定	支付寶小程序不支持
interval	Number	5000	自動(dòng)切換時(shí)間間隔
duration	Number	500	滑動(dòng)動(dòng)畫時(shí)長	app-nvue不支持
circular	Boolean	false	是否采用銜接滑動(dòng)，即播放到末尾后重新回到開頭
vertical	Boolean	false	滑動(dòng)方向是否為縱向
previous-margin	String	0px	前邊距，可用于露出前一項(xiàng)的一小部分，接受 px 和 rpx 值	app-nvue、字節(jié)跳動(dòng)小程序、飛書小程序不支持
next-margin	String	0px	后邊距，可用于露出后一項(xiàng)的一小部分，接受 px 和 rpx 值	app-nvue、字節(jié)跳動(dòng)小程序、飛書小程序不支持
acceleration	Boolean	false	當(dāng)開啟時(shí)，會(huì)根據(jù)滑動(dòng)速度，連續(xù)滑動(dòng)多屏	支付寶小程序
disable-programmatic-animation	Boolean	false	是否禁用代碼變動(dòng)觸發(fā) swiper 切換時(shí)使用動(dòng)畫。	支付寶小程序
display-multiple-items	Number	1	同時(shí)顯示的滑塊數(shù)量	app-nvue、支付寶小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊布局，設(shè)為 true 可優(yōu)化復(fù)雜情況下的滑動(dòng)性能，但會(huì)丟失隱藏狀態(tài)滑塊的布局信息	App、微信小程序、京東小程序
disable-touch	Boolean	false	是否禁止用戶 touch 操作	App 2.5.5+、H5 2.5.5+、支付寶小程序、字節(jié)跳動(dòng)小程序與飛書小程序（只在初始化時(shí)有效，不能動(dòng)態(tài)變更）
touchable	Boolean	true	是否監(jiān)聽用戶的觸摸事件，只在初始化時(shí)有效，不能動(dòng)態(tài)變更	字節(jié)跳動(dòng)小程序與飛書小程序（uni-app 2.5.5+ 推薦統(tǒng)一使用 disable-touch）
easing-function	String	default	指定 swiper 切換緩動(dòng)動(dòng)畫類型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序、京東小程序
@change	EventHandle		current 改變時(shí)會(huì)觸發(fā) change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置發(fā)生改變時(shí)會(huì)觸發(fā) transition 事件，event.detail = {dx: dx, dy: dy}，支付寶小程序暫不支持dx, dy	App、H5、微信小程序、支付寶小程序、字節(jié)跳動(dòng)小程序、飛書小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		動(dòng)畫結(jié)束時(shí)會(huì)觸發(fā) animationfinish 事件，event.detail = {current: current, source: source}	字節(jié)跳動(dòng)小程序與飛書小程序不支持

<!-- F1: 輪播廣告 -->
<!-- indicator-dots：是否顯示“小圓餅”指示器 -->
<!-- autoplay：是否自動(dòng)播放輪播廣告 -->
<!-- interval：時(shí)間間隔，兩個(gè)廣告間停留時(shí)間 -->
<!-- duration：持續(xù)時(shí)長，一個(gè)廣告的過渡動(dòng)畫持續(xù)時(shí)長 -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"><swiper-item v-for="(c, i) in carousels" :key="i"><view class="swiper-item"><image @click="jump(c.href)" :src="base + c.pic" mode="widthFix"/></view></swiper-item>	
</swiper>

<script>
import { indexData, base } from '@/service'export default {data() {return {base,				//把服務(wù)器基礎(chǔ)地址變量設(shè)置為數(shù)據(jù)屬性carousels:[],		//輪播廣告條目列表menuItems:[],		//當(dāng)前用戶選中的功能菜單列表activities:[],		//最新的社區(qū)活動(dòng)列表}},//生命周期方法：組件加載完成async onLoad() {	//彈出“歡迎回來”提示框uni.showToast({title:'歡迎回來',icon: 'none',duration: 3000})//向服務(wù)器請求首頁數(shù)據(jù)let data = await indexData()console.log(data);this.carousels = data.carousels		//輪播廣告this.menuItems = data.menuItems		//功能菜單this.activities = data.activities	//社區(qū)活動(dòng)},methods: {jump(url){console.log(url)//導(dǎo)航跳轉(zhuǎn)到指定頁uni.navigateTo({ url })}}}
</script>

<style scoped lang="scss">//提示：頁面中可以使用標(biāo)簽選擇器，但是組件中不能使用		.swiper {height: 300rpx;.swiper-item > image {width: 750rpx;}}
</style>

功能菜單實(shí)現(xiàn)

需要安裝uni-grid組件

Uni-Grid

組件名：uni-grid

宮格組件。

uni-grid 屬性說明：

屬性名	類型	默認(rèn)值	說明
column	Number	3	每列顯示個(gè)數(shù)
borderColor	String	#d0dee5	邊框顏色
showBorder	Boolean	true	是否顯示邊框
square	Boolean	true	是否方形顯示
highlight	Boolean	true	點(diǎn)擊背景是否高亮

<!-- F2: 功能菜單 -->
<!-- column：一行中默認(rèn)顯示幾列 -->
<!-- showBorder：是否顯示邊框 -->
<!-- square：每個(gè)宮格項(xiàng)是否顯示為方形 -->
<uni-grid class="func-menu" :column="4" :showBorder="false" :square="true"><uni-grid-item v-for="(item,i) in menuItems" :key="i"><view class="menu-item" @click="jump(item.href)"><image :src="base+item.pic" mode="widthFix"/><text>{{item.title}}</text></view></uni-grid-item>
</uni-grid>

<style scoped lang="scss">.func-menu {margin-top: $uni-spacing-col-base;background-color: $uni-bg-color;.menu-item {height: 100%;//把彈性容器的主軸方向修改為：縱向flex-direction: column;//彈性容器中的子元素在主軸方向上居中對齊justify-content: center;//彈性容器中的子元素交叉軸方向上居中對齊align-items: center;> image { width:35%; margin-bottom: $uni-spacing-col-sm; }}}
</style>

商業(yè)服務(wù)功實(shí)現(xiàn)

需要安裝uni-card擴(kuò)展組件

組件名：uni-card

Uni-Card

卡片組件通常用來顯示完整獨(dú)立的一段信息，同時(shí)讓用戶理解他的作用。例如一篇文章的預(yù)覽圖、作者信息、時(shí)間等，卡片通常是更復(fù)雜和更詳細(xì)信息的入口點(diǎn)。

Card Props

屬性名	類型	默認(rèn)值	說明
title	String	-	標(biāo)題文字
sub-title	String	-	副標(biāo)題文字
extra	String	-	標(biāo)題額外信息
thumbnail	String	-	標(biāo)題左側(cè)縮略圖,支持網(wǎng)絡(luò)圖片，本地圖片，本圖片需要傳入一個(gè)絕對路徑，如：/static/xxx.png
cover	String	-	封面圖,支持網(wǎng)絡(luò)圖片，本地圖片，本圖片需要傳入一個(gè)絕對路徑，如：/static/xxx.png
is-full	Boolean	false	卡片內(nèi)容是否通欄，為true時(shí)將去除padding值
is-shadow	Boolean	false	卡片內(nèi)容是否開啟陰影
shadow	String	0px 0px 3px 1px rgba(0, 0, 0, 0.08)	卡片陰影,需符合 css 值
border	Boolean	true	卡片邊框
margin	String	10px	卡片外邊距
spacing	String	10px	卡片內(nèi)邊距
padding	String	10px	卡片內(nèi)容內(nèi)邊距
border	Boolean	true	卡片邊框
mode[棄用]	String	basic	卡片模式 ，可選值， basic：基礎(chǔ)卡片 ；style ：圖文卡片 ； title ：標(biāo)題卡片
note[棄用]	String	-	底部信息

<!-- F3: 商業(yè)服務(wù) -->
<!-- isFull：是否顯示為“通欄卡片”(左右撐滿) -->
<uni-card class="card" title="| 商業(yè)服務(wù)" is-full><view class="service"><!-- 左側(cè)：房屋租售 --><view class="service-item"><view class="txt"><text>房屋租售</text><view><navigator>租房</navigator><navigator>短租</navigator></view></view>	<!-- 圖片縮放模式1：widthFix --><!-- 圖片縮放模式2：scaleToFill：不保持原始寬高比，縮放圖片填滿指定寬高 --><image class="img" mode="scaleToFill" src="../../static/img/chuzu.png"/></view><!-- 右側(cè)：便民服務(wù) --><view class="service-item"><view class="txt"><text>便民服務(wù)</text><view><navigator>便利店</navigator><navigator>超市</navigator></view></view>	<image class="img" mode="scaleToFill" src="../../static/img/bianmin.png"/></view></view>
</uni-card>

App.vue

//清除自定義樣式對系統(tǒng)默認(rèn)組件的影響
view.card {flex-direction: column;//使用!important提升當(dāng)前樣式的優(yōu)先級，可以覆蓋系統(tǒng)默認(rèn)樣式margin-top: $uni-spacing-col-base !important;
}

.service {width: 100%;.service-item {//彈性子元素尺寸增長權(quán)重為：1flex: 1;padding-top: $uni-spacing-col-sm;padding-bottom: $uni-spacing-col-sm;&:nth-child(1) {padding-right: $uni-spacing-row-sm;}&:nth-child(2) {padding-left: $uni-spacing-row-sm;}justify-content: space-between; //彈性容器中的子元素在主軸方向上：空白在中央align-items: center; //彈性容器中的子元素在交叉軸方向上：居中對齊.img { width: 150rpx; height: 120rpx;}.txt { font-size: $uni-font-size-sm; flex-direction: column; flex: 1; //彈性子元素尺寸增長權(quán)重：1navigator {margin-right: $uni-spacing-row-sm;}}}
}

社區(qū)活動(dòng)功能實(shí)現(xiàn)

需要安裝uni-ist

Uni-List

組件名：uni-list

List 列表組件，包含基本列表樣式、可擴(kuò)展插槽機(jī)制、長列表性能優(yōu)化、多端兼容。

List Props

屬性名	類型	默認(rèn)值	說明
border	Boolean	true	是否顯示邊框

ListItem Props

屬性名	類型	默認(rèn)值	說明
title	String	-	標(biāo)題
note	String	-	描述
ellipsis	Number	0	title 是否溢出隱藏，可選值，0:默認(rèn); 1:顯示一行; 2:顯示兩行;
thumb	String	-	左側(cè)縮略圖，若thumb有值，則不會(huì)顯示擴(kuò)展圖標(biāo)
thumbSize	String	medium	略縮圖尺寸，可選值，lg:大圖; medium:一般; sm:小圖;
showBadge	Boolean	false	是否顯示數(shù)字角標(biāo)
badgeText	String	-	數(shù)字角標(biāo)內(nèi)容
badgeType	String	-	數(shù)字角標(biāo)類型，參考uni-icons
badgeStyle	Object	-	數(shù)字角標(biāo)樣式，使用uni-badge的custom-style參數(shù)
rightText	String	-	右側(cè)文字內(nèi)容
disabled	Boolean	false	是否禁用
showArrow	Boolean	true	是否顯示箭頭圖標(biāo)
link	String	navigateTo	新頁面跳轉(zhuǎn)方式，可選值見下表
to	String	-	新頁面跳轉(zhuǎn)地址，如填寫此屬性，click 會(huì)返回頁面是否跳轉(zhuǎn)成功
clickable	Boolean	false	是否開啟點(diǎn)擊反饋
showSwitch	Boolean	false	是否顯示Switch
switchChecked	Boolean	false	Switch是否被選中
showExtraIcon	Boolean	false	左側(cè)是否顯示擴(kuò)展圖標(biāo)
extraIcon	Object	-	擴(kuò)展圖標(biāo)參數(shù)，格式為 {color: '#4cd964',size: '22',type: 'spinner'}，參考 uni-icons
direction	String	row	排版方向，可選值，row:水平排列; column:垂直排列; 3個(gè)插槽是水平排還是垂直排，也受此屬性控制

ListItem Slots

名稱	說明
header	左/上內(nèi)容插槽，可完全自定義默認(rèn)顯示
body	中間內(nèi)容插槽，可完全自定義中間內(nèi)容
footer	右/下內(nèi)容插槽，可完全自定義右側(cè)內(nèi)容

通過插槽擴(kuò)展 需要注意的是當(dāng)使用插槽時(shí)，內(nèi)置樣式將會(huì)失效，只保留排版樣式，此時(shí)的樣式需要開發(fā)者自己實(shí)現(xiàn) 如果 uni-list-item 組件內(nèi)置屬性樣式無法滿足需求，可以使用插槽來自定義uni-list-item里的內(nèi)容。 uni-list-item提供了3個(gè)可擴(kuò)展的插槽：header、body、footer

• 當(dāng) direction 屬性為 row 時(shí)表示水平排列，此時(shí) header 表示列表的左邊部分，body 表示列表的中間部分，footer 表示列表的右邊部分
• 當(dāng) direction 屬性為 column 時(shí)表示垂直排列，此時(shí) header 表示列表的上邊部分，body 表示列表的中間部分，footer 表示列表的下邊部分 開發(fā)者可以只用1個(gè)插槽，也可以3個(gè)一起使用。在插槽中可自主編寫view標(biāo)簽，實(shí)現(xiàn)自己所需的效果。

<!-- F4: 社區(qū)活動(dòng) -->
<uni-card class="card" title="| 社區(qū)活動(dòng)" is-full padding="0"><!-- clickable：是否允許列表項(xiàng)被點(diǎn)擊，如果允許則自動(dòng)添加點(diǎn)擊反饋 --><!-- link：是否允許列表項(xiàng)顯示為鏈接，如果允許則自動(dòng)添加點(diǎn)擊反饋 + 添加向右的箭頭 --><uni-list><uni-list-item class="activity-item" v-for="(a,i) in activities" :key="i"><!-- 列表項(xiàng)中央主體插槽內(nèi)容 --><template v-slot:body><view class="activity-body"><text class="title">{{a.title}}</text><text class="content">{{a.content}}</text><!-- 通過管道(|)把數(shù)據(jù)傳遞給過濾器 --><text class="time">{{a.startTime | datetime}}</text></view></template><!-- 列表項(xiàng)右側(cè)插槽內(nèi)容 --><template v-slot:footer><image class="pic" :src="base+a.pic" mode="widthFix"/></template></uni-list-item></uni-list>
</uni-card>

uni.scss

CSS中如何實(shí)現(xiàn)“文本在一行中顯示，如果有溢出，則使用省略號代替”？

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

/* 自定義的樣式混入 */
@mixin ellipsis-1 {white-space: nowrap;		//文本在空白處不換行overflow: hidden;			//內(nèi)容溢出的話則隱藏text-overflow: ellipsis;	//如果發(fā)生文本溢出則用省略號代替
}
@mixin ellipsis-2 {}
@mixin ellipsis-3 {}

.activity-item {align-items: center;//彈性容器中的子元素交叉軸上居中對齊.activity-body {flex-direction: column;width: 420rpx; //父元素指定寬度，子元素就可能顯示省略號.title {font-size: $uni-font-size-base - 1;@include ellipsis-1;}.content {font-size: $uni-font-size-sm; color:$uni-text-color-grey;@include ellipsis-1;}.time {font-size: $uni-font-size-sm; color:$uni-text-color-grey;}}.pic {width:240rpx;flex-shrink: 0;//彈性子元素尺寸收縮權(quán)重： 0 —— 參與尺寸縮小}
}

過濾器

main.js

import App from './App'// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
//聲明全局過濾器——可供所有的頁面/組件使用
Vue.filter('datetime', (num)=>{//參數(shù)是數(shù)字——時(shí)間戳，返回日期時(shí)間字符串let d = new Date(num)  //把時(shí)間戳轉(zhuǎn)換為日期對象//獲取Date中的不同部分let yy = d.getFullYear()let mm = d.getMonth() + 1   //注意：默認(rèn)的月份是0~11mm = mm<10 ? '0'+mm : mmlet dd = d.getDate()dd = dd<10 ? '0'+dd : ddlet hh = d.getHours()hh = hh<10 ? '0'+hh : hhlet mi = d.getMinutes()mi = mi<10 ? '0'+mi : mireturn `${yy}-${mm}-${dd} ${hh}:${mi}`
})App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif

繳費(fèi)列表頁面開發(fā)

property-fee.vue

標(biāo)題欄開發(fā)

<template><view class="content"><!-- F1：自定義標(biāo)題欄 --><uni-nav-bar class="nav-bar" left-icon="back" left-text="返回" right-icon="list" title="繳 費(fèi)" background-color="#090" color="#fff" @clickLeft="back" @clickRight="jump('/pages/feeRecord/feeRecord')"></uni-nav-bar><!-- F2：累積費(fèi)用統(tǒng)計(jì) --><!-- F3：分列各項(xiàng)費(fèi)用的列表 --></view>
</template>

<script>export default {data() {return {}},methods: {//處理“導(dǎo)航條左側(cè)按鈕”被單擊事件back(){uni.navigateBack()},//處理“導(dǎo)航條右側(cè)按鈕”被單擊事件jump(url){uni.navigateTo({ url })},}}
</script>

<style scoped lang="scss">
.nav-bar {display: block;//讓父組件中的樣式可以穿透到子組件::v-deep  .uni-navbar__content {	display: block;}
}
</style>

樣式穿透

Vue.js / uni-app經(jīng)典面試題：樣式穿透是什么？

設(shè)法讓父組件因?yàn)槭褂胹coped屬性產(chǎn)生的data-v-隨機(jī)數(shù) 屬性在所有的子組件體內(nèi)元素上也生成一份，這樣一來父組件的樣式就可以應(yīng)用到子組件內(nèi) —— 樣式穿透：讓父組件內(nèi)編寫的樣式可以作用到子組件內(nèi)。實(shí)現(xiàn)方法：

CSS： >>> 選擇器 { }

Less： /deep/ 選擇器 { }

SCSS： ::v-deep 選擇器 { }

頁面 parent.vue

<template><view class="p1">PARENT1<view class="p2">PARENT2</view><!-- 使用子組件 --><zh-child/></view>
</template><style scoped lang="scss">
.p1 {font-size: 1.5em;font-weight: bold;
}
.p2 {font-style: italic;
}
.c1 {color: red;
}
>>>  .c2 {text-decoration: line-through;
}
</style>

組件 zh-child.vue

<template><view class="c1">CHILD1<view class="c2">CHILD2</view></view>
</template><style scoped lang="scss"></style>

累積費(fèi)用統(tǒng)計(jì)開發(fā)

<!-- F2：累積費(fèi)用統(tǒng)計(jì) -->
<view class="fee-statistics"><text class="hint">當(dāng)前待繳費(fèi)用(元)</text><text class="amount">￥{{amount}}</text>
</view>

.fee-statistics {background-color: $zh-theme-color;border-top: $uni-border;padding: $uni-spacing-col-lg*3  0;flex-direction: column; //彈性容器的主軸方向：縱向align-items: center; //彈性容器中的子元素在交叉軸上居中對齊color: $uni-text-color-inverse;.hint {font-size: $uni-font-size-lg; margin-bottom: $uni-spacing-col-base;}.amount { font-size: $uni-font-size-base * 2.5;font-weight: bold;}
}

各項(xiàng)費(fèi)用的列表開發(fā)

<!-- F3：分列各項(xiàng)費(fèi)用的列表 -->
<!-- thumb：有時(shí)也稱為thumbnail，拇指圖/縮略圖 -->
<!-- thumbSize：縮略圖大小，只能選擇 sm/base/lg 之一 -->
<!-- link：列表選項(xiàng)顯示為鏈接效果：點(diǎn)擊后有反饋+可以點(diǎn)擊+右側(cè)箭頭 -->
<!-- rightText：顯示在右側(cè)的文字 -->
<!-- Math.abs()：返回?cái)?shù)字的絕對值 -->
<uni-list><uni-list-item title="水費(fèi)" thumb="../../static/img/shui.png" thumbSize="lg" link :rightText="fees.shui>=0 ? '' : `待繳金額：￥${Math.abs(fees.shui)}`" to="/pages/feePay/feePay?type=1"/><uni-list-item title="電費(fèi)" thumb="../../static/img/dian.png" thumbSize="lg" link :rightText="fees.dian>=0 ? '' : `待繳金額：￥${Math.abs(fees.dian)}`" to="/pages/feePay/feePay?type=2"/><uni-list-item title="燃?xì)赓M(fèi)" thumb="../../static/img/ranqi.png" thumbSize="lg" link :rightText="fees.ranqi>=0 ? '' : `待繳金額：￥${Math.abs(fees.ranqi)}`" to="/pages/feePay/feePay?type=3"/><uni-list-item title="物業(yè)費(fèi)" thumb="../../static/img/wuye.png" thumbSize="lg" link :rightText="fees.wuye>=0 ? '' : `待繳金額：￥${Math.abs(fees.wuye)}`" to="/pages/feePay/feePay?type=4"/><uni-list-item title="停車費(fèi)" thumb="../../static/img/tingche.png" thumbSize="lg" link :rightText="fees.tingche>=0 ? '' : `待繳金額：￥${Math.abs(fees.tingche)}`" to="/pages/feePay/feePay?type=5"/><uni-list-item title="寬帶費(fèi)" thumb="../../static/img/kuandai.png" thumbSize="lg" link :rightText="fees.kuandai>=0 ? '' : `待繳金額：￥${Math.abs(fees.kuandai)}`" to="/pages/feePay/feePay?type=6"/>
</uni-list>

<script>import { feeList } from '@/service'export default {data() {return {fees: {},	//待繳費(fèi)用}},//生命周期方法 —— 頁面掛載完成時(shí)async onLoad(){//異步請求當(dāng)前登錄用戶的待繳費(fèi)用let data = await feeList()this.fees = data},//計(jì)算屬性computed: {amount(){let sum = 0;sum = this.fees.shui<0 ? sum+this.fees.shui : sumsum = this.fees.dian<0 ? sum+this.fees.dian : sumsum = this.fees.ranqi<0 ? sum+this.fees.ranqi : sumsum = this.fees.tingche<0 ? sum+this.fees.tingche : sumsum = this.fees.wuye<0 ? sum+this.fees.wuye : sumsum = this.fees.kuandai<0 ? sum+this.fees.kuandai : sum//先求數(shù)字的絕對值，再保留指定長度的小數(shù)位return Math.abs(sum).toFixed(2)}},methods: {//處理“導(dǎo)航條左側(cè)按鈕”被單擊事件back(){uni.navigateBack()},//處理“導(dǎo)航條右側(cè)按鈕”被單擊事件jump(url){uni.navigateTo({ url })},}}
</script>

/*** API-3.1、當(dāng)前登錄用戶各項(xiàng)待繳費(fèi)金額匯總* 接口地址：fee/list* 請求方式：GET* 請求頭部：token - 用戶登錄后保存在客戶端的身份憑證*/
export let feeList = async ( )=>{//1.準(zhǔn)備請求URLlet url = base + 'fee/list'//2.顯示“加載中”提示框	uni.showLoading({title: '繳費(fèi)數(shù)據(jù)讀取中'})//3.發(fā)起異步請求消息let [err, res] = await uni.request({url,		//請求地址header: {	//請求頭部-token(客戶端身份令牌)token: uni.getStorageSync('userToken')}})//4.隱藏“加載中”提示框uni.hideLoading()//5.返回響應(yīng)消息主體return res.data
}