recruitment-wechat-uniapp-241012/pages_order/kepp/AnnualExpenditure.vue

<template>
	<!-- 全年收支 -->
	<view class="page">
		<navbar title="全年收支" leftClick @leftClick="$utils.navigateBack" />
		<view class="page-two">
			<view class="option"
			@click="$refs.notebookListPicker.open()">
				{{ notebook.title }}
			</view>
			<view class="wire"></view>

			<view class="select-date"
			@click="$refs.datetimePicker.open()">
				{{ $dayjs(date).format('YYYY') }}
			</view>

			<view class="card">
				<view class="card-one" style="border-right: 1px dashed #BCD2FE;">
					<image src="../../static/image/keepAccounts/BlueWallet.png" mode="aspectFill" />
					<view>
						<view>总收入(元)</view>
						<view style="color: #3889FF;">￥{{ countNumber.incomeCount }}</view>
					</view>
				</view>

				<view class="card-two">
					<image src="../../static/image/keepAccounts/YellowWallet.png" mode="aspectFill" />
					<view>
						<view>总支出(元)</view>
						<view style="color: #FD961A;">￥{{ countNumber.expenditureCount }}</view>
					</view>
				</view>
			</view>
			<view class="cell" style="margin-top: 40rpx;">
				<uv-cell v-for="(item,index) in list"
				:key="index"
				:label="item.billDate" 
				:title="bill.typeTitle[item.type]" 
				:value="`${bill.typeNo[item.type]}${item.amount}`"></uv-cell>
			</view>
		</view>
		
		<uv-empty mode="list" v-if="list.length == 0"></uv-empty>

		<uv-picker ref="notebookListPicker"
		keyName="title"
		:columns="[notebookList]" 
		itemHeight="80"
		@confirm="notebookListConfirm"></uv-picker>
		
		<uv-datetime-picker 
		ref="datetimePicker" 
		v-model="date" 
		mode="year" 
		@confirm="confirmDate"/>
	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	export default {
		mixins : [mixinList],
		data() {
			return {
				mixinsListApi : 'queryBill',
				apiType : '',
				bill : {
					typeNo : ['+', '-'],
					typeTitle : ['收入', '支出'],
				},
				date : new Date().getTime(),
				countNumber : {},
				notebookList : [],
				notebook : {
					title : '选择项目',
				},
			}
		},
		onLoad({apiType}) {
			this.apiType = apiType
			this.mixinsListApi += apiType || ''
			
			this.queryParams.year = this.$dayjs(this.date).format('YYYY')
			
			this.getCommonQueryNotebookList()
		},
		onShow() {
			this.notebookQueryBillAmount()
		},
		onPullDownRefresh() {
			this.notebookQueryBillAmount()
		},
		methods: {
			notebookQueryBillAmount(){
				this.$api('notebookQueryBillAmount', 
				this.queryParams, res => {
					if(res.code == 200){
						this.countNumber = res.result
					}
				})
			},
			getCommonQueryNotebookList(){
				this.$api('commonQueryNotebookList', {
					pageNo: 1,
					pageSize: 9999999,
				}, res => {
					if(res.code == 200){
						this.notebookList = res.result.records
					}
				})
			},
			notebookListConfirm(e){
				this.notebook = e.value[0]
				this.queryParams.employNoteBookId = this.notebook.id
				this.getData()
				this.notebookQueryBillAmount()
			},
			confirmDate(e){
				this.date = e.value
				this.queryParams.year = this.$dayjs(this.date).format('YYYY')
				this.getData()
				this.notebookQueryBillAmount()
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		background-color: #fff;

		.page-two {
			width: 90%;
			margin-left: 5%;

			.wire {
				border-bottom: 4rpx dashed rgb(168, 197, 255);
			}

			.option {
				padding: 40rpx 40rpx 40rpx 0rpx;

				.select {
					background-color: #EBF0FC;
					padding: 15rpx 0rpx;
					border: none;
					color: #4280FD;
					width: 150rpx;
					text-align: center;
				}
			}

			.select-date {
				padding: 30rpx 0;

				.select {
					padding: 15rpx 0rpx;
					border: none;
					color: #4280FD;
				}
			}

			.card {
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #F2F5FD;

				.card-one,
				.card-two {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 150rpx;
					width: 50%;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				image {
					height: 50rpx;
					width: 50rpx;
					margin-right: 20rpx;
				}
			}
		}


	}
</style>