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-14 15:43:23 +08:00
parent fbfae2d4fc
commit bf03c8be10
12 changed files with 398 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,10 @@
<template>
<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 bor-b-das">
<div class="tab-title">地理位置</div>
<div class="tab-text">
<div class="dis-f bor-b-das" :class="{'al-item housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div>
<!-- 非求房源页面 -->
<div class="tab-text" v-if="routePath!=='/needHousing'">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div>
@@ -61,9 +62,38 @@
</div>
</div>
</div>
<!-- 求房源 -->
<div class="need-housing-box dis-f al-item" v-if="routePath==='/needHousing'">
<div class="select-tab-info" style="margin-top:0;">
<div class="housing-info-box info-box" v-show="selectPosition === 'region'" style="position: relative;padding: 0;height:30px;width: 420px;">
<div class="check-none dis-f al-item btn"
:class="[{'btn-check':selectTabCheck.id === item.id}]"
style="margin-right:10px;"
@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>
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
}}
</div>
</div>
</div>
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt="" v-show="i!==0">
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
</checkBoxGroup>
</div>
</div>
</div>
</div>
</div>
<div class="dis-f pad-t-b-15 bor-b-das">
<div class="tab-title">出租方式</div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</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 !== '不限'">
@@ -97,12 +127,20 @@
</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 class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div>
<div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item">
<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 class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max">
<div class="img-box dis-f jus-x al-item">
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
</div>
清除金额
</div>
</div>
</div>
</div>
@@ -119,7 +157,7 @@
</div>
</div>
<div class="dis-f bor-b-das pd-t-20">
<div class="tab-title">性别</div>
<div class="tab-title">{{routePath==='/needHousing'?'求租者性别':'性别'}}</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"
@@ -155,9 +193,9 @@
</div>
<div class="btm-list">
<div class="dis-f al-item">
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title"> &nbsp | &nbsp</span>
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
<div class="dis-f al-item">
<div v-show="selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-show="selectTabCheck.id&&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="">
@@ -173,6 +211,7 @@
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
const { proxy } = getCurrentInstance()
@@ -199,15 +238,15 @@ let list = [{
}, {
title: '九龙',
id: 2,
data:[{
title:'1',
id:'1'
},{
title:'2',
id:'2'
},{
title:'3',
id:'3'
data: [{
title: '1',
id: '1'
}, {
title: '2',
id: '2'
}, {
title: '3',
id: '3'
}]
}]
//按区域/学校选择的地区
@@ -266,7 +305,7 @@ let setSelectData = (id, data = [], title) => {
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data=[]
selectData.data = []
showSelect.value = true
}
//取消按钮
@@ -293,10 +332,17 @@ let watchData = (data) => {
// selectData.data = data
// console.log(selectData)
}
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
console.log(123,routePath.value)
//底部删除按钮
let deleteSelect = (id)=>{
let deleteSelect = (id) => {
console.log(id)
selectData.data.splice(id,1)
selectData.data.splice(id, 1)
}
@@ -310,8 +356,8 @@ let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方
let setHireId = (title) => {
hireTypeObj.hireId = title
hireTypeObj.id=''
hireTypeObj.title=''
hireTypeObj.id = ''
hireTypeObj.title = ''
}
let dropdownCommand = (obj) => {
@@ -385,6 +431,16 @@ img {
.bor-b-das {
border-bottom: 1px dashed #ebebeb;
}
.housing-pd{
padding:5px 0 25px 0;
}
.housing-pd-25{
padding:0 25px;
}
.jus-bet {
justify-content: space-between;
}
.dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -434,6 +490,10 @@ img {
.select-box {
padding: 20px 24px 0px 25px;
.needHousing-box{
height:50px;
}
.select-tab-info {
position: relative;
margin-top: 5px;
@@ -526,6 +586,14 @@ img {
}
}
.housing-info-box{
display: flex;
align-items: center;
height:30px;
position: relative;
top:0 !important;
}
.info-box {
position: absolute;
top: 5px;
@@ -608,12 +676,21 @@ img {
height: 30px;
line-height: 30px;
margin-right: 35px;
width: 60px;
width: 70px;
}
.info-bor-b {
border-bottom: 1px dashed #ebebeb;
}
.need-housing-box{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
height:50px;
}
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -686,7 +763,7 @@ img {
}
.btn-check {
color: #50E3C2;
color: #50E3C2 !important;
border: 1px solid #50E3C2;
background: #eefcf9;
}
@@ -698,6 +775,37 @@ img {
font-style: normal;
font-size: 14px;
color: #555555;
width: 455px;
.clean-btn {
width: 96px;
height: 30px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 50px;
font-family: 'ArialMT', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
letter-spacing: normal;
color: #333333;
.img-box {
width: 14px;
height: 14px;
border: 1px solid #333;
margin-right: 5px;
border-radius: 50%;
position: relative;
.img {
position: absolute;
width: 5px;
height: 5px;
}
}
}
.tab-icon {
margin: 0 10px;
@@ -717,6 +825,7 @@ img {
border-style: solid;
border-color: rgba(179, 179, 179, 1);
border-radius: 10px;
padding:0 10px;
}
}
@@ -735,11 +844,12 @@ img {
font-style: normal;
font-size: 14px;
color: #50e3c2;
margin-left:10px;
.img{
width:8px;
height:8px;
margin-left:8px;
margin-left: 10px;
.img {
width: 8px;
height: 8px;
margin-left: 8px;
}
}