网站运营谁都可以做吗,响应式品牌网站设计,仿网站 涉及侵权吗,网站规划建设与管理维护论文文章目录 1. 6.小程序页面布局 - 账单明细1.1. 竞品1.2. 布局分析1.3. 布局demo1.4. 页面实现-头部1.5. 账单明细1.5.1. 账单明细-竞品分析1.5.2. 账单明细-实现1.5.2.1. 账单明细-实现-mock数据1.5.2.2. 每日收支数据的聚合整理1.5.2.3. 页面scroll-view 1.6. TODO 1. 6.小程序… 文章目录 1. 6.小程序页面布局 - 账单明细1.1. 竞品1.2. 布局分析1.3. 布局demo1.4. 页面实现-头部1.5. 账单明细1.5.1. 账单明细-竞品分析1.5.2. 账单明细-实现1.5.2.1. 账单明细-实现-mock数据1.5.2.2. 每日收支数据的聚合整理1.5.2.3. 页面scroll-view 1.6. TODO 1. 6.小程序页面布局 - 账单明细
1.1. 竞品
之前已经做好了《5.小程序页面布局 - 记账页面》
现在开始进行编写账单明细的页面还是一样的套路我们看看竞品大概是什么样 1.2. 布局分析 竞品主要是3大块 头部显式时间、收入、支出总览 快捷入口一些按钮账单、预算、资产管家等 账单明细按天当月倒序排列如果一天有多笔支出要计算一下当日汇总。参考上图的“4月27日”效果 我们现在要做什么 头部需要一样显式时间增加一个“切换账簿”来支持切换到其他的账簿合作记账 快捷入口暂时取消待功能需求稳定后增加 账单明细参考竞品
1.3. 布局demo
直接看结果先 整体还是一目了然的已经把各个区域加了边框。
尽量使用了简单的布局方式没有加样式因为我们主要使用vView组件来做实现。
布局主要使用的就是flex布局。
上图的源码
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle* {margin: 0;}body {width: 390px;}/* 头部区域样式 */.header {background-color: aliceblue;height: 150px;display: flex;align-items: center;}/* 头部的4个块flex布局平分 */.header .header-date,.header .header-income,.header .header-out,.header .header-switch {height: 100px;border: 1px solid black;/* 每个块都占总宽度的25% */width: 25%;/* 开启flex布局 */display: flex;/* 主轴是y轴这样可以让里面的内容上下排布 */flex-direction: column;/* 主轴y轴居中对齐 */justify-content: center;/* 侧轴x轴居中对齐 */align-items: center;/* 每个块都是100%宽度不然就是靠内容撑开的宽度 */width: 100%;}/* 列表区域布局 */.content {background-color: antiquewhite;height: 644px;}/* 当日小计 */.content .content-day-header {height: 28px;display: flex;justify-content: space-between;margin: 0 20px;background-color: #808080;align-items: center;}.content .content-day-list {/* display: flex; */}/* 支出明细 */.content .content-day-list .content-day-list-line {width: 90%;height: 43px;display: flex;justify-content: space-between;margin: 0 auto;}/* 支出明细 - 左边的 图名目 */.line-left {width: 100px;display: flex;border: 1px solid black;align-items: center;}.line-left img {width: 24px;height: 24px;}/* 支出明细 - 右边的 金额 */.line-right {width: 100px;display: flex;justify-content: flex-end;border: 1px solid black;align-items: center;}/style
/headbodydiv classheaderdiv classheader-datediv2024/divdiv05月 /div/divdiv classheader-incomediv收入/divdiv9999.99元/div/divdiv classheader-outdiv支出/divdiv8888.88元/div/divdiv classheader-switchdiv切换账单/div/div/divdiv classcontent!-- 第一天 --div classcontent-day-headerdiv04月27日 星期六/divdiv-299/div/divdiv classcontent-day-listdiv classcontent-day-list-linediv classline-leftdiv classline-imgimg src礼物.png //divdiv classline-text餐饮/div/divdiv classline-rightdiv classline-money-200/div/div/divdiv classcontent-day-list-linediv classline-leftdiv classline-imgimg src交通.png //divdiv classline-text交通/div/divdiv classline-rightdiv classline-money-99/div/div/div/div!-- 第二天 --div classcontent-day-headerdiv04月27日 星期六/divdiv-299/div/divdiv classcontent-day-listdiv classcontent-day-list-linediv classline-leftdiv classline-imgimg src礼物.png //divdiv classline-text餐饮/div/divdiv classline-rightdiv classline-money-200/div/div/divdiv classcontent-day-list-linediv classline-leftdiv classline-imgimg src交通.png //divdiv classline-text交通/div/divdiv classline-rightdiv classline-money-99/div/div/div/div/div/body/html1.4. 页面实现-头部 实现的效果 共4个块均分。 背景是渐变色。 布局代码
div classheaderdiv classheader-datediv classline1-text2024/divdiv classline2-text05span classline2-text-small月/spanu-icon stylemargin-left: 5px; namearrow-down-fill/u-icon/div/divdiv classheader-incomediv classline1-text收入/divdiv classline2-text99999.99span classline2-text-small元/span/div/divdiv classheader-outdiv classline1-text支出/divdiv classline2-text88888.88span classline2-text-small元/span/div/divdiv classheader-switchdivimage stylewidth: 60rpx; height: 60rpx; src../../static/账簿.png/image/divdiv stylefont-size: 13px;切换账簿/div/div/divcss代码 /* 头部区域样式 */.header {/* background-color: aliceblue; */background-image: linear-gradient(rgba(249, 219, 97, 1), rgba(250, 230, 200, 1));height: 120px;display: flex;align-items: center;}.header .line1-text {color: #808080; font-size: 12px;}.header .line2-text {color: #000000; font-size: 15px;margin-top: 15rpx;}.header .line2-text-small {font-size: 12px; color: #808080;}/* 头部的4个块flex布局平分 */.header .header-date,.header .header-income,.header .header-out,.header .header-switch {height: 100px;/* border: 1px solid black; *//* 每个块都占总宽度的25% */width: 25%;/* 开启flex布局 */display: flex;/* 主轴是y轴这样可以让里面的内容上下排布 */flex-direction: column;/* 主轴y轴居中对齐 */justify-content: center;/* 侧轴x轴居中对齐 */align-items: center;/* 每个块都是100%宽度不然就是靠内容撑开的宽度 */width: 100%;}1.5. 账单明细
// 计算scroll-view高度
let _this this;
uni.getSystemInfo({success(res) {_this.phone_height res.windowHeightlet v uni.createSelectorQuery().select(.h);v.boundingClientRect(data {_this.scroll_view_height _this.phone_height - data.height;}).exec();}
})1.5.1. 账单明细-竞品分析
这个跟我们借鉴的布局方式差不多大概长这个样 分析
账单明细部分是一个大的块包含了按天倒序展示的内容如果当天有多笔数据要做一个汇总汇总单独占一行显式时间、星期几、当日支出小计、当日收入小计
1.5.2. 账单明细-实现
我们的实现
先使用mock数据来做页面要将每日的数据先进行计算得到按自然天倒序排序的数组当天数据还要包含一个数组这个数组里的数据才是每天的收支记录明细。我们使用uniapp的scroll-view来做大容器。这样可以做下拉刷新到上月数据。触底加载下一个月数据。
看看实现的结果再分步实现
1.5.2.1. 账单明细-实现-mock数据
这个是好理解的我们为了能够和后面的api部分解绑就不在vue文件中写死数据而是用一个外部导入的js方法来承载mock数据。
在/js目录创建 api_bill_crud.js文件录入以下mock内容意思是加载某用于某月收支明细数据
export function getUserMonthBillList(openid, month_int) {return new Promise((resolve, reject) {let mockMonthBills [{_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接口异步调用操作变为同步等待减少回调地域问题。
使用时在使用此方法前加async即可。
// 测试数据用以验证页面布局及样式
let result await getUserMonthBillList(1332, 5);
console.log(获取用户x月份账单成功);
this.month_bills result;1.5.2.2. 每日收支数据的聚合整理
按照前面的分析
2. 要将每日的数据先进行计算得到按自然天倒序排序的数组
3. 当天数据还要包含一个数组这个数组里的数据才是每天的收支记录明细。 然后我们已经有了mock数据最好还是也封装一个方法进行收支数据的处理
在/js目录创建 bill_calculate.js文件录入以下内容
/*** param {Object} month_bill_list 某月的所有收支明细数据* return {number} income_month 此月收入合计* return {number} expenditure_month 此月支出合计* return {Array} user_bill_list 按天为item的数组每个item是当天发生的收支明细*/
export function transformBills(month_bill_list) {// 先按照时间进行排序然后将数据按天汇总。let sorted_detail_list Array.from(month_bill_list).sort((a, b) b[date_int] - a[date_int]);// sorted_detail_list sorted_detail_list.filter(item item[月] this.month);let user_bill_list []let income_month 0let expenditure_month 0sorted_detail_list.map(function(this_bill) {let today_summary user_bill_list.find(item item[日] this_bill[日]);if (today_summary undefined) {let expenditure this_bill[收支] 支出 ? Math.abs(this_bill[bill_money]) : 0;let income this_bill[收支] 收入 ? this_bill[bill_money] : 0;expenditure_month this_bill[收支] 支出 ? expenditure_monththis_bill[bill_money]: expenditure_month;income_month this_bill[收支] 收入 ? income_monththis_bill[bill_money]: income_month;today_summary {expenditure: parseFloat(expenditure),income: parseFloat(income),list: [this_bill],time: this_bill.time,week: this_bill.week,full_date: this_bill.date_str,日: this_bill[日]};user_bill_list.push(today_summary); // 后来的放后面} else {// 计算对应日期的消费、收入汇总let expenditure this_bill[收支] 支出 ? today_summary.expenditure Math.abs(this_bill[bill_money]) : today_summary.expenditure;let income this_bill[收支] 收入 ? today_summary.income this_bill[bill_money] :today_summary.income;expenditure_month this_bill[收支] 支出 ? expenditure_monththis_bill[bill_money]: expenditure_month;income_month this_bill[收支] 收入 ? income_monththis_bill[bill_money]: income_month;today_summary.expenditure expenditure;today_summary.income income;today_summary.list [this_bill, ...today_summary.list];}});return [income_month.toFixed(2), expenditure_month.toFixed(2), user_bill_list]
}1.5.2.3. 页面scroll-view
为什么使用scroll-view前面已经提到
4. 我们使用uniapp的scroll-view来做大容器。这样可以做下拉刷新到上月数据。触底加载下一个月数据。实现起来主要就是页面、js、css 页面 view v-iftransfromedBills.length 0scroll-view scroll-ytrue :style{height:scroll_view_heightpx} refresher-enabledtrue:refresher-triggeredrefresherTriggered refresherrefreshrefresher()scrolltolowerloadMoreviewview v-for(item, index) in transfromedBills :keyindexview classu-flex list-box day_summaryview classu-m-r-10 u-flex-1view classheader-text {{item.time}} {{item.week}}/view/viewview classu-m-r-10 u-flex-1view classheader-text{{income_str}} {{item.income}}/view/viewview classu-m-r-10 u-flex-1view classheader-text{{expenditure_str}} {{item.expenditure}}/view/view/viewview classlist-box-children v-for(item1, index1) in item.list :keyindex1clicktoDetail(item1)view classu-fleximage sloticon classbox-icon :srcitem1.icon mode :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 {useStore} from vuex;import {getUserMonthBillList} from /js/api_bill_crud.js;import {transformBills} from /js/bill_calculate.js;export default {data() {return {current_year: new Date().getFullYear(),current_month: new Date().getMonth() 1,tabbar: [],month_bills: [],transfromedBills: [],income: 0,expenditure: 0,expenditure_str: , // ??lazy_load: true, //?refresherTriggered: false, // 设置当前下拉刷新状态true 表示下拉刷新已经被触发false 表示下拉刷新未被触发scroll_view_height: 0,income_str: ,}},methods: {refresher() {console.log(下拉刷新);if (this._refresherTriggered) {return;}// 去加载上一个月的数据if (this.current_month 1) {this.current_month 12;this.current_year this.current_year - 1;}else {this.current_month this.current_month - 1;}console.log(要去加载上个月的年{}月{}, this.current_year, this.current_month);var that this;if (!this.refresherTriggered) {//下拉刷新先变true再变false才能关闭this.refresherTriggered true;//关掉圈圈需要先执行完刷新操作setTimeout(() {that.refresherTriggered false;}, 1000);}},loadMore() {console.log(加载更多loadMore);// 去加载下一个月的数据if (this.current_month 12) {this.current_month 1;this.current_year this.current_year 1;}else {this.current_month this.current_month 1;}console.log(要去加载下个月的年{}月{}, this.current_year, this.current_month);}},async onShow() {let [income, expenditure, transfromedBills] transformBills(this.month_bills);this.transfromedBills transfromedBills;this.income income;this.expenditure expenditure;console.log(账单计算成功);// console.log(income);// console.log(expenditure);// console.log(transfromedBills);},async onLoad() {const store useStore(); //获取store对象/*** 示例中为每个tabbar页面都写了一遍tabbar变量您可以将tabbar数组写入到vuex中这样可以全局引用*/this.tabbar store.getters.getTabbar;// scroll-view高度暂不计算。this.scroll_view_height 600// 测试数据用以验证页面布局及样式let result await getUserMonthBillList(1332, 5);console.log(获取用户x月份账单成功);this.month_bills result;let [income, expenditure, transfromedBills] transformBills(this.month_bills);this.transfromedBills transfromedBills;this.income income;this.expenditure expenditure;console.log(账单计算成功);}}
/scriptcss style langscss.u-flex {display: flex;flex-direction: row;align-items: center;}.day_summary {background-color: #f7f7f7;}.list-box {padding: 18rpx 18rpx 18rpx 40rpx;}.list-box-children {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row;flex-direction: row;-webkit-box-align: center;-webkit-align-items: center;align-items: center;position: relative;box-sizing: border-box;width: 100%;padding: 26rpx 32rpx;font-size: 28rpx;line-height: 50rpx;color: #606266;background-color: #fff;text-align: left;.box-icon {width: 50rpx;height: 50rpx;margin-right: 35rpx;}.box-left {width: auto;font-weight: 500;font-size: 28rpx;}.box-right {overflow: hidden;text-align: right;vertical-align: middle;color: #909399;font-size: 26rpx;}.box-desc {font-weight: 500;width: 300rpx;margin-left: 50rpx;overflow: hidden;text-overflow: ellipsis;-ms-text-overflow: ellipsis;display: -webkit-box;line-clamp: 1;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}}.u-m-r-10 {margin-right: 10rpx !important;}.u-flex-1 {flex: 1;}.header-text {font-size: 25rpx;color: #7a7a7a;}
/style通过下拉刷新和触底加载更多页面能正确的处理调用后面通过api再完善真是数据的处理
1.6. TODO
内容较多下一节再处理
点击更新或删除明细账单头部数据的联动不再是固定数据月份可以点击下拉箭头自行快速选择每日的收支汇总布局要再优化一下。
