个人/中介房源 求房源页面
This commit is contained in:
@@ -1,52 +1,60 @@
|
||||
<template>
|
||||
<div class="list-item" ref="list">
|
||||
<div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
|
||||
<div class="authentication-box dis-f al-item" v-if="data && data.data && 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.data && data.data.subject || '暂无标题' }}
|
||||
</div>
|
||||
<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.data && data.data.gptype || '' }}
|
||||
</div>
|
||||
<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 class="tab-item mg-l-8"
|
||||
v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
|
||||
{{ listData && listData.data && listData.data.type[data && data.data && 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.data && data.data.elevator !== -1">
|
||||
{{ listData && listData.data && listData.data.elevator[data && data.data && 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.data && data.data.sunshinearea !== -1">
|
||||
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
|
||||
data.data.sunshinearea] || '' }}
|
||||
</div>
|
||||
<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 class="tab-item mg-l-8"
|
||||
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]">
|
||||
{{ listData && listData.data && listData.data.gender[data && data.data && 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.data && data.data.location.substring(0, 1)]} > ${location &&
|
||||
location.data[data && data.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.data && 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.data && data.data.rentalduration != 0">[ 租期{{ data &&
|
||||
data.data && data.data.rentalduration }}{{
|
||||
data && data.data && data.data.rentalperiod }} ]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<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="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
|
||||
@load="loadFinish" @error="loadFinish" class="img " alt="">
|
||||
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
|
||||
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,22 +63,25 @@
|
||||
<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/needHousingCorner.svg" v-if="routePath === '/needHousing'"
|
||||
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
|
||||
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
|
||||
<span class="user-name">{{ data && data.data && data.data.author }}</span>
|
||||
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
|
||||
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}</div>
|
||||
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
|
||||
data.data.intermediary_text
|
||||
}}</div>
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.isintermediary == 1"
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1"
|
||||
class="intermediary-tab-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
|
||||
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import store from '../../store/index';
|
||||
let props = defineProps({
|
||||
@@ -80,18 +91,21 @@ let props = defineProps({
|
||||
imgLoad: {
|
||||
type: Function
|
||||
},
|
||||
listId:{
|
||||
type:[String,Number]
|
||||
listId: {
|
||||
type: [String, Number]
|
||||
}
|
||||
})
|
||||
let data = {}
|
||||
data = props.item
|
||||
let data = reactive({ data: {} })
|
||||
watchEffect(() => {
|
||||
data.data = props.item
|
||||
})
|
||||
|
||||
let listId=props.listId
|
||||
|
||||
let listId = props.listId
|
||||
let imgRef = null
|
||||
let loadFinish=()=>{
|
||||
let height=imgRef.ctx.$refs.list.offsetHeight
|
||||
props.imgLoad(data.id,listId,height)
|
||||
let loadFinish = () => {
|
||||
let height = imgRef.ctx.$refs.list.offsetHeight
|
||||
props.imgLoad(data.id, listId, height)
|
||||
}
|
||||
|
||||
//监听路由
|
||||
@@ -107,7 +121,7 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
|
||||
let listData = reactive({ data: {} })
|
||||
listData.data = store.state.indexData && store.state.indexData.config
|
||||
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
imgRef = getCurrentInstance()
|
||||
})
|
||||
|
||||
@@ -128,7 +142,8 @@ img {
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.al-item-start{
|
||||
|
||||
.al-item-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@@ -352,7 +367,8 @@ img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user