日志27-图书馆界面

日志6月27日-图书馆界面

图书馆打卡记录界面功能需求： 展示图书馆打卡记录，并在日历上显示。

图书馆预约界面功能需求 实现预约

1.项目实现

1.1 图书馆打卡记录界面

先上效果图，比较简洁； 界面分为两部分，上端部分调用极点日历插件功能，可直观显示打卡日期。 下端部分实现一个简单列表显示具体的打卡日期。主要借助到的接口为极点日历插件，利用插件来实现小程序的打卡记录功能。将选定的日期标注为指定的颜色。 同时由于采用的数据时间从2014年开始，将默认时间节点改为2014年一月 但存在一个瑕疵，在于打卡记录只能记录三个月的数据，也就是当前月，前一个月，后一个月。

日历布局wxss关键代码 在日历上显示打卡记录，记录数据为一个color列表，month 取值为current，pre，next三个数据，记录从默认年月份为current月份。剩下的数据为日期，颜色。 在wxml界面里进行日历布局，对color列表中的数据日期进行标记。关键代码如下。

<calendar calendar-style="calendar" year = "2014" month = "01" header-style="calendar-header" board-style="calendar-board" days-color="{{color}}" weeks-type="cn" binddayClick="dayClick" />

将数据库里具体的数据导入列表中： js中关键代码（将学生用户的学习记录导入，包括年月日和具体打卡时间）

onShow: function () { let that = this; var uid = wx.getStorageSync('uid'); wx.cloud.callFunction({ name:"library", data:{ uid : uid }, complete: res => { console.log('callFunction test result: ', res) that.setData({ list: res.result.data }) console.log('title',that.data.list) } }) }

wxml关键代码

<!--pages/Librecord/Librecord.wxml--> <calendar calendar-style="calendar" year = "2014" month = "01" header-style="calendar-header" board-style="calendar-board" days-color="{{color}}" weeks-type="cn" binddayClick="dayClick" /> <block wx:for="{{list}}" wx:key="index"> <!-- 包裹图片+两行文字 id="{{index}}"是给按下了那个item记录--> <view class="view_tupian_wenzi" bindtap="click" id="{{index}}"> <image class="image_1" src="/images/BookTag.png" /> <!-- 包裹两行文字 --> <view class="view_wenzi2"> <text>打开日期：{{item.name}}</text> <text class="text_small">打卡时间：{{item.content}}</text> </view> </view> </block>

1.2 图书馆预约界面

效果如下： 因为没有具体的图书馆数据，所以只模拟了预约界面的展示，如上图所示。 关键实现在点击事件的监听上，来确定学生用户所预约的时间。 js文件中关于监听事件的关键代码

onLoad: function (options) { this.setData({ username: app.globalData.userName }); wx.getLocation({ success: function(res) { app.globalData.latitude=res.latitude; app.globalData.longitude = res.longitude; app.globalData.accuracy = res.accuracy; app.globalData.horizontalAccuracy = res.horizontalAccuracy; app.globalData.verticalAccuracy = res.verticalAccuracy; }, }) },

wxml文件的关键代码

<!--pages/order/order.wxml--> <yycalendar show="false" beginTime="08:00" endTime="06:00" timeGap="60" themeColor="#2da4a8" showOverdue="false" bind:yybindchange="_yybindchange" bind:yybindhide="_yybindhide"/>

2.工作总结

图书馆打卡界面的列表设计比较简单，可以更加优化表项的前端设计，但由于个人在美术设计方面的研究较少，没有进行很好的设计。 图书馆预约界面没有连接相关的数据库接口。在后期如果有精力可以实现。