个人房源列表
This commit is contained in:
parent
e7909dd4a9
commit
6fb705bde1
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user