yiliangyiyun-app/pages/dataReport/costbreakdown.vue

<template>
	<view>
		<view class='fixedbox'>
			<view class='search'>
				<u-search @search='getList' v-model='expenseName' placeholder='可按费用名称查找' search-icon-color='#AFB3BF'
					bg-color='#F5F6F9' :shape='"round"' :clearabled="true" :show-action='false'></u-search>
			</view>
			<view style='background:#fff;'>
				<view class='purposewrap'>
					<view :class='expensesPurpose==1?"active":""' @click='expenseclick(1)' class='item left'>合同费用</view>
					<view :class='expensesPurpose==3?"active":""' @click='expenseclick(3)' class='item'>库点费用</view>
					<view :class='expensesPurpose==5?"active":""' @click='expenseclick(5)' class='item right'>经营性费用
					</view>
				</view>
			</view>
			<view v-if='expensesPurpose==1' class='costwrap'>
				<view :class='costType==""?"active":""' @click='costTypeclick("")' class='item'>全部</view>
				<view :class='costType==1?"active":""' @click='costTypeclick(1)' class='item'>粮款</view>
				<view :class='costType==3?"active":""' @click='costTypeclick(3)' class='item'>非粮款</view>
				<view :class='costType==5?"active":""' @click='costTypeclick(5)' class='item'>保证金</view>
			</view>
			<view v-if='expensesPurpose==3' class='costwrap'>
				<view :class='wareExpenseType1==""?"active":""' @click='wareExpenseTypeclick("")' class='item'>全部</view>
				<view :class='wareExpenseType1=="煤费"?"active":""' @click='wareExpenseTypeclick("煤费")' class='item'>煤费
				</view>
				<view :class='wareExpenseType1=="电费"?"active":""' @click='wareExpenseTypeclick("电费")' class='item'>电费
				</view>
				<view :class='wareExpenseType1=="人工费"?"active":""' @click='wareExpenseTypeclick("人工费")' class='item'>人工费
				</view>
				<view :class='wareExpenseType1=="杂费"?"active":""' @click='wareExpenseTypeclick("杂费")' class='item'>杂费
				</view>
				<view :class='searchType==1?"active":""' @click='wareExpenseTypeclick(1)' class='item'>收款</view>
			</view>
		</view>
		<view v-if='costList.length>0' class='costlistwrap'>
			<view v-for='(item,index) in costList' :style='index!=costList.length-1?"border-bottom:2rpx solid #eee":""'
				class='item'>
				<view class='flex align-item-center'>
					<view v-if='item.expensesType==1' class="status income">收</view>
					<view v-if='item.expensesType==2' class="status pay">付</view>
					<view style='width:92%;justify-content: space-between;' class="flex align-item-center">
						<view class="costtype">{{item.expenseName}}</view>
						<view class="costmoney"><text>￥</text>{{item.amountMoney}}</view>
					</view>

				</view>
				<view style='justify-content: space-between;font-size:28rpx;margin:10rpx 0;'
					class='flex align-item-center'>
					<view v-if='item.expensesPurpose==3'>{{item.warehouseName}}</view>
					<view v-if='item.expensesPurpose==1'>{{item.contractNo}}</view>
					<view v-if='item.expensesPurpose==5'>{{item.paymentDate}}</view>
					<view>{{item.agent}}</view>
				</view>
				<view v-if='item.expensesPurpose==1||item.expensesPurpose==3' style='font-size:24rpx;margin:20rpx 0;'
					class='flex align-item-center'>
					<view class="">
						{{item.paymentDate}}
					</view>
				</view>
			</view>
		</view>
		<view v-if='show' :style="{'margin-top':costList.length==0?'260rpx':'0'}"
			style='text-align:center;background:#F2F6FA;'>
			暂无更多数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expenseInfo: {
					startDate: '',
					endDate: ''
				},
				customBar: 0,
				costType: '',
				expensesPurpose: '1',
				currentPage: 1,
				show: false,
				wareExpenseType: '',
				wareExpenseType1: '',
				pageSize: 10,
				costList: [],
				isLoadMore: false,
				searchType: '',
				expenseName: ''
			}
		},
		onLoad(options) {
			// console.log(options.data)

			// if (options.type == 2) {
			// 	// 获取月份的天数
			// 	let _days = new Date(options.data.split('-')[0], options.data.split('-')[1], 0).getDate()
			// 	console.log(_days)
			// 	this.expenseInfo = {
			// 		startDate: options.data + '-01',
			// 		endDate: options.data + '-' + _days
			// 	}
			// } else if (options.type == 1) {
			// 	this.expenseInfo = {
			// 		startDate: options.data + '-01-01',
			// 		endDate: options.data + '-12-31'
			// 	}
			// }
			console.log(this.expenseInfo)
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0 //状态栏高度
					let customBar = 0 // 状态栏高度 + 导航栏高度  
					let navbar = 0 // 自定义标题与胶囊对齐高度


					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif


					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight

					navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
					// #endif


					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + e.titleBarHeight
					// #endif


					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif


					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif
					this.customBar = customBar
				}
			})
		},
		onShow() {
			this.getList()
		},
		onReachBottom() { //上拉触底函数
			// if (this.statusFlag == 3) {
			if (!this.show) { //此处判断，上锁，防止重复请求
				this.pageSize += 1
				this.currentPage += 1
				this.getList()
			}
			// }
		},
		methods: {
			wareExpenseTypeclick(status) {
				this.currentPage = 1
				if (status == 1) {
					this.searchType = 1
					this.wareExpenseType1 = 5
					this.wareExpenseType = ''
				} else {
					this.wareExpenseType1 = status
					this.wareExpenseType = status
					this.searchType = ''
				}
				this.getList()
			},
			costTypeclick(status) {
				this.show=false
				this.currentPage = 1
				this.costType = status
				this.getList()
			},
			expenseclick(status) {
				this.show=false
				this.currentPage = 1
				this.expensesPurpose = status
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: "正在加载"
				})
				this.$api.doRequest('get', '/expenseInfo/selectInfo', {
					expensesPurpose: this.expensesPurpose,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					appFlag: 1,
					costType: this.costType,
					wareExpenseType: this.wareExpenseType,
					searchType: this.searchType,
					expenseName: this.expenseName,
					startDate: this.expenseInfo.startDate,
					endDate: this.expenseInfo.endDate,
					compId: uni.getStorageSync("pcUserInfo").compId

				}).then(res => {
					if (res.data.code) {
						uni.hideLoading()
						if (res.data.data.records.length > 0) {
							if (this.currentPage == 1) {
								this.costList = res.data.data.records
							} else {
								this.costList = this.costList.concat(res.data.data.records)
							}
						} else {
							this.show = true
							if (this.currentPage == 1) {
								this.costList = []
							}
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: "系统异常，请联系管理员",
							icon: 'none',
							duration: 2000
						})
					}

				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.fixedbox {
		position: fixed;
		width: 100%;
		top: 0;
		background: #fff;
		padding-top: 20rpx;
	}

	.purposewrap {
		display: flex;
		background: #fff;
		font-size: 32rpx;
		margin: 0 auto;
		width: 93%;

		.item {
			padding: 20rpx;
			color: #7A7A7A;
			width: 33.3333%;
			text-align: center;
		}

		.item.left {
			text-align: left;
		}

		.item.right {
			text-align: right;
		}

		.item.active {
			color: #262626;
			font-weight: 600;
		}
	}

	.costwrap {
		display: flex;
		margin: 10rpx 34rpx;

		.item {
			padding: 10rpx 20rpx;
			color: #333333;
			text-align: center;
			border-radius: 30rpx;
		}

		.item.active {
			color: #fff;
			background: #22C572;
		}
	}

	.costlistwrap {
		background: #fff;
		margin: 260rpx 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;

		.item {
			padding: 30rpx 0;

			.status {
				font-size: 24rpx;
				margin-right: 10rpx;
				padding: 4rpx 10rpx;
				border-radius: 10rpx;
			}

			.status.pay {
				background: #E9F8F0;
				color: #22C572;
			}

			.status.income {
				background: #FEECE6;
				color: #FE6430;
			}

			.costtype {
				font-size: 32rpx;
				font-weight: 600;
			}

			.costmoney {
				font-size: 36rpx;
				font-weight: 600;

				text {
					font-size: 26rpx;
				}
			}
		}
	}

	.search {
		width: 100vw;
		background: #fff;
	}

	.u-search {
		width: 94%;
		margin: 0 auto !important;
	}
</style>