znyc.dispatching.wx/pages/construction_unit/construction_unit.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>
			<view class="sx_css">
				<image
					:src="!show_shaixuan? '/static/images/common/shaixuan.png': '/static/images/common/shaixuan_have.png'" 
					@click="click_shaixuan"
				></image>
			</view>
			<navigator
				url="/pages/construction_add/construction_add" 
				hover-class="none"
			>
				<view class="addGongc2">
					<image src="/static/images/common/add.png"></image>
				</view>
			</navigator>
			<!-- 筛选框 -->
			<view class="search_box" v-if="show_shaixuan">
				<view class="search_box_item" :class="isEnabled==-1?'isEnabled':''" @click="is_ok_fn(-1)"> 全部 </view>
				<view class="search_box_item" :class="isEnabled==1?'isEnabled':''" @click="is_ok_fn(1)"> 启用 </view>
				<view class="search_box_item" :class="isEnabled==0?'isEnabled':''" @click="is_ok_fn(0)"> 禁用 </view>
			</view>
		</view>
		<lndexlist 
			@onclick="changeproject" 
			@onRefresh="onRefresh" 
			:list="peopleList" 
			type="companyInfo" 
			:is_no="is_no" 
			:triggered="triggered"
		></lndexlist>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	import lndexlist from "@/components/index-list2/index-list2.vue";
	export default {
		components:{
			lndexlist
		},
		data() {
			return {
				peopleList:[],
				is_no:false,
				isLoading:false, //是否在加载中
				isEnabled:1,//是否启用
				currentPage:1,
				pageSize:20,
				serchValue:'',    //搜索值
				show_shaixuan:false,//筛选
				triggered:false
			};
		},
		onLoad(options) {},
		onShow() {
			this.get_list();
		},
		methods:{
			onRefresh() {
				if (!this.isLoading) {
					this.triggered = true;
					this.isLoading = true;
					this.get_list();
				}
			},
			//点击筛选
			click_shaixuan() {
				this.show_shaixuan = !this.show_shaixuan;
			},
			//确认筛选
			is_ok_fn(e) { 
				this.isEnabled = e;
				if (!this.isLoading) {
					this.isLoading = true;
					this.currentPage = 1;
					this.get_list();
				};
				this.show_shaixuan = false;
			},
			// 点击列表
			changeproject(item){
				uni.navigateTo({
					url: "/pages/construction_add/construction_add?item=" + JSON.stringify(item)
				});
			},
			// 搜索
			onSearch(e){
				if(!this.isLoading){
					this.isLoading = true;
					this.currentPage = 1;
					this.get_list();
				}
			},
			get_list(){
				let url=urlList.get_construction+'?key='+this.serchValue+'&status='+this.isEnabled;
				https(url, 'GET', '', '').then(res => {
					this.peopleList = res.data.constructionLetterOutputs;
					if(res.data.total == 0){
						this.is_no = true
					};
					this.isLoading = false;
					this.triggered = 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%;
	.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%;
		}
		.sx_css{
			width:80rpx;
			height:60rpx;
			margin-left: 10rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.addGongc2{
			height: 80rpx;
			width: 80rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.search_box {
			position: fixed;
			width: 120rpx;
			top: 88rpx;
			box-shadow: #ebebeb 2px 2px 2px;
			text-align: center;
			background: white;
			border-radius: 10rpx;
			font-size: 24rpx;
			right:60rpx;
			border: solid 1rpx #ebebeb;
			z-index: 9999;
			.search_box_item {
				padding: 10rpx 0;
			}
			.isEnabled {
				background: #5597ed;
				color: white;
				border-radius: 10rpx;
			}
		}
	}
}
</style>