记事本开发者日记~七

　　这次把源代码给大家呈现出来~~~~

 1 //index.js
 2 
 3 var util = require("../../utils/util.js");
 4 //获取应用实例
 5 var app = getApp();
 6 Page({
 7   data: {
 8     userInfo: {},
 9     buttonLoading: false,
10     accountData: [],
11     accountTotal: 0
12   },
13   onLoad: function () {
14     console.log('onLoad')
15     var that = this;
16 
17     // 获取记录
18     var tempAccountData = wx.getStorageSync("accountData") || [];
19     this.caculateTotal(tempAccountData);
20     this.setData({
21       accountData: tempAccountData
22     });
23 
24   },
25   // 计算总额
26   caculateTotal: function (data) {
27     var tempTotal = 0;
28     for (var x in data) {
29       tempTotal += parseFloat(data[x].amount);
30     }
31     this.setData({
32       accountTotal: tempTotal
33     });
34   },
35   //表单提交
36   formSubmit: function (e) {
37     this.setData({
38       buttonLoading: true
39     });
40 
41     var that = this;
42     setTimeout(function () {
43       var inDetail = e.detail.value.inputdetail;
44       var inAmount = e.detail.value.inputamount;
45       if (inDetail.toString().length <= 0 || inAmount.toString().length <= 0) {
46         console.log("can not empty");
47         that.setData({
48           buttonLoading: false
49         });
50         return false;
51       }
52 
53       //新增记录
54       var tempAccountData = wx.getStorageSync("accountData") || [];
55       tempAccountData.unshift({ detail: inDetail, amount: inAmount });
56       wx.setStorageSync("accountData", tempAccountData);
57       that.caculateTotal(tempAccountData);
58       that.setData({
59         accountData: tempAccountData,
60         buttonLoading: false
61       });
62 
63     }, 1000);
64   },
65   //删除行
66   deleteRow: function (e) {
67     var that = this;
68     var index = e.target.dataset.indexKey;
69     var tempAccountData = wx.getStorageSync("accountData") || [];
70     tempAccountData.splice(index, 1);
71     wx.setStorageSync("accountData", tempAccountData);
72     that.caculateTotal(tempAccountData);
73     that.setData({
74       accountData: tempAccountData,
75     });
76   }
77 })

1 {
2   "usingComponents": {}
3 }

<!--index.wxml-->
<view class="container">

    <form catchsubmit="formSubmit" >
      <view class="account-detail"> 
        <input placeholder="账目详情" name="inputdetail"  type="text" />
      </view>

      <view class="account-amount"> 
        <input placeholder="账目数额" name="inputamount" type="number" />
      </view>

      <view class="add-one">
        <button formType="submit" type="primary" loading="{{buttonLoading}}"> 记一笔 </button>
      </view>
    </form>

    <view  class="account-list-text">
      <text>账单列表:</text>
    </view>

    <view  class="account-list-all-amount">
      <text>合计:{{accountTotal}}</text>
    </view>

    <block wx:for="{{accountData}}" >
      <view class="account-list">
        <view class="account-list-detail">
          {{item.detail}}
        </view>

        <view class="account-list-amount">
          {{item.amount}}
        </view>

        <view class="account-list-del">
            <button size="mini"  type="warn"  data-index-key="{{index}}"  bindtap="deleteRow" >删除</button>
        </view>

        </view>
    </block>



</view>

 1 .account-detail{
 2     height: 100rpx;
 3     padding: 0 30rpx;
 4 }
 5 
 6 .account-amount{
 7     padding: 0 30rpx;
 8 }
 9 
10 .add-one{
11     margin-top: 20rpx;
12 }
13 
14 .account-list-text{
15     color:gray;
16     margin:30rpx 0 0 30rpx;
17 }
18 
19 .account-list-all-amount{
20     color:gray;
21     align-self: flex-end;
22     padding-right: 25rpx;
23 }
24 
25 
26 .account-list{
27     color:gray;
28     margin:30rpx 0 0 30rpx;
29     display: flex;
30     flex-direction: row;
31     background-color:wheat;
32     line-height: 70rpx;
33 }
34 
35 
36 .account-list-detail{
37     flex:1;
38 }
39 
40 
41 .account-list-amount{
42      100rpx;
43 }

 1 //logs.js
 2 const util = require('../../utils/util.js')
 3 
 4 Page({
 5   data: {
 6     logs: []
 7   },
 8   onLoad: function () {
 9     this.setData({
10       logs: (wx.getStorageSync('logs') || []).map(log => {
11         return util.formatTime(new Date(log))
12       })
13     })
14   }
15 })

1 {
2   "navigationBarTitleText": "查看启动日志",
3   "usingComponents": {}
4 }

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

1 .log-list {
2   display: flex;
3   flex-direction: column;
4   padding: 40rpx;
5 }
6 .log-item {
7   margin: 10rpx;
8 }