文章目录

现在开始进行编写账单明细的页面还是一样的套路我们看看竞品大概是什么样

1.2.

账单明细按天当月倒序排列如果一天有多笔支出要计算一下当日汇总。

参考上图的“4月27日”效果

我们现在要做什么

头部需要一样显式时间增加一个“切换账簿”来支持切换到其他的账簿合作记账

快捷入口暂时取消待功能需求稳定后增加

尽量使用了简单的布局方式没有加样式因为我们主要使用vView组件来做实现。

!DOCTYPE

charsetUTF-8titleDocument/titlestyle*

{margin:

classheader-datediv2024/divdiv05月

/div/divdiv

classheader-incomediv收入/divdiv9999.99元/div/divdiv

classheader-outdiv支出/divdiv8888.88元/div/divdiv

classheader-switchdiv切换账单/div/div/divdiv

classcontent!--

classcontent-day-headerdiv04月27日

classline-leftdiv

classline-money-200/div/div/divdiv

classline-leftdiv

classline-money-99/div/div/div/div!--

第二天

classcontent-day-headerdiv04月27日

classline-leftdiv

classline-money-200/div/div/divdiv

classline-leftdiv

classline-money-99/div/div/div/div/div/body/html1.4.

页面实现-头部

classline2-text-small月/spanu-icon

stylemargin-left:

namearrow-down-fill/u-icon/div/divdiv

classline2-text-small元/span/div/divdiv

classheader-outdiv

classline2-text-small元/span/div/divdiv

stylewidth:

src../../static/账簿.png/image/divdiv

stylefont-size:

uni.getSystemInfo({success(res)

{_this.phone_height

uni.createSelectorQuery().select(.h);v.boundingClientRect(data

_this.phone_height

账单明细部分是一个大的块包含了按天倒序展示的内容如果当天有多笔数据要做一个汇总汇总单独占一行显式时间、星期几、当日支出小计、当日收入小计

1.5.2.

先使用mock数据来做页面要将每日的数据先进行计算得到按自然天倒序排序的数组当天数据还要包含一个数组这个数组里的数据才是每天的收支记录明细。

我们使用uniapp的scroll-view来做大容器。

这样可以做下拉刷新到上月数据。

触底加载下一个月数据。

1.5.2.1.

这个是好理解的我们为了能够和后面的api部分解绑就不在vue文件中写死数据而是用一个外部导入的js方法来承载mock数据。

在/js目录创建

api_bill_crud.js文件录入以下mock内容意思是加载某用于某月收支明细数据

export

[{_id:66397bf9f08210b07d2bf163,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:通讯,bill_id:2024-05-07_1715043320337,收支:支出,bill_money:-96,年:2024,月:05,日:07,time:05月07日,week:星期二,bill_type:通讯,desc:手机话费,icon:../../static/type/通讯.png,date_str:20240507,date_int:20240507,full_date_str:2024-05-07,update_time:2024-05-07T00:55:20.336Z,date:2024-05-07T00:55:21.339Z},{_id:6639af53b9fb2360b051521e,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:学习,bill_id:2024-05-07_1715056466394,收支:支出,bill_money:-60,年:2024,月:05,日:07,time:05月07日,week:星期二,bill_type:学习,desc:unicloud云一年,icon:../../static/type/学习.png,date_str:20240507,date_int:20240507,full_date_str:2024-05-07,update_time:2024-05-07T04:34:26.393Z,date:2024-05-07T04:34:27.369Z},{_id:663834278a5c7863b10cca32,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:学习,bill_id:2024-05-06_1714959398647,收支:支出,bill_money:-30,年:2024,月:05,日:06,time:05月06日,week:星期一,bill_type:学习,desc:小程序费用,icon:../../static/type/学习.png,date_str:20240506,date_int:20240506,full_date_str:2024-05-06,date:2024-05-06T01:36:39.593Z},{_id:6638579e3d029c65e9ceedc7,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:购物,bill_id:2024-05-06_1714968477135,收支:支出,bill_money:-40,年:2024,月:05,日:06,time:05月06日,week:星期一,bill_type:购物,desc:口罩,icon:../../static/type/购物.png,date_str:20240506,date_int:20240506,full_date_str:2024-05-06,date:2024-05-06T04:07:58.740Z,update_time:2024-05-06T10:05:54.923Z},{_id:6638afef0d2b315faf286f70,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:孩子,bill_id:2024-05-06_1714991085662,收支:支出,bill_money:-252,年:2024,月:05,日:06,time:05月06日,week:星期一,bill_type:孩子,desc:5月份餐费,icon:../../static/type/孩子.png,date_str:20240506,date_int:20240506,full_date_str:2024-05-06,date:2024-05-06T10:24:47.753Z,update_time:2024-05-06T13:05:54.923Z},{_id:663437948620667bb4eae083,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:餐饮,bill_id:2024-05-03_1714698130514,收支:支出,bill_money:-17.5,年:2024,月:05,日:03,time:05月03日,week:星期五,bill_type:餐饮,desc:早餐,icon:../../static/type/餐饮.png,date_str:20240503,date_int:20240503,full_date_str:2024-05-03,date:2024-05-03T01:02:12.243Z},{_id:663565d7466d41f585ec6ef8,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:电,bill_id:2024-05-03_1714775509594,收支:支出,bill_money:-84,年:2024,月:05,日:03,time:05月03日,week:星期五,bill_type:电,desc:,icon:../../static/type/电.png,date_str:20240503,date_int:20240503,full_date_str:2024-05-03,date:2024-05-03T22:31:51.116Z},{_id:663784b78a5c7863b1fd7faf,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:旅行,bill_id:2024-05-03_1714914486668,收支:支出,bill_money:-200,年:2024,月:05,日:03,time:05月03日,week:星期五,bill_type:旅行,desc:宜兴,icon:../../static/type/旅行.png,date_str:20240503,date_int:20240503,full_date_str:2024-05-03,date:2024-05-05T13:08:06.713Z},{_id:6632f2d1c3b5c96502a740d1,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:餐饮,bill_id:2024-05-02_1714614991720,收支:支出,bill_money:-10,年:2024,月:05,日:02,time:05月02日,week:星期四,bill_type:餐饮,desc:串,icon:../../static/type/餐饮.png,date_str:20240502,date_int:20240502,full_date_str:2024-05-02,date:2024-05-02T01:56:33.398Z},{_id:6632f61b0d2b315faf862e8b,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:零食,bill_id:2024-05-02_1714615833865,收支:支出,bill_money:-7,年:2024,月:05,日:02,time:05月02日,week:星期四,bill_type:零食,desc:蜜雪冰城,icon:../../static/type/零食.png,date_str:20240502,date_int:20240502,full_date_str:2024-05-02,date:2024-05-02T02:10:35.481Z},{_id:6633207a652341ed5e77f151,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:餐饮,bill_id:2024-05-02_1714626680512,收支:支出,bill_money:-127,年:2024,月:05,日:02,time:05月02日,week:星期四,bill_type:餐饮,desc:午餐,icon:../../static/type/餐饮.png,date_str:20240502,date_int:20240502,full_date_str:2024-05-02,date:2024-05-02T05:11:22.131Z},{_id:663380971c90b65e4337d32e,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:零食,bill_id:2024-05-02_1714651286335,收支:支出,bill_money:-30,年:2024,月:05,日:02,time:05月02日,week:星期四,bill_type:零食,desc:,icon:../../static/type/零食.png,date_str:20240502,date_int:20240502,full_date_str:2024-05-02,date:2024-05-02T12:01:27.867Z},{_id:66338ea29755e328304923bf,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:餐饮,bill_id:2024-05-02_1714654880413,收支:支出,bill_money:-8.5,年:2024,月:05,日:02,time:05月02日,week:星期四,bill_type:餐饮,desc:紫燕,icon:../../static/type/餐饮.png,date_str:20240502,date_int:20240502,full_date_str:2024-05-02,date:2024-05-02T13:01:22.254Z},{_id:6632f786eef9cb63bb41c538,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:餐饮,bill_id:2024-05-01_1714616197749,收支:支出,bill_money:-21,年:2024,月:05,日:01,time:05月01日,week:星期三,bill_type:餐饮,desc:猪头肉,icon:../../static/type/餐饮.png,date_str:20240501,date_int:20240501,full_date_str:2024-05-01,date:2024-05-02T02:16:38.660Z},{_id:6632f79aee97ef5896c1151f,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:水果,bill_id:2024-05-01_1714616217844,收支:支出,bill_money:-21,年:2024,月:05,日:01,time:05月01日,week:星期三,bill_type:水果,desc:西瓜,icon:../../static/type/水果.png,date_str:20240501,date_int:20240501,full_date_str:2024-05-01,date:2024-05-02T02:16:58.130Z},{_id:663108b0ee97ef58968d7957,openid:oCIe95E0U1WibyRNJ864n-okoRT0,category:工资,bill_id:2024-04-30_1714489520278,收支:收入,bill_money:7000,年:2024,月:04,日:30,time:04月30日,week:星期二,bill_type:工资,desc:,icon:../../static/type/工资.png,date_str:20240430,date_int:20240430,full_date_str:2024-04-30,date:2024-04-30T15:05:20.363Z}];resolve(mockMonthBills);})

}这里用到了Promise其实主要作用了是为了让后面的api接口异步调用操作变为同步等待减少回调地域问题。

let

当天数据还要包含一个数组这个数组里的数据才是每天的收支记录明细。

然后我们已经有了mock数据最好还是也封装一个方法进行收支数据的处理

在/js目录创建

transformBills(month_bill_list)

{//

Array.from(month_bill_list).sort((a,

b[date_int]

0sorted_detail_list.map(function(this_bill)

{let

Math.abs(this_bill[bill_money])

0;let

expenditure_monththis_bill[bill_money]:

this_bill[收支]

income_monththis_bill[bill_money]:

{expenditure:

parseFloat(expenditure),income:

[this_bill],time:

this_bill[日]};user_bill_list.push(today_summary);

else

Math.abs(this_bill[bill_money])

income

:today_summary.income;expenditure_month

this_bill[收支]

expenditure_monththis_bill[bill_money]:

this_bill[收支]

income_monththis_bill[bill_money]:

income_month;today_summary.expenditure

expenditure;today_summary.income

[this_bill,

...today_summary.list];}});return

user_bill_list]

我们使用uniapp的scroll-view来做大容器。

这样可以做下拉刷新到上月数据。

触底加载下一个月数据。

实现起来主要就是页面、js、css

view

:style{height:scroll_view_heightpx}

refresher-enabledtrue:refresher-triggeredrefresherTriggered

refresherrefreshrefresher()scrolltolowerloadMoreviewview

v-for(item,

classheader-text{{expenditure_str}}

{{item.expenditure}}/view/view/viewview

v-for(item1,

:keyindex1clicktoDetail(item1)view

classu-fleximage

:lazy-loadlazy_load/image/viewview

classbox-left{{item1.bill_type}}/viewview

classbox-desc{{item1.desc}}/viewview

classu-flex-1

box-right{{item1.bill_money}}/view/view/view/view/scroll-view/viewjs

scriptimport

Date().getFullYear(),current_month:

new

{//下拉刷新先变true再变false才能关闭this.refresherTriggered

true;//关掉圈圈需要先执行完刷新操作setTimeout(()

false;},

transformBills(this.month_bills);this.transfromedBills

expenditure;console.log(账单计算成功);//

console.log(transfromedBills);},async

onLoad()

示例中为每个tabbar页面都写了一遍tabbar变量您可以将tabbar数组写入到vuex中这样可以全局引用*/this.tabbar

scroll-view高度暂不计算。

this.scroll_view_height

600//

5);console.log(获取用户x月份账单成功);this.month_bills

result;let

transformBills(this.month_bills);this.transfromedBills

expenditure;console.log(账单计算成功);}}

/scriptcss

horizontal;-webkit-box-direction:

row;flex-direction:

/style通过下拉刷新和触底加载更多页面能正确的处理调用后面通过api再完善真是数据的处理

1.6.

点击更新或删除明细账单头部数据的联动不再是固定数据月份可以点击下拉箭头自行快速选择每日的收支汇总布局要再优化一下。