首页接口

src/components/apartmentList/apartmentList.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="list-item">
         <div class="item-title">
-            安怡居 | 旺角毓成楼
+            {{ moduleData.data.title }}
         </div>
         <div class="item-text">
-            大学认可校外宿舍 ，24小时保安洋楼
+            {{ moduleData.data.propaganda }}
         </div>
         <div class="item-img-box">
-            <div class="img-box">
+            <!-- <div class="img-box">
                 <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
                 <img src="../../assets/homeImage/voide.svg" class="img" alt="">
-            </div>
+            </div> -->
-            <div class="img-box">
+            <div class="img-box" v-for="(item,i) in moduleData.data.images" :key="i">
-                <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
+                <img :src="item" class="item-img" alt="">
                 <img src="../../assets/homeImage/voide.svg" class="img" alt="">
             </div>
         </div>
@@ -20,19 +20,17 @@
 </template>
   
 <script setup>
-
+import { defineProps, reactive } from 'vue'
-</script>
+const props = defineProps({
-<script>
+    data: {
-export default {
+        type: Object,
-    props: {
+        default: function () {
-        List: {
+            return {}
-            type: Array,
-            default: function () {
-                return []
-            }
         }
     }
-}
+})
+let moduleData = reactive({ data: {} })
+moduleData.data = props.data
 </script>
 <style scoped>
 .list-item {
@@ -67,6 +65,10 @@ export default {
         color: #7F7F7F;
         text-align: left;
         margin-top: 12px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
     }
 
     .item-img-box {
@@ -87,6 +89,7 @@ export default {
                 width: 120px;
                 height: 80px;
                 border-radius: 10px;
+                object-fit: cover;
             }
 
             .img {

src/components/indexSeachInfo/indexSeachInfo.vue

@@ -7,16 +7,16 @@
         <div style="padding:0 0 0 18px;">
             <div class="info-box-bg">
                 <div class="box"
-                    :class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
+                    :class="[{ 'pad-15': seachType === '3' }]">
-                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
+                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn.data" :key="i" :class="[
                         { 'btn': seachType === '1' },
-                        { 'mg-l-15': seachType === '1' && i % 4 !== 0 },
+                        { 'mg-l-17': seachType === '1' && i % 4 !== 0 },
                         { 'seach-long-btn btn': seachType === '2' },
-                        { 'mg-l-15': seachType === '2' && i % 3 !== 0 },
+                        { 'mg-l-17': seachType === '2' && i % 3 !== 0 },
                         { 'select-btn': seachType === '3' },
-                        { 'mg-l-15': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
+                        { 'mg-l-17': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
                     ]">
-                        {{ item.text }}
+                        {{ item.name }}
                         <img v-if="seachType === '3'"
                             :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
                             class="img" alt="">
@@ -32,7 +32,7 @@
 </template>
   
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, watchEffect } from 'vue';
 import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
 
 const props = defineProps({
@@ -54,9 +54,13 @@ const props = defineProps({
 
 let seachType = props.seachType
 let title = props.title
-let btn = JSON.parse(JSON.stringify(props.btn))
+let btn = reactive({data:[]})
-//
+//数据更新监听
+watchEffect(()=>{
+    btn.data= JSON.parse(JSON.stringify(props.btn))
+})
 
+//
 let selectType = ref('')
 let selectData = reactive({data:[]})
 //点击选项
@@ -215,8 +219,8 @@ let selectSeach = (data) => {
         cursor: pointer;
     }
 
-    .mg-l-15 {
+    .mg-l-17 {
-        margin-left: 15px;
+        margin-left: 17px;
     }
 
 }

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -1,33 +1,36 @@
 <template>
     <div>
-        <div class="waterfall-box">
+        <div class="waterfall-box" >
             <div class="flexflex pos-r">
-                <div class="box-tab-type">
+                <div class="box-tab-type" v-if="itemData.intermediarytext">
-                    招室友
+                    {{ itemData.intermediarytext }}
                 </div>
-                <div class="intermediary-type">
+                <div class="intermediary-type" v-if="itemData.isintermediary">
                     认证中介
                 </div>
                 <img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
-                <div class="authentication-box">
+                <div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
                     <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
                     <img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
                     <img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
                 </div>
             </div>
             <div class="long-title">
-                <span class="type">123</span>1111111111111111111111111111111111111111111111111111111111111111
+                <span class="type"  v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
             </div>
             <div class="type-tab">
-                独卫套房 · 电梯 · 阳台 · 男女皆可
+                <span v-if="itemData.type === 'housing'">
+                    {{ itemData.housingtype }} {{ itemData.elevator===-1||!itemData.elevator?'': `· ${itemData.elevator}` }}{{ itemData.sunshinearea===-1||!itemData.sunshinearea?'': `· ${itemData.sunshinearea}`}}{{`· ${itemData.gender}`}}
+                </span>
+                <span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
             </div>
             <div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
-                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
+                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" v-if="itemData.type === 'apartment'">
-                <span class="address-text">九龙 > 尖沙咀/佐敦</span>
+                <span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
             </div>
-            <div style="padding:0 10px;margin-top:12px;">
+            <div style="padding:0 10px;margin-top:12px;"  v-if="itemData.type === 'housing'">
-                <span class="unit">HK$</span>
+                <span class="unit">{{ itemData.currency }}</span>
-                <span class="price">7200</span>
+                <span class="price">{{itemData.rent}}</span>
                 <span class="date">/月</span>
             </div>
             <!-- <div class="title">
@@ -36,58 +39,59 @@
             <!-- <div class="info-text">
                 年轻有活力且超有玩趣的公寓
             </div> -->
-            <div class="corner-box">
+
-                <img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
+            <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
-            </div>
+
-            <!-- <div class="suite-box">
+            <div class="suite-box" v-if="itemData.type === 'apartment'">
                 <div class="dis-f al-item jus-bet">
                     <div class="suite-type">
-                        单人套间
+                        {{ itemData.specifications && itemData.specifications[0].title }}
                     </div>
                     <div>
                         <span class="unit">HK$</span>
-                        <span class="price">7200</span>
+                        <span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span>
                         <span class="date">/月</span>
                     </div>
                 </div>
                 <div class="line"></div>
                 <div class="dis-f al-item jus-bet">
                     <div class="suite-type">
-                        单人间
+                        {{ itemData.specifications && itemData.specifications[1].title }}
                     </div>
                     <div>
                         <span class="unit">HK$</span>
-                        <span class="price">5700</span>
+                        <span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span>
                         <span class="date">/月</span>
                     </div>
                 </div>
-            </div> -->
+            </div>
+            <div class="corner-box" v-if="itemData.type === 'housing'">
+                <img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
+            </div>
             <!-- <div class="apartment-price-more flexcenter">更多</div> -->
 
             <!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
-            <!-- <div class="apartment-top flexcenter">
+            <div class="apartment-top flexcenter"  v-if="itemData.type === 'apartment'">
                 <img class="apartment-bottom-icon" src="../../assets/homeImage/apartment-bottom.png" />
                 <img class="apartment-icon" src="../../assets/homeImage/apartment-icon.png" />
                 <img class="apartment-text" src="../../assets/homeImage/apartment-text.png" />
-            </div> -->
+            </div>
         </div>
     </div>
 </template>
   
 <script setup>
-
+import { defineProps, reactive } from 'vue'
-</script>
+const props = defineProps({
-<script>
+    data: {
-export default {
+        type: Object,
-    props: {
+        default: function () {
-        data: {
+            return {}
-            type: Object,
-            default: function () {
-                return {}
-            }
         }
     }
-}
+})
+let itemData = props.data
+
 </script>
 <style scoped>
 .pos-r {
@@ -130,6 +134,9 @@ export default {
     margin-left: 3px;
 }
 
+.pd-b-10{
+    padding-bottom:10px;
+}
 .waterfall-box {
     width: 285px;
     background: inherit;
@@ -140,6 +147,7 @@ export default {
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     margin-bottom: 20px;
+    cursor: pointer;
 
     .authentication-box {
         width: 275px;
@@ -269,10 +277,10 @@ export default {
         font-style: normal;
         font-size: 14px;
         color: #FFFFFF;
-        background:#6081d5;
+        background: #6081d5;
-        line-height:24px;
+        line-height: 24px;
-        text-align:center;
+        text-align: center;
-        border-radius:5px;
+        border-radius: 5px;
     }
 
     .title {
@@ -308,6 +316,10 @@ export default {
             font-style: normal;
             font-size: 15px;
             color: #000000;
+            width: 120px;
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
         }
 
         .line {
@@ -361,5 +373,18 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-}</style>
+}
+
+.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);
+}
+</style>
   

src/components/pageTopBar/pageTopBar.vue

@@ -5,9 +5,12 @@
       <!-- 顶部导航 -->
       <div class="dis-f jus-x al-item index-top-navigation-box">
         <div class="index-top-navigation dis-f al-item body-maxWidth">
-          <div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
+          <div class="navigation-text" 
+          @click="topTabSelect(i,item)"
+          :class="{ 'navigation-text-click': i === topTabNum }" 
+          v-for="(item, i) in topTab.data" :key="i">
             {{
-              item.title }}</div>
+              item.name }}</div>
           <img src="" class="user-img" alt="">
         </div>
       </div>
@@ -30,11 +33,11 @@
       </div>
       <div class="btm-seach-btn-box dis-f al-item jus-x">
         <div class="body-maxWidth dis-f" style="height:48px;">
-          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
+          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab.data"
             :key="i">
             <el-badge :value="12">
               <div style="padding:0 10px;">
-                {{ item.title }}
+                {{ item.name }}
               </div>
             </el-badge>
 
@@ -46,49 +49,30 @@
 </template>
   
 <script setup>
-let topTab = [
+import { defineProps, reactive, watchEffect, ref } from "vue";
-  {
+const props=defineProps({
-    title: '寄托首页',
+  tabMens:{
-  }, {
+    type:Object,
-    title: '论坛'
+    default:function(){
-  }, {
+      return {}
-    title: 'Offer榜'
+    }
-  }, {
-    title: '港校租房'
-  }, {
-    title: '院校库'
-  }, {
-    title: '兑换店'
-  }, {
-    title: '搜索'
-  }, {
-    title: '招生官'
-  }, {
-    title: '中外合办院校'
   }
-]
+})
-let seachTab = [
+//组件数据
-  {
+let topTab=reactive({data:[]})
-    title: '首页',
+let seachTab = reactive({data:[]})
-  }, {
+watchEffect(()=>{
-    title: '个人房源'
+  seachTab.data=props.tabMens.menu
-  }, {
+  topTab.data=props.tabMens.nav
-    title: '中介房源'
+})
-  }, {
-    title: '品牌公寓'
-  }, {
-    title: '求房源'
-  }, {
-    title: '我的'
-  }
-]
-</script>
-<script>
-export default {
-  props: {
 
-  }
+//顶部导航跳转
+let topTabNum=ref('gter')
+let topTabSelect=(type,item)=>{
+  topTabNum.value=type
+  window.open(item.url)
 }
+
 </script>
 <style scoped>
 .pos-r {

src/components/seachModule/seachModule.vue

@@ -57,10 +57,10 @@
                         </div>
                     </div>
                     <div class="seach-info-box dis-f">
-                        <seachInfo title="学校附近" :btn="seachSchoolBtn" seachType="1"></seachInfo>
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1"></seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType"></seachInfo>
+                        <seachInfo title="合租" seachType="2" :btn="hireType.data"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
+                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"></seachInfo>
                     </div>
                     <!--  -->
                     <!-- <div>
@@ -73,46 +73,41 @@
 </template>
   
 <script setup>
-import { ref } from 'vue';
+import { ref, defineProps, watchEffect,reactive,watch } from 'vue';
 import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
+import { useRouter} from 'vue-router'
+//监听路由
+const router = useRouter()
+watch(()=>router.currentRoute.value,(nVal)=>{
+    console.log(nVal)
+})
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    }
+})
 //搜索框
 let seachValue = ref('')
 let historyShow = ref(false);
 let setHistoryShow = () => {
     historyShow.value = !historyShow.value
 }
+let seachSchoolBtn=reactive({data:[]});//学校地区
+let hireType={};//整租
+let allHireType={};//合租
+let seachArea={};//区域找房
+watchEffect(() => {
+    seachSchoolBtn.data = props.list[0] ? props.list[0].where : []
+    hireType.data = props.list[2] ? props.list[2].where[0].data : []
+    allHireType.data = props.list[2] ? props.list[2].where[1].data : []
+    seachArea.data = props.list[1] ? props.list[1].where : []
+})
 
-let seachSchoolBtn = [
-    { text: '港大' },
-    { text: '科大' },
-    { text: '中大' },
-    { text: '城大' },
-    { text: '理工' },
-    { text: '浸会' },
-    { text: '教大' },
-    { text: '岭大' },
-]
-let hireType = [
-    { text: '不限' },
-    { text: '房间' },
-    { text: '床位' },
-    { text: '客厅' },
-    { text: '其他' },
-]
-let allHireType = [
-    { text: '不限' },
-    { text: 'studio' },
-    { text: '一房' },
-    { text: '两房' },
-    { text: '三房' },
-    { text: '四房以上' }
-]
-let seachArea = [
-    { text: '港岛',data:[{title:1,id:1},{title:2,id:2},{title:3,id:3},{title:4,id:4}] },
-    { text: '九龙',data:[{title:5,id:5},{title:2,id:2},{title:3,id:3},{title:7,id:7}] },
-    { text: '新界',data:[{title:6,id:6},{title:8,id:8},{title:11,id:11},{title:9,id:9}] }
-]
 let historyArr = [
     { title: '有阳台' },
     { title: '有洗衣机' },
@@ -128,13 +123,6 @@ defineExpose({
     seachValue
 })
 </script>
-<script>
-export default {
-    props: {
-
-    }
-}
-</script>
 <style scoped>
 .dis-f {
     display: flex;
@@ -197,14 +185,16 @@ export default {
                 -moz-box-shadow: none;
                 -webkit-box-shadow: none;
                 box-shadow: none;
-                margin-left:20px;
+                margin-left: 20px;
-                .text-img{
+
-                    width:100px;
+                .text-img {
-                    height:26px;
+                    width: 100px;
+                    height: 26px;
                 }
-                .code-img{
+
-                    width:20px;
+                .code-img {
-                    height:20px;
+                    width: 20px;
+                    height: 20px;
                 }
             }
 

src/utils/api.js

@@ -1,7 +1,13 @@
 import axios from "./axios";
 
 export default{
-    index:(params={})=>{
+    index:(params={})=>{//首页数据
         return axios.get('/tenement/pc/api/home',params)
+    },
+    getApartment:(params={})=>{//获取首页公寓数据
+        return axios.get('/tenement/pc/api/home/getApartment',params)
+    },
+    recommendList:(params={})=>{//首页瀑布流
+        return axios.get('/tenement/pc/api/home/recommendList',params)
     }
 }

src/views/HomeView.vue

@@ -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>
+        <div v-for="(item, i) in apartmentData.data" :key="i">
-        <listItem style="margin-left:12px;"></listItem>
+          <listItem :style="{ 'margin-left': i === 0 ? 0 : '12px' }" :data="item" v-if="i < 4"></listItem>
-        <listItem style="margin-left:12px;"></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 v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item"
-          <div class="list-tab-btn" :class="{ 'click-tab-btn': i === 1 }">
+          @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>
-            <div class="waterfall-first-box dis-f">
+            <div ref="waterfall1">
-              <div class="info-box dis-f jus-x al-item first">
+              <div class="waterfall-first-box dis-f">
-                <div>
+                <div class="info-box dis-f jus-x al-item first">
-                  <div class="img-box dis-f jus-x al-item">
+                  <div>
-                    <img src="../assets/homeImage/person.png" class="img" alt="">
+                    <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">
+          <div>
-            <img src="../assets/homeImage/liveImg.svg" class="live-img" alt="">
+            <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">
+          <div>
-            <indexWaterfallBox></indexWaterfallBox>
+            <div ref="waterfall3">
+              <indexWaterfallBox v-for="(item,i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
+            </div>
           </div>
-          <div ref="waterfall4">
+          <div>
-            <indexWaterfallBox></indexWaterfallBox>
+            <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 = [
+let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })
-  {
-    text: '推荐'
-  },
-  {
-    text: '整租'
-  },
-  {
-    text: '合租'
-  },
-  {
-    text: '招室友'
-  },
-  {
-    text: '已认证'
-  },
-]
 
-let indexData= reactive({data:[]})
+//首页数据
-api.index().then(res=>{
+let indexData = reactive({ data: {} })
-  console.log(res)
+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;

vue.config.js

@@ -38,12 +38,13 @@ module.exports = defineConfig({
   },
   devServer: {
     proxy: {
-      '/index': {
+      '/Api': {
         target: 'https://app.gter.net',//请求的接口的前缀
         changeOrigin:true,
-        rewrite: (path) => path.replace(/^\/index/, ''),
+        ws: true,  //用于支持websocket
+        rewrite: (path) => path.replace(/^\/Api/, ''),
         pathRewrite:{
-          '^/index':''
+          '^/Api':''
         }
       }
     }