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

11
src/assets/img/publicImage/black-circle-cross.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter557">
<feColorMatrix type="matrix" values="3.16 0 0 0 -0.835555555555556 0 3.16 0 0 -0.835555555555556 0 0 3.16 0 -0.835555555555556 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 0 -4 )">
<image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAgRQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3l60uwAAAKt0Uk5TACRklLra6/ZjIyyK4N+IKkjCwEYxxv7kzM3ELweN/Pq2cjQKCzVzt/uLBm8UFXDKITfs52EF6OpE9JkPEJrzQvFVV/Iz6SAmyY4uWlbHnEkBEcN1+NQpHGUr4R7cAuUoH94OcTvmTBcltTr5TrkiZk1245K8RQ3d4j71287S9zxBMAzwOO89Mu02d+67OYkJ2IfBA2e/RxlAQ8Wbni1bjCdYnRa4dM+GYtmRtbrgJwAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAOcSURBVFjD7Vb5XxJBFB8vUDwIJTGzTMwL8yDFKyMT0dKoINNSJE1Ny9TUzKJLzQ67razM7syy/Sd7b5cFZndg8Zc+/eD7AfZ933y/++bNzJslZMv+Z4uKjomNU6nVqrjYmPiEzbI1iUkcZckp2k3Qt+k4hqWmRUjXbxcp6YYMnW6HIV30M3dGQM/atZsfnL0nx5grQHvz8guyebCwyKTET8gQply8j8ZLSoWilJWH55v346iKSos8ZImvwlh1Xjh+TS2OqTvAjtYfxKj1UJj3I7/hcOgBjTZUCJlDAuZfpQ+XYpMdZ9Ecov5Yv6qW8EVqQYUj7LU4ivnriYI14SwSWZHWQoi0KfEJOYb7gbWjHFh/ZT4hx2GgTg6fwALUi95J+QA/5MQy1MjiLkArRedU++kOOtzpyPZP/AyeLCn/LIBd4v7LheNQQSl0uyHe7XMsuKs1EoEiwIpFp8eD+/lcINrbhyt0XnT7wUuRCHTB+SvxewO4VoN+heZkcNsv+MNDsGB9NH8YRlwM8i+hQpU26P0jl4PCowCMUQLjgOQQtgL//pErwdEJQKIpgRhAjBQyICoMT9L5o5kBmqKQq9C/cglLocUAf+ppOnYNutwohcxw3HXpyt7Aw+0ZhB+vrAXAMt2kABXH3ZIOEnJg8sltjrNTwB3m9r5rRX7trDySCdOKQEBTjQKeqAgEmFPoqBCmMClXkE3BzSjinAr3rxcVZFcjFDGOAnAZ5yV87JD3Fvg6SHOQLyNuJLrZ6pF/30zIA6s8hwXZRsIjnh8MPHyE/EV85BWuUwqPAYmnBKIAKQjym5D/xJeTXOEpAOX0rJKo4/ysAUao5kS3Ro3tJsDA4zwjKetzGFIqOi/466M1EJ1GhZf+CzMHvCWJgBbfId4XneDYqZ7FK4iTYLY08iq4LnWcW/JFk2blHK99z29g6LKUT97i4XWKXn2PNP7ufZbvyYkbfEUmQD4AvEoisI+srg72Ca+2z8r8xlBXG/kCEVuTEt9oZfR0wUxlWHyF6/0rFsBhYQfH8PjZw+ZgxB1i7w0VzsP0bN9C89usCtNc4XvYqpMddX7HqG02XIp5fBOzRzMmaRoXYgplLi/ju1hS6Q8aH+rv4gOOXqJgpsRC4VN37eeir0fNmydifWCKRYkP1uryf6Ab1l2udU/ge10TAR1tOpX1ub+8EiEdTbs0Q7Pdvzo2QRfK+XtqdMPu9do31v5UNm+WvWX/1P4CPzjMW7KpwRMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMTEtMTRUMTk6MjY6NDMrMDg6MDD8II04AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTExLTE0VDE5OjI2OjQzKzA4OjAwjX01hAAAAEl0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fYWJmaHIzemNhMW8vZ3VhbmJpLnN2Z2+SHsIAAAAASUVORK5CYII=" x="0px" y="4px" filter="url(#filter557)" />
</g>
</svg>

11
src/assets/img/publicImage/round-fork.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter672">
<feColorMatrix type="matrix" values="1 0 0 0 0.244444444444444 0 1 0 0 0.244444444444444 0 0 1 0 0.244444444444444 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 -848 -5874 )">
<image preserveAspectRatio="none" style="overflow:visible" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAgRQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3l60uwAAAKt0Uk5TACRklLra6/ZjIyyK4N+IKkjCwEYxxv7kzM3ELweN/Pq2cjQKCzVzt/uLBm8UFXDKITfs52EF6OpE9JkPEJrzQvFVV/Iz6SAmyY4uWlbHnEkBEcN1+NQpHGUr4R7cAuUoH94OcTvmTBcltTr5TrkiZk1245K8RQ3d4j71287S9zxBMAzwOO89Mu02d+67OYkJ2IfBA2e/RxlAQ8Wbni1bjCdYnRa4dM+GYtmRtbrgJwAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAOcSURBVFjD7Vb5XxJBFB8vUDwIJTGzTMwL8yDFKyMT0dKoINNSJE1Ny9TUzKJLzQ67razM7syy/Sd7b5cFZndg8Zc+/eD7AfZ933y/++bNzJslZMv+Z4uKjomNU6nVqrjYmPiEzbI1iUkcZckp2k3Qt+k4hqWmRUjXbxcp6YYMnW6HIV30M3dGQM/atZsfnL0nx5grQHvz8guyebCwyKTET8gQply8j8ZLSoWilJWH55v346iKSos8ZImvwlh1Xjh+TS2OqTvAjtYfxKj1UJj3I7/hcOgBjTZUCJlDAuZfpQ+XYpMdZ9Ecov5Yv6qW8EVqQYUj7LU4ivnriYI14SwSWZHWQoi0KfEJOYb7gbWjHFh/ZT4hx2GgTg6fwALUi95J+QA/5MQy1MjiLkArRedU++kOOtzpyPZP/AyeLCn/LIBd4v7LheNQQSl0uyHe7XMsuKs1EoEiwIpFp8eD+/lcINrbhyt0XnT7wUuRCHTB+SvxewO4VoN+heZkcNsv+MNDsGB9NH8YRlwM8i+hQpU26P0jl4PCowCMUQLjgOQQtgL//pErwdEJQKIpgRhAjBQyICoMT9L5o5kBmqKQq9C/cglLocUAf+ppOnYNutwohcxw3HXpyt7Aw+0ZhB+vrAXAMt2kABXH3ZIOEnJg8sltjrNTwB3m9r5rRX7trDySCdOKQEBTjQKeqAgEmFPoqBCmMClXkE3BzSjinAr3rxcVZFcjFDGOAnAZ5yV87JD3Fvg6SHOQLyNuJLrZ6pF/30zIA6s8hwXZRsIjnh8MPHyE/EV85BWuUwqPAYmnBKIAKQjym5D/xJeTXOEpAOX0rJKo4/ysAUao5kS3Ro3tJsDA4zwjKetzGFIqOi/466M1EJ1GhZf+CzMHvCWJgBbfId4XneDYqZ7FK4iTYLY08iq4LnWcW/JFk2blHK99z29g6LKUT97i4XWKXn2PNP7ufZbvyYkbfEUmQD4AvEoisI+srg72Ca+2z8r8xlBXG/kCEVuTEt9oZfR0wUxlWHyF6/0rFsBhYQfH8PjZw+ZgxB1i7w0VzsP0bN9C89usCtNc4XvYqpMddX7HqG02XIp5fBOzRzMmaRoXYgplLi/ju1hS6Q8aH+rv4gOOXqJgpsRC4VN37eeir0fNmydifWCKRYkP1uryf6Ab1l2udU/ge10TAR1tOpX1ub+8EiEdTbs0Q7Pdvzo2QRfK+XtqdMPu9do31v5UNm+WvWX/1P4CPzjMW7KpwRMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMTEtMTRUMTk6MjY6NDMrMDg6MDD8II04AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTExLTE0VDE5OjI2OjQzKzA4OjAwjX01hAAAAEl0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fYWJmaHIzemNhMW8vZ3VhbmJpLnN2Z2+SHsIAAAAASUVORK5CYII=" x="848px" y="5874px" filter="url(#filter672)" />
</g>
</svg>

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>

24
src/components/pageTopBar/pageTopBar.vue
View File

@@ -58,12 +58,12 @@
<script setup>
import store from '../../store/index';
import { useRoute, useRouter } from 'vue-router'
import { reactive, watchEffect, ref,defineProps } from "vue";
import { reactive, watchEffect, ref, defineProps } from "vue";
const props=defineProps({
bannerList:{
type:Array,
default:function (){
const props = defineProps({
bannerList: {
type: Array,
default: function () {
return []
}
}
@@ -73,15 +73,15 @@ const props=defineProps({
let url = location.href
let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`)
//个人信息
let user = reactive({data:{}})
let user = reactive({ data: {} })
//组件数据
let topTab = reactive({ data: [] })
let seachTab = reactive({ data: [] })
let bannerLists = reactive({data:[]})
let bannerLists = reactive({ data: [] })
watchEffect(() => {
user.data=store.state.user
bannerLists.data=props.bannerList
user.data = store.state.user
bannerLists.data = props.bannerList
if (!store.state.indexData.menu) return
store.state.indexData.menu.map(res => {
if (res.name === '首页') {
@@ -93,13 +93,13 @@ watchEffect(() => {
res.path = '/intermediaryHousing'
}
else if (res.name === '品牌公寓') {
res.path = '/apartment'
}
else if (res.name === '求房源') {
res.path = '/needHousing'
}
else if (res.name === '我的') {
res.path = '/user'
}
})
seachTab.data = store.state.indexData.menu
@@ -278,7 +278,7 @@ tabBtnType.value = route.path
margin: 0 auto;
width: 660px;
height: 280px;
border-radius:15px;
border-radius: 15px;
}
.user-box:hover .user-out-box {

4
src/components/public/apartment-item.vue
View File

@@ -30,9 +30,13 @@
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
item: Object,
});
let imgse = ref('https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-R-Josd3fqqsgFptxhXa6RWi26P-BuTQccE7DK7tkb8MVYZjQ0Mjk~')
</script>
<style lang="less" scoped>

2
src/components/public/empty-duck.vue
View File

@@ -2,12 +2,14 @@
<div class="empty-box flexflex">
<img class="empty-icon" src="@/assets/img/publicImage/empty-duck.png">
<text class="empty-text">{{ hintText || '暂无内容' }}</text>
<text class="empty-text" v-if="hintTextTwo">{{ hintTextTwo }}</text>
</div>
</template>
<script setup>
const props = defineProps({
hintText: String,
hintTextTwo: String,
})
</script>

376
src/components/public/public-list-item.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<div class="list-item" ref="list">
<div class="authentication-box dis-f al-item" v-if="data.verified == 1">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
</div>
<div class="top-box">
<div class="title-text">
{{ data && data.subject || '暂无标题' }}
</div>
<div class=" dis-f al-item-start jus-bet s-w-100" style="margin-top: 20px;">
<div>
<div class="dis-f al-item">
<div class="tab-item first-tab flexacenter">{{ data && data.gptype }}</div>
<div class="tab-item mg-l-8 flexacenter" v-if="data.type">{{ listData.type[data && data.type] }}
</div>
<div class="tab-item mg-l-8 flexacenter" v-if="data.elevator && data.elevator !== -1">{{
listData.elevator[data.elevator] }}</div>
<div class="tab-item mg-l-8 flexacenter" v-if="data.sunshinearea && data.sunshinearea !== -1">{{
listData.sunshinearea[data.sunshinearea] }}</div>
<div class="tab-item mg-l-8 flexacenter" v-if="data.gender">
{{ listData.gender[data.gender] }}
</div>
</div>
<div class="address-text dis-f al-item" v-if="item['location']">
<template v-if="Array.isArray(item['location'])">
<template v-for="it in item['location']">
<div class="address-item flexacenter" v-if="it">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
{{ location[it >>> 0] + ' > ' + location[it] }}
</div>
</template>
</template>
<div class="address-item flexacenter" v-else>
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
{{ location[item['location'] >>> 0] + ' > ' + location[item['location']] }}
</div>
</div>
<div class="price-text dis-f" style="" v-if="data.rent">
<span class="unit">HK$</span>
<span class="price" v-if="Array.isArray(data.rent)">{{ data.rent.join(' ~ ') }}</span>
<span class="price" v-else>{{ data.rent }}</span>
<span>/月</span>
<span class="time" v-show="data.rentalduration">[ 租期{{ data.rentalduration == 0 ? '不限' :
listData['rentalduration'][data.rentalduration] }} ]</span>
</div>
</div>
<div class="img">
<div>
<img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
@load="loadFinish" class="img " alt="">
<div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
</div>
</div>
</div>
</div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
</div>
<div class="btm-box dis-f al-item">
<div class="flex1 flexacenter">
<img :src="data.avatar" class="user-img" alt="">
<span class="user-name">{{ data.author }}</span>
<div class="btn flexcenter" v-if="data.isintermediary !== 1">{{ data.intermediary_text ||
listData.intermediary[data.intermediary] }}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-else class="intermediary-tab-img" alt="">
</div>
<img class="" src="@/assets/img/publicImage/black-circle-cross.svg">
</div>
</div>
</template>
<script setup>
import { ref, defineProps, reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index';
let props = defineProps({
item: {
type: Object
}
})
// console.log("item", props.item);
let data = {}
data = props.item
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
//地区数据
let location = reactive({})
location = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
//数据包
let listData = reactive({})
listData = store.state.indexData && store.state.indexData.config
// rentalduration
const stateObj = { // btn: 0 删除 编辑 1 删除 编辑 上架 2 删除 编辑 下架 顶上去
"1": {
btn: 2,
},
"-7": {
text: "身份变化，已下架",
btn: -2,
},
"-5": {
text: "超出发布期限，已自动下架",
btn: 0,
},
"-3": {
text: "多人投诉，已下架",
btn: -1,
},
"-4": {
text: "该信息正在审核中",
btn: -1,
},
"2": {
text: "已下架",
btn: 1,
},
"0": {
text: "草稿",
btn: 0,
}
}
</script>
<style scoped lang="less">
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.jus-bet {
justify-content: space-between;
}
.al-item-start {
align-items: flex-start;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.authentication-box {
width: 100%;
height: 30px;
.bg {
height: 100%;
height: 100%;
}
.logo {
width: 18px;
height: 18px;
position: absolute;
left: 15px;
}
.text-img {
width: 81px;
height: 81px;
position: absolute;
left: 35px;
}
}
.list-item {
width: 590px;
background-color: rgba(255, 255, 255, 1);
border: none;
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);
position: relative;
margin-bottom: 20px;
.mg-t-10 {
margin-top: 10px;
}
.img {
display: block;
width: 100px;
object-fit: cover;
border-radius: 10px;
position: relative;
}
.s-img {
width: 100px;
height: 100%;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
background: rgba(51, 51, 51, 0.733333333333333);
.img {
width: 30px;
height: 30px;
}
}
.top-box {
padding: 22px 20px 20px;
.tab-img {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
z-index: 66;
}
.title-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #000000;
text-align: left;
word-wrap: break-word;
line-height: 28px;
}
.mg-l-8 {
margin-left: 8px;
}
.tab-item {
padding: 0 6px;
height: 24px;
background-color: rgba(242, 242, 242, 1);
border-radius: 6px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
color: #7F7F7F;
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
margin-top: 8px;
flex-wrap: wrap;
.img {
width: 18px;
height: 18px;
margin-right: 5px;
}
.address-item {
margin-right: 20px;
margin-top: 12px;
}
}
.price-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
color: #555555;
margin-top: 15px;
align-items: end;
// line-height: 28px;
.time {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
color: #7F7F7F;
margin-left: 15px;
}
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
line-height: 20px;
margin: 0 8px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
font-size: 14px;
line-height: 14px;
}
}
.first-tab {
background: rgba(51, 51, 51, 1);
color: #fff;
}
}
.btm-box {
padding: 0 20px;
height: 58px;
border-top: 1px dashed #d7d7d7;
.intermediary-tab-img {
width: 85px;
height: 20px;
margin-left: 15px;
}
.user-img {
width: 24px;
height: 24px;
border-radius: 50%;
}
.user-name {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 14px;
margin-left: 10px;
}
.btn {
margin-left: 10px;
padding: 0px 7.5px;
height: 24px;
background-color: rgba(242, 242, 242, 0);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 42px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
color: #555555;
text-align: center;
}
}
}
</style>

52
src/views/housingView/apartment.vue
View File

@@ -3,11 +3,14 @@
<pageTopBar></pageTopBar>
<!-- 筛选 -->
<div class="screen-box wid1200">
<seach-module @handleTransfer="handleTransfer"></seach-module>
<seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
</div>
<div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-for="item in list" :item="item"></apartment-item>
<apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
</div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
</div>
<have-questions></have-questions>
@@ -23,6 +26,7 @@ import biserialItem from '../../components/biserialListItem/biserialListItem.vue
import apartmentItem from '@/components/public/apartment-item.vue';
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import emptyDuck from '@/components/public/empty-duck.vue'
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
import { ElLoading } from 'element-plus'
import Masonry from 'masonry-layout';
@@ -38,6 +42,7 @@ const gridContainer = ref(null);
let list = ref([])
let listCount = ref(0) // 列表数量
let masonryInstance = null
@@ -75,6 +80,8 @@ const getData = () => {
let data = res.data
list.value = list.value.concat(data.data)
page = data.page * data.limit >= data.count ? 0 : page + 1
listCount = data.count
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
@@ -93,25 +100,28 @@ const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight) {
// 进行滚动到底部时的操作
console.log('已滚动到底部');
// 执行其他操作...
getData()
}
if (scrollTop + clientHeight >= scrollHeight) getData()
};
let pitchValue = {}
// 筛选组件的参数的中转
const handleTransfer = (data) => {
// console.log("data", data.value);
pitchValue = { ...data.value }
// console.log("data", pitchValue);
page = 1
list.value = []
getData()
for (const key in data.value) {
console.log(data.value[key] != pitchValue[key]);
if (data.value[key] != pitchValue[key]) {
pitchValue = { ...data.value }
page = 1
list.value = []
getData()
}
// if () {
// }
}
}
</script>
@@ -131,4 +141,16 @@ const handleTransfer = (data) => {
width: 386px;
}
}
.empty-box {
width: 1200px;
height: 500px;
background-color: rgba(255, 255, 255, 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);
justify-content: center;
margin: 0 auto;
}
</style>

33
src/views/user.vue
View File

@@ -69,11 +69,17 @@
<div class="quantity wid1200" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} | 草稿 {{ stat['draft']
}} | 下架 {{ stat['offshelf'] }}）</div>
<div class="list wid1200 flexflex">
<div class="item" v-for="item in 10">
<biserial-list-item></biserial-list-item>
<div class="list wid1200 flexflex" v-if="tabState == 'fav'">
<div class="item" v-for="item in favData['list']">
<public-list-item :item="item"></public-list-item>
</div>
</div>
<div class="list wid1200 flexflex" v-if="tabState == 'publish'">
<div class="item" v-for="item in publishData['list']">
<public-list-item :item="item"></public-list-item>
</div>
</div>
<!-- 有疑问 -->
<have-questions></have-questions>
@@ -91,6 +97,7 @@ import systematicNotificationPop from '@/components/user/systematic-notification
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import biserialListItem from '@/components/biserialListItem/biserialListItem.vue'
import publicListItem from '@/components/public/public-list-item.vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { ElLoading } from 'element-plus'
@@ -105,7 +112,7 @@ let user = ref({})
let count = ref({}) // 发布和收藏的数量
let newmessagenum = ref(0)
let validityidentity = ref('')
let tabState = ref('publish') // fav publish
let tabState = ref('fav') // fav publish
const identityObj = {
1: "中介认证",
@@ -117,13 +124,15 @@ async function init() {
if (res.code != 200) return
let data = res.data
if (data.count['publish'] > 0) {
tabState.value = 'publish'
getPublishData()
} else {
tabState.value = 'fav'
getFavData()
}
// if (data.count['publish'] > 0) {
// tabState.value = 'publish'
// getPublishData()
// } else {
// tabState.value = 'fav'
// getFavData()
// }
getFavData()
user.value = data.user
count.value = data.count
@@ -408,6 +417,4 @@ const cutTab = (value) => {
margin-bottom: 20px;
}
}
</style>