记账本——项目原型系统进展及小组分工

一、项目原型系统进展

1.1项目前端界面设计调整

起初应甲方要求设计的前端界面为对话聊天一体式，用户只能表达自己收入或支出多少钱，再由小程序做出相应反馈；所以我们决定修改为记账聊天分离式，在原有记账的功能基础上引入智能对话机器人。

1.2当前进度

目前已完成明细、聊天、记账、以及我的这四个主要界面的前端框架搭建和部分后端的实现。采用tabbar设置底部导航栏，使上述四个主要界面一直显示在底部导航栏。

明细界面支持记账搜索，既可以按类别搜索又可以按日期搜索；可以显示当天的详细收支情况；

聊天界面采用图灵机器人，可以实现与用户聊天这一功能。

记账界面明显的展示各种常用类别，可以选择类别、选择收支、输入金额以及增加类别或者删除类别。

我的界面最上端显示用户个人微信信息，并加入我的信息、意见反馈、和关于我们三个模块。

1.3进度展示

• 明细界面：

• 聊天界面：

• 记账界面：

• 我的界面：

1.4后期安排

后期的主要任务是完善后端，其次就是继续美化各个界面，给用户更好的用户体验。

二、部分代码展示

2.1.项目配置文件app.json

{
  "pages": [
    "pages/chat/chat",
    "pages/aboutus/aboutus",
    "pages/add/add",
    "pages/setting/setting",
    "pages/details/details",
    "pages/user-center/user-center"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#8FAEFC",
    "navigationBarTitleText": "记账本",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "selectedColor": "#8FAEFC",
    "color": "#8a8a8a",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/details/details",
        "text": "明细",
        "iconPath": "assets/images/details.png",
        "selectedIconPath": "assets/images/details-active.png"
      },
      {
        "pagePath": "pages/chat/chat",
        "text": "聊天",
        "iconPath": "assets/images/chat.png",
        "selectedIconPath": "assets/images/chat-active.png"
      },
      {
        "pagePath": "pages/add/add",
        "text": "记账",
        "iconPath": "assets/images/add.png",
        "selectedIconPath": "assets/images/add-active.png"
      },
      {
        "pagePath": "pages/user-center/user-center",
        "text": "我的",
        "iconPath": "assets/images/main.png",
        "selectedIconPath": "assets/images/main-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

 2.2记账页add.wxml

<!--pages/add/add.wxml-->
<view class="add-container">
    <view class="remark">
        <text class="key-words">{{type}}</text>
        <input type="text" class="add-input" placeholder="点击填写备注..." bindinput="searchInput"/>
        <view class="account-wrapper">
            <text>金额：</text>
            <input type="digit" class="account" placeholder="0.00" bindinput="accountInput"
                   value="{{account}}" maxlength="8"/>
        </view>
    </view>
    <view class="done-type">
        <view class="type">
            <view class="{{income ? '' : 'active'}}" catchtap="chooseSpending">支 出</view>
            <view class="{{income ? 'active' : ''}}" catchtap="chooseIncome">收 入</view>
        </view>
        <view class="save">保 存</view>
    </view>
    <scroll-view class="icons" scroll-y="true">
        <snail-icon-group iconsData="{{income ? incomeIcons : spendingIcons}}"
                          chooseIndex="{{income ? chooseIncomeIndex : chooseSpendingIndex}}" bindChooseType="chooseType"></snail-icon-group>
        <view class="set">
            <view class="icon-wrapper" catchtap="settingUp">
                <snail-icon type="shezhi"></snail-icon>
            </view>
        </view>
    </scroll-view>
</view>

三、小组分工

小组成员	任务分工
饶东来	后端功能实现
李春锦、樊子玉	数据库设计、后端功能实现
李传赫、任翔渝	前端模块设计及实现