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

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	src/router/index.js
This commit is contained in:
A1300399510
2023-07-14 17:28:38 +08:00
parent 89d8462f7b adfa0156e0
commit bfac0867b5
12 changed files with 403 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/homeImage/intermediaryAuthentication.svg Normal file
View File

File diff suppressed because one or more lines are too long

21
src/assets/homeImage/personAuthentication.svg Normal file
View File

File diff suppressed because one or more lines are too long

12
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -12,14 +12,14 @@
<img class="apartment-img" :src="itemData.imageLocal || itemData.image" <img class="apartment-img" :src="itemData.imageLocal || itemData.image"
v-if="itemData.type === 'housing' || itemData.type === 'apartment'" /> v-if="itemData.type === 'housing' || itemData.type === 'apartment'" />
<div class="authentication-box" <div class="authentication-box"
v-if="(itemData.type === 'housing' && itemData.verified) || (itemData.type === 'apartment' && itemData.isintermediary)"> v-if="(itemData&&itemData.type === 'housing' && itemData&&itemData.verified) || (itemData&&itemData.type === 'apartment' &&itemData&& itemData.isintermediary)">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt=""> <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt=""> <img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt=""> <img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
</div> </div>
</div> </div>
<div class="long-title"> <div class="long-title">
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }} <span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData&&itemData.title }}
</div> </div>
<div class="type-tab"> <div class="type-tab">
<span v-if="itemData.type === 'housing'"> <span v-if="itemData.type === 'housing'">
@@ -49,22 +49,22 @@
<div class="suite-box" v-if="itemData.type === 'apartment'"> <div class="suite-box" v-if="itemData.type === 'apartment'">
<div class="dis-f al-item jus-bet"> <div class="dis-f al-item jus-bet">
<div class="suite-type"> <div class="suite-type">
{{ itemData.specifications && itemData.specifications[0].title }} {{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].title }}
</div> </div>
<div> <div>
<span class="unit">HK$</span> <span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span> <span class="price">{{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].value }}</span>
<span class="date">/月</span> <span class="date">/月</span>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="dis-f al-item jus-bet"> <div class="dis-f al-item jus-bet">
<div class="suite-type"> <div class="suite-type">
{{ itemData.specifications && itemData.specifications[1].title }} {{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].title }}
</div> </div>
<div> <div>
<span class="unit">HK$</span> <span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span> <span class="price">{{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].value }}</span>
<span class="date">/月</span> <span class="date">/月</span>
</div> </div>
</div> </div>

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

@@ -9,7 +9,15 @@
:class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i"> :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
{{ {{
item.name }}</div> item.name }}</div>
<img src="" class="user-img" alt=""> <div class="user-box">
<img src="" class="user-img" alt="">
<div class="user-out-box">
<div class="box-bg dis-f jus-x">
<div class="top-box"></div>
退出
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
@@ -68,7 +76,7 @@ watchEffect(() => {
} }
else if (res.name === '求房源') { else if (res.name === '求房源') {
res.path = '/needHousing'
} }
else if (res.name === '我的') { else if (res.name === '我的') {
@@ -86,7 +94,7 @@ let topTabSelect = (type, item) => {
} }
//页面跳转 //页面跳转
const router=useRouter() const router = useRouter()
let tabBtnType = ref('/') let tabBtnType = ref('/')
let changeTabBtnType = (item) => { let changeTabBtnType = (item) => {
tabBtnType.value = item.path tabBtnType.value = item.path
@@ -248,6 +256,45 @@ tabBtnType.value = route.path
height: 280px; height: 280px;
} }
.user-box:hover .user-out-box {
display: block;
}
.user-out-box {
color: #fff;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10px;
position: absolute;
bottom: -35px;
display: none;
}
.user-box {
position: relative;
.top-box {
border-radius: 2px;
width: 8px;
height: 8px;
background: #000;
position: absolute;
top: -4px;
transform: rotate(45deg)
}
.box-bg {
width: 32px;
height: 28px;
line-height: 28px;
border-radius: 5px;
background: #000;
text-align: center;
position: relative;
}
}
/deep/.el-carousel__arrow { /deep/.el-carousel__arrow {
border: 2px solid #545454; border: 2px solid #545454;
width: 50px; width: 50px;
@@ -287,5 +334,9 @@ tabBtnType.value = route.path
color: #7F7F7F; color: #7F7F7F;
text-align: left; text-align: left;
} }
.dropdown {
background: #000;
}
</style> </style>

71
src/components/seachModule/seachModule.vue
View File

@@ -12,8 +12,8 @@
<div class="triangle"></div> <div class="triangle"></div>
</div> </div>
<div class="dis-f al-item pos-r"> <div class="dis-f al-item pos-r">
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' @blur="setHistoryShow" <el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input> @blur="setHistoryShow" @focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList"> <div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt=""> <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索 搜索
@@ -51,23 +51,29 @@
<img src="../../assets/homeImage/addBtn.png" class="img" alt=""> <img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源 发布房源
</div> </div>
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath==='/personHousing'"> <div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt=""> <img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt=""> <img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/personAuthentication.svg" class="btn-qrcode" alt="">
</div> </div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath==='/intermediaryHousing'"> <div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
v-if="routePath === '/intermediaryHousing'">
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt=""> <img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt=""> <img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/intermediaryAuthentication.svg" class="btn-qrcode" alt="">
</div> </div>
</div> </div>
<div class="seach-info-box dis-f" v-if="routePath==='/'"> <div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"></seachInfo> <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length">
</seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo> <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" v-if="seachArea.data.length"></seachInfo> <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" v-if="allHireType.data.length"></seachInfo> v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
v-if="allHireType.data.length"></seachInfo>
</div> </div>
<!-- --> <!-- -->
<div v-if="routePath==='/personHousing'||routePath==='/intermediaryHousing'"> <div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
<selectTabBox></selectTabBox> <selectTabBox></selectTabBox>
</div> </div>
</div> </div>
@@ -77,7 +83,7 @@
</template> </template>
<script setup> <script setup>
import { ref, watchEffect,reactive,watch } from 'vue'; import { ref, watchEffect, reactive, watch } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue'; import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue"; import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
@@ -90,31 +96,31 @@ let historyShow = ref(false);
let setHistoryShow = () => { let setHistoryShow = () => {
historyShow.value = !historyShow.value historyShow.value = !historyShow.value
} }
let seachSchoolBtn=reactive({data:[]});//学校地区 let seachSchoolBtn = reactive({ data: [] });//学校地区
let hireType={};//整租 let hireType = {};//整租
let allHireType={};//合租 let allHireType = {};//合租
let seachArea={};//区域找房 let seachArea = {};//区域找房
let historyArr =reactive({data:[]})//历史查找记录 let historyArr = reactive({ data: [] })//历史查找记录
let hotArr =reactive({data:[]}) let hotArr = reactive({ data: [] })
//监听路由 //监听路由
const route = useRoute() const route = useRoute()
let routePath=ref('') let routePath = ref('')
routePath.value=route.path routePath.value = route.path
watchEffect(() => { watchEffect(() => {
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : [] seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [] hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [] allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : [] seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
hotArr.data=store.state.indexData.hotSearcheWords hotArr.data = store.state.indexData.hotSearcheWords
}) })
//获取历史搜索记录 //获取历史搜索记录
historyArr.data=JSON.parse(localStorage.getItem('historyArr'))||[] historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据 //搜索数据
let seachList=()=>{ let seachList = () => {
localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
} }
@@ -154,6 +160,20 @@ defineExpose({
justify-content: space-between; justify-content: space-between;
} }
.authentication-btn:hover .btn-qrcode {
display: block;
}
.btn-qrcode {
width: 390px;
height: 612px;
position: absolute;
right: -14px;
top: 45px;
z-index: 333;
display: none;
}
.seach-box-bg { .seach-box-bg {
background: #d7d7d7 !important; background: #d7d7d7 !important;
background: inherit; background: inherit;
@@ -175,9 +195,11 @@ defineExpose({
position: relative; position: relative;
justify-content: end; justify-content: end;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
.intermediary-btn{
background:rgba(241, 245, 247, 1); .intermediary-btn {
background: rgba(241, 245, 247, 1);
} }
.authentication-btn { .authentication-btn {
width: 160px; width: 160px;
height: 48px; height: 48px;
@@ -190,6 +212,7 @@ defineExpose({
box-shadow: none; box-shadow: none;
margin-left: 20px; margin-left: 20px;
cursor: pointer; cursor: pointer;
position: relative;
.text-img { .text-img {
width: 100px; width: 100px;
@@ -199,7 +222,7 @@ defineExpose({
.code-img { .code-img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left:8px; margin-left: 8px;
} }
} }

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

@@ -1,9 +1,10 @@
<template> <template>
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;"> <div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
<div class="select-box s-w-50 bor-r"> <div class="select-box s-w-50 bor-r">
<div class="dis-f bor-b-das"> <div class="dis-f bor-b-das" :class="{'al-item housing-pd':routePath==='/needHousing'}">
<div class="tab-title">地理位置</div> <div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div>
<div class="tab-text"> <!-- 非求房源页面 -->
<div class="tab-text" v-if="routePath!=='/needHousing'">
<div class="dis-f"> <div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }" <div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div> @click="selectPosition = 'region'">按区域</div>
@@ -61,9 +62,38 @@
</div> </div>
</div> </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>
<div class="dis-f pad-t-b-15 bor-b-das"> <div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}">
<div class="tab-title">出租方式</div> <div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</div>
<div class="tab-text dis-f al-item" style="padding-bottom:0;"> <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 class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
<div v-if="item.title !== '不限'"> <div v-if="item.title !== '不限'">
@@ -97,12 +127,20 @@
</div> </div>
</div> </div>
<div class="dis-f al-item" style="padding:25px 0;"> <div class="dis-f al-item" style="padding:25px 0;">
<div class="tab-title">租金</div> <div class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div>
<div class="dis-f al-item rent-box"> <div class="dis-f al-item rent-box jus-bet">
<input type="text" class="input" v-model="rentObj.min"> <div class="dis-f al-item">
<span class="tab-icon">~</span> <input type="text" class="input" v-model="rentObj.min">
<input type="text" class="input" v-model="rentObj.max"> <span class="tab-icon">~</span>
<span class="unit-box">HK$/月</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> </div>
</div> </div>
@@ -119,7 +157,7 @@
</div> </div>
</div> </div>
<div class="dis-f bor-b-das pd-t-20"> <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="select-btn-box">
<div class="dis-f"> <div class="dis-f">
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i" <div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
@@ -155,9 +193,9 @@
</div> </div>
<div class="btm-list"> <div class="btm-list">
<div class="dis-f al-item"> <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 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"> <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
{{ item.title }} {{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt=""> <img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
@@ -173,6 +211,7 @@
<script setup> <script setup>
import { reactive, ref, getCurrentInstance } from 'vue'; import { reactive, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue"; import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@@ -199,15 +238,15 @@ let list = [{
}, { }, {
title: '九龙', title: '九龙',
id: 2, id: 2,
data:[{ data: [{
title:'1', title: '1',
id:'1' id: '1'
},{ }, {
title:'2', title: '2',
id:'2' id: '2'
},{ }, {
title:'3', title: '3',
id:'3' id: '3'
}] }]
}] }]
//按区域/学校选择的地区 //按区域/学校选择的地区
@@ -266,7 +305,7 @@ let setSelectData = (id, data = [], title) => {
selectTabCheck.id = id; selectTabCheck.id = id;
selectTabCheck.title = title selectTabCheck.title = title
selectTabCheck.data = data; selectTabCheck.data = data;
selectData.data=[] selectData.data = []
showSelect.value = true showSelect.value = true
} }
//取消按钮 //取消按钮
@@ -293,10 +332,17 @@ let watchData = (data) => {
// selectData.data = data // selectData.data = data
// console.log(selectData) // 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) 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) => { let setHireId = (title) => {
hireTypeObj.hireId = title hireTypeObj.hireId = title
hireTypeObj.id='' hireTypeObj.id = ''
hireTypeObj.title='' hireTypeObj.title = ''
} }
let dropdownCommand = (obj) => { let dropdownCommand = (obj) => {
@@ -385,6 +431,16 @@ img {
.bor-b-das { .bor-b-das {
border-bottom: 1px dashed #ebebeb; 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 { .dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -434,6 +490,10 @@ img {
.select-box { .select-box {
padding: 20px 24px 0px 25px; padding: 20px 24px 0px 25px;
.needHousing-box{
height:50px;
}
.select-tab-info { .select-tab-info {
position: relative; position: relative;
margin-top: 5px; 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 { .info-box {
position: absolute; position: absolute;
top: 5px; top: 5px;
@@ -608,12 +676,21 @@ img {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-right: 35px; margin-right: 35px;
width: 60px; width: 70px;
} }
.info-bor-b { .info-bor-b {
border-bottom: 1px dashed #ebebeb; 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 { .tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -686,7 +763,7 @@ img {
} }
.btn-check { .btn-check {
color: #50E3C2; color: #50E3C2 !important;
border: 1px solid #50E3C2; border: 1px solid #50E3C2;
background: #eefcf9; background: #eefcf9;
} }
@@ -698,6 +775,37 @@ img {
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #555555; 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 { .tab-icon {
margin: 0 10px; margin: 0 10px;
@@ -717,6 +825,7 @@ img {
border-style: solid; border-style: solid;
border-color: rgba(179, 179, 179, 1); border-color: rgba(179, 179, 179, 1);
border-radius: 10px; border-radius: 10px;
padding:0 10px;
} }
} }
@@ -735,11 +844,12 @@ img {
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #50e3c2; color: #50e3c2;
margin-left:10px; margin-left: 10px;
.img{
width:8px; .img {
height:8px; width: 8px;
margin-left:8px; height: 8px;
margin-left: 8px;
} }
} }

2
src/main.js
View File

@@ -43,7 +43,7 @@ api.index().then(res => {
store.state.user = res.data.user store.state.user = res.data.user
store.state.nav = res.data.nav store.state.nav = res.data.nav
store.state.wechat = res.data.wechat store.state.wechat = res.data.wechat
// console.log(store.state.seachTypeData) console.log(123,res.data.recommendedTab)
} }
}) })

8
src/router/index.js
View File

@@ -49,8 +49,12 @@ const routes = [
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue') component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
}, },
{//中介房源 {//中介房源
path: '/intermediaryHousing', path:'/intermediaryHousing',
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue') component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
},
{//求房源
path:'/needHousing',
component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/needHousing.vue')
} }
] ]

4
src/store/index.js
View File

@@ -3,8 +3,8 @@ import { createStore } from 'vuex'
export default createStore({ export default createStore({
state: { state: {
seachTypeData: [], seachTypeData: [],
indexData: [], indexData: [],//首页数据
ListSelectBtn: [], ListSelectBtn: [],//瀑布流选项
user: {}, // 我的信息数据 user: {}, // 我的信息数据
wechat: {}, // 微信号 二维码等数据 wechat: {}, // 微信号 二维码等数据
nav: [], // 顶部的导航数据 nav: [], // 顶部的导航数据

47
src/views/HomeView.vue
View File

@@ -109,7 +109,7 @@
<div> <div>
<div ref="waterfall1"> <div ref="waterfall1">
<div class="waterfall-first-box dis-f"> <div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first"> <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
<div> <div>
<div class="img-box dis-f jus-x al-item"> <div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt=""> <img src="../assets/homeImage/person.png" class="img" alt="">
@@ -117,7 +117,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div> <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
</div> </div>
</div> </div>
<div class="info-box dis-f jus-x al-item second"> <div class="info-box dis-f jus-x al-item second" @click="indexWaterfallBoxCheck(indexData.data.tabs[1])">
<div> <div>
<div class="img-box dis-f jus-x al-item"> <div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt=""> <img src="../assets/homeImage/intermediary.png" class="img" alt="">
@@ -125,7 +125,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div> <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
</div> </div>
</div> </div>
<div class="info-box dis-f jus-x al-item third"> <div class="info-box dis-f jus-x al-item third" @click="indexWaterfallBoxCheck(indexData.data.tabs[2])">
<div> <div>
<div class="img-box dis-f jus-x al-item"> <div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt=""> <img src="../assets/homeImage/brand.png" class="img" alt="">
@@ -133,7 +133,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div> <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
</div> </div>
</div> </div>
<div class="info-box dis-f jus-x al-item"> <div class="info-box dis-f jus-x al-item" @click="indexWaterfallBoxCheck(indexData.data.tabs[3])">
<div> <div>
<div class="img-box dis-f jus-x al-item"> <div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt=""> <img src="../assets/homeImage/seek.png" class="img" alt="">
@@ -178,7 +178,8 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue"; import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import seachModule from "../components/seachModule/seachModule.vue"; import seachModule from "../components/seachModule/seachModule.vue";
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue'; import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
import headerNavigation from '../components/public/head.vue' import headerNavigation from '../components/public/head.vue';
import { useRouter } from 'vue-router'
import store from '../store/index'; import store from '../store/index';
import api from "../utils/api"; import api from "../utils/api";
@@ -201,7 +202,22 @@ let seachTypeData = reactive({ data: [] })
watchEffect(() => { watchEffect(() => {
seachTypeData.data = store.state.seachTypeData seachTypeData.data = store.state.seachTypeData
indexData.data = store.state.indexData indexData.data = store.state.indexData
ListSelectBtn.data = store.state.recommendedTab ListSelectBtn.data = store.state.ListSelectBtn
if (indexData.data.length) {
indexData.data.tabs.map(res => {
if (res.name === "个人房源") {
res.path = '/personHousing'
} else if (res.name === "中介房源") {
res.path = '/intermediaryHousing'
} else if (res.name === "求房源") {
res.path = '/needHousing'
} else if (res.name === "品牌公寓") {
res.path = ''
}
})
}
}) })
//公寓数据 //公寓数据
@@ -265,24 +281,26 @@ let getRecommendList = () => {
//标签切换 //标签切换
let listDataTypeChange = (item) => { let listDataTypeChange = (item) => {
ListSelectBtn.selectType = item.type ListSelectBtn.selectType = item.type
loadMore.value = false
waterfallList[1] = [] waterfallList[1] = []
waterfallList[2] = [] waterfallList[2] = []
waterfallList[3] = [] waterfallList[3] = []
waterfallList[4] = [] waterfallList[4] = []
pages.value=1 pages.value = 1
getRecommendList() getRecommendList()
} }
//监听滚动条 //监听滚动条
const onPageSrcoll = (e) => { const onPageSrcoll = (e) => {
if (!loadMore.value) return
let body = document.documentElement ? document.documentElement : document.body ? let body = document.documentElement ? document.documentElement : document.body ?
document.body : document.body :
document.querySelector('.element'); document.querySelector('.element');
let scrollTop = body.scrollTop let scrollTop = body.scrollTop
let clientHeight = body.clientHeight let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight > offsetHeight - 500) { if (scrollTop + clientHeight === offsetHeight) {
if (loadMore.value) { if (loadMore.value) {
loadMore.value = false loadMore.value = false
pages.value += 1 pages.value += 1
@@ -291,14 +309,21 @@ const onPageSrcoll = (e) => {
} }
} }
//瀑布流模块
const router = useRouter()
let indexWaterfallBoxCheck = (res) => {
router.push({
path: res.path
})
}
onMounted(() => { onMounted(() => {
document.documentElement.scrollTop = 0
currentInstance = getCurrentInstance() currentInstance = getCurrentInstance()
setTimeout(() => { setTimeout(() => {
getRecommendList() getRecommendList()
}, 1000)
nextTick(() => {
window.addEventListener('scroll', onPageSrcoll, true); window.addEventListener('scroll', onPageSrcoll, true);
}) }, 1000)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {

62
src/views/housingView/needHousing.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet">
<div>
<biserialItem></biserialItem>
</div>
<div></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.mg-t-35 {
margin-top: 35px;
}
</style>

3
src/views/housingView/person.vue
View File

@@ -12,7 +12,7 @@
</div> </div>
</div> </div>
</div> </div>
<listBtmPrompt></listBtmPrompt>
</div> </div>
</template> </template>
@@ -20,6 +20,7 @@
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue'; import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue"; import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue' import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue";
</script> </script>
<style scoped> <style scoped>
img { img {