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

<template>
	<view>
		<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='item left active'>销售</view>
				<view class='item'>采购</view>
				<view class='item'>收购</view>
				<view class='item'>代收</view>
				<view class='item right'>代储</view>
			</view>
		</view>
		<view class='costwrap'>
			<view class='item active'>全部</view>
			<view class='item'>粮款</view>
			<view class='item'>非粮款</view>
			<view class='item'>保证金</view>
		</view>
		<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:#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></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">卖方</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">合同重量（吨）</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">合同单价（元/吨）</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">合同总价（元）</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">已付款（元）</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">已开发票（元）</view>
				<view></view>
			</view>
			<view  class='flex contractwrap-item'>
				<view class="title">签订日期</view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractList:[
					{status:'已完成',
					contractNo:'HT39854455',
					costtype:'水费',
					costmoney:'121111',
					warehouse:'金信库',
					name:'张三',
					date:'2022.11.22 15:32:21'},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style  lang='scss' scoped>
.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>