几个重要功能已经完成，还差界面的统一，说实话，在“history-bill”里还是有一个无法连接数据库的重大缺陷，历史数据无法传到界面，找了很多资料，都没有找到关于数据库的讲解，所以，我把这个问题放到最后解决，要赶紧做完小程序，然后去弄安卓；今天主要弄完了“今日账单”的显示，又重新更新了程序内容的大致布局。其实“今日账单”的部分是最难弄的，以为他需要“对外发送网络请求”，而这一部分恰恰是我非常不熟悉的，用到各种参数的传递，但是由于老师给提供了这部分的制作模板，勉勉强强算是理解+拼凑完了吧。
1 <!--index.wxml-->
2 <view class="btn1">
3 <text class="text-type">今日</text>
4 <text class="text-expend">总支出：</text>
5 <text class="text-today-expend-num">￥{{todayExpend}}</text>
6 </view>
7 <view class="btn1">
8 <text class="text-type">本月</text>
9 <text class="text-expend">总支出：</text>
10 <text class="text-month-expend-num">￥{{monthExpend}}</text>
11 </view>
12 <view class="btn1">
13 <text class="text-type">本年</text>
14 <text class="text-expend">总支出：</text>
15 <text class="text-year-expend-num">￥{{yearExpend}}</text>
16 </view>
17 <view class="btn">
18 <text class="btn-text">我收入啦!
19 </text>
20 <input bindinput="bindKeyInput" placeholder="输入金额" />
21 </view>
22 <view >
23 <button class="blue-button ui-mt20" hover-class="blue-button-p" bindtap="goRecord_expendTap">去记录我的消费!</button>
24 </view>
25
26 <view class="btn1">
27 <text class="text-type">今日账单</text>
28 <image class="money-icon" src="../../pages/img/food_d.png"></image>
29 </view>
30
31 <view wx:for="{{todayRecord}}" catchlongtap="onTodayBillItemClick" catchlongtap="ononTodayBillLongItemClick" data-index="{{index}}">
32 <view class="line"></view>
33 <view class="ui-flex ui-p20">
34 <image class="spend-way-icon" src="{{item.spendWayImg}}"></image>
35 <text class="item-remarks">{{item.remarks}}</text>
36 <text>{{item.spendMoney}}</text>
37 </view>
38 </view>
1 //index.js
2 //获取应用实例
3 var util = require('../../utils/util.js')
4 var app = getApp()
5 Page({
6 data: {
7 todayExpend: "0",
8 monthExpend: "0",
9 yearExpend: "0",
10 todayRecord: [],
11 },
12 goRecord_expendTap:function(event){
13 wx.navigateTo({
14 url: '../record-expend/record-expend'
15 })
16 },
17 //今日账单item点击
18 onTodayBillItemClick: function (e) {
19 let index = e.currentTarget.dataset.index;
20
21 },
22 //今日账单item长按
23 ononTodayBillLongItemClick: function (e) {
24
25 },
26
27 onLoad: function () {
28
29 },
30 onShow: function () {
31 let bill;
32 const todayDate = util.formatTime(new Date(), "yyyy-MM-dd");
33 try {
34 bill = wx.getStorageSync('Bill');
35 } catch (e) {
36 }
37 if (bill != "") {
38 let todayMoney = 0;
39 let monthMoney = 0;
40 let yearMoney = 0;
41 let todayRecord = [];
42 for (let key of bill) {
43 //同一天
44 if (util.dateIsDifference(key.date, todayDate, "d")) {
45 todayMoney += key.spendMoney;
46 todayRecord.push(key);
47 };
48 //同一月
49 if (util.dateIsDifference(key.date, todayDate, "n")) {
50 monthMoney += key.spendMoney;
51 };
52 //同一月
53 if (util.dateIsDifference(key.date, todayDate, "y")) {
54 yearMoney += key.spendMoney;
55 };
56 }
57 this.setData({
58 todayExpend: todayMoney,
59 monthExpend: monthMoney,
60 yearExpend: yearMoney,
61 todayRecord: todayRecord,
62 });
63 };
64
65 },
66
67 onShareAppMessage: function () {
68 return {
69 title: '账单',
70 path: 'pages/index/index',
71 success: function (res) {
72 // 分享成功
73 },
74 fail: function (res) {
75 // 分享失败
76 }
77 }
78 }
79
80 })
今天记账本的整体风格确定了下来
