smart-app/pages/searchResults/searchResults.vue

<template>
	<view>
		<!--头部 搜索框 -->
			
		 	<view class="flex justify-between fixed cu-bar search  bg-blue" :style="style">
				<view class="action">
					<image src="/static/user/bask.png" @click="back(1)" class="login-img"></image>
				</view>		
		 		<view class="search-form round">
					<view @click="showdialog()" style="margin-left: 10px;" class="flex align-center">
						<text style="font-size: 28rpx;">{{typeName}}</text>
						<text v-if="icon"  class="cuIcon-unfold"></text>
						<text v-else="icon"  class="cuIcon-fold"></text>
					</view>
					<text class="margin-left-sm"> | </text>
		 			<image  src="/static/index/search-gray.png" class="login-img margin-left margin-right" style="padding: 0;"></image>
		 			<input @click="back(2)" style="padding: 0;"  v-model="searchValue" type="text" placeholder="请输入关键字搜索" confirm-type="search"></input>
					<image  style="padding: 0;"  @click="back(2)" src="/static/index/delete-gray.png" class="login-img margin-right-sm"></image>
		 		</view>
		 	</view>
		<scroll-view scroll-y="true" class="bg-white" style="height: 100vh;" lower-threshold="200" @scrolltolower="paging">
			<view :style="paddingTop"></view>
			<!-- 内容 -->
			<view class="cu-card article no-card">
				<view v-if="data.length>0" class="cu-item shadow solid-bottom" v-for="(item,index) in data" :key="item.id" @click="navTo(item)">
					<view class="content">
						<view class="desc">
							<view class="text-black text-lg padding-top " style="color:#101010 ;"> 
							    {{item.name}} 
							</view>
							<view class="padding-top">
								<view class="">
									<image :src="item.type == 4 ? '/static/index/fill-Information.png' : '/static/index/fill-Information-gray.png'"  class="menuImageTask margin-right-sm" ></image>
									<image :src="item.type == 4 || item.type != 4 ? '/static/index/dataAccuracy.png':'/static/index/dataAccuracy-gray.png'" class="menuImageTask margin-right-sm" ></image>
									<image :src="item.type == 4 ||  item.type != 4 ? '/static/index/shigong.png':'/static/index/shigong-gray.png'"   class="menuImageTask margin-right-sm"></image>
									<image :src="item.type == 4 ? '/static/index/constructionLedger.png':'/static/index/constructionLedger-gray.png'" class="menuImageTask margin-right-sm" ></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white text-center"  v-if="showOther">
					<view v-if="data.length==0">
						<view>
							<image class="menuImageNoTask" src="/static/task/noTask.png"></image>
						</view>
						<view style="padding:28rpx 0 132rpx;font-size: 26rpx;color: #8A8A8A;" class="list_no">没有找到符合条件的记录~</view>
				   </view>
				   <view v-else class="list_no">
					   没有更多内容了~
				   </view>
				</view>
			</view>
		</scroll-view>
	    <!-- 弹窗 -->
	    <view class="cu-modal bottom-modal" :class="modalShow?'show':''" >
	    	<view class="cu-dialog" style="background-color: white;border-radius: 20rpx 20rpx 0 0;">
	    		<view class="cu-bar bg-white">
	    			<view class="action text-gray"></view>
	    			<view class="action text-black text-bold" style="color: #101010;">选择分类</view>
	    			<view class="action text-gray" @tap="showdialog()">取消</view>
	    		</view>
	    		<view class="">
	    			<radio-group class="block" @change="RadioChange">
	    				<view class="cu-list menu text-left"  v-for="(item,index) in list" :key="index">
	    					<view class="cu-item" v-if="index!=2">
	    						<label  class="flex justify-between align-center flex-sub">
	    							<view class="flex-sub">{{item.name}}</view>
	    							<radio class="round" :class="radio==item.vlaue ?'checked':''" :checked="radio==item.vlaue ? true:false"
	    							 :value="item.value"></radio>
	    						</label>
	    					</view>
	    					<view class="cu-item" v-else-if="index==2 && choose" >
	    						<label class="flex justify-between align-center flex-sub">
	    							<view class="flex-sub" style="color: #101010;">{{item.name}}</view>
	    							<radio class="round" :class="radio==item.vlaue ?'checked':''" :checked="radio==item.vlaue ? true:false"
	    							 :value="item.value"></radio>
	    						</label>
	    					</view>
	    				</view>
	    			</radio-group>
	    		</view>
	    	</view>
	    </view>
	    	
	</view>
</template>

<script>
	export default {
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		data() {
			return {
				searchValue:"",
				listBoxStyle: '',
				list: [
					{value:'0',name:'全部节点'},
					{value:'1',name:'单位工程'},
					{value:'2',name:'分部工程'},
					{value:'3',name:'分项工程'},
					{value:'4',name:'工序节点'}
				],
				data:[],
				showOther:false,
				modalShow:false,
				radio: 0,
				choose:true,
				icon:true,
				typeName:"",
				paddingTop:"height:"+(this.StatusBar+50)+"px",
				
				allData:[],//所有数据
				pagingIndex:0,//当前页数
				pagingNum:15,//一页几条
			}
		},
		onLoad(e) {
			this.typeName =this.list[0].name;
			this.searchValue=e.searchValue;
			this.selectTree(e.searchValue,"0"); 
		},
		methods: {
			showdialog(){
				this.modalShow= !this.modalShow;
				this.icon= !this.icon;
			},
			RadioChange(e) {
				this.radio = e.detail.value;
				this.typeName =this.list[this.radio].name;
				this.selectTree(this.searchValue,this.radio); 
				this.showdialog();
			},
			navTo(data){
				uni.navigateTo({
					url:"/pages/searchDetails/searchDetails?id="+data.id+"&name="+data.name+"&nodeType="+data.type
				})
			},
			back(index){
				if(index==2){
					uni.$emit("clear")
				}
				uni.navigateBack({
					delta:1
				})
			},
			/* 获取单位、分部、分项、工序节点信息 */
			selectTree(name,type){
				var contractId = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id) .contractId;
				var that =this;
				that.showOther=false;
				that.http.request('/app/divideClient/appTPfDivideClientTree', 
				         {name:name,type:type,contractId:contractId}).then((result)=>{
							that.allData = result.datas;
							this.pagingIndex = 0;
							this.data = [];
							this.paging();
							that.showOther=true;
				})  
				
			},
			paging(){
				//console.log('paging')
				let startNum = this.pagingIndex*this.pagingNum;
				if(startNum > this.allData.length){
					//超出不加
					return;
				}
				let endNum = (this.pagingIndex+1)*this.pagingNum;
				//console.log(startNum,endNum)
				let addData = this.allData.slice(startNum,endNum);
				//console.log(addData)
				//console.log('addData')
				this.data.push(...addData);
				this.pagingIndex = this.pagingIndex+1;
			}
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
	.list_no{text-align: center;font-size: 26rpx;color: #AEAEAE;padding: 60rpx 0 200rpx;}
    .cu-card.article>.cu-item .content .text-content {
        font-size: 11px;
        color: #888;
        height: 100%;
        overflow: hidden;
    }
	.menuImageTask{
		height:80rpx;
		width: 80rpx;
	}
	.cu-modal.show {
		overflow-y: auto;
		pointer-events: auto; 
	}
	.menuImageNoTask{width:162rpx;height: 105rpx;margin-top: 60rpx;}
</style>