yiliangyiyun-app/pages/dataReport/Inventoryentrydetails.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='justify-content: space-between;background:#fff;padding:20rpx;' class='flex'>
			<view @click='show=true'>{{startDate}}-{{endDate}}></view>
			<view>全部仓库></view>
		</view>
		<u-calendar v-model="show" :mode="mode"></u-calendar>
		<view class='contractwrap' v-for='(item,index) in warehouseList'>
			<view class='flex contractwrap-title'>
				<view class='contractNo'>{{item.contractNo}}</view>
				<view class='contractNo'>{{item.date}}</view>
			</view>
			<view style='background:#EFFAF4;border-radius:10rpx;'>
				<view style='color:#22C572;padding:20rpx;border-bottom:1rpx solid #D8E8E0;' class='flex'>
					<view>111</view>
					<view></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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startDate:'',
				endDate:'',
				mode:'range',
				show:false,
				warehouseList:[
					{status:'已完成',
					contractNo:'HT39854455',
					costtype:'水费',
					costmoney:'121111',
					warehouse:'金信库',
					name:'张三',
					date:'2022.11.22 15:32:21'},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			var date=new Date()
			this.startDate=date.getFullYear()+'-'+((date.getMonth()+1)<10?('0'+(date.getMonth()+1)):(date.getMonth()+1))+'-'+(date.getDate()-1)
			this.endDate=date.getFullYear()+'-'+((date.getMonth()+1)<10?('0'+(date.getMonth()+1)):(date.getMonth()+1))+'-'+date.getDate()
		},
		methods: {
		}
	}
</script>

<style  lang='scss' scoped>

.contractwrap{
	background:#fff;
	margin:20rpx;
	padding:20rpx 20rpx 40rpx 20rpx;
	border-radius:20rpx;
	.contractwrap-title{
		font-size:28rpx;
		padding:20rpx;
		justify-content: space-between;
		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>