条件搜索查询组件
This commit is contained in:
@@ -2,60 +2,83 @@
|
||||
<div class="seach-box" :class="{ 'seach-history-h': show }">
|
||||
<div class="seach-info-box">
|
||||
<div class="select-module-box">
|
||||
<div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
|
||||
<div class="top-box" @click="checkList.list.splice(0, checkList.list.length)">
|
||||
<img src="../../assets/homeImage/topTitleIcon.svg"
|
||||
v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
|
||||
<div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
|
||||
<span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
|
||||
v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
|
||||
<div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
|
||||
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限</span>
|
||||
</div>
|
||||
<div style="padding-top:10px;">
|
||||
<el-checkbox-group v-model="checkList.value">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 C"></el-checkbox>
|
||||
<el-checkbox label="复选框 D"></el-checkbox>
|
||||
<el-checkbox label="复选框 E"></el-checkbox>
|
||||
<el-checkbox label="复选框 F"></el-checkbox>
|
||||
<el-checkbox label="复选框 G"></el-checkbox>
|
||||
<el-checkbox label="复选框 H"></el-checkbox>
|
||||
<el-checkbox label="复选框 I"></el-checkbox>
|
||||
<el-checkbox-group v-model="checkList.list">
|
||||
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-check-btn-box">
|
||||
<div class="true-btn seach-btn" @click="selectSeach">选好了</div>
|
||||
<div class="seach-btn" @click="closeSeach">取消</div>
|
||||
<div class="true-btn seach-btn" @click="selectSeach(checkList.list)">选好了</div>
|
||||
<div class="seach-btn" @click="closeBtn">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
//
|
||||
let checkList = reactive([])
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeSeach:{
|
||||
type:Function,
|
||||
},
|
||||
selectSeach:{
|
||||
type:Function
|
||||
import { reactive ,ref,watchEffect,watch} from 'vue';
|
||||
//props
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeSeach: {
|
||||
type: Function,
|
||||
},
|
||||
selectSeach: {
|
||||
type: Function
|
||||
},
|
||||
watchData: {
|
||||
type: Function,
|
||||
default:()=>{
|
||||
return ()=>{}
|
||||
}
|
||||
}
|
||||
})
|
||||
let list =reactive([])
|
||||
let show =null
|
||||
let closeSeach = props.closeSeach
|
||||
let selectSeach = props.selectSeach
|
||||
let watchData= props.watchData
|
||||
|
||||
//所选选项
|
||||
let checkList = reactive({list:[]})
|
||||
|
||||
//监听刷新
|
||||
watchEffect(() => {
|
||||
show = props.show
|
||||
list.splice(0,list.length)
|
||||
list.push(...props.list)
|
||||
// console.log(show)
|
||||
if(show){
|
||||
checkList.list=[]
|
||||
}
|
||||
})
|
||||
|
||||
watch(()=>checkList.list,(nval,avl)=>{
|
||||
watchData(nval)
|
||||
})
|
||||
|
||||
//取消
|
||||
let closeBtn=()=>{
|
||||
checkList.list.splice(0,checkList.list.length)
|
||||
closeSeach()
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.seach-history-h {
|
||||
@@ -64,9 +87,6 @@ export default {
|
||||
}
|
||||
|
||||
.seach-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
z-index: 666;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -80,9 +100,9 @@ export default {
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
/* -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); */
|
||||
|
||||
.seach-check-btn-box {
|
||||
width: 100%;
|
||||
@@ -168,5 +188,16 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background:#50e3c2;
|
||||
border-color:#50e3c2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,22 +8,24 @@
|
||||
<div class="info-box-bg">
|
||||
<div class="box"
|
||||
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
|
||||
<div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
|
||||
v-if="seachType === '1'">
|
||||
{{ item.text }}</div>
|
||||
|
||||
<div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
|
||||
v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
|
||||
|
||||
<div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
|
||||
:class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
|
||||
v-for="(item, i) in btn" :key="i">
|
||||
<div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
|
||||
{ 'btn': seachType === '1' },
|
||||
{ 'mg-l-15': seachType === '1' && i % 4 !== 0 },
|
||||
{ 'seach-long-btn btn': seachType === '2' },
|
||||
{ 'mg-l-15': seachType === '2' && i % 3 !== 0 },
|
||||
{ 'select-btn': seachType === '3' },
|
||||
{ 'mg-l-15': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
|
||||
]">
|
||||
{{ item.text }}
|
||||
<img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
<img v-if="seachType === '3'"
|
||||
:src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
|
||||
<div v-if="seachType === '3'" class="hid-box">
|
||||
<checkBoxGroup :show="selectType !== ''" :selectSeach="selectSeach" :closeSeach="closeSeach" :list="selectData.data">
|
||||
</checkBoxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,13 +35,39 @@
|
||||
import { reactive, ref } from 'vue';
|
||||
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
|
||||
|
||||
let selectType = ref('')
|
||||
const props = defineProps({
|
||||
seachType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '123'
|
||||
},
|
||||
btn: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let seachType = props.seachType
|
||||
let title = props.title
|
||||
let btn = JSON.parse(JSON.stringify(props.btn))
|
||||
//
|
||||
let setSelectType = (num) => {
|
||||
if (num === selectType.value) {
|
||||
selectType.value = ''
|
||||
} else {
|
||||
selectType.value = num
|
||||
|
||||
let selectType = ref('')
|
||||
let selectData = reactive({data:[]})
|
||||
//点击选项
|
||||
let setSelectType = (num,data) => {
|
||||
if (seachType == 3) {
|
||||
if (num === selectType.value) {
|
||||
selectType.value = ''
|
||||
} else {
|
||||
selectType.value = num
|
||||
selectData.data=data
|
||||
}
|
||||
}
|
||||
}
|
||||
//取消按钮
|
||||
@@ -48,30 +76,10 @@ let closeSeach = () => {
|
||||
}
|
||||
|
||||
//确认按钮
|
||||
let selectSeach=()=>{
|
||||
|
||||
let selectSeach = (data) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '123'
|
||||
},
|
||||
btn: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
seachType: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pad-15 {
|
||||
@@ -121,6 +129,13 @@ export default {
|
||||
width: 550px;
|
||||
position: relative;
|
||||
|
||||
.hid-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
z-index: 666;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -160,7 +175,7 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 27px 0;
|
||||
cursor: pointer ;
|
||||
cursor: pointer;
|
||||
|
||||
.img {
|
||||
width: 14px;
|
||||
@@ -173,7 +188,7 @@ export default {
|
||||
.seach-long-btn {
|
||||
width: 161px !important;
|
||||
height: 32px !important;
|
||||
cursor: pointer ;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -197,7 +212,7 @@ export default {
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer ;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mg-l-15 {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item">
|
||||
<div style="position: absolute;left: -5px;top: 20px;">
|
||||
<div style="position: absolute;left: -8px;top: 20px;">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||
香港
|
||||
@@ -63,9 +63,9 @@
|
||||
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dis-f">
|
||||
<!-- <div>
|
||||
<selectTabBox></selectTabBox>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,9 +109,9 @@ let allHireType = [
|
||||
{ text: '四房以上' }
|
||||
]
|
||||
let seachArea = [
|
||||
{ text: '港岛' },
|
||||
{ text: '九龙' },
|
||||
{ text: '新界' }
|
||||
{ text: '港岛',data:[{title:1,id:1},{title:2,id:2},{title:3,id:3},{title:4,id:4}] },
|
||||
{ text: '九龙',data:[{title:5,id:5},{title:2,id:2},{title:3,id:3},{title:7,id:7}] },
|
||||
{ text: '新界',data:[{title:6,id:6},{title:8,id:8},{title:11,id:11},{title:9,id:9}] }
|
||||
]
|
||||
let historyArr = [
|
||||
{ title: '有阳台' },
|
||||
@@ -282,13 +282,13 @@ export default {
|
||||
}
|
||||
|
||||
.triangle {
|
||||
border: 5px solid;
|
||||
border: 7px solid;
|
||||
border-color: transparent #000 transparent transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -44px;
|
||||
left: -5px;
|
||||
bottom: -47px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.seach-btn {
|
||||
|
||||
@@ -1,32 +1,342 @@
|
||||
<template>
|
||||
<div class="dis-f s-w-100">
|
||||
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
|
||||
<div class="select-box s-w-50 bor-r">
|
||||
<div class="dis-f">
|
||||
<div class="dis-f bor-b-das">
|
||||
<div class="tab-title">地理位置</div>
|
||||
<div class="tab-text">
|
||||
<div class="dis-f">
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='region'}" @click="selectPosition='region'">按区域</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='school'}" @click="selectPosition='school'">按学校</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
|
||||
@click="selectPosition = 'region'">按区域</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
|
||||
@click="selectPosition = 'school'">按学校</div>
|
||||
</div>
|
||||
<div class="select-tab-info">
|
||||
<img src="../../assets/homeImage/checkBG.svg" class="img" alt="">
|
||||
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
|
||||
class="img" alt="">
|
||||
<div class="info-box" v-show="selectPosition === 'region'">
|
||||
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
|
||||
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
|
||||
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
|
||||
v-show="selectTabCheck.id === item.id && selectTabCheck.id">  >  
|
||||
<div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
|
||||
{{
|
||||
selectData.data && selectData.data.length === 0 ? '不限' :
|
||||
selectData.data && selectData.data.length
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
||||
v-show="selectTabCheck.id !== item.id" class="img" alt="">
|
||||
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
<div class="hid-box">
|
||||
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
||||
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
|
||||
</checkBoxGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-info-box" v-show="selectPosition === 'school'">
|
||||
<div class="lef-btn" @click="prevSchoolData">
|
||||
<img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
<div class="right-btn" @click="nextSchoolData">
|
||||
<img :src="schoolPages === shcoolData.length ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
|
||||
indicator-position="none" class="s-w-100" ref="schoolData">
|
||||
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
|
||||
<div class="school-carousel-box">
|
||||
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
|
||||
class="carousel-info-box"
|
||||
:class="[{ 'info-box-check': schoolSelectObj.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
|
||||
{{ items.title }}
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="dis-f pad-t-b-15 bor-b-das">
|
||||
<div class="tab-title">出租方式</div>
|
||||
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
|
||||
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
|
||||
<div v-if="item.title !== '不限'">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="dropdown-btn jus-x dis-f al-item"
|
||||
:class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
||||
@click="setHireId(item.title)">
|
||||
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
|
||||
hireTypeObj.title || '不限' }}</span>
|
||||
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
|
||||
class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
||||
<el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
|
||||
<div class="dropdown-text" @click="dropdownCommand(items)"
|
||||
:class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
|
||||
items.title
|
||||
}}
|
||||
<div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
||||
v-if="item.title === '不限'" @click="setHireId(item.title)">{{
|
||||
item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f al-item" style="padding:25px 0;">
|
||||
<div class="tab-title">租金</div>
|
||||
<div class="dis-f al-item rent-box">
|
||||
<input type="text" class="input" v-model="rentObj.min">
|
||||
<span class="tab-icon">~</span>
|
||||
<input type="text" class="input" v-model="rentObj.max">
|
||||
<span class="unit-box">HK$/月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div class="select-box s-w-50 bor-r">
|
||||
<div class="dis-f bor-b-das">
|
||||
<div class="tab-title">租期</div>
|
||||
<div class="select-btn-box">
|
||||
<div class="dis-f">
|
||||
<div class="btn jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
|
||||
:class="{ 'btn-check': hireDate.id === item.id }" @click="hireDate.id = item.id">{{ item.title
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f bor-b-das pd-t-20">
|
||||
<div class="tab-title">性别</div>
|
||||
<div class="select-btn-box">
|
||||
<div class="dis-f">
|
||||
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
|
||||
:class="{ 'btn-check': gender.id === item.id }" @click="gender.id = item.id">{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f bor-b-das pd-t-20">
|
||||
<div class="tab-title">发布时间</div>
|
||||
<div class="select-btn-box">
|
||||
<div class="dis-f">
|
||||
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
|
||||
:class="{ 'btn-check': releaseObj.id === item.id }" @click="releaseObj.id = item.id">{{
|
||||
item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f pd-t-20">
|
||||
<div class="tab-title">其他</div>
|
||||
<div class="select-btn-box">
|
||||
<div class="dis-f">
|
||||
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i">
|
||||
<el-checkbox-group v-model="otherCheck.list">
|
||||
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm-list">
|
||||
<div class="dis-f al-item">
|
||||
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title">   |  </span>
|
||||
<div class="dis-f al-item">
|
||||
<div v-show="selectTabCheck.title">{{ selectTabCheck.title }}:</div>
|
||||
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
|
||||
{{ item.title }}
|
||||
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="dis-f al-item sort-text">
|
||||
最新发布
|
||||
<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { reactive, ref, getCurrentInstance } from 'vue';
|
||||
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
let list = [{
|
||||
title: '不限',
|
||||
id: ''
|
||||
}, {
|
||||
title: '港岛',
|
||||
id: 1,
|
||||
data: [{
|
||||
title: '上环',
|
||||
id: 1
|
||||
}, {
|
||||
title: '铜锣湾',
|
||||
id: 2
|
||||
}, {
|
||||
title: '天后',
|
||||
id: 3
|
||||
}, {
|
||||
title: '北角',
|
||||
id: 4
|
||||
}]
|
||||
}, {
|
||||
title: '九龙',
|
||||
id: 2,
|
||||
data:[{
|
||||
title:'1',
|
||||
id:'1'
|
||||
},{
|
||||
title:'2',
|
||||
id:'2'
|
||||
},{
|
||||
title:'3',
|
||||
id:'3'
|
||||
}]
|
||||
}]
|
||||
//按区域/学校选择的地区
|
||||
let selectData = reactive({ data: [] })
|
||||
let selectTabCheck = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
data: []
|
||||
})
|
||||
//区域状态
|
||||
let selectPosition = ref('region')
|
||||
let showSelect = ref(false)
|
||||
|
||||
//学校区域状态
|
||||
let schoolSelectObj = reactive({ id: '', title: '不限' })
|
||||
let schoolPages = ref(0) //页数
|
||||
let shcoolData = [{ title: '不限' }, { title: '港大' }, { title: '科大' }, { title: '中大' }, { title: '城大' }, { title: '理工' }, { title: '浸会' }, { title: '教大' }, { title: '岭南' }, { title: '123' }, { title: '123' },]
|
||||
let setSchoolData = () => {
|
||||
let arr = []
|
||||
let num = 0
|
||||
for (let i = 0; i < shcoolData.length; i++) {
|
||||
if (!arr[num]) {
|
||||
arr[num] = []
|
||||
}
|
||||
if (arr[num].length < 9) arr[num].push(shcoolData[i])
|
||||
|
||||
if (arr[num].length === 9) {
|
||||
num++
|
||||
}
|
||||
}
|
||||
shcoolData = arr
|
||||
}
|
||||
setSchoolData()
|
||||
//选择学校区域属性
|
||||
let setSchoolObj = (obj) => {
|
||||
schoolSelectObj.id = obj.id
|
||||
schoolSelectObj.title = obj.title
|
||||
console.log(schoolSelectObj)
|
||||
}
|
||||
|
||||
//学校轮播组件
|
||||
let prevSchoolData = () => {
|
||||
const schoolData = proxy.$refs.schoolData
|
||||
schoolPages.value--
|
||||
schoolData.prev()
|
||||
}
|
||||
|
||||
let nextSchoolData = () => {
|
||||
const schoolData = proxy.$refs.schoolData
|
||||
schoolPages.value++
|
||||
schoolData.next()
|
||||
}
|
||||
|
||||
//点击区域/学校选项
|
||||
let setSelectData = (id, data = [], title) => {
|
||||
selectTabCheck.id = id;
|
||||
selectTabCheck.title = title
|
||||
selectTabCheck.data = data;
|
||||
selectData.data=[]
|
||||
showSelect.value = true
|
||||
}
|
||||
//取消按钮
|
||||
let closeSeach = () => {
|
||||
selectTabCheck.id = ''
|
||||
selectData.data = []
|
||||
showSelect.value = false
|
||||
}
|
||||
//确认按钮
|
||||
let selectSeach = (data = []) => {
|
||||
let arr = []
|
||||
data.map(res => {
|
||||
selectTabCheck.data.map(item => {
|
||||
if (res === item.id) {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
selectData.data = arr
|
||||
showSelect.value = false
|
||||
}
|
||||
//监听选项
|
||||
let watchData = (data) => {
|
||||
// selectData.data = data
|
||||
// console.log(selectData)
|
||||
}
|
||||
//底部删除按钮
|
||||
let deleteSelect = (id)=>{
|
||||
console.log(id)
|
||||
selectData.data.splice(id,1)
|
||||
}
|
||||
|
||||
|
||||
|
||||
//出租方式
|
||||
let hireTypeArr = reactive([
|
||||
{ hireType: [], title: '不限' },
|
||||
{ hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
|
||||
{ hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }])
|
||||
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
|
||||
|
||||
let setHireId = (title) => {
|
||||
hireTypeObj.hireId = title
|
||||
hireTypeObj.id=''
|
||||
hireTypeObj.title=''
|
||||
}
|
||||
|
||||
let dropdownCommand = (obj) => {
|
||||
hireTypeObj.id = obj.id
|
||||
hireTypeObj.title = obj.title
|
||||
}
|
||||
|
||||
//租金
|
||||
let rentObj = reactive({ min: '', max: '' })
|
||||
|
||||
//租期
|
||||
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
|
||||
let hireDate = reactive({ id: '', title: '' })
|
||||
|
||||
//性别
|
||||
let genderData = reactive([{ title: '不限', id: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }])
|
||||
let gender = reactive({ id: '' })
|
||||
|
||||
//发布时间
|
||||
let releaseTime = reactive([{ title: '不限', id: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }])
|
||||
let releaseObj = reactive({ id: '' })
|
||||
|
||||
//其他
|
||||
let otherData = reactive([{ title: '认证房源', id: '' }, { title: '有电梯', id: 1 }, { title: '有阳台', id: 2 }])
|
||||
let otherCheck = reactive({ list: [] })
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
@@ -39,10 +349,12 @@ export default {
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
.jus-x{
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
.al-item{
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -57,20 +369,232 @@ export default {
|
||||
.s-w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
.pad-t-b-15 {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.select-tab-info{
|
||||
.pd-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bor-b-das {
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.dropdown-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.type-icon {
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
background: inherit;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
width: 150px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
|
||||
.dropdown-check-text {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
padding: 20px 24px 0px 25px;
|
||||
|
||||
.select-tab-info {
|
||||
position: relative;
|
||||
margin-top:5px;
|
||||
.img{
|
||||
margin-top: 5px;
|
||||
|
||||
.school-info-box {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0px;
|
||||
|
||||
.school-carousel-box {
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mg-r-15 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.carousel-info-box {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-box-check {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.lef-btn {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px dashed #ebebeb;
|
||||
border-left: 1px solid #ebebeb;
|
||||
border-top: 1px solid #ebebeb;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background: #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 66;
|
||||
|
||||
.img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
border-left: 1px dashed #ebebeb;
|
||||
border-right: 1px solid #ebebeb;
|
||||
border-top: 1px solid #ebebeb;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background: #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
z-index: 66;
|
||||
|
||||
.img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.hid-box {
|
||||
position: absolute;
|
||||
z-index: 666;
|
||||
left: 0;
|
||||
top: 56px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check-text {
|
||||
font-family: 'ArialMT', 'Arial', sans-serif;
|
||||
font-weight: 600 !important;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
letter-spacing: normal;
|
||||
color: #000 !important;
|
||||
vertical-align: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.check-none {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
line-height: 20px;
|
||||
vertical-align: none;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
.check-data {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
border: none;
|
||||
border-radius: 13px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 459px;
|
||||
height:55px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,11 +608,13 @@ img{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 35px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.info-bor-b{
|
||||
border-bottom:1px dashed #ebebeb;
|
||||
.info-bor-b {
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -96,27 +622,166 @@ img{
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: center;
|
||||
padding-bottom:10px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right:30px;
|
||||
.pd-t-20 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.select-btn-box {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 5px 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.mg-l-30 {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
color: #50E3C2;
|
||||
border:1px solid #50E3C2;
|
||||
.img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.min-btn {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
color: #50E3C2;
|
||||
border: 1px solid #50E3C2;
|
||||
background: #eefcf9;
|
||||
}
|
||||
}
|
||||
|
||||
.rent-box {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
|
||||
.tab-icon {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.unit-box {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(179, 179, 179, 1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btm-list {
|
||||
padding: 25px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
|
||||
.btm-btn {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #50e3c2;
|
||||
margin-left:10px;
|
||||
.img{
|
||||
width:8px;
|
||||
height:8px;
|
||||
margin-left:8px;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.sort-text {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-dropdown-menu__item {
|
||||
--el-dropdown-menuItem-hover-color: #7F7F7F;
|
||||
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user