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

公寓列表

Browse Source
This commit is contained in:
A1300399510
2023-07-18 19:01:35 +08:00
parent 1cc8d070b5
commit c0132f27fd
9 changed files with 648 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
src/components/apartment/seachModule.vue
View File

@@ -11,39 +11,46 @@
</div>
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input class="search-input" v-model="seachValue" placeholder="搜索房源或输入房源ID"
@keyup.enter='seachList' @blur="setHistoryShow" @focus="setHistoryShow"
style="height:48px;width:460px;"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
</div>
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
<div class="seach-history-info">
<div>
<div class="title">
历史搜索
</div>
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn">
{{ item }}
<div class="flexacenter">
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click"
:show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
<template #reference>
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID"
@keyup.enter='seachList' style="height:48px;width:460px;"></el-input>
</template>
<div class="dis-f al-item pos-r">
<div class="seach-hiosory-box scrollbar" :class="{ 'seach-history-h': historyShow }">
<div class="seach-history-info">
<div>
<div class="title">历史搜索</div>
<div class="info-box">
<div v-for="(item, i) in historyArr" :key="i" class="btn"
@click="handleKeyword(item)">{{ item }}
</div>
</div>
</div>
</div>
</div>
<div style="margin-top:30px;">
<div class="title">
热门推荐
</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn">
{{ item }}
<div style="margin-top:30px;">
<div class="title">热门推荐</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
@click="handleKeyword(item)">{{ item }}
</div>
</div>
</div>
</div>
</div>
</div>
</el-popover>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
</div>
</div>
<div class="tool-btn dis-f jus-x al-item add-btn">
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源
@@ -80,8 +87,18 @@
<div class="option-item flexflex">
<div class="option-title">租金</div>
<div class="option-box flexacenter flex1 option-input-box">
<input class="option-input" type="number" v-model="pitchValue['rent_min']" /> ~ <input
class="option-input" type="number" v-model="pitchValue['rent_max']" /> HK$/月
<div class="flex1">
<input class="option-input" type="number" v-model="pitchValue['rent_min']"
@blur="rentBlur" @input="rentInput" /> ~ <input class="option-input"
type="number" v-model="pitchValue['rent_max']" @blur="rentBlur"
@input="rentInput" /> HK$/月
</div>
<div class="eliminate flexcenter" @click="clearingAmount"
v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg">
清除金额
</div>
</div>
</div>
@@ -131,7 +148,7 @@
<div class="screen-footer flexacenter">
<div class="quantity flexacenter">
共 <b class="b">43</b> 个品牌公寓
共 <b class="b">{{ count }}</b> 个品牌公寓
</div>
</div>
@@ -142,7 +159,7 @@
</template>
<script setup>
import { ref, watchEffect, reactive, defineProps } from 'vue';
import { ref, watchEffect, reactive, defineProps, nextTick } from 'vue';
import store from '../../store/index';
const props = defineProps({
@@ -154,25 +171,34 @@ const props = defineProps({
const emit = defineEmits(['handleTransfer'])
let state = ref('pack') // 筛选状态 unfold 展开 pack 收起
//搜索框
let seachValue = ref('')
let historyShow = ref(false);
let setHistoryShow = () => {
historyShow.value = !historyShow.value
}
let setHistoryShow = () => historyShow.value = historyShow.value // 修改历史记录框的显示状态 通过input的 焦点状态判断的
let historyArr = ref([])//历史查找记录
let hotArr = reactive({ data: [] })
//获取历史搜索记录
historyArr.value = JSON.parse(localStorage.getItem('historyArr')) || []
let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
let nearSchoolListValue = ref(0); //学校附近选中值
let roomTypeList = reactive([]); // 房型
let roomTypeValue = ref(0); //学校附近选中值
let roomlistingsList = reactive([]); // 楼型
let roomlistingsValue = ref(0); //学校附近选中值
let brandList = reactive([]);
let brandValue = ref(0); //学校附近选中值
let brandList = reactive([]); // 品牌数据
watchEffect(() => {
nearSchoolList = store.state.apartment.school || []
roomTypeList = store.state.apartment.roomtype || []
roomlistingsList = store.state.apartment.roomlistings || []
brandList = store.state.apartment.brand || []
hotArr.data = store.state.indexData.hotSearcheWords
})
let pitchValue = ref({
@@ -182,29 +208,52 @@ let pitchValue = ref({
rent_max: null, // 租金
school: 0,
roomlistings: 0,
keyword: "",
})
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
let clearingAmountState = false
// 点击清除金额
const clearingAmount = () => {
clearingAmountState = true
pitchValue.value['rent_min'] = null
pitchValue.value['rent_max'] = null
emit('handleTransfer', pitchValue)
}
// 金额的失去焦点事件
const rentBlur = () => {
setTimeout(() => {
if (!clearingAmountState) emit('handleTransfer', pitchValue)
}, 300)
}
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
// 搜索框输入中
const rentInput = () => clearingAmountState = false
watchEffect(() => {
nearSchoolList = store.state.apartment.school || []
roomTypeList = store.state.apartment.roomtype || []
roomlistingsList = store.state.apartment.roomlistings || []
brandList = store.state.apartment.brand || []
hotArr.data = store.state.indexData.hotSearcheWords
})
//获取历史搜索记录
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
// 点击历史搜索和热门推荐
const handleKeyword = value => {
pitchValue.value['keyword'] = value
seachList()
}
//搜索数据
let seachList = () => localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
let seachList = () => {
if (historyArr.value.indexOf(pitchValue.value['keyword']) == -1) {
historyArr.value.unshift(pitchValue.value['keyword'])
storingHistory()
}
historyShow.value = false
emit('handleTransfer', pitchValue)
}
// 存储历史记录 并判断长度
const storingHistory = () => {
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10)
localStorage.setItem('historyArr', JSON.stringify(historyArr.value));
}
// 选择选项
const selectOption = (type, value) => {
@@ -224,17 +273,11 @@ const selectOption = (type, value) => {
default:
break;
}
// console.log(pitchValue.value);
emit('handleTransfer', pitchValue)
nextTick(() => {
emit('handleTransfer', pitchValue)
})
}
defineExpose({
historyShow,
seachValue
})
</script>
<style scoped lang="less">
.dis-f {
@@ -269,7 +312,6 @@ defineExpose({
.seach-box-bg {
background: #d7d7d7 !important;
background: inherit;
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
@@ -291,64 +333,16 @@ defineExpose({
background: rgba(241, 245, 247, 1);
}
.seach-history-h {
max-height: 375px !important;
transition: max-height 0.5s ease-in-out;
}
.seach-hiosory-box {
position: absolute;
top: 55px;
z-index: 99;
max-height: 0;
overflow: hidden;
}
.seach-history-info {
width: 560px;
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: 16px;
-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);
padding: 20px 25px;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
}
.info-box {
display: flex;
flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
text-align: left;
.btn {
margin: 20px 30px 0 0;
cursor: pointer;
}
}
}
.location-box {
width: 80px;
height: 40px;
background: inherit;
background-color: rgba(68, 68, 68, 1);
border: none;
border-radius: 8px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
@@ -357,7 +351,6 @@ defineExpose({
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
line-height: 48px;
@@ -386,6 +379,10 @@ defineExpose({
font-size: 16px;
font-weight: 400;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
&:hover {
opacity: 0.8;
}
}
.img {
@@ -409,6 +406,10 @@ defineExpose({
line-height: 48px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
&.add-btn {
background: rgba(253, 218, 85, 1);
margin-left: 20px;
@@ -577,6 +578,22 @@ defineExpose({
color: #555555;
line-height: 20px;
.eliminate {
width: 96px;
height: 30px;
background-color: rgba(246, 246, 246, 1);
border-radius: 50px;
font-size: 14px;
color: #7F7F7F;
cursor: pointer;
.eliminate-icon {
width: 14px;
height: 14px;
margin-right: 3px;
}
}
.option-input {
width: 100px;
height: 40px;
@@ -598,6 +615,50 @@ defineExpose({
}
}
}
.seach-hiosory-box {
z-index: 99;
overflow: auto;
border-radius: 16px;
-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);
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
max-height: 450px;
transition: max-height 0.5s ease-in-out;
.seach-history-info {
padding: 20px 25px;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
}
.info-box {
display: flex;
flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
text-align: left;
.btn {
margin: 20px 30px 0 0;
cursor: pointer;
word-break: break-word;
}
}
}
}
</style>