XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

条件搜索查询组件

Browse Source
This commit is contained in:
luJianJun
2023-07-11 17:40:27 +08:00
parent ba761c23b9
commit ff631f5816
17 changed files with 966 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

741
src/components/selectTabBox/selectTabBox.vue
View File

@@ -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">&nbsp > &nbsp
<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"> &nbsp | &nbsp</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>