yiliangyiyun-app/pages/dataReport/contractdetails/contractdetails.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='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 class='costwrap'>
				<view :class='searchType==""?"active":""' @click='searchTypeclick("")' class='item'>全部</view>
				<view :class='searchType==5?"active":""' @click='searchTypeclick(5)' class='item'>待执行</view>
				<view :class='searchType==6?"active":""' @click='searchTypeclick(6)' class='item'>执行中</view>
				<view :class='searchType==2?"active":""' @click='searchTypeclick(2)' class='item'>已完成</view>
			</view>
		</view>
		
		<view style='margin:260rpx 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 v-if='item.status=="待执行"' style='color:#FE6430;' class='status'>{{item.status}}</view>
					<view v-if='item.status=="已完成"' style='color:#AFB3BF;' class='status'>{{item.status}}</view>
					<view v-if='item.status=="执行中"' style='color:#22C572;' class='status'>{{item.status}}</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.weight}}</view>
				</view>
				<view  class='flex contractwrap-item'>
					<view class="title">合同单价（元/吨）</view>
					<view>{{item.unitContractPrice?item.unitContractPrice:0}}</view>
				</view>
				<view  class='flex contractwrap-item'>
					<view class="title">合同总价（元）</view>
					<view>{{item.totalContractPrice?item.totalContractPrice:0}}</view>
				</view>
				<view  class='flex contractwrap-item'>
					<view class="title">已付款（元）</view>
					<view>{{item.mildewGrain}}</view>
				</view>
				<view  class='flex contractwrap-item'>
					<view class="title">已开发票（元）</view>
					<view>{{item.invoiced?item.invoiced:0}}</view>
				</view>
				<view  class='flex contractwrap-item'>
					<view class="title">签订日期</view>
					<view>{{item.signingDate}}</view>
				</view>
			</view>
		</view>
		<view v-if='show' :style="{'margin-top':contractList.length==0?'260rpx':'0'}" style='text-align:center;background:#F2F6FA;'>暂无更多数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBar:0,
				// contractType:1,
				agreementType:'销售合同',
				currentPage:1,
				pageSize:10,
				searchType:'',
				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: {
			contractclick(status){
				this.currentPage = 1
				this.agreementType=status
				this.getList()
			},
			searchTypeclick(status){
				this.currentPage = 1
				this.searchType=status
				this.getList()
			},
			getList(){
				uni.showLoading({
					title: "正在加载"
				})
				this.$api.doRequest('get', '/contractManagementInfo/selectInfo', {
					compId:uni.getStorageSync('pcUserInfo').compId,
					goodsType:1,
					agreementType: this.agreementType,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					searchType:this.searchType,
					appFlag:1,
				}).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;
	}
}
.costwrap{
	display:flex;
	margin:10rpx 34rpx;
	.item{
		padding:10rpx 20rpx;
		color:#333333;
		text-align:center;
		border-radius:30rpx;
	}
	.item.active{
		color:#fff;
		background:#22C572;
	}
}
.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>