山西省网站备案要多久,电子商务网站设计说明,字体设计欣赏网站,东莞网站建设 少儿托管1.项目说明
背景#xff1a;
着网络技术的不断发展#xff0c;人们的消费观念在不断变化#xff0c;消费手段也变得错综复杂。很多人都在困扰#xff0c;钱到底花在了那里。
目的#xff1a;
为了解决很多人的钱花在哪了的困扰#xff0c;我们组决定制作一个消费账单…1.项目说明
背景
着网络技术的不断发展人们的消费观念在不断变化消费手段也变得错综复杂。很多人都在困扰钱到底花在了那里。
目的
为了解决很多人的钱花在哪了的困扰我们组决定制作一个消费账单记录小程序用户可以随时随地的记录自己的所有花费情况并以列表的形式进行展示同时用户可以查看自己的余额以便对自己的以后的消费计划进行制定。
2.详细功能
2.1首页
1消费支出直接显示今日支出 红色字体显示本月总支出 明显字体显示本年总支出
2今日账单详细列出今日花费情况包括交通费用、网购、娱乐、房租、饮食、其他基本包含生活的全部消费内容
3额外功能我又花钱了记账功能 查看历史账单
2.2我又花钱了
1记账功能随时记录生活中的各类消费信息
2可记账类别交通费用、网购、娱乐、房租、饮食、其他
3可记账内容在对应记账类别中可记录消费的日期及金额最后可自动生成备注信息
2.3查看历史账单
1历史账单该功能详细记录了记录开始时间、结束时间记录日期、花费金额、主要用途等信息以列表的形式进行展示方便使用者查看以往消费记录。
2.4我的
1个人中心该功能主要记录使用者的收入及可用余额直观的展现现有资产有助于使用者以后的消费计划的制定
3.小组工作安排
同学1主要负责首页及我的两个页面的制作同时负责页面图案的编辑处理
同学2主要负责“我又花钱了” 及“查看历史账单” 两个页面的制作
同学3负责每个页面图案的提供、编辑、处理、美化
同学4主要负责优化组合其他人的工作成果并在随时提供技术支持
4.成果展示 5.PPT效果展示及代码目录结构 6.核心代码
index页面
wxml文件 !--index.wxml-- view classcontent-view view classui-flex ui-p20 text今日/text text classtext-expend总支出/text text classtext-today-expend-num{{todayExpend}}/text /view view classui-flex ui-p20 text本月/text text classtext-expend总支出/text text classtext-month-expend-num{{monthExpend}}/text /view view classui-flex ui-p20 text本年/text text classtext-expend总支出/text text classtext-year-expend-num{{yearExpend}}/text /view view class ui-p20 button classblue-button hover-classblue-button-p bindtaprecodeExpend我又花钱了/button /view view class ui-p20 button classblue-button hover-classblue-button-p bindtaphistoryBill查看历史账单/button /view view classtoday-bill 今日账单 /view view wx:for{{todayRecord}} catchlongtaponTodayBillItemClick catchlongtapononTodayBillLongItemClick data-index{{index}} view classline/view view classui-flex ui-p20 image classspend-way-icon src{{item.spendWayImg}}/image text classitem-remarks{{item.remarks}}/text text{{item.spendMoney}}/text /view /view /view
js文件
//index.js //获取应用实例 var util require(../../utils/util.js) var app getApp() Page({ data: { todayExpend: 0, monthExpend: 0, yearExpend: 0, todayRecord:[], }, //事件处理函数 recodeExpend: function () { wx.navigateTo({ url: ../../pages/record-expend/record-expend, }) }, historyBill: function () { wx.navigateTo({ url: ../../pages/history-bill/history-bill, }) }, //今日账单item点击 onTodayBillItemClick:function(e){ let index e.currentTarget.dataset.index; }, //今日账单item长按 ononTodayBillLongItemClick:function(e){
}, onLoad: function () { }, onShow: function () { let bill; const todayDate util.formatTime(new Date(), yyyy-MM-dd); try { bill wx.getStorageSync(Bill); } catch (e) { } if (bill ! ) { let todayMoney 0; let monthMoney 0; let yearMoney 0; let todayRecord []; for (let key of bill) { //同一天 if (util.dateIsDifference(key.date, todayDate, d)) { todayMoney key.spendMoney; todayRecord.push(key); }; //同一月 if (util.dateIsDifference(key.date, todayDate, n)) { monthMoney key.spendMoney; }; //同一月 if (util.dateIsDifference(key.date, todayDate, y)) { yearMoney key.spendMoney; }; } this.setData({ todayExpend: todayMoney, monthExpend: monthMoney, yearExpend: yearMoney, todayRecord:todayRecord, }); }; }, onShareAppMessage: function () { return { title: 账单, path: pages/index/index, success: function (res) { // 分享成功 }, fail: function (res) { // 分享失败 } } },
}) json文件
{ backgroundTextStyle:light, navigationBarBackgroundColor: #10AEFF, navigationBarTitleText: 首页, navigationBarTextStyle:black }
wxss文件
page{ background-color: #ddd; } .content-view{ background-color: white; } .text-expend{ color: grey; font-size: 28rpx; text-align: center; } .text-today-expend-num{ color: #10AEFF; font-size: 34rpx; text-align: center; } .text-month-expend-num{ color: #e64340; font-size: 34rpx; text-align: center; } .text-year-expend-num{ color: goldenrod; font-size: 34rpx; text-align: center; } .today-bill{ color: #10AEFF; } .spend-way-icon{ width: 64rpx; height: 64rpx; } .item-remarks{ flex: 1; text-overflow: ellipsis; padding-left: 10rpx; }
