首页数据布置到全局 瀑布流加载更多

src/components/apartmentList/apartmentList.vue

@@ -11,7 +11,7 @@
                 <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
                 <img src="../../assets/homeImage/voide.svg" class="img" alt="">
             </div> -->
-            <div class="img-box" v-for="(item,i) in moduleData.data.images" :key="i">
+            <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>
@@ -47,6 +47,7 @@ moduleData.data = props.data
     -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);
+    cursor: pointer;
 
     .item-title {
         font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -55,6 +56,9 @@ moduleData.data = props.data
         font-size: 16px;
         color: #000000;
         text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .item-text {

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <div class="waterfall-box" >
+        <div class="waterfall-box" v-if="itemData.type !== 'adv'"
+            :class="{ 'waterfall-box-housing': itemData.type === 'housing' }">
             <div class="flexflex pos-r">
                 <div class="box-tab-type" v-if="itemData.intermediarytext">
                     {{ itemData.intermediarytext }}
@@ -8,29 +9,35 @@
                 <div class="intermediary-type" v-if="itemData.isintermediary">
                     认证中介
                 </div>
-                <img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
+                <img class="apartment-img" :src="itemData.imageLocal || itemData.image"
-                <div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
+                    v-if="itemData.type === 'housing' || itemData.type === 'apartment'" />
+                <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"  v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
+                <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}`}}
+                    {{ itemData.housingtype }}
+                    {{ itemData.elevator === -1 || !itemData.elevator ? '' : `· ${itemData.elevator}` }}
+                    {{ itemData.sunshinearea === -1 || !itemData.sunshinearea ? '' : `· ${itemData.sunshinearea}` }}
+                    {{ `· ${itemData.gender}` }}
+                    {{ itemData.leaseterm ? `· ${itemData.leaseterm}` : '' }}
                 </span>
                 <span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
             </div>
-            <div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
+            <!-- <div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item" v-if="itemData.type === 'housing'">
-                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" v-if="itemData.type === 'apartment'">
+                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
-                <span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
+                <span class="address-text">九龙 > 尖沙咀/佐敦</span>
-            </div>
+            </div> -->
-            <div style="padding:0 10px;margin-top:12px;"  v-if="itemData.type === 'housing'">
+            <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="price">{{ itemData.rent }}</span>
                 <span class="date">/月</span>
             </div>
             <!-- <div class="title">
@@ -39,9 +46,6 @@
             <!-- <div class="info-text">
                 年轻有活力且超有玩趣的公寓
             </div> -->
-
-            <!-- <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">
@@ -71,12 +75,15 @@
             <!-- <div class="apartment-price-more flexcenter">更多</div> -->
 
             <!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
-            <div class="apartment-top flexcenter"  v-if="itemData.type === 'apartment'">
+            <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>
+        <img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt="">
     </div>
 </template>
   
@@ -134,9 +141,14 @@ let itemData = props.data
     margin-left: 3px;
 }
 
-.pd-b-10{
+.pd-b-10 {
-    padding-bottom:10px;
+    padding-bottom: 10px;
 }
+
+.waterfall-box-housing {
+    border-radius: 16px 16px 35px 16px !important;
+}
+
 .waterfall-box {
     width: 285px;
     background: inherit;
@@ -229,6 +241,10 @@ let itemData = props.data
         text-overflow: ellipsis;
         word-break: break-all;
         margin-top: 8px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
 
         .type {
             width: 40px;
@@ -348,8 +364,10 @@ let itemData = props.data
 
 .apartment-img {
     width: 275px;
+    height: 193px;
     border-radius: 10px;
     margin: 5px auto;
+    object-fit: cover;
 }
 
 .apartment-top {
@@ -376,15 +394,16 @@ let itemData = props.data
 }
 
 .live-img {
-    width: 301px;
+    width: 285px;
-    height: 349px;
+    /* height: 349px; */
     border-radius: 16px;
+    margin-bottom: 20px;
+    cursor: pointer;
 }
 
 .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>
-</style>
   

src/components/pageTopBar/pageTopBar.vue

@@ -136,6 +136,7 @@ let topTabSelect=(type,item)=>{
   color: rgba(215, 215, 215, 0.988235294117647);
   text-align: center;
   margin-right: 20px;
+  cursor: pointer;
 }
 
 .index-top-navigation-box .navigation-text-click {
@@ -193,6 +194,7 @@ let topTabSelect=(type,item)=>{
   font-style: normal;
   font-size: 18px;
   color: #E2EDF7;
+  cursor: pointer;
 }
 
 .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {

src/components/seachModule/seachModule.vue

@@ -12,9 +12,9 @@
                             <div class="triangle"></div>
                         </div>
                         <div class="dis-f al-item pos-r">
-                            <el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @blur="setHistoryShow"
+                            <el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' @blur="setHistoryShow"
                                 @focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
-                            <div class="seach-btn dis-f al-item jus-x">
+                            <div class="seach-btn dis-f al-item jus-x" @click="seachList">
                                 <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
                                 搜索
                             </div>
@@ -25,8 +25,8 @@
                                             历史搜索
                                         </div>
                                         <div class="info-box">
-                                            <div v-for="(item, i) in historyArr" :key="i" class="btn">
+                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn">
-                                                {{ item.title }}
+                                                {{ item }}
                                             </div>
                                         </div>
                                     </div>
@@ -35,8 +35,8 @@
                                             热门推荐
                                         </div>
                                         <div class="info-box">
-                                            <div v-for="(item, i) in historyArr" :key="i" class="btn">
+                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn">
-                                                {{ item.title }}
+                                                {{ item }}
                                             </div>
                                         </div>
                                     </div>
@@ -57,10 +57,10 @@
                         </div>
                     </div>
                     <div class="seach-info-box dis-f">
-                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1"></seachInfo>
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"></seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType.data"></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"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" v-if="seachArea.data.length"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"></seachInfo>
+                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" v-if="allHireType.data.length"></seachInfo>
                     </div>
                     <!--  -->
                     <!-- <div>
@@ -89,6 +89,12 @@ const props = defineProps({
         default: function () {
             return []
         }
+    },
+    hotList:{
+        type:Array,
+        default:function(){
+            return []
+        }
     }
 })
 //搜索框
@@ -101,23 +107,27 @@ let seachSchoolBtn=reactive({data:[]});//学校地区
 let hireType={};//整租
 let allHireType={};//合租
 let seachArea={};//区域找房
+let historyArr =reactive({data:[]})//历史查找记录
+let hotArr =reactive({data:[]})
 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 : []
+    hotArr.data=props.hotList
 })
 
-let historyArr = [
+//获取历史搜索记录
-    { title: '有阳台' },
+historyArr.data=JSON.parse(localStorage.getItem('historyArr'))||[]
-    { title: '有洗衣机' },
+
-    { title: '城大' },
+//搜索数据
-    { title: '城大' },
+let seachList=()=>{
-    { title: '城大' },
+
-    { title: '城大' },
+    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
-    { title: '城大' },
+}
-    { title: '城大' },
+
-]
+
+
 defineExpose({
     historyShow,
     seachValue
@@ -186,6 +196,7 @@ defineExpose({
                 -webkit-box-shadow: none;
                 box-shadow: none;
                 margin-left: 20px;
+                cursor: pointer;
 
                 .text-img {
                     width: 100px;
@@ -245,6 +256,7 @@ defineExpose({
 
                     .btn {
                         margin: 20px 30px 0 0;
+                        cursor: pointer;
                     }
                 }
             }
@@ -290,6 +302,7 @@ defineExpose({
                 border-right: 0px;
                 border-radius: 0 8px 8px 0;
                 line-height: 48px;
+                cursor: pointer;
             }
 
             .img {
@@ -307,6 +320,7 @@ defineExpose({
             .add-btn {
                 background: rgba(253, 218, 85, 1);
                 margin-left: 20px;
+                cursor: pointer;
             }
 
             .tool-btn {

src/main.js

@@ -6,12 +6,20 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/lib/locale/lang/zh-cn'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import api from "./utils/api";
 
 //引入封装Axios请求
 import Axios from '@/utils/axios';
 
 const app = createApp(App)
-
+api.index().then(res => {
+    if (res.code === 200) {
+      store.state.seachTypeData = res.data.combination
+      store.state.indexData = res.data
+      store.state.ListSelectBtn = res.data.recommendedTab
+      console.log(store.state.seachTypeData)
+    }
+  })
 app.use(store).use(router).use(Axios).use(ElementPlus, {
     locale: zhCn
 }).mount('#app')

src/store/index.js

@@ -2,8 +2,12 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    seachTypeData:[],
+    indexData:[],
+    ListSelectBtn:[],
   },
   getters: {
+    
   },
   mutations: {
   },

src/views/HomeView.vue

@@ -3,7 +3,7 @@
     <pageTopBar :tabMens="indexData.data"></pageTopBar>
     <!-- <headerNavigation></headerNavigation> -->
     <!-- 搜索模块 -->
-    <seachModule :list="seachTypeData.data"></seachModule>
+    <seachModule :list="seachTypeData.data" :hotList="indexData.data.hotSearcheWords"></seachModule>
     <!-- 房源展示 -->
     <div class="dis-f jus-x al-item" style="margin-top:25px;">
       <div class="body-maxWidth dis-f al-item">
@@ -51,28 +51,22 @@
             <img src="../assets/homeImage/informationWx.svg" class="information-wx-img" alt="">
           </div>
         </div>
-        <div class="information-right-box dis-f jus-bet">
+        <div class="information-right-box dis-f jus-bet"
-          <div class="dis-f jus-bet al-item">
+          v-if="indexData.data.operationNumber && indexData.data.operationNumber.length">
-            <div class="img-box pos-r">
+          <div class="dis-f jus-bet al-item" style="flex-wrap: wrap;">
-              <img src="../assets/homeImage/informationRightBoxFirst.svg" class="img-box" alt="">
+            <div class="img-box pos-r" v-for="(item, i) in indexData.data.operationNumber" :key="i"
+              :style="{ 'margin-top': i > 1 ? '19px' : 0 }">
+
+              <img :src="item.image" class="img-box" alt="">
               <div class="img-list">
-                <img src="../assets/homeImage/firstCode.png" class="img" alt="">
+                <img :src="item.qrcode" class="img" alt="">
                 <div>
-                  微信扫码关注
+                  {{ item.name }}
-                </div>
-              </div>
-            </div>
-            <div class="img-box pos-r">
-              <img src="../assets/homeImage/informationRightBoxSecond.svg" class="img-box" alt="">
-              <div class="img-list">
-                <img src="../assets/homeImage/secondCode.png" class="img" alt="">
-                <div>
-                  微信扫码关注
                 </div>
               </div>
             </div>
           </div>
-          <div class="dis-f jus-bet al-item">
+          <!-- <div class="dis-f jus-bet al-item">
             <div class="img-box pos-r">
               <img src="../assets/homeImage/informationRightBoxThird.svg" class="img-box" alt="">
               <div class="img-list">
@@ -91,15 +85,14 @@
                 </div>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
     <!-- 瀑布流 -->
     <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.data" :key="i" class="dis-f al-item"
+        <div v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item" @click="listDataTypeChange(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.name }}
@@ -149,23 +142,23 @@
                   </div>
                 </div>
               </div>
-              <indexWaterfallBox v-for="(item,i) in waterfallList['1']" :data="item"  :key="i"></indexWaterfallBox>
+              <indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
             <div ref="waterfall2">
-              <indexWaterfallBox v-for="(item,i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
+              <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>
             <div ref="waterfall3">
-              <indexWaterfallBox v-for="(item,i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
+              <indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
             <div ref="waterfall4">
-              <indexWaterfallBox v-for="(item,i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
+              <indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
         </div>
@@ -179,13 +172,14 @@
 </template>
 
 <script setup>
-import { reactive, ref, getCurrentInstance, onMounted, nextTick } from "vue";
+import { reactive, ref, getCurrentInstance, onMounted, nextTick, onBeforeUnmount, watchEffect } from "vue";
 import listItem from "../components/apartmentList/apartmentList.vue";
 import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import seachModule from "../components/seachModule/seachModule.vue";
 import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
 import headerNavigation from '../components/public/head.vue'
+import store from '../store/index';
 import api from "../utils/api";
 
 // 
@@ -197,12 +191,17 @@ let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })
 //首页数据
 let indexData = reactive({ data: {} })
 let seachTypeData = reactive({ data: [] })
-api.index().then(res => {
+// api.index().then(res => {
-  if (res.code === 200) {
+//   if (res.code === 200) {
-    seachTypeData.data = res.data.combination
+//     seachTypeData.data = res.data.combination
-    indexData.data = res.data
+//     indexData.data = res.data
-    ListSelectBtn.data = res.data.recommendedTab
+//     ListSelectBtn.data = res.data.recommendedTab
-  }
+//   }
+// })
+watchEffect(() => {
+  seachTypeData.data = store.state.seachTypeData
+  indexData.data = store.state.indexData
+  ListSelectBtn.data = store.state.recommendedTab
 })
 
 //公寓数据
@@ -213,18 +212,15 @@ api.getApartment().then(res => {
   }
 })
 
-
 //获取实例
 let currentInstance = null
-onMounted(() => {
-  currentInstance = getCurrentInstance()
-})
 //瀑布流数据
 let pages = ref(1)
 let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
 
 //判断最小值
 let getMinHeight = (data) => {
+  if (!currentInstance.ctx.$refs.waterfall1) return
   let waterfallAll = [
     currentInstance.ctx.$refs.waterfall1.offsetHeight,
     currentInstance.ctx.$refs.waterfall2.offsetHeight,
@@ -233,31 +229,80 @@ let getMinHeight = (data) => {
   ]
   let min = Math.min(waterfallAll[0], waterfallAll[1], waterfallAll[2], waterfallAll[3])
   let index = waterfallAll.indexOf(min)
-  waterfallList[index+1].push(data)
+  waterfallList[index + 1].push(data)
   // console.log(index,waterfallAll)
 }
 
 //瀑布流添加
 let addListData = (data) => {
   data.map((res) => {
-    setTimeout(()=>{
+    setTimeout(() => {
       getMinHeight(res)
-    })
+    }, 500)
+  })
+}
+//开关
+let loadMore = ref(true)
+//瀑布流数据
+let getRecommendList = () => {
+  api.recommendList({
+    page: pages,
+    limit: 30,
+    type: ListSelectBtn.selectType
+  }).then(res => {
+    console.log(res)
+    if (res.code === 200) {
+      if (res.data.pagevalue) addListData(res.data.data)
+      if (res.data.data.length >= 30) {
+        loadMore.value = true
+      } else {
+        loadMore.value = false
+      }
+    }
   })
-  console.log(waterfallList)
 }
 
-api.recommendList({
+//标签切换
-  page: pages,
+let listDataTypeChange = (item) => {
-  limit: 30,
+  ListSelectBtn.selectType = item.type
-  type: ListSelectBtn.selectType
+  waterfallList[1] = []
-}).then(res => {
+  waterfallList[2] = []
-  console.log(res)
+  waterfallList[3] = []
-  if (res.code === 200) {
+  waterfallList[4] = []
-    addListData(res.data.data)
+  getRecommendList()
+}
+
+
+//监听滚动条
+const onPageSrcoll = (e) => {
+  let body = document.documentElement ? document.documentElement : document.body ?
+    document.body :
+    document.querySelector('.element');
+  let scrollTop = body.scrollTop
+  let clientHeight = body.clientHeight
+  let offsetHeight = body.offsetHeight
+  if (scrollTop + clientHeight > offsetHeight - 500) {
+    if (loadMore.value) {
+      loadMore.value = false
+      pages.value += 1
+      getRecommendList()
+    }
   }
+}
+
+onMounted(() => {
+  currentInstance = getCurrentInstance()
+  setTimeout(() => {
+    getRecommendList()
+  }, 1000)
+  nextTick(() => {
+    window.addEventListener('scroll', onPageSrcoll, true);
+  })
 })
 
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onPageSrcoll);
+})
 
 
 </script>
@@ -364,6 +409,7 @@ img {
 
     .list-li {
       margin-top: 20px;
+      cursor: pointer;
     }
 
     .list-mark {