zhgdyunapp_vue3/pages/projectEnd/realMonitor/pouringOrderManage.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" class="fixedHeaderBox">
			<view class="headerName">
				浇筑令管理
			</view>
		</headers>
		<!-- <view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
			<input type="text" v-model="searchForm.eduCourseName" confirm-type="search" class="input" placeholder-style="color:rgba(72, 141, 236, 0.5)" placeholder="按培训主题查找" @confirm="list=[];loadData()" />
		</view> -->
		<view class="listBox" :style="{ 'padding-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
			<view class="listItem" v-for="item in list" :key="item.id" @click="goAdd(item.id)">
				<view class="title">
					混泥土标号：{{item.concreteTab}}
				</view>
				<view class="bottom">
					{{item.buildName}}>{{item.floorName}}层
				</view>
				<view class="bottom">
					浇筑日期：{{item.pourTime}}
				</view>
				<image src="/static/icon-right.png" class="icon-right"></image>
			</view>
			<view class="placeholderBox" v-show="list.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<view class="loadMoreBox" v-if="isLoadMore">
			<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
		</view>
		<view style="height: 120rpx;">
			
		</view>
		<view class="bigOperateBtn" @click="goAdd('')">
			新增电子浇筑令
		</view>
	</view>
</template>

<script>
	// import headers from "../../../components/headers/headers.vue"
	// import uniLoadMore from "../../../../components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				searchForm:{
					pageNo: 1,
					pageSize: 10,
					projectSn: ""
				},
				projectDetail:{},
				list:[],
				statusBarHeight:0,
				loadStatus:'more',
				isLoadMore:false
			};
		},
		onLoad() {
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchForm.projectSn=this.projectDetail.projectSn
			
		},
		onShow() {
			this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
			// uni.removeStorageSync('person')
		},
		onReachBottom() {
			if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.searchForm.pageNo+=1
				this.loadData()
			}
		},
		onPullDownRefresh() {
			this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
		},
		methods:{
			loadData(){
				var that = this
				this.sendRequest({
					url: 'xmgl/electronPourOrder/list',
					data: this.searchForm,
					method: "POST",
					success(res){
						that.list=that.list.concat(res.result.records)
						if(res.result.records.length<that.searchForm.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
							  that.isLoadMore=true                                             
							  that.loadStatus='nomore'
						}else{
							  that.isLoadMore=false
							  // that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						console.log('that.isLoadMore',that.isLoadMore)
					}
				})
			},
			goAdd(id){
				uni.navigateTo({
					url:'./addPouringOrder?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.searchBox{
	background-color: #2b8df3;
	padding: 0 30rpx 10rpx;
	position: fixed;
	left: 0;
	width: calc(100% - 60rpx);
	top: 0;
	z-index: 1;
	.input{
		border-radius: 36rpx;
		height: 70rpx;
		text-align: center;
		background-color: white;
	}
}
.bigOperateBtn{
	position: fixed;
	bottom: 30rpx;
	left: 30rpx;
	width: calc(100% - 60rpx);
	background: #488DEC;
	box-shadow: 0px 4px 8px 0px rgba(43, 141, 243, 0.42);
	border-radius: 50rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: white;
	font-size: 40rpx;
	text-align: center;
}
.listBox{
	margin: 30rpx;
}
.listItem{
	box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
	position: relative;
	margin-bottom: 10rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	.title{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.bottom{
		color: rgba(55, 45, 102, 0.5);
		font-size: 24rpx;
	}
	.tags{
		background-color: rgba(197, 117, 229, 1);
		border-radius: 4px;
		padding: 1px 6rpx;
		margin-right: 16rpx;
		color: white;
	}
	.time{
		margin-right: 24rpx;
	}
}
.icon-right{
	position: absolute;
	width: 16rpx;
	height: 28rpx;
	right: 30rpx;
	top: calc(50% - 7px);
}
</style>