6月26日日志-消费记录界面实现

6月26日日志-消费记录和支出报告界面实现

1.界面需求介绍

1. 展示个人消费历史记录，包括消费时间，消费类别，消费钱数等个人信息。
2. 实现用户个人的收支记账功能，除校园卡记录的消费信息之外，用户个人可以在消费记录界面增添收入和支出记录，使得我们的消费记录更加细致，灵活，更加精准，并具有良好的用户体验性。
3. 实现个人收支分析报告，能对用户一学期的收入支出总情况进行展示分析，重点关注学生在食堂中的消费情况，处于全年级什么水平。有助于我们提出针对性的建议。

2.界面设计

共包含三个前端界面设计，一个是消费记录展示界面，采用滑动列表实现。为列表中的每一次记录项设置固定的样式。

2.1 消费列表界面

列表界面的部分css样式代码。

.navi {
   
  width: 100%;
}

.add-button {
   
  float: right;
}

.list {
   
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.item {
   
  display: flex;
  flex-direction: row;
  text-align: left;
  width: 100%;
}

.text {
   
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
}

.stamp {
   
  font-size: 30rpx;
  color: #7acfa6;
  margin: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.title {
   
  margin: 20rpx;
  margin-bottom: 0rpx;
  font-size: 40rpx;
}

实现的列表界面如下，记录了消费的类别，金额，和时间。同时提供添加收支按钮，和显示报告按钮。


每一条数据如上图所示格式，包括消费类别，支出收入类别，金额，时间
通过后端开发队友留下的数据库接口，导入学生的消费数据，传入学生的消费列表。

    wx.getStorage({
   
      key: 'db',
      success: function (res) {
   
        console.log(that.data.items),
        that.data.items = (res.data).concat(that.data.items); 
        that.setData({
   
          'items': that.data.items
        });
        console.log(items)
      }
      
    })
  }

2.2 个人收支记账界面

为方便学生在收支记录上能自由地添加账目，于是进行了相应增加收支界面地设计。通过github开源项目查找类似地界面设计并进行模仿实现。
能自由设置消费标题，类型，金额，以及消费时间等信息。

主要界面实现借助radio-group 和flex布局实现。

<view class="page">
  <view class="section">
    <view class="section-title">标题</view>
    <input bindinput="bindTitleInput" placeholder="内容" value="{
   {title}}" />
  </view>
  <view class="section">
    <view class="section-title">类型</view>
    <radio-group class="radio-group" bindchange="radioChange">
      <label class="radio">
        <radio class="radio" value="+" checked="true" />收入
      </label>
      <label class="radio">
        <radio class="radio" value="-" />支出
      </label>
    </radio-group>
  </view>
  <view class="section">
    <view class="section-title">金额</view>
    <input bindinput=