首页接口

2023-07-13 10:07:16 +08:00 · 2023-07-13 10:07:16 +08:00 · 6ad28c4f0a
commit 6ad28c4f0a
parent 5dcf49533d
8 changed files with 306 additions and 245 deletions
--- a/src/components/apartmentList/apartmentList.vue
+++ b/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 class="img-box">
-                <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
+            </div> -->
+            <div class="img-box" v-for="(item,i) in moduleData.data.images" :key="i">
+                <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>
-
-</script>
-<script>
-export default {
-    props: {
-        List: {
-            type: Array,
-            default: function () {
-                return []
-            }
+import { defineProps, reactive } from 'vue'
+const props = defineProps({
+    data: {
+        type: Object,
+        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 {
--- a/src/components/indexSeachInfo/indexSeachInfo.vue
+++ b/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' }]">
-                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
+                    :class="[{ 'pad-15': seachType === '3' }]">
+                    <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 {
-        margin-left: 15px;
+    .mg-l-17 {
+        margin-left: 17px;
    }

 }
--- a/src/components/indexWaterfallBox/indexWaterfallBox.vue
+++ b/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="">
-                <span class="address-text">九龙 > 尖沙咀/佐敦</span>
+                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" v-if="itemData.type === 'apartment'">
+                <span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
            </div>
-            <div style="padding:0 10px;margin-top:12px;">
-                <span class="unit">HK$</span>
-                <span class="price">7200</span>
+            <div style="padding:0 10px;margin-top:12px;"  v-if="itemData.type === 'housing'">
+                <span class="unit">{{ itemData.currency }}</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="">
-            </div>
-            <!-- <div class="suite-box">
+
+            <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
+
+            <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>
-
-</script>
-<script>
-export default {
-    props: {
-        data: {
-            type: Object,
-            default: function () {
-                return {}
-            }
+import { defineProps, reactive } from 'vue'
+const props = defineProps({
+    data: {
+        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;
-        line-height:24px;
-        text-align:center;
-        border-radius:5px;
+        background: #6081d5;
+        line-height: 24px;
+        text-align: center;
+        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>
  
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/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 = [
-  {
-    title: '寄托首页',
-  }, {
-    title: '论坛'
-  }, {
-    title: 'Offer榜'
-  }, {
-    title: '港校租房'
-  }, {
-    title: '院校库'
-  }, {
-    title: '兑换店'
-  }, {
-    title: '搜索'
-  }, {
-    title: '招生官'
-  }, {
-    title: '中外合办院校'
+import { defineProps, reactive, watchEffect, ref } from "vue";
+const props=defineProps({
+  tabMens:{
+    type:Object,
+    default:function(){
+      return {}
+    }
  }
-]
-let seachTab = [
-  {
-    title: '首页',
-  }, {
-    title: '个人房源'
-  }, {
-    title: '中介房源'
-  }, {
-    title: '品牌公寓'
-  }, {
-    title: '求房源'
-  }, {
-    title: '我的'
-  }
-]
-</script>
-<script>
-export default {
-  props: {
+})
+//组件数据
+let topTab=reactive({data:[]})
+let seachTab = reactive({data:[]})
+watchEffect(()=>{
+  seachTab.data=props.tabMens.menu
+  topTab.data=props.tabMens.nav
+})

-  }
+//顶部导航跳转
+let topTabNum=ref('gter')
+let topTabSelect=(type,item)=>{
+  topTabNum.value=type
+  window.open(item.url)
 }
+
 </script>
 <style scoped>
 .pos-r {
--- a/src/components/seachModule/seachModule.vue
+++ b/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="合租" seachType="2" :btn="hireType"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1"></seachInfo>
+                        <seachInfo title="合租" seachType="2" :btn="hireType.data"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"></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;
-                .text-img{
-                    width:100px;
-                    height:26px;
+                margin-left: 20px;
+
+                .text-img {
+                    width: 100px;
+                    height: 26px;
                }
-                .code-img{
-                    width:20px;
-                    height:20px;
+
+                .code-img {
+                    width: 20px;
+                    height: 20px;
                }
            }

--- a/src/utils/api.js
+++ b/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)
    }
 }
--- a/src/views/HomeView.vue
+++ b/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>
-        <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;
--- a/vue.config.js
+++ b/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':''
        }
      }
    }