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-13 10:07:16 +08:00
parent 5dcf49533d
commit 6ad28c4f0a
8 changed files with 306 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/HomeView.vue
View File

@@ -1,16 +1,18 @@
<template>
<div class="home">
<pageTopBar></pageTopBar>
<pageTopBar :tabMens="indexData.data"></pageTopBar>
<!-- <headerNavigation></headerNavigation> -->
<!-- 搜索模块 -->
<seachModule></seachModule>
<seachModule :list="seachTypeData.data"></seachModule>
<!-- 房源展示 -->
<div class="dis-f jus-x al-item" style="margin-top:25px;">
<div class="body-maxWidth dis-f al-item">
<listItem></listItem>
<listItem style="margin-left:12px;"></listItem>
<listItem style="margin-left:12px;"></listItem>
<div v-for="(item, i) in apartmentData.data" :key="i">
<listItem :style="{ 'margin-left': i === 0 ? 0 : '12px' }" :data="item" v-if="i < 4"></listItem>
</div>
<!-- <listItem style="margin-left:12px;"></listItem>
<listItem style="margin-left:12px;"></listItem>
<listItem style="margin-left:12px;"></listItem> -->
</div>
</div>
<!-- 科普 -->
@@ -96,64 +98,75 @@
<!-- 瀑布流 -->
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item" style="margin-top:50px;">
<div v-for="(item, i) in ListSelectBtn" :key="i" class="dis-f al-item">
<div class="list-tab-btn" :class="{ 'click-tab-btn': i === 1 }">
<div v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item"
@click="ListSelectBtn.selectType = item.recommend">
<div class="list-tab-btn" :class="{ 'click-tab-btn': ListSelectBtn.selectType === item.type }">
<div style="z-index: 666;position: relative;">
{{ item.text }}
{{ item.name }}
</div>
<div class="tab-marker" v-show="i === 1"></div>
<div class="tab-marker" v-show="ListSelectBtn.selectType === item.type"></div>
</div>
<div :class="{ 'line-btn': i !== ListSelectBtn.length - 1 }"></div>
<div :class="{ 'line-btn': i !== ListSelectBtn.data.length - 1 }"></div>
</div>
</div>
</div>
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item">
<div class="waterfall-box s-w-100">
<div ref="waterfall1">
<div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt="">
<div>
<div ref="waterfall1">
<div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item second">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item third">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[3].name }}</div>
</div>
<div class="text-center">个人房源</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item second">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
</div>
<div class="text-center">中介房源</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item third">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt="">
</div>
<div class="text-center">品牌公寓</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt="">
</div>
<div class="text-center">求房源</div>
</div>
</div>
<indexWaterfallBox v-for="(item,i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div ref="waterfall2">
<img src="../assets/homeImage/liveImg.svg" class="live-img" alt="">
<div>
<div ref="waterfall2">
<indexWaterfallBox v-for="(item,i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
</div>
<!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
</div>
<div ref="waterfall3">
<indexWaterfallBox></indexWaterfallBox>
<div>
<div ref="waterfall3">
<indexWaterfallBox v-for="(item,i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div ref="waterfall4">
<indexWaterfallBox></indexWaterfallBox>
<div>
<div ref="waterfall4">
<indexWaterfallBox v-for="(item,i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
</div>
</div>
@@ -166,7 +179,7 @@
</template>
<script setup>
import { reactive } from "vue";
import { reactive, ref, getCurrentInstance, onMounted, nextTick } from "vue";
import listItem from "../components/apartmentList/apartmentList.vue";
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
@@ -179,29 +192,74 @@ import api from "../utils/api";
let informationData = [
'123456', '2456789', '3456789', '47894564', '545649879987'
]
let ListSelectBtn = [
{
text: '推荐'
},
{
text: '整租'
},
{
text: '合租'
},
{
text: '招室友'
},
{
text: '已认证'
},
]
let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })
let indexData= reactive({data:[]})
api.index().then(res=>{
console.log(res)
//首页数据
let indexData = reactive({ data: {} })
let seachTypeData = reactive({ data: [] })
api.index().then(res => {
if (res.code === 200) {
seachTypeData.data = res.data.combination
indexData.data = res.data
ListSelectBtn.data = res.data.recommendedTab
}
})
//公寓数据
let apartmentData = reactive({ data: [] })
api.getApartment().then(res => {
if (res.code === 200) {
apartmentData.data = res.data
}
})
//获取实例
let currentInstance = null
onMounted(() => {
currentInstance = getCurrentInstance()
})
//瀑布流数据
let pages = ref(1)
let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
//判断最小值
let getMinHeight = (data) => {
let waterfallAll = [
currentInstance.ctx.$refs.waterfall1.offsetHeight,
currentInstance.ctx.$refs.waterfall2.offsetHeight,
currentInstance.ctx.$refs.waterfall3.offsetHeight,
currentInstance.ctx.$refs.waterfall4.offsetHeight
]
let min = Math.min(waterfallAll[0], waterfallAll[1], waterfallAll[2], waterfallAll[3])
let index = waterfallAll.indexOf(min)
waterfallList[index+1].push(data)
// console.log(index,waterfallAll)
}
//瀑布流添加
let addListData = (data) => {
data.map((res) => {
setTimeout(()=>{
getMinHeight(res)
})
})
console.log(waterfallList)
}
api.recommendList({
page: pages,
limit: 30,
type: ListSelectBtn.selectType
}).then(res => {
console.log(res)
if (res.code === 200) {
addListData(res.data.data)
}
})
</script>
<script>
export default {
@@ -362,7 +420,7 @@ img {
text-align: center;
line-height: 24px;
display: none;
padding-top:30px;
padding-top: 30px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
}
@@ -389,6 +447,7 @@ img {
height: 48px;
line-height: 48px;
position: relative;
cursor: pointer;
.tab-marker {
width: 20px;
@@ -421,18 +480,6 @@ img {
margin-top: 30px;
justify-content: space-between;
.live-img {
width: 301px;
height: 349px;
border-radius: 16px;
}
.live-img:hover {
-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);
}
.waterfall-first-box {
width: 284px;
height: 284px;
@@ -465,6 +512,7 @@ img {
font-style: normal;
font-size: 14px;
color: #555555;
cursor: pointer;
.text-center {
text-align: center;