patrol-maintain-mobile/raininspection/raininspectionlist/raininspectionList.vue

<template>
	<view class="boxContent">

		<view class="box-header">
			<view class="search-wrap">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
				<u-search v-model="keyword" placeholder="请输入关键词" @search="tosearch()" height="56"
					:action-style="{color: '#fff'}">
				</u-search>
			</view>
			
		</view>
		<view :class="mask?'list listfixed':'list'" style="padding-top: 100rpx;">
			<u-dropdown ref="uDropdown"  @open="openmask" @close="closemask" :class="mask?'':'overflowmask'" >
				<u-dropdown-item v-model="typeId" :title="typeStatus==''?'巡查类型':typeStatus" @change="toChangeTypeStatus"
					:options="typeList">
				</u-dropdown-item>
				<u-dropdown-item v-model="statusId" :title="proStatus==''?'状态':proStatus" @change="toChangeStatus"
					:options="statusList">
				</u-dropdown-item>
				
			</u-dropdown>
			<block v-for="(item, index) in dataList">
				<u-card :title="item.created_at" padding="20" margin="20rpx" :border="true"
					:sub-title="item.statusName" :thumb="thumb" thumb-width="36">
					<view class="" slot="body" @click="todetail(item.id)">
						<u-row gutter="16">
							<u-col span="4">
								<view class="demo-layout bg-purple">地址/排放点：</view>
							</u-col>
							<u-col span="12">
								<view class="demo-layout bg-purple-light">{{item.address}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">巡查类型：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{item.typeName}}</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout bg-purple">所属片区：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{item.area_info.name}}</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout bg-purple">所属道路：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{item.road_name}}</view>
							</u-col>
						</u-row>
						<!-- <u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">描述：</view>
							</u-col>
							<u-col span="12">
								<view class="demo-layout bg-purple-light">{{item.content}}</view>
							</u-col>
						</u-row> -->
					</view>
					<view class="footer" slot="foot">
						<block v-if="item.status==0">
							<u-button :custom-style="editStyle" type="primary"  size="medium"
								@click="toedit(item.id)" :ripple="true">编辑
							</u-button>
						</block>
						<block v-if="item.status!=0">
							<u-button :custom-style="editStyle" type="primary"  size="medium"
								@click="todetail(item.id)" :ripple="true">查看
							</u-button>
						</block>
						<block v-if="item.status==0 || item.status==1">
							<u-button type="error" size="medium" @click="del(item.id)"
								:custom-style="customStyle" :ripple="true">删除
							</u-button>
						</block>
					</view>
				</u-card>

			</block>
			<u-loadmore class="loadmore" :status="loadStatus" :load-text="loadText"/>
			<u-empty text="暂无数据" margin-top="200" v-if="dataList.length==0" mode="list"></u-empty>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#0385e5'
				},
				mask: false,
				loadStatus:"loadmore",
				loadText:{
					loadmore:"加载更多",
					nomore:"已经到底了"
				},
				dataList: [],
				thumb: "/static/img/location.png",
				currentPage: 0,
				lastPage:0,
				editStyle:{
					fontSize:'30rpx'
				},
				customStyle: {
					marginLeft: '20px',
					fontSize:'30rpx'
				},
				value1Arr: [],
				keyword: "",
				title: "",
				stat: [],
				statusId:"",
				proStatus:"",
				typeId:"",
				typeStatus:"",
				typeList: [{
					label: "所有",
					value: ''
				}, {
					label: "日常雨水设施",
					value: 1
				}, {
					label: "在建工地",
					value: 2
				}],
				statusList: [{
					label: "所有",
					value: ''
				}, {
					label: "待审核",
					value: "0"
				}, {
					label: "已审核",
					value: 1
				}, {
					label: "已办结",
					value: 2
				}, {
					label: "已退回",
					value: 3
				}]
			}
		},
		onReachBottom: function(e) {
			if(this.currentPage>=this.lastPage){
				this.loadStatus = "nomore"
				return;
			}
			this.loadPage(this.currentPage + 1);
		},
		onPullDownRefresh: function(e) {
			this.loadPage(1);
		},
		onShow: function() {
			var that = this;
		},
		onLoad(options) {
			this.loadPage(1);
		},
		methods: {
			openmask(){
				this.mask=true
				// this.isPullDown(false);
			},
			closemask(){
				this.mask=false
				// this.isPullDown(true);
			},
			tosearch() {
				this.loadPage(1)
				this.$refs.uDropdown.close();
			},
			toChangeStatus: function(value) {
				for(var m of this.statusList){
					if(value == m.value){
						this.proStatus = m.label
					}
				}
				console.log(this.proStatus )
				this.loadPage(1);
				this.$refs.uDropdown.close();
			},
			toChangeTypeStatus: function(value) {
				for(var m of this.typeList){
					if(value == m.value){
						this.typeStatus = m.label
					}
				}
				this.loadPage(1);
				this.$refs.uDropdown.close();
			},

			toedit(id){
				uni.navigateTo({
					url:"../raininspection/raininspection?id="+id
				})
			},
			todetail: function(id) {
				uni.navigateTo({
					url: "../raininspectioninfo/raininspectionInfo?id=" + id
				})
			},
			loadAllArea(){
				
			},
			
			loadPage: function(page) {
				uni.hideKeyboard()
				var that = this;
				this.util.request({
					bindThis: that,
					api: '/api/mobile/rain-inspection/index',
					customLoading: false,
					data: {
						page: page,
						page_size: 4,
						keyword: that.keyword
					},
					utilSuccess: function(r) {
						var res = r.data;
						that.lastPage = r.last_page;
						uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
						if(r.total<5){
							that.loadStatus = "nomore";
						}
						var hasNoMore = that.dataList.length < 4 && page > 1;
						if (hasNoMore || res.length == 0 && page > 1) {
							// 已加载到最后一页
							that.loadStatus = "nomore";
							uni.showToast({
								title: '已加载到最后一页',
								icon: 'none'
							});
							return;
						}
						var dataList = that.dataList;


						if (page == 1) {
							dataList = res;
						} else {
							dataList.push(...res);
						}
						for (var m of dataList) {
							m.created_at = m.created_at.split("T")[0]
							switch(m.status){
								case 0:
									m.statusName = "待审核"
									break
								case 1:
									m.statusName = "已审核"
									break
								case 2:
									m.statusName = "已办结"
									break
								case 3:
									m.statusName = "已退回"
									break
								
								default:
									
									break;
							}
							switch(m.type){
								case 1:
									m.typeName = "日常雨水设施"
									m.road_name = m.rain_equipment_info.road?m.rain_equipment_info.road.name:""
									break
								case 2:
									m.typeName = "在建工地"
									m.road_name = m.building_site_info.road? m.building_site_info.road.name:""
									break
								
								default:
									
									break;
							}
						}
						console.log(dataList)

						that.currentPage = page;
						that.dataList = dataList;
					},
					utilFail: function(res) {
						uni.stopPullDownRefresh();

						if (page == 1) {

							that.currentPage = page;
						}

						this.util.alert(res);
					}
				});
			},
			del(id){
				 var that = this;
				 uni.showModal({
					  title: '提示',
					  content: '是否确定删除？',
					  success(res) {
						  if(res.confirm){
							  that.util.request({
								  api: '/api/mobile/rain-inspection/destroy',
								  customLoading: false,
								  method:"get",
								  data: {
								  	id:id
								  },
								  utilSuccess: function(r) {
									  uni.showToast({
									  	icon: "none",
									  	title: "删除成功",
									  	complete() {
									  		that.loadPage(1)
									  	},
									  	duration: 2000
									  })
								  },
								  utilFail:function(r) {
									  this.util.alert(res);
								  },
								  
							  })
						  }else if(res.cancel){
							  
						  }
					  }
					 
					 
					 
				 })
			}

		}

	}
</script>
<style>
	.boxContent {
		background: #f3f4f6;
		min-height: 100vh;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
	}

	.box-header {

		position: fixed;
		/* top: 0; */
		width: 100%;
		z-index: 99;
	}


	.u-row {
		margin: 10rpx 0;
		font-size: 28rpx;
	}
	.u-card{
		z-index: 1;
	}
</style>


<style scoped lang="scss">
	.search-wrap {
		background: #0385e5;
		padding: 20rpx;
	}
	.overflowmask{
		overflow: hidden;
	}
	.loadmore{
		padding:24rpx!important
	}
	.listfixed{
		position: fixed;
		width:100%;
	}
	.u-config-wrap {
		padding: 30rpx;
	}

	.bg-purple {
		font-weight: bold;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}
</style>