6月26日日志-消費記錄和支出報告界面實現

1.界面需求介紹

展示個人消費歷史記錄，包括消費時間，消費類別，消費錢數等個人信息。

實現用戶個人的收支記賬功能，除校園卡記錄的消費信息之外，用戶個人可以在消費記錄界面增添收入和支出記錄，使得我們的消費記錄更加細致，靈活，更加精準，并具有良好的用戶體驗性。

實現個人收支分析報告，能對用戶一學期的收入支出總情況進行展示分析，重點關注學生在食堂中的消費情況，處于全年級什么水平。有助于我們提出針對性的建議。

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="bindAccountInput" type="number" value="{{account}}" placeholder="請輸入數字，不加正負號" /></view><view class="section"><picker mode="date" value="{{date}}" start="2016-1-1" end="{{date}}" bindchange="bindDateChange"><view class="section-title">日期：{{date}}</view></picker></view><button class="button" type="primary" bindtap="bindSaveInput">添加</button> </view> <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="hideModal"><view>添加成功</view> </modal> <modal class="modal" hidden="{{alertHidden}}" no-cancel bindconfirm="hideAlertView"><view>{{alertTitle}}</view> </modal>

重點在于這一步的邏輯實現，在于將增添的信息與數據庫中的信息進行整合，并將整合后的數據輸出到列表中顯示。
在添加消費的界面邏輯如下

bindTitleInput: function (e) {this.setData({title: e.detail.value})},radioChange: function (e) {this.setData({cate: e.detail.value})},bindAccountInput: function (e) {this.setData({account: e.detail.value})},bindSaveInput: function () {let that = this;if (!this.data.title) {that.setData({alertHidden: false,alertTitle: '標題不能為空'});return;}let reg = /^[0-9]+.?[0-9]*$/;if (!reg.test(this.data.account)) {that.setData({alertHidden: false,alertTitle: '金額只能是數字'});return;}let record = {title: this.data.title,cate: this.data.cate,account: this.data.account,date: this.data.date};let data = [];wx.getStorage({key: 'db',success: function (res) {data = res.data;data.push(record);wx.setStorage({key: 'db',data: data});that.setData({modalHidden: false});},});},bindDateChange: function (e) {this.setData({date: e.detail.value});},onLoad: function () {wx.getStorage({key: 'db',fail: function () {wx.setStorage({key: 'db',data: []});}});let date = new Date();let strDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();console.debug(strDate);this.setData({date: strDate})},hideModal: function () {this.setData({'modalHidden': true})wx.navigateBack()},hideAlertView: function () {this.setData({'alertHidden': true})}});

關鍵代碼如下，將原來列表中的數據與學生用戶增添的數據進行整合。使得一起顯示。

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.3利用canvas畫布生成支出報告和海報

效果如圖所示，將以海報的風格展示學生醫學系的總支出，以及食堂消費。方便學生用戶轉發朋友圈。

這個界面設計較為復雜，使用canvas進行畫面構造，其中遇到許多坑，比如圖片生成，界面局都出現了許多問題，不夠最后還是畫出來了。
主要畫布代碼

extend:function(data,dataExtend){var res={};for (var key in data) {res[key] = data[key];} for (var key in dataExtend) {res[key] = dataExtend[key]; } return res;},onLoad: function() {this.getAvaterInfo();//對接數據var uid = wx.getStorageSync('uid');var that = this//這里默認學期2wx.cloud.callFunction({name:"score",data:{uid : uid,學期:'2'},complete: res => {console.log('callFunction test result: ', res)// var data = this.extend(res.result,{token: this.data.cardInfo});var data = this.extend(res.result,this.data.cardInfo);console.log('data',data)that.setData({cardInfo:data})console.log('cardInfor',this.data.cardInfo)}})},/*** 先下載頭像圖片*/getAvaterInfo: function() {wx.showLoading({title: '生成中...',mask: true,});console.log(this.data.cardInfo.avater);var that = this;wx.downloadFile({url: that.data.cardInfo.avater, //頭像圖片路徑success: function(res) {wx.hideLoading();if (res.statusCode === 200) {console.log(res.tempFilePath);var avaterSrc = res.tempFilePath; //下載成功返回結果that.getQrCode(avaterSrc); //繼續下載二維碼圖片} else {wx.showToast({title: '頭像下載失敗！',icon: 'none',duration: 2000,success: function() {var avaterSrc = "";that.getQrCode(avaterSrc);}})}},fail:err=>{console.log(err)}})},/*** 下載二維碼圖片*/getQrCode: function(avaterSrc) {wx.showLoading({title: '生成中...',mask: true,});var that = this;wx.downloadFile({url: that.data.cardInfo.qrCode, //二維碼路徑success: function(res) {wx.hideLoading();if (res.statusCode === 200) {var codeSrc = res.tempFilePath;that.sharePosteCanvas(avaterSrc, codeSrc);} else {wx.showToast({title: '二維碼下載失敗！',icon: 'none',duration: 2000,success: function() {var codeSrc = "";that.sharePosteCanvas(avaterSrc, codeSrc);}})}}})},/*** 開始用canvas繪制分享海報* @param avaterSrc 下載的頭像圖片路徑* @param codeSrc 下載的二維碼圖片路徑*/sharePosteCanvas: function(avaterSrc, codeSrc) {wx.showLoading({title: '生成中...',mask: true,})var that = this;var cardInfo = that.data.cardInfo; //需要繪制的數據集合const ctx = wx.createCanvasContext('myCanvas'); //創建畫布var width = "";wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {var height = rect.height;var right = rect.right;width = rect.width * 0.8;var left = rect.left + 5;ctx.setFillStyle('#fff');ctx.fillRect(0, 0, rect.width, height);//頭像為正方形if (avaterSrc) {ctx.drawImage(avaterSrc, left, 20, width, width);ctx.setFontSize(14);ctx.setFillStyle('#fff');ctx.setTextAlign('left');}//標簽if (cardInfo.TagText) {ctx.fillText(cardInfo.TagText, left + 10, width - 4);const metrics = ctx.measureText(cardInfo.TagText); //測量文本信息ctx.stroke();ctx.rect(left + 10, width - 40, metrics.width + 20, 25);ctx.setFillStyle('rgba(255,255,255,0.4)');ctx.fill();}//總消費前言if (cardInfo.TotalcostTxt) {ctx.setFontSize(14);ctx.setFillStyle('#000');ctx.setTextAlign('left');ctx.fillText(cardInfo.TotalcostTxt, left, width + 60);}//紅色總消費顯示if (cardInfo.Totalcost) {ctx.setFillStyle('#ff0000');ctx.setFontSize(15);ctx.setTextAlign('left');ctx.fillText(cardInfo.Totalcost, left, width + 85);}//食堂消費前言if (cardInfo.cafecostTxt) {const CONTENT_ROW_LENGTH = 24; // 正文 單行顯示字符長度let [contentLeng, contentArray, contentRows] = that.textByteLength(cardInfo.cafecostTxt, CONTENT_ROW_LENGTH);ctx.setFontSize(12);ctx.setFillStyle('#666');ctx.setTextAlign('left');ctx.fillText(cardInfo.cafecostTxt, left, width + 105);}// 紅色食堂消費分析報告if (cardInfo.pricetxt1) {const CONTENT_ROW_LENGTH = 24; // 正文 單行顯示字符長度cardInfo.pricetxt1 = cardInfo.cafeprice+cardInfo.pricetxt1+cardInfo.cafeovflow+cardInfo.cafepercente+cardInfo.pricetxt2;console.log(cardInfo.pricetxt1);let [contentLeng, contentArray, contentRows] = that.textByteLength(cardInfo.pricetxt1, CONTENT_ROW_LENGTH);ctx.setTextAlign('left');ctx.setFillStyle('#ff0000');ctx.setFontSize(20);let contentHh = 22 * 1;for (let m = 0; m < contentArray.length; m++) {ctx.fillText(contentArray[m], left, width + 150 + contentHh * m);}}

將數據接口給隊友之后，有隊友上傳數據庫中的記錄信息。

3.工作總結

比較完善地實現了消費支出和收入地記賬功能，并利用canvas畫布實現了比較不錯地學期支出報告。

總結

以上是生活随笔為你收集整理的6月26日日志-消费记录界面实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。