yiliangyiyun-app/pages/dataReport/contractdetails/contractdetails.vue

<template>
	<view>
		<view class='fixedbox'>
			<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 v-if="item.priceType=='随行就市'">随行就市</view>
					<view v-else>{{item.unitContractPrice?item.unitContractPrice:0}}</view>
				</view>
				<view v-if="item.priceType!='随行就市'" 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.show) { //此处判断，上锁，防止重复请求
				this.pageSize += 1
				this.currentPage += 1
				this.getList()
			}
			// }
		},
		methods: {
			contractclick(status) {
				this.show=false
				this.currentPage = 1
				this.agreementType = status
				this.getList()
			},
			searchTypeclick(status) {
				this.show=false
				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;
			font-weight: 700;

		}

		.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>