pages/sub_mine/cashFlow.vue

<template>
	<view class="cashFlow">
		<!-- #ifdef APP-PLUS -->
		<view class="bgColor"></view>
		<!-- #endif -->
		<view class="cashFlow-tabs">
			<u-icon name="play-left-fill" color="#999999" size="26" @click="topre"></u-icon>
			<view class="cashFlow-tabs-tabs">
				<u-tabs :list="list" :current="current" @change="change" bar-width="250" item-width="250" class="cashFlow-tabs-tabs"></u-tabs>
			</view>
			<u-icon name="play-right-fill" color="#999999" size="26" @click="tonext"></u-icon>
		</view>
		<!-- <v-tabs v-model="current" :tabs="list" @change="change"></v-tabs> -->
		<view class="cashFlow-content-ucharts">
			<ring-chart :dataAs="pieData" canvasId="index_ring_1" :titleAs="titleAs" v-if="showPie" />
		</view>
		<view class="cashFlow-content">
			<view class="cashFlow-content-list">
				<view class="cashFlow-content-list-title">支出明细</view>
				<scroll-view :scroll-y="true" class="scrollView" @scrolltolower="loadMoreBills" :style="{'height':height+'px'}" v-if="showPie">
					<view class="cashFlow-content-list-item" v-for="(v,i) in bills" :key="i" @click="toDetails(v)">
						<view class="cashFlow-content-list-item-content">
							<text class="cashFlow-content-list-item-content-kind">{{v.transdesc}}</text>
							<text class="cashFlow-content-list-item-content-date">{{v.date}}</text>
						</view>
						<view class="cashFlow-content-list-item-cost">
							<text>{{v.amount}}</text>
						</view>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="30" />
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import RingChart from './components/stan-ucharts/RingChart.vue';
	// import vtabs from '@/components/v-tabs/v-tabs.vue';
	export default {
		components: {
			RingChart,
			// vtabs
		},
		data() {
			return {
				showPie: false,
				height: "",
				status: "loadmore",
				iconType: 'circle',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '暂无更多'
				},
				list: [{
					name: "1月",
					// ischecked: false
				}, {
					name: "2月",
					// ischecked: false
				}, {
					name: "3月",
					// ischecked: false
				}, {
					name: "4月",
					// ischecked: false
				}, {
					name: "5月",
					// ischecked: false
				}, {
					name: "6月",
					// ischecked: false
				}, {
					name: "7月",
					// ischecked: false
				}, {
					name: "8月",
					// ischecked: false
				}, {
					name: "9月",
					// ischecked: false
				}, {
					name: "10月",
					// ischecked: false
				}, {
					name: "11月",
					// ischecked: false
				}, {
					name: "12月",
					// ischecked: false
				}],
				current: new Date().getMonth(),
				pieData: {
					//饼状图数据
					series: []
				},
				titleAs: {
					title: {
						name: '本卡总支出',
						fontSize: 16
					},
					subtitle: {
						name: '',
						fontSize: 12
					}
				},
				bills: [],
				pageno: 1,
				end: false,
				date: "",
				nullVal: [{
					name: "总消费",
					data: 0,
					legendShape: "rect"
				}]
			}
		},
		methods: {
			moveHandle() {
				return
			},
			topre() {
				let that = this
				if (that.current != 0) {
					that.current = that.current - 1
					let time = new Date().getFullYear() + "" + (that.current + 1 >= 10 ? that.current + 1 : "0" + (that.current + 1))
					that.date = time
					that.getbills(1, time)
					that.getPieVal(time)
				}
			},
			tonext() {
				let that = this
				if (that.current != 11) {
					that.current = that.current + 1
					let time = new Date().getFullYear() + "" + (that.current + 1 >= 10 ? that.current + 1 : "0" + (that.current + 1))
					that.date = time
					that.pageno = 1
					that.getbills(1, time)
					that.getPieVal(time)
				}
			},
			change(index) {
				let that = this
				that.current = index;
				let time = new Date().getFullYear() + "" + (that.current + 1 >= 10 ? that.current + 1 : "0" + (that.current + 1))
				that.date = time
				that.pageno = 1
				that.getbills(1, time)
				that.getPieVal(time)
			},
			getbills(no, mon) {
				let that = this
				let pageno = no
				if (pageno == 1) {
					that.bills = []
				}
				let param = {
					pageno: pageno,
					month: mon
				}

				that.$u.post("/v1/bills", param).then((res) => {
					let list = res.page ? res.page.data : []
					if (list.length > 0) {
						list.forEach((item, index) => {
							let date = item.transdate + item.transtime
							item.date = item.transdate.substr(0,4) + "-" + item.transdate.substr(4,2)+ "-" + item.transdate.substr(6,2)+ " " + item.transtime.substr(0,2)+ ":" + item.transtime.substr(2,2)+ ":" + item.transtime.substr(4,2);
						})
						//console.log(list)
						that.bills = that.bills.concat(list)
						that.end = false
					} else {
						that.status = "nomore"
						that.end = true
					}
				})
			},
			loadMoreBills() {
				let that = this
				let pageno = that.pageno++
				let end = that.end
				let month = that.date
				if (!end) {
					that.getbills(pageno, month)
				}
			},
			toDetails(e) {
				let data = JSON.stringify(e)
				uni.navigateTo({
					url: "/pages/sub_mine/billsDetails?data=" + data
				})
			},
			getSrcollViewHeight() {
				let winHeight
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				//console.log(winHeight)
				const query = uni.createSelectorQuery().in(that);
				query.select('.cashFlow-content-list-title').boundingClientRect(data => {
					console.log(data)
					if(!data){
						setTimeout(()=>{
							that.getSrcollViewHeight()
						},10)
						return
					}
					that.height = winHeight - data.top - data.height - 15
					// that.height = (data.bottom - data.height)*2
				}).exec();
			},
			getPieVal(mon) {
				let that = this
				that.showPie = false
				let param = {
					month: mon
				}
				that.$u.post("/v1/billcount", param).then(res => {
					let total = res.data ? res.data.total : null
					//console.log(total)
					that.titleAs.subtitle.name = "￥" + Math.abs(total)
					if (total === 0 || !total) {
						that.pieData.series = that.nullVal
						that.showPie = true
						return false
					}
					let list = res.data.group
					let newList = []
					list.map((value, index, arry) => {
						newList.push({
							"name": value.transtype,
							"data": Math.abs(value.amount),
							"legendShape": "rect"
						})
					})
					that.pieData.series = newList
					that.showPie = true
				})
			}
		},
		onLoad() {
			let that = this
			let mon = new Date().getFullYear() + "" + (new Date().getMonth() + 1 > 10 ? new Date().getMonth() + 1 : '0' + (new Date()
				.getMonth() + 1))
			//console.log(mon)
			that.date = mon
			that.getbills(1, mon)
			that.getPieVal(mon)
			this.getSrcollViewHeight()
		},
	}
</script>

<style scoped lang="scss">
	.scrollView {
		// height: calc(100vh - 710rpx)
	}
	.cashFlow-content-ucharts{
		height: 250px;
	}

	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
		background-color: transparent;
	}
	/* #ifdef APP-PLUS */
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: -1;
	}
	/* #endif */
	

	page {
		background-color: #FFFFFF;
	}

	.cashFlow {
		background-color: #FFFFFF;
		&-tabs {
			display: flex;
			// height: 500rpx;
			justify-content: space-around;
			padding: 10rpx 30rpx 0;

			&-tabs {
				width: 95%;
			}
		}

		&-content {

			&-list {
				padding: 30rpx;

				&-title {
					font-family: "PingFang-SC-Medium";
					color: #343434;
					font-size: 32rpx;
				}

				&-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #CCCCCC;
					padding: 30rpx 0;

					&-content {
						display: flex;
						flex-direction: column;

						&-kind {
							color: #343434;
							font-size: 30rpx;
							font-family: "PingFang-SC-Medium";
							margin-bottom: 10rpx;
						}

						&-date {
							color: #9A9A9A;
							font-size: 26rpx;
							font-family: "PingFang-SC-Medium";
						}
					}

					&-cost {
						color: #666666;
						font-size: 32rpx;
						font-family: "PingFang-SC-Medium";
					}
				}
			}
		}
	}
</style>