import DataRepository from 'DataRepository'; import {promiseHandle} from '../utils/util'; /** * 数据业务类 */ class DataSerivce { constructor(props) { props = props || {}; this.id = props['_id'] || 0; this.content = props['content'] || ''; this.date = props['date'] || ''; this.month = props['month'] || ''; this.year = props['year'] || ''; this.level = props['level'] || ''; this.title = props['title'] || ''; } /** * 保存当前对象数据 */ save() { if (this._checkProps()) { return DataRepository.addData({ title: this.title, content: this.content, year: this.year, month: this.month, date: this.date, level: this.level, addDate: new Date().getTime() }); } } /** * 获取所有事项数据 */ static findAll() { return DataRepository.findAllData() .then(data => data.data ? data.data : []); } /** * 通过id获取事项 */ static findById(id) { return DataRepository.findBy(item => item['_id'] == id) .then(items => (items && items.length > 0) ? items[0] : null); } /** * 根据id删除事项数据 */ delete() { return DataRepository.removeData(this.id); } /** * 批量删除数据 * @param {Array} ids 事项Id集合 */ static deleteRange(...ids) { return DataRepository.removeRange(ids); } /** * 根据日期查找所有符合条件的事项记录 * @param {Date} date 日期对象 * @returns {Array} 事项集合 */ static findByDate(date) { if (!date) return []; return DataRepository.findBy(item => { return item && item['date'] == date.getDate() && item['month'] == date.getMonth() && item['year'] == date.getFullYear(); }).then(data => data); } _checkProps() { return this.title && this.level && this.date && this.year && this.month; } } module.exports = DataSerivce;
本人的对数组的操作不是很熟悉，代码看起来有点臃肿，仅供参考。
好了，进入正题，每天的事项可以用一个列表来展示，列表方在日历下边，具体结构：
<view> <view wx:if="{{itemList.length > 0}}"> <text>事项信息</text> </view> <block wx:for="{{itemList}}" wx:key="id"> <view bindtap="listItemClickEvent" data-id="{{item._id}}" bindlongtap="listItemLongTapEvent"> <view> <view wx:if="{{isEditMode}}"> <icon type="circle" wx:if="{{!item.checked}}" color="#FFF" size="20" /> <icon type="success" wx:else color="#E14848" size="20" /> </view> <image wx:if="{{item.level == 1}}" src="" /> <image wx:if="{{item.level == 2}}" src="" /> <image wx:if="{{item.level == 3}}" src="" /> <view> <text>{{item.title}}</text> </view> </view> </view> </block> <view wx:if="{{!itemList || itemList.length <= 0}}"> <text>当前日期没有事项记录</text> </view> </view>
列表的数据加载全靠这个方法loadItemListData：
/** * 加载事项列表数据 */ function loadItemListData() { const {year, month, date} = this.data.data.selected; let _this = this; DataService.findByDate(new Date(Date.parse([year, month, date].join('-')))).then((data) => { _this.setData({ itemList: data }); }); }
DataService.findByDate这个方法通过传入一个日期来获取指定日期的事项。成功获取数据之后，在模板中遍历数据，根据level属性来显示不同颜色的图标，让事项等级一目了然。
既然有数据列表，数据从哪来？当然是需要一个数据的添加面板。