图表页功能改进 (#27)

* feat: index_page add budget

* feat: add account_book page

* feat: modify chart page

* feat: update chart

* fix: modify category form

src/app.wpy

@@ -43,6 +43,7 @@ export default class extends wepy.app {
       "pages/settings/super_statement",
       "pages/settings/about",
       "pages/settings/search",
+      "pages/settings/account_book",
 
       // 账单墙
       "pages/statements/images",

src/components/charts/calendar.wpy

@@ -0,0 +1,233 @@
+<template lang="wxml">
+  <view class="calendar">
+    <calendar
+      show-more-days="{{ false }}"
+      lunar="{{ false }}"
+      weeks-type="cn" 
+      cell-size="30" 
+      calendar-style="calendar-main"
+      header-style="calendar-header" 
+      board-style="calendar-board" 
+      days-color="{{daySelect}}"
+      bindprevMonth="monthChange"
+      bindnextMonth="monthChange"
+      binddayClick="dayClick" />
+  </view>
+
+  <view class="ljt-tab fs16">
+    <view class="time">{{ monthAndDay }}</view>
+    <view class="{{ tabActive == 'single' ? 'active' : '' }}" @tap="changeTab('single')">单笔明细</view>
+    <view class="{{ tabActive == 'category' ? 'active' : '' }}" @tap="changeTab('category')">分类明细</view>
+  </view>
+
+  <view class="assets">
+    <view hidden="{{ tabActive == 'category' || singleList.length == 0 }}">
+      <view class="left-amount">
+        <text class="income income-border">收入: {{ singleData.surplus.income }}</text>
+        <text class="expend expend-border">支出: {{ singleData.surplus.expend }}</text>
+        <text class="surplus surplus-border">结余: {{ singleData.surplus.surplus }}</text>
+      </view>
+
+      <view class="tiaomu" wx:for="{{ singleData.list }}" @tap="showStatement('{{ item.id }}')">
+        <view class="information">
+          <image src="{{ item.category_icon }}"></image>
+          <view class="title">
+            <view class="fs14">{{ item.category }}</view>
+            <view class="fs12 description" wx:if="{{ item.description != null }}">{{ item.description }}</view>
+            <view class="col999 fs12">{{ item.created_at }} · {{ item.wallet }}</view>
+          </view>
+        </view>
+
+        <view class="money {{ item.type }}">{{ item.amount }}</view>
+      </view>
+    </view>
+
+    <view class="mutiple" hidden="{{ tabActive == 'single' || mutipleData.length == 0 }}">
+      <view wx:for="{{ mutipleData }}" @tap="getCategoryList('{{ item.id }}', '{{ index }}')">
+        <view class="parent-node">
+          <view class="title">{{ item.name }}</view>
+          <view class="iconfont jz-icon-arrow-down-copy" wx:if="{{ item.hidden }}"></view>
+          <view class="iconfont jz-icon-arrow-up" wx:else></view>
+        </view>
+
+        <repeat for="{{ item.childs }}" key="index" index="index" item="st" wx:if="{{ !item.hidden }}">
+          <statement :statement.sync="st"></statement>
+        </repeat>
+      </view>
+    </view>
+
+    <empty title="这天还没有记账呢~" hidden="{{ singleList.length > 0 }}"></empty>
+  </view>
+</template>
+
+<script>
+import wepy from 'wepy'
+import wxRequest from '@/utils/wxRequest'
+import tip from '@/utils/tip'
+import Empty from '@/components/empty'
+import singleColumn from '@/components/chart_column'
+import IndexStatement from '@/components/index/statement'
+const NowDate = new Date()
+export default class CalendarComponent extends wepy.component {
+  config = {
+		"usingComponents": {
+			"calendar": "plugin://calendar/calendar"
+		}
+  }
+
+  data = {
+		today: NowDate.getDate(),
+		tabActive: 'single',
+		startColor: '#FF7F00',
+		endColor: '#8B8B83',
+		days: [],
+		mutipleData: [],
+		singleData: [],
+		singleList: [],
+		daySelect: [],
+  };
+
+  onLoad () {
+		this.daySelect.push(this.daySelectObject(NowDate.getFullYear(), NowDate.getMonth() + 1, this.today, '#2196F3'))
+		// this.getChart()
+  }
+
+  computed = {
+		monthAndDay() {
+			let str = ''
+			let query = this.timeParams()
+			if (typeof query.start_time != 'undefined') {
+				let startArray = query.start_time.split('-')
+				str = startArray[1] + '-' + startArray[2]
+			}
+			if (typeof query.end_time != 'undefined') {
+				let endArray = query.end_time.split('-')
+				str += ' ~ '
+				str += endArray[1] + '-' + endArray[2]
+			}
+			return str
+		}
+	}
+
+  /**
+	 * 时间参数组装
+	 * 默认取 daySelect 数组
+	 * 	daySelect[0] 当前日期
+	 * 	daySelect[1] 起始日期
+	 *  daySelect[2] 结束日期
+	*/
+	timeParams () {
+		let query = {}
+		let length = this.daySelect.length
+		if (length == 0) {
+			return query
+		}
+
+		if (length <= 2) {
+			let start = this.daySelect[length - 1]
+			query.start_time = `${start.year}-${start.mon}-${start.day}`
+		} else {
+			let start = this.daySelect[1]
+			let end = this.daySelect[2]
+			query.start_time = `${start.year}-${start.mon}-${start.day}`
+			query.end_time = `${end.year}-${end.mon}-${end.day}`
+		}
+		return query
+	}
+
+	daySelectObject (year, month, day, bgColor) {
+		return {
+			year: year,
+			mon: month,
+			day: day,
+			background: bgColor,
+			month: 'current',
+			color: 'white'
+		}
+  }
+
+  async getChart() {
+		const res = await wxRequest.Get('chart', this.timeParams())
+		this.singleData = res.single
+		this.singleList = this.singleData.list
+		this.mutipleData = res.categories
+		this.$apply()
+	}
+
+  methods = {
+		dayClick: function (event) {
+			let detail = event.detail
+			let dataLen = this.daySelect.length
+			let curObj = this.daySelectObject(detail.year, detail.month, detail.day, '')
+			if (dataLen == 1) {
+				// 插入起始日期
+				curObj.background = this.startColor
+				this.daySelect.push(curObj)
+			} else if (dataLen == 2) {
+				// 插入结束日期
+				let start = this.daySelect[1]
+				let startDate = new Date(`${start.year}-${start.mon}-${start.day}`)
+				let choseDate = new Date(`${detail.year}-${detail.month}-${detail.day}`)
+				if (startDate < choseDate) {
+					curObj.background = this.endColor
+					this.daySelect.push(curObj)
+				} else {
+					this.daySelect[1].background = this.endColor
+					curObj.background = this.startColor
+					this.daySelect.splice(1, 0, curObj)
+				}
+			} else {
+				// 起始日期和结束日期存在的情况下插入..
+				let start = this.daySelect[1]
+				let end = this.daySelect[2]
+				let startDate = new Date(`${start.year}-${start.mon}-${start.day}`)
+				let endDate = new Date(`${end.year}-${end.mon}-${end.day}`)
+				let curDate = new Date(`${detail.year}-${detail.month}-${detail.day}`)
+				if (curDate > endDate) {
+					curObj.background = this.endColor
+					this.daySelect[2] = curObj
+				} else if (curDate.getTime() == endDate.getTime()) {
+					this.daySelect.splice(1, 1)
+				} else if (curDate.getTime() == startDate.getTime()) {
+					this.daySelect.splice(2, 1)
+				} else {
+					curObj.background = this.startColor
+					this.daySelect[1] = curObj
+				}
+			}
+			this.getChart()
+		},
+
+		changeTab(item) {
+			this.tabActive = item
+		},
+
+		monthChange (event) {
+			let detail = event.detail
+			for(let i = 0, len = this.daySelect.length; i < len; ++i) {
+				if (this.daySelect[i].mon == detail.currentMonth) {
+					this.daySelect[i].month = 'current'
+				} else {
+					this.daySelect[i].month = null
+				}
+			}
+		},
+
+		showStatement (id) {
+			wepy.navigateTo({
+				url: `/pages/statements/detail?id=${id}`
+			})
+		},
+
+		async getCategoryList (id, index) {
+			let query = this.timeParams()
+			query.id = id
+			const data = await wxRequest.Get('chart/spread', query)
+			let value = !this.mutipleData[index].hidden
+			this.mutipleData[index]['hidden'] = value
+			this.mutipleData[index].childs = data
+			this.$apply()
+		}
+	}
+}
+</script>

src/components/charts/category.wpy

@@ -0,0 +1,115 @@
+<template lang="wxml">
+  <view class="category">
+    <view>
+      <canvas canvas-id="pieCanvas" disable-scroll="true" style="width: 100%; height: 300px;"></canvas>
+    </view>
+
+    <view class="expend-bars" wx:if="{{ categories.length > 0 }}">
+      <view class="item" wx:for="{{ categories }}" style="background-size: {{ item.percent }}% 100%;" @tap="redirectTo({{ item }})">
+        <view>
+          <view class="title">{{ item.name }}<text class="percent">{{ item.percent }}%</text></view>
+          <view class="amount">{{ item.format_amount }}</view>
+        </view>
+        <view class="zan-icon zan-icon-arrow"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import wepy from 'wepy'
+import wxCharts from '@/utils/wxchart.min.js'
+import wxRequest from '@/utils/wxRequest'
+import StatementItem from '@/components/index/statement'
+export default class CategoryComponent extends wepy.component {
+  props = {
+    date: String
+  }
+
+  data = {
+    categories: [],
+    info: {}
+  }
+
+  components = {
+    StatementItem
+  }
+
+  async onLoad() {
+    this.info = await wepy.getSystemInfo()
+    this.getStatements()
+    this.getPieData()
+  }
+
+  async getStatements() {
+    const res = await wxRequest.Get('chart/category_statements', { date: this.date })
+    this.categories = res.data
+    this.$apply()
+  }
+
+  async getPieData () {
+    const data = await wxRequest.Get('super_chart/get_pie_data', { date: this.date })
+    this.$apply()
+    if (data.data.length > 0) {
+      await new wxCharts({
+        canvasId: 'pieCanvas',
+        type: 'pie',
+        series: data.data,
+        width: this.info.screenWidth,
+        height: 280,
+        legend: true,
+        dataLabel: true
+      });
+    }
+  }
+
+  methods = {
+    redirectTo (item) {
+      const dates = this.date.split('-')
+      wepy.navigateTo({
+        url: `/pages/statements/filter_statements?year=${dates[0]}&month=${dates[1]}&category_id=${item.category_id}`
+      })
+    }
+  }
+
+  watch = {
+    date() {
+      this.getStatements()
+      this.getPieData()
+    }
+  };
+}
+</script>
+<style lang="scss" scoped>
+.expend-bars {
+  margin: 12px;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    color: #212121;
+    margin:12px 0;
+    padding: 8px;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(#c1f5e7, #c1f5e7);
+    border-radius:4px;
+    .title {
+      font-size: 14px;
+    }
+    .amount {
+      margin-top: 4px;
+      font-size: 14px;
+      color: green;
+    }
+    .percent {
+      font-size: 12px;
+      margin-left: 12px;
+      color: #757575;
+    }
+  }
+  .zan-icon-arrow {
+    font-size: 14px;
+    color: #ccc;
+  }
+}
+</style>