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

2023-07-13 15:07:31 +08:00
parent c8f24835d3
commit f5e9e2ec62
7 changed files with 189 additions and 92 deletions
--- a/src/components/apartmentList/apartmentList.vue
+++ b/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 {
--- a/src/components/indexWaterfallBox/indexWaterfallBox.vue
+++ b/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" />
-                <div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
+                <img class="apartment-img" :src="itemData.imageLocal || itemData.image"
+                    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">
-                <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;"  v-if="itemData.type === 'housing'">
+            <!-- <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="">
+                <span class="address-text">九龙 > 尖沙咀/佐敦</span>
+            </div> -->
+            <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{
-    padding-bottom:10px;
+.pd-b-10 {
+    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;
-    height: 349px;
+    width: 285px;
+    /* 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>
  
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/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 {
--- a/src/components/seachModule/seachModule.vue
+++ b/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">
-                                                {{ item.title }}
+                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn">
+                                                {{ item }}
                                            </div>
                                        </div>
                                    </div>
@@ -35,8 +35,8 @@
                                            热门推荐
                                        </div>
                                        <div class="info-box">
-                                            <div v-for="(item, i) in historyArr" :key="i" class="btn">
-                                                {{ item.title }}
+                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn">
+                                                {{ 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="合租" 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>
+                        <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="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" 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: '有阳台' },
-    { title: '有洗衣机' },
-    { title: '城大' },
-    { title: '城大' },
-    { title: '城大' },
-    { title: '城大' },
-    { title: '城大' },
-    { title: '城大' },
-]
+//获取历史搜索记录
+historyArr.data=JSON.parse(localStorage.getItem('historyArr'))||[]
+
+//搜索数据
+let seachList=()=>{
+
+    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
+}
+
+
+
 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 {
--- a/src/main.js
+++ b/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')
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,8 +2,12 @@ import { createStore } from 'vuex'

 export default createStore({
  state: {
+    seachTypeData:[],
+    indexData:[],
+    ListSelectBtn:[],
  },
  getters: {
+    
  },
  mutations: {
  },
--- a/src/views/HomeView.vue
+++ b/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="dis-f jus-bet al-item">
-            <div class="img-box pos-r">
-              <img src="../assets/homeImage/informationRightBoxFirst.svg" class="img-box" alt="">
+        <div class="information-right-box dis-f jus-bet"
+          v-if="indexData.data.operationNumber && indexData.data.operationNumber.length">
+          <div class="dis-f jus-bet al-item" style="flex-wrap: wrap;">
+            <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>
-                  微信扫码关注
-                </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>
-                  微信扫码关注
+                  {{ item.name }}
                </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"
-          @click="ListSelectBtn.selectType = item.recommend">
+        <div v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item" @click="listDataTypeChange(item)">
          <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 => {
-  if (res.code === 200) {
-    seachTypeData.data = res.data.combination
-    indexData.data = res.data
-    ListSelectBtn.data = res.data.recommendedTab
-  }
+// api.index().then(res => {
+//   if (res.code === 200) {
+//     seachTypeData.data = res.data.combination
+//     indexData.data = res.data
+//     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,
-  limit: 30,
-  type: ListSelectBtn.selectType
-}).then(res => {
-  console.log(res)
-  if (res.code === 200) {
-    addListData(res.data.data)
+//标签切换
+let listDataTypeChange = (item) => {
+  ListSelectBtn.selectType = item.type
+  waterfallList[1] = []
+  waterfallList[2] = []
+  waterfallList[3] = []
+  waterfallList[4] = []
+  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 {