详情页房源详情内容换行

This commit is contained in:
2023-07-31 16:59:16 +08:00
parent de637cffbd
commit f76cb3ced0
4 changed files with 157 additions and 140 deletions

View File

@@ -4,86 +4,86 @@
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
<el-affix :offset="0" @change="changeTitleType" z-index="666">
<div class="top-bar-box dis-f jus-x" v-if="titleType">
<div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing"
v-if="pageType == 1 &&
housingInfo['data'] &&
housingInfo['data'].info.verified" alt="">
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
style="margin-right:10px;" v-if="pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1" alt="">
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
|| pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span>
<span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
housingInfo['data'].info.rent }}</span>
<span class="rent" v-if="pageType == 3">
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
}}~
{{
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
</span>
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type.substring(0, 1)]
}}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type]
}}
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item" @click="setOperation">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="tool-icon"
alt="">
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && housingInfo['data'].isfav" class="tool-icon"
alt="">
<span>
{{ housingInfo['data'] && housingInfo['data'].isfav ?
housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
</span>
</div>
<div class="line" style="margin:0 20px;"></div>
<div class="dis-f al-item" style="position: relative;">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
<span>
转发
</span>
<transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
:title="housingInfo.data.info['subject']"></transmit-btn>
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
@click="getConcatData">
联系方式
</div>
</div>
</div>
</div>
</div>
</el-affix>
<div class="dis-f jus-bet" style="margin-top: -15px;">
<div class="info-box">
<el-affix :offset="0" @change="changeTitleType" z-index="666">
<div class="top-bar-box dis-f jus-x" v-if="titleType">
<div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/authenticationHousing.png"
class="authentication-housing" v-if="pageType == 1 &&
housingInfo['data'] &&
housingInfo['data'].info.verified" alt="">
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
style="margin-right:10px;" v-if="pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1" alt="">
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
|| pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span>
<span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
housingInfo['data'].info.rent }}</span>
<span class="rent" v-if="pageType == 3">
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
}}~
{{
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
</span>
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type.substring(0, 1)]
}}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type]
}}
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item" @click="setOperation">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
class="tool-icon" alt="">
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && housingInfo['data'].isfav"
class="tool-icon" alt="">
<span>
{{ housingInfo['data'] && housingInfo['data'].isfav ?
housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
</span>
</div>
<div class="line" style="margin:0 20px;"></div>
<div class="dis-f al-item" style="position: relative;">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
<span>
转发
</span>
<transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
:title="housingInfo.data.info['subject']"></transmit-btn>
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
@click="getConcatData">
联系方式
</div>
</div>
</div>
</div>
</div>
</el-affix>
<div class="detail-price-box">
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit" :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span
@@ -205,7 +205,7 @@
<div class="title dis-f al-item">
<img src="../assets/img/detail/infoIcon.png" class="img" alt="">
<span>
{{pageType != 3?'基本信息':'基本要求'}}
{{ pageType != 3 ? '基本信息' : '基本要求' }}
</span>
</div>
<!-- -->
@@ -435,7 +435,7 @@
</div>
<span>
{{
location && location[item]
item.length == 1 ? '不限' : location && location[item]
}}
</span>
</div>
@@ -465,7 +465,8 @@
</div>
</div>
</div>
<div class="dis-f jus-x" v-if="distanceList[0] && distanceList[0].name && pageType != 3">
<div class="dis-f jus-x"
v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
<div class="distance-box dis-f jus-bet">
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
@@ -1348,7 +1349,7 @@ let pagevalue = ref(0)
let loadText = ref('下拉加载更多')
//获取瀑布流数据
let recommendList = () => {
loadText.value='加载中.....'
loadText.value = '加载中.....'
api.recommendList({
page: pages.value,
limit: 30,
@@ -1360,7 +1361,7 @@ let recommendList = () => {
if (res.code === 200) {
if (res.data.data && res.data.data.length >= 30) {
loadMore.value = true
loadText.value='下拉加载更多'
loadText.value = '下拉加载更多'
} else {
loadMore.value = false
loadText.value = '到底了'
@@ -1425,16 +1426,10 @@ watch(route, () => {
let { id } = router.currentRoute.value.query
uniqid.value = id
pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1 //1个人 2中介 3求房源
console.log('pageType',pageType.value)
console.log('pageType', pageType.value)
publisherList.value = []
recommendListData.value = []
getHousingInfo()
if (pageType.value != 3) {
setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true);
document.body.scrollTop = 0
}, 1000)
}
})
onMounted(() => {
@@ -1447,14 +1442,14 @@ onMounted(() => {
});
if (pageType.value != 3) {
setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true);
window.addEventListener('scroll', onPageSrcoll);
document.body.scrollTop = 0
}, 1000)
}
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', onPageSrcoll, true);
window.removeEventListener('scroll', onPageSrcoll);
})
</script>
@@ -2582,6 +2577,7 @@ img {
font-size: 16px;
color: #333;
margin-top: 20px;
word-wrap: break-word;
}
.title-box {