From 6fb705bde1df4462ff14a3b587b096545fef81d9 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Mon, 17 Jul 2023 15:00:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E6=88=BF=E6=BA=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biserialListItem/biserialListItem.vue     | 129 ++++++++++--------
 src/views/housingView/person.vue              |  49 ++++++-
 2 files changed, 117 insertions(+), 61 deletions(-)

diff --git a/src/components/biserialListItem/biserialListItem.vue b/src/components/biserialListItem/biserialListItem.vue
index af7d05e..0bcc6ba 100644
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -1,92 +1,115 @@
 <template>
-    <div class="list-item">
-        <div class="authentication-box dis-f al-item" v-if="data&&data.verified == 1">
+    <div class="list-item" ref="list">
+        <div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
             <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
             <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
             <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
         </div>
         <div class="top-box">
             <div class="title-text">
-                {{ data&&data.subject||'暂无标题' }}
+                {{ data && data.subject || '暂无标题' }}
             </div>
-            <div class="mg-t-10 dis-f al-item jus-bet s-w-100">
+            <div class="mg-t-10 dis-f al-item-start jus-bet s-w-100">
                 <div>
                     <div class="dis-f al-item">
                         <div class="tab-item first-tab">
-                            {{ data&&data.gptype||'' }}
+                            {{ data && data.gptype || '' }}
                         </div>
-                        <div class="tab-item mg-l-8">
-                            {{ listData&&listData.data&&listData.data.type[data&&data.type]||'' }}
+                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.type[data && data.type]">
+                            {{ listData && listData.data && listData.data.type[data && data.type] || '' }}
                         </div>
-                        <div class="tab-item mg-l-8" v-if="data&&data.elevator!==-1">
-                            {{ listData&&listData.data&&listData.data.elevator[data&&data.elevator]||'' }}
+                        <div class="tab-item mg-l-8" v-if="data && data.elevator !== -1">
+                            {{ listData && listData.data && listData.data.elevator[data && data.elevator] || '' }}
                         </div>
-                        <div class="tab-item mg-l-8" v-if="data&&data.sunshinearea!==-1">
-                            {{ listData&&listData.data&&listData.data.sunshinearea[data&&data.sunshinearea]||'' }}
+                        <div class="tab-item mg-l-8" v-if="data && data.sunshinearea !== -1">
+                            {{ listData && listData.data && listData.data.sunshinearea[data && data.sunshinearea] || '' }}
                         </div>
-                        <div class="tab-item mg-l-8">
-                            {{ listData&&listData.data&&listData.data.gender[data&&data.gender]||'' }}
+                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.gender]">
+                            {{ listData && listData.data && listData.data.gender[data && data.gender] || '' }}
                         </div>
                     </div>
                     <div class="address-text dis-f al-item">
                         <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                         <span>{{
-                        location&&location.data&&location.data[1]?`${ location&&location.data&&location.data[data&&data.location&&data.location.substring(0,1)] } > ${ location&&location.data[data&&data.location] }`:'' 
+                            location && location.data && location.data[1] ? `${location && location.data && location.data[data && data.location && data.location.substring(0, 1)]} > ${location && location.data[data && data.location]}` : ''
                         }}</span>
                     </div>
                     <div class="price-text dis-f" style="align-items: end;">
                         <span class="unit">HK$</span>
-                        <span class="price">{{ data&&data.rent }}</span>
+                        <span class="price">{{ data && data.rent }}</span>
                         <span>/月</span>
-                        <span class="time" v-show="data&&data.rentalduration!=0">[ 租期{{ data&&data.rentalduration }}{{ data&&data.rentalperiod }} ]</span>
+                        <span class="time" v-show="data && data.rentalduration != 0">[ 租期{{ data && data.rentalduration }}{{
+                            data && data.rentalperiod }} ]</span>
                     </div>
                 </div>
                 <div class="img">
-                    <img :src="data&&data.ispic?data&&data.imageurl:data&&data.isvideo?data&&data.imageurl:''" class="img " alt="">
-                    <div class="s-img dis-f jus-x al-item" v-if="data&&data.isvideo">
-                        <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
+                    <div>
+                        <img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
+                            @load="loadFinish" class="img " alt="">
+                        <div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
+                            <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
+                        </div>
                     </div>
-                    
                 </div>
             </div>
-            <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath==='/personHousing'" alt="">
-            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath==='/intermediaryHousing'" class="tab-img" alt="">
+            <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
+            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
+                class="tab-img" alt="">
         </div>
         <div class="btm-box dis-f al-item">
-            <img :src="data&&data.avatar" class="user-img" alt="">
-            <span class="user-name">{{ data&&data.author }}</span>
-            <div class="btn" v-if="data&&data.isintermediary !== 1&&!data.intermediary_text">{{ listData&&listData.data&&listData.data.intermediary[data&&data.intermediary] }}</div>
-            <div class="btn" v-if="data&&data.isintermediary !== 1&&data.intermediary_text">{{ data&&data.intermediary_text }}</div>
-            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data&&data.isintermediary == 1" class="intermediary-tab-img" alt="">
+            <img :src="data && data.avatar" class="user-img" alt="">
+            <span class="user-name">{{ data && data.author }}</span>
+            <div class="btn" v-if="data && data.isintermediary !== 1 && !data.intermediary_text">{{
+                listData && listData.data && listData.data.intermediary[data && data.intermediary] }}</div>
+            <div class="btn" v-if="data && data.isintermediary !== 1 && data.intermediary_text">{{ data && data.intermediary_text
+            }}</div>
+            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.isintermediary == 1"
+                class="intermediary-tab-img" alt="">
         </div>
     </div>
 </template>
   
 <script setup>
-import { ref ,defineProps,reactive} from "vue";
+import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import store from '../../store/index';
 let props = defineProps({
-    item:{
-        type:Object
+    item: {
+        type: Object
+    },
+    imgLoad: {
+        type: Function
+    },
+    listId:{
+        type:[String,Number]
     }
 })
-let data={}
-data= props.item
+let data = {}
+data = props.item
+
+let listId=props.listId
+let imgRef = null
+let loadFinish=()=>{
+    let height=imgRef.ctx.$refs.list.offsetHeight
+    props.imgLoad(data.id,listId,height)
+}
 
 //监听路由
 const route = useRoute()
 let routePath = ref('')
 routePath.value = route.path
 //地区数据
-let location=reactive({data:{}})
-location.data=store.state.indexData&&store.state.indexData.config&&store.state.indexData.config.location
+let location = reactive({ data: {} })
+location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
 
 
 //数据包
-let listData=reactive({data:{}})
-listData.data=store.state.indexData&&store.state.indexData.config
-console.log(listData.data)
+let listData = reactive({ data: {} })
+listData.data = store.state.indexData && store.state.indexData.config
+
+onMounted(()=>{
+    imgRef = getCurrentInstance()
+})
 
 </script>
 <style scoped>
@@ -105,6 +128,9 @@ img {
 .jus-bet {
     justify-content: space-between;
 }
+.al-item-start{
+    align-items: flex-start;
+}
 
 .al-item {
     align-items: center;
@@ -156,7 +182,7 @@ img {
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     position: relative;
-    margin-bottom:20px;
+    margin-bottom: 20px;
 
     .mg-t-10 {
         margin-top: 10px;
@@ -164,7 +190,6 @@ img {
 
     .img {
         width: 100px;
-        /* height: 100px; */
         object-fit: cover;
         border-radius: 10px;
         position: relative;
@@ -172,15 +197,16 @@ img {
 
     .s-img {
         width: 100px;
-        height:100%;
+        height: 100%;
         border-radius: 10px;
         position: absolute;
-        top:0;
-        left:0;
+        top: 0;
+        left: 0;
         background: rgba(51, 51, 51, 0.733333333333333);
-        .img{
-            width:30px;
-            height:30px;
+
+        .img {
+            width: 30px;
+            height: 30px;
         }
     }
 
@@ -203,10 +229,6 @@ img {
             font-size: 18px;
             color: #000000;
             text-align: left;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
         }
 
         .mg-l-8 {
@@ -259,7 +281,7 @@ img {
                 font-style: normal;
                 font-size: 14px;
                 color: #7F7F7F;
-                margin-left:15px;
+                margin-left: 15px;
             }
 
             .price {
@@ -288,8 +310,8 @@ img {
         padding: 20px;
         border-top: 1px dashed #d7d7d7;
 
-        .intermediary-tab-img{
-            width:85px;
+        .intermediary-tab-img {
+            width: 85px;
             height: 20px;
             margin-left: 15px;
         }
@@ -330,8 +352,7 @@ img {
             text-align: center;
         }
     }
-}
-</style>
+}</style>
 
 
   
\ No newline at end of file
diff --git a/src/views/housingView/person.vue b/src/views/housingView/person.vue
index 036bad5..c46cb7c 100644
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -5,11 +5,11 @@
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <div class="dis-f jus-bet">
-                    <div>
-                        <biserialItem v-for="(item,i) in dataList.data.data" :key="i" :item="item"></biserialItem>
+                    <div ref="list">
+                        <biserialItem v-for="(item,i) in pageList[1]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="1"></biserialItem>
                     </div>
                     <div>
-                        <biserialItem></biserialItem>
+                        <biserialItem v-for="(item,i) in pageList[2]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="2"></biserialItem>
                     </div>
                 </div>
             </div>
@@ -19,26 +19,61 @@
 </template>
   
 <script setup>
-import {reactive} from 'vue'
+import {reactive,onMounted,ref} from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import listBtmPrompt from "../../components/public/have-questions.vue";
 import api from "../../utils/api";
-
 //获取数据
+let pages=ref(1)
 let dataList= reactive({data:[],count:0})
+let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
 let getDataList=()=>{
-    let postData={}
+    let postData={
+        page:pages.value
+    }
     api.getLists(postData).then(res=>{
         console.log(res.data)
         if(res.code===200){
             dataList.count=res.data.count
             dataList.data=res.data
+            console.log(dataList.data)
+            pageList[1].push(dataList.data.data[0])
+            pageList[2].push(dataList.data.data[1])
         }
     })
 }
-getDataList()
+
+//添加数据
+let addListData=()=>{
+    let num=null
+    if(pageList.tab>=19)return
+    ++pageList.tab
+    console.log(pageList.height1,pageList.height2)
+   if(pageList.height1>pageList.height2){
+        num=2
+    }else{
+        num=1
+    }
+    pageList[num].push(dataList.data.data[pageList.tab])
+}
+
+//监听图片加载
+let watchImgLoad=(id,listId,height)=>{ 
+    console.log(listId,height)
+    pageList[`height${listId}`]+=height
+    // console.log(pageList)
+    addListData()
+}
+
+
+
+//listImg
+onMounted(()=>{
+    getDataList()
+})
+
 </script>
 <style scoped>
 img {