lxwx_front/pages/index/searchPage.vue

<template>
	<view class="searchBox">
		<view class="status_bar"></view>
		<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<u-icon
					name="arrow-left"
					size="19"
				></u-icon>
				<view class="title">
					列表
				</view>
			</view>
		</u-navbar>
		<view class="searchContent">
			<u-search :showAction="true" 
			actionText="搜索" 
			placeholder="请输入"
			style="padding:16upx 25upx;"
			bgColor="#F3F5F7"
			v-if="noSearch"
			v-model="catagoryName"
			@custom="searchHandle"
			:animation="false"></u-search>
			
			<view v-if="!noSearch">
				<wyb-drop-down
				 ref="dropDown"
				 active-color="#0076F6"
				 drop-icon="line"
				 :options="options"
				 defaultColor="#0076F6"
				 @getContent="getContent"
				>
				    <view class="tagList">
				    	<view :class="active==index?'tagItem active':'tagItem'" 
						v-for="(item,index) in tagList" 
						@click="clickSearchItem(item,index)"
						:key="index">
				    		{{item.name}}
				    	</view>
				    </view>
				</wyb-drop-down>
				<!-- <u-search placeholder="输入搜索内容" 
				:focus="false"
				@focus="clickHandle" 
				@blur="blurHandle"
				:showAction="false"
				 :class="disabled?'withSearch':'withSearch withSearchDisabled'" 
				 bgColor="#F3F5F7"
				 @search="searchHandle"
				 v-model="catagoryName"></u-search> -->
				
			</view>
			
		</view>
		<view v-if="contentList.length>0" :class="noSearch?'nosearchListContent marginTop':'nosearchListContent'">
			<view class="firstItem" v-for="item in contentList" 
			:key="item.id" @click="goNextSection(item)">
				<text>{{item.name}}</text>
				<text>{{item.subName}}</text>
			</view>
		</view>
		<view class="nodata" v-if="contentList.length==0">
			<image src="../../static/nodata.png" mode="widthFix"></image>
			<view class="empty">
				暂无数据
			</view>
		</view>
	</view>
	
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';
import { listData } from '@/common/api.js';
export default{
	
	data(){
		return{
			catagoryName:"",
			catagoryId:null,
			options: [{
				header: '国家地区选择',
				custom: true // 该栏目开启自定义模式
			}],
			tagList:[],
			active:-1,
			disabled:true,
			noSearch:true,
			contentList:[],
			typedata:null,
			originListRow:[],
			page:1,
			limit:20,
			total:0,
			wx_category_id:null
		}
	},
	components: {
		 wybDropDown
	},
	onLoad(option) {
		this.catagoryId = option.id
		this.typedata = option.typedata
		this.getListData(option.id)
	},
	methods:{
		getContent(val){
			this.catagoryName = val;
			this.page=1
			this.getListData(this.catagoryId)
		},
		searchHandle(){
			this.page=1
			this.getListData(this.catagoryId)
		},
		getListData(id){
			let params={
				wx_menu_id:id,
				typedata:this.typedata,
				name:this.catagoryName,
				page:this.page,
				limit:this.limit,
				wx_category_id:this.wx_category_id,
				sort:'weigh'
			}
			listData(params).then(res=>{
				if(res.searchList.length==0){
					this.noSearch = true;
					this.contentList = res.rows
				}else{
					this.tagList = res.searchList
					this.noSearch = false;
					this.contentList = res.rows;
					this.originListRow = res.rows;
					this.total = res.total;
					this.contentList.forEach(item=>{
						let subobj = res.searchList.filter(i=>{
							return item.wx_category_id==i.id
						})
						this.$set(item,'subName',subobj[0].name)
					})
				}
			})
		},
		getListData1(id){
			let params={
				wx_menu_id:id,
				typedata:this.typedata,
				name:this.catagoryName,
				page:this.page,
				limit:this.limit,
				wx_category_id:this.wx_category_id
			}
			listData(params).then(res=>{
				if(res.searchList.length==0){
					this.noSearch = true;
					this.contentList = res.rows
				}else{
					this.tagList = res.searchList
					this.noSearch = false;
					this.contentList.push(...res.rows);
					this.originListRow = res.rows;
					this.contentList.forEach(item=>{
						let subobj = res.searchList.filter(i=>{
							return item.wx_category_id==i.id
						})
						this.$set(item,'subName',subobj[0].name)
					})
				}
			})
		},
		clickSearchItem(item,index){
			console.log(item,index,"--==")
			this.page = 1
			if(this.active==index){
				this.options[0].header = '国家地区选择'
				this.active=-1;
				this.wx_category_id = null,
				// this.contentList = this.originListRow
				this.getListData(this.catagoryId)
			}else{
				this.options[0].header = item.name;
				this.active=index;
				// let afterList = this.originListRow.filter(i=>{
				// 	return i.wx_category_id == item.id
				// })
				// this.contentList = afterList
				this.wx_category_id = item.id
				this.getListData(this.catagoryId)
			}
			this.$refs.dropDown.close()
		},
		clickHandle(){
			this.disabled = false;
		},
		leftClick(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		blurHandle(){
			this.disabled = true;
		},
		
		goNextSection(item){
			uni.navigateTo({
				url:'/pages/detail/detail?id='+item.id
				// url:'/pages/detail/detail?id='+item.wx_category_id
			})
		}
	},
	onReachBottom(){
		console.log('已触底');
		if(this.contentList.length<this.total){
			this.page++;
			this.getListData1(this.catagoryId)
		}else{
			return;
		}
			
	}

}
</script>

<style lang="scss" scoped>
/deep/.u-navbar--fixed{
	z-index: 99999;
}
/deep/.u-nav-slot{
	display: flex;
	align-items: center;
	.title{
		font-size: 36upx;
		color: #222222;
	}
}
.searchContent{
	border-top:1px solid transparent;
	margin-top:50px;
	background-color: #ffffff;
	// padding:16upx 25upx;
}
.searchBox{
	position:relative;
}
.withSearch{
	position:absolute;
	z-index:999;
	top:110upx;
	right:24upx;
	width:180upx;
	height:70upx;
}
.withSearchDisabled{
	width:auto !important;
	max-width: 50%;
}
.marginTop{
	margin-top:0upx !important;
}
.nosearchListContent{
	border-top:1upx solid transparent;
	margin-top:100upx;
	.firstItem{
		margin-top:20upx;
		padding:29upx 23upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&>text{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
}
.tagList{
	// margin-top:20upx;
	display: flex;
	padding:39upx 24upx;
	flex-wrap: wrap;
	justify-content: space-between;
	&:after {
	    content: "";
	    flex: 1;
	}
	.tagItem{
		width: 150upx;
		height: 56upx;
		background: #F6F6F6;
		border-radius: 10upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 56upx;
		text-align: center;
		margin:10upx;
	}
	.active{
		background: #EDF6FF !important;
		color: #0076F6 !important;
	}
}
.nodata{
	margin-top:200rpx;
	text-align: center;
	image{
		width:30%;
		height:auto;
	}
}
</style>