You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.4 KiB
142 lines
3.4 KiB
<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>
|