JianjianStreet-aplet/components/select-search/select-search.vue

<template>
	<view class="content">
		<!-- 选择展示框 -->
		<u-dropdown  ref="uDropdown" @open="open" @close="close">
			<u-dropdown-item v-model="region" :title="region" :options="options1">
				<!-- 地区联动 -->
			</u-dropdown-item>

			<u-dropdown-item v-model="live" :title="live.length>1?'多选':live[0]" :options="options2">
				<!-- 分栏 -->
			</u-dropdown-item>
			<u-dropdown-item v-model="price" :title="price" :options="options2">
				<!-- 价格区间选择 -->
				<view class="Price-box">
					<view class="Price-box-title">
						快捷选择
					</view>
					<view class="Price-box-select">
						<view class="Price-box-select-row" v-for="(item,index) in price_list" :key="index"  @click="changePriceIndex(index)">
							<u-tag :text="item.conten" :mode="item.mode" size="select-custom"/>
						</view>
					</view>
				</view>
				
				<!-- 间隔区间线 -->
			</u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script>
	export default {
		name: "select-search",
		props: {
			list: {
				typeof: Array,
				default: []
			}
		},
		data() {
			return {
				region: '区域',
				live: ['居住',],
				price: '租金',
				priceIndex: '', //记录价格坐标 
				price_list: [
					{
					mode: 'plain',
					conten: '不限'
					},{
						mode: 'plain',
						conten: '<800'
					},{
						mode: 'plain',
						conten: '800-1000'
					},{
						mode: 'plain',
						conten: '>1000'
					}]
			};
		},
		methods: {
			open(index) {
				console.log(index,"打开")
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				console.log(index,"关闭")
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change() {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
				console.log(this.$refs.uDropdown)
			},
			// 请求数据
			/*
			 *  将请求的价格做相应的处理
			 * 小标的plain空 light量
			 * list[
				 * {mode: 'plain', content:'内容'}]
			 *
				*/
			 // 选择价格
			 changePriceIndex(index){
				 console.log(index)
				 // 只能选择一个
				 const price_list = this.price_list;
				 // 如果记录的下标值不为空且与之前记录的值不同则将之前的暗灭
				 if(this.priceIndex !== index && this.priceIndex !== ''){
					 this.price_list[this.priceIndex].mode = 'plain';
					 // 将值保存到一个地方
				 }
				 
				 if(this.priceIndex === index ){
					 // 取消保存的值
				 }
				 this.priceIndex = index
				 if(price_list[index].mode === 'dark'){
						this.price_list[index].mode = 'plain'
				 }else {
					 this.price_list[index].mode = 'dark'
				 }
				 this.price_list = price_list
			 }
		}
	}
</script>

<style lang="scss" scoped>

	.content {
		width: 100%;
		height: 80rpx;
		border-bottom: rgba(167, 164, 162, .3);
		.Price-box{
			background-color: #fff;
			&-title{
				padding-top: 26rpx;
				padding-left: 20rpx;
				font-weight: 700;
				font-size: 36rpx;
			}
			&-select{
				display: flex;
				flex-wrap: wrap;
				padding-top: 24rpx;
				width: 100%;
				&-row{
					padding: 30rpx 20rpx;
					height: 80rpx;
					font-size: 28rpx;
				}
			
			}
		}
	}
</style>