个人房源列表
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="list-item">
|
||||
<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="">
|
||||
@@ -9,13 +9,13 @@
|
||||
<div class="title-text">
|
||||
{{ 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 || '' }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8">
|
||||
<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">
|
||||
@@ -24,7 +24,7 @@
|
||||
<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">
|
||||
<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>
|
||||
@@ -38,42 +38,62 @@
|
||||
<span class="unit">HK$</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>
|
||||
<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/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="">
|
||||
<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
|
||||
},
|
||||
imgLoad: {
|
||||
type: Function
|
||||
},
|
||||
listId:{
|
||||
type:[String,Number]
|
||||
}
|
||||
})
|
||||
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('')
|
||||
@@ -86,7 +106,10 @@ location.data=store.state.indexData&&store.state.indexData.config&&store.state.i
|
||||
//数据包
|
||||
let listData = reactive({ data: {} })
|
||||
listData.data = store.state.indexData && store.state.indexData.config
|
||||
console.log(listData.data)
|
||||
|
||||
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;
|
||||
@@ -164,7 +190,6 @@ img {
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
/* height: 100px; */
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
@@ -178,6 +203,7 @@ img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(51, 51, 51, 0.733333333333333);
|
||||
|
||||
.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 {
|
||||
@@ -330,8 +352,7 @@ img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
@@ -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])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//添加数据
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user