yiliangyiyun-app/pages/dataReport/breakdownofprofit.vue

<template>
	<view>
		<view class='fixedbox' :style='{"top":customBar+"px"}'>
			<view class='search'>
				<u-search  placeholder='可按合同编号或买方、卖方名称查找' search-icon-color='#AFB3BF' bg-color='#F5F6F9' :shape='"round"'  :clearabled="true" :show-action='false'></u-search>
			</view>
			<view style='background:#fff;'>
				<view class='contracttypewrap'>
					<view :class='searchContractType==1?"active":""' class='item left'>销售</view>
					<view :class='searchContractType==2?"active":""' class='item'>采购</view>
					<view :class='searchContractType==5?"active":""' class='item'>收购</view>
					<view :class='searchContractType==3?"active":""' class='item'>代收</view>
					<view :class='searchContractType==4?"active":""' 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'>{{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,
				searchContractType:1,
				currentPage: 1,
				pageSize: 10,
				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.isLoadMore) { //此处判断，上锁，防止重复请求
					this.pageSize += 1
					this.currentPage += 1
					this.getList()
				}
			// }
		},
		methods: {
			getList(){
				this.$api.doRequest('get', '/contractManagementInfo/selectContractInfo', {
					searchContractType:this.searchContractType,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).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>