patrol-maintain-mobile/road/road/road.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;">
			<view class='showclear' v-if='showClear'>附近道路:</view>
			<u-radio-group :wrap="true">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in dataList" :key="index" 
							:name="item.id+','+item.name"
							
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
			<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 class="box-footer">
			<u-button type="primary" @click="towhichtype">确认</u-button>
			
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#007AFF'
				},
				mask: false,
				loadStatus:"loadmore",
				loadText:{
					loadmore:"加载更多",
					nomore:"已经到底了"
				},
				dataList: [],
				currentPage: 0,
				lastPage:0,
				keyword: "",
				title: "",
				longitude:"",
				latitude:"",
				showClear:false,
				totype:"",
				road_id:"",
				road_name:""
				
			}
		},
		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) {
			let that = this;
			that.totype=options.type
			uni.getLocation({
				type: "gcj02",
				geocode:true,
				success(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.loadPage(1);
				}
			})
			
		},
		methods: {
			towhichtype(){
				let totype = this.totype
				let url = "/packageA/pages/generalPatrol/generalPatrol";
				if (totype == 'general') {
					url ="/packageA/pages/generalPatrol/generalPatrol?roadid="+this.road_id+"&roadname="+this.road_name
				}
				if (totype == 'daily') {
					url = "/packageB/pages/dailyInspection/dailyInspection?roadid="+this.road_id+"&roadname="+this.road_name
				}
				if (totype == 'rainmaintain') {
					url = "/rainmaintain/rainmaintain/rainmaintain?roadid="+this.road_id+"&roadname="+this.road_name
				}
				if (totype == 'raininspection') {
					url = "/raininspection/raininspection/raininspection?roadid="+this.road_id+"&roadname="+this.road_name
				}
				uni.navigateTo({
					url: url
				})
			},
			radioChange(val){
				let arr = val.split(",")
				this.road_id = arr[0]
				this.road_name = arr[1]
			},
			tosearch() {
				this.latitude=""
				this.longitude=""
				this.loadPage(1)
			},
			towhat(id){
				uni.navigateTo({
					url:"../rainmaintain/rainmaintain?id="+id
				})
			},
			
			loadPage: function(page) {
				uni.hideKeyboard()
				var that = this;
				this.util.request({
					bindThis: that,
					api: '/api/mobile/other/road',
					customLoading: false,
					data: {
						page: 1,
						page_size: 30,
						longitude: that.longitude,
						latitude: that.latitude,
						name: that.keyword,
					},
					utilSuccess: function(r) {
						if(that.longitude!=""){
							// var res = r;
							that.showClear = true
							that.loadStatus = "nomore";
							that.dataList = r;
						}else{
							that.showClear = false
							that.loadStatus = "loadmore"
							var res = r.data;
							
							that.lastPage = r.last_page;
							uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
							if(r.total<30){
								that.loadStatus = "nomore";
							}
							var hasNoMore = that.dataList.length < 30 && 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);
							}
							
							that.currentPage = page;
							that.dataList = dataList;
						}
						
						
						
						
					},
					utilFail: function(res) {
						uni.stopPullDownRefresh();

						if (page == 1) {

							that.currentPage = page;
						}

						this.util.alert(res);
					}
				});
			}

		}

	}
</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: #007AFF;
		padding: 20rpx;
	}
	.u-radio{
		    margin: 5px 10px;
	}
	.showclear{
		font-size: 36rpx;
		padding:24rpx;
	}
	.overflowmask{
		overflow: hidden;
	}
	.loadmore{
		padding:24rpx!important;
		height: 281rpx!important;
		margin-top: -61rpx!important;
	}
	.box-footer{
		position: fixed;
		bottom:0;
		width:100%;
		z-index:99;
	}
	.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>