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

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;
@@ -317,8 +333,8 @@ let itemData = props.data
            font-size: 15px;
            color: #000000;
            width: 120px;
-            overflow: hidden; 
-            text-overflow: ellipsis; 
+            overflow: hidden;
+            text-overflow: ellipsis;
            white-space: nowrap;
        }

@@ -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 {