yiliangyiyun-app/pages/dataReport/breakdownofprofit.vue

<template>
	<view>
		<view class='fixedbox'>
			<view class='search'>
				<u-search @custom='search' placeholder='可按合同编号或买方、卖方名称查找' search-icon-color='#AFB3BF' bg-color='#F5F6F9' :shape='"round"'
					:clearabled="true"></u-search>
			</view>
			<view style='background:#fff;'>
				<view class='contracttypewrap'>
					<view :class='agreementType=="销售合同"?"active":""' @click='contractclick("销售合同")' class='item left'>销售
					</view>
					<view :class='agreementType=="采购合同"?"active":""' @click='contractclick("采购合同")' class='item'>采购
					</view>
					<view :class='agreementType=="收购合同"?"active":""' @click='contractclick("收购合同")' class='item'>收购
					</view>
					<view :class='agreementType=="代收合同"?"active":""' @click='contractclick("代收合同")' class='item'>代收
					</view>
					<view :class='agreementType=="代储合同"?"active":""' @click='contractclick("代储合同")' class='item right'>
						代储</view>
				</view>
			</view>
		</view>
		<view style='margin:184rpx 20rpx 20rpx;' v-if='contractList.length>0'>
			<view class='contractwrap' v-for='(item,index) in contractList'>
				<view class='flex contractwrap-title'>
					<view class='contractNo' style="font-weight: 700;">{{item.contractNo}}</view>
				</view>
				<view class='flex contractwrap-item'>
					<view class="title">买方</view>
					<view>{{item.buyer}}</view>
				</view>
				<view class='flex contractwrap-item'>
					<view class="title">卖方</view>
					<view>{{item.seller}}</view>
				</view>
				<view class='flex contractwrap-item'>
					<view class="title">最终完成量（吨）</view>
					<view>{{item.finalTradingVolume}}</view>
				</view>
				<view class='flex contractwrap-item'>
					<view class="title">利润（元）</view>
					<view>{{item.profit}}</view>
				</view>
				<view class='flex contractwrap-item'>
					<view class="title">结算日期</view>
					<view>{{item.settlementDate}}</view>
				</view>
			</view>
		</view>
		<view v-if='show' :style="{'margin-top':contractList.length==0?'184rpx':'0'}"
			style='text-align:center;background:#F2F6FA;'>暂无更多数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBar: 0,
				contractType: 1,
				agreementType: '销售合同',
				currentPage: 1,
				pageSize: 10,
				searchKeyWord:'',
				show: false,
				contractList: []
			}
		},
		onLoad() {

			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.show2) { //此处判断，上锁，防止重复请求
				this.pageSize += 1
				this.currentPage += 1
				this.getList()
			}
			// }
		},
		methods: {
			search(e){
				this.searchKeyWord=e
				this.show=false
				this.contractList=[]
				this.currentPage=1
				this.getList()
			},
			contractclick(status) {
				this.show=false
				this.contractList = []
				this.currentPage = 1
				this.agreementType = status
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '数据加载中'
				})
				this.$api.doRequest('get', '/contractManagementInfo/selectContractInfo', {
					agreementType: this.agreementType,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					searchKeyWord:this.searchKeyWord,
				}).then(res => {
					if (res.data.code) {
						uni.hideLoading()
						if (res.data.data.records.length > 0) {
							this.show = false
							if (this.currentPage == 1) {
								this.contractList = res.data.data.records
							} else {
								this.contractList = this.contractList.concat(res.data.data.records)
							}
						} else {
							this.show = true
							if (this.currentPage == 1) {
								this.contractList = []
							}
						}
					} 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;
	}

	.contracttypewrap {
		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;
		}
	}

	.contractwrap {
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;

		.contractwrap-title {
			font-size: 28rpx;
			padding: 20rpx;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;
			align-items: center;

		}

		.contractwrap-item {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			font-size: 28rpx;

			.title {
				font-size: 24rpx;
				color: #8F8F8F;
			}
		}
	}

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

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