znyc.dispatching.wx/pages/taskcar_models/taskcar_models.vue

<template>
	<view id="warp">
		<view class="warp_search">
			<view class="top_search">
				<uni-search-bar 
					style="width: 100%" 
					bgColor="white" 
					placeholder="搜索" 
					v-model="serchValue"
					@input="onSearch" 
					clearButton="none"
				></uni-search-bar>
			</view>
			<navigator
				v-if="isSelect != 1" 
				url="/pages/taskcar_models_add/taskcar_models_add" 
				hover-class="none"
			>
				<view class="addGongc2">
					<image src="/static/images/common/add.png"></image>
				</view>
			</navigator>
		</view>
		<!-- <lndexlist 
			@onclick="changeproject" 
			@onRefresh="onRefresh" 
			:list="peopleList" 
			type="taskCar" 
			:is_no="is_no" 
			:triggered="triggered"
		></lndexlist>
		 -->
		 <view class="bottom">
		 	<scroll-view
		 		style="width: 100%;height:100%;"
		 		scroll-y
		 		scroll-top="0"
		 		refresher-enabled 
		 		scroll-anchoring
		 		:refresher-triggered="isHideLoading"
		 		@scrolltolower='upLoading' 
		 		@refresherrefresh='downLoading'
		 	>	
		 		<block v-if="peopleList.length > 0">
					<view 
						class="list-item" 
						v-for="(item,index) in peopleList" 
						:key="index" 
						@click="changeproject(item)"
					>
						<view class="l_item_name">{{item.name}}</view>
					</view>
				</block>
		 		<view v-if="is_no" class="blank" >
		 			<image class="blank_image" src="/static/images/common/none.png"></image>
		 			<text>暂无数据 ~~ </text>
		 		</view>
		 	</scroll-view>
		 </view>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	// import lndexlist from "@/components/index-list2/index-list2.vue"
	export default {
		data() {
			return {
				isSchedulingAddProject:false,    //是否是编辑
				isSelect:0,//是否是派工页面进来选择工程   0否  1是
				peopleList:[],
				is_no:false,
				serchValue:'',    //搜索值
				isHideLoading:false,   //下拉加载状态
				isLoading:false, //是否在加载中
				page:1,
				pageSize:30,
			};
		},
		components:{
			// lndexlist
		},
		onLoad(options) {
			const that = this;
			that.isSelect = options.isSelect == 1?1:0;
		},
		onShow() {
			this.reset();
		},
		methods:{
			// 上拉加载
			upLoading(){
				if(!this.isLoading){
					this.isLoading = true;
					this.page+=1;
					this.get_list();
				}
			},
			// 下拉刷新
			downLoading(){
				this.page = 1;
				this.isHideLoading = true;
				this.isLoading = true;
				this.peopleList=[];
				this.get_list();
			},
			reset(){
				this.page = 1;
				this.peopleList=[];
				this.get_list();
			},
			// 点击列表
			changeproject(item){
				if(this.isSelect == 1){
					var pages = getCurrentPages();
					console.log('派工选择任务车型',item)
					var prevPage = pages[pages.length - 2];  //上一个页面
					prevPage.$vm._data.vehicleType = item.id;
					prevPage.$vm._data.vehicleTypeName = item.name;
					uni.navigateBack();//返回上一页面
				}else{
					let carType = JSON.stringify(item);
					console.log('编辑',item)
					uni.navigateTo({
						url: "/pages/taskcar_models_add/taskcar_models_add?item="+carType
					});
				}
				
			},
			// 搜索
			onSearch(e){
				this.page = 1;
				if(!this.isLoading){
					this.isLoading = true;
					this.peopleList = [];
					this.get_list();
				}
			},
			get_list(){
				const _that = this;
				let url = urlList.getVehicleTypeList+
						  '?key='+_that.serchValue+
						  '&currentPage='+_that.page+
						  '&pageSize='+_that.pageSize+
						  '&status='+_that.isSelect;
				https(url, 'GET', '', '').then(res => {
					console.log('任务车型',res)
					let list = res.data.items;
					if(list.length != 0){
						if(_that.page == 1){
							_that.peopleList = list;
						}else{
							_that.peopleList = _that.peopleList.concat(list);
						}
					}else{
						if(_that.page > 1){
							_that.page-=1;
						}else{
							_that.is_no = true;
						}
					};
					_that.isLoading = false;
					_that.isHideLoading = false;
				}).catch(err => {
					console.log(err)
				})
			}
		
		},
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	} 
</style>
<style lang="scss" scoped>
#warp{
	width: 100%;
	display: flex;
	flex-direction: column;
	.warp_search {
		width: 100%;
		background-color: #fff;
		position: relative;
		top: 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height:88rpx;
		.top_search {
			width: 100%;
			flex:1;
		}
		.addGongc2{
			height: 80rpx;
			width: 80rpx;
			margin-right: 20rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
	}
	.bottom {
		height: calc(100vh - 90rpx);
		box-sizing: border-box;
		// border: 1rpx solid red;
		display: flex;
		flex-direction: column;
		align-items: center;
		.list-item {
			width: 95%;
			height: 80rpx;
			margin: 0 auto;
			background-color: white;
			margin-top: 5rpx;
			margin-bottom: 10rpx;
			border-radius: 3rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.l_item_name {
				margin-left: 32rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 27rpx;
				// font-weight: bold;
			}
		}
		.blank{
		  font-size: 24rpx;
		  color: #999999FF;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		}
		.blank image{
			width: 300rpx;
			height: 240rpx;
			margin-bottom: 40rpx;
		}
	}
}
</style>