XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

详情页房源详情内容换行

Browse Source
This commit is contained in:
luJianJun
2023-07-31 16:59:16 +08:00
parent de637cffbd
commit f76cb3ced0
4 changed files with 157 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/biserialListItem/biserialListItem.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType==1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType==2" alt="">
<div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
alt="">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -19,7 +20,7 @@
</div>
<div class="tab-item mg-l-8"
v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div>
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
@@ -39,33 +40,42 @@
}}
</div>
</div>
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
<div class="address-text dis-f al-item"
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span v-if="!Array.isArray(data.data.location)">{{
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
${location &&
location.data[data && data.data && data.data.location]}` : ''
}}</span>
<span v-if="Array.isArray(data.data.location)">{{
location && location.data && location.data[data && data.data &&
data.data.location && data.data.location[0].substring(0, 1)]
}}>
<span v-for="(item, i) in data.data.location">
{{ location &&
location.data[item] }}
</span>
</span>
</div>
<div class="dis-f" style="flex-wrap: wrap;"
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
v-for="(item, i) in data.data.location" :key="i">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[item.substring(0,
1)]} >
${location &&
location.data[item]}` : ''
}}</span>
</div>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&& data.data.rent }}</span>
<span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
<span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&&
data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
<span>/{{data && data.data && data.data.rentalperiod}}</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ listData.data.rentalduration[data.data && data.data.rentalduration]
}}]</span>
<span>/{{ data && data.data && data.data.rentalperiod }}</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{
listData.data.rentalduration[data.data && data.data.rentalduration]
}}]</span>
</div>
</div>
<div class="img">
@@ -84,7 +94,7 @@
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
</div>
<div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
<div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
<div class="dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
@@ -97,7 +107,7 @@
data.data.intermediary_text
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div>
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
@@ -156,17 +166,17 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
//数据包
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config||{}
listData.data = store.state.indexData && store.state.indexData.config || {}
let pageType=ref('')
let pageType = ref('')
//跳转
let router = useRouter()
let watchInfo = () => {
let seachData=router.currentRoute.value.query
if(pageType.value===4){
for(let key in data){
store.state.seachSelect['seachPage'][key]=seachData[key]
let seachData = router.currentRoute.value.query
if (pageType.value === 4) {
for (let key in data) {
store.state.seachSelect['seachPage'][key] = seachData[key]
}
}
router.push({
@@ -179,7 +189,7 @@ let watchInfo = () => {
onMounted(() => {
imgRef = getCurrentInstance()
pageType.value=data.data.intermediary===1?2:data.data.intermediary===6?3:1
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
})
</script>
@@ -257,13 +267,13 @@ img {
margin-bottom: 20px;
cursor: pointer;
.detail-tab{
width:32px;
height:32px;
.detail-tab {
width: 32px;
height: 32px;
position: absolute;
top:0;
right:0;
z-index:66;
top: 0;
right: 0;
z-index: 66;
}
.mg-t-20 {
@@ -311,6 +321,7 @@ img {
font-size: 18px;
color: #000000;
text-align: left;
word-wrap: break-word;
}
.mg-l-8 {
@@ -318,7 +329,7 @@ img {
}
.tab-item {
padding:2px 5px;
padding: 2px 5px;
background: inherit;
background-color: rgba(242, 242, 242, 1);
border: none;
@@ -334,6 +345,10 @@ img {
text-align: center;
}
.mg-r-15 {
margin-right: 15px;
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
@@ -342,6 +357,7 @@ img {
color: #555555;
margin-top: 20px;
.img {
width: 18px;
height: 18px;

1
src/components/detail/breadcrumb.vue
View File

@@ -260,6 +260,7 @@ img {
color: #000000;
line-height: 35px;
width: 820px;
word-wrap:break-word;
}
.tool-btn-box {

30
src/views/HomeView.vue
View File

@@ -115,14 +115,14 @@
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
<div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
<div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x"
:class="[i==0?'first':i==1?'second':i==2?'third':'']"
style="flex-wrap: wrap;" @click="housingPage(item.path)">
:class="[i == 0 ? 'first' : i == 1 ? 'second' : i == 2 ? 'third' : '']" style="flex-wrap: wrap;"
@click="housingPage(item.path)">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" alt="" v-if="i==0" class="img">
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i==1" class="img">
<img src="../assets/homeImage/brand.png" alt="" v-if="i==2" class="img">
<img src="../assets/homeImage/seek.png" alt="" v-if="i==3" class="img">
<img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img">
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img">
<img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img">
<img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img">
</div>
<div class="text-center s-w-100">
{{ item.name }}
@@ -187,13 +187,13 @@ watchEffect(() => {
ListSelectBtn.data = store.state.ListSelectBtn
if (indexData.data.tabs.length) {
indexData.data.tabs.map(res => {
if (res.url==='/pages/personList/personList') {
if (res.url === '/pages/personList/personList') {
res.path = '/personHousing'
} else if (res.url==='/pages/personList/personList?intermediary=1') {
} else if (res.url === '/pages/personList/personList?intermediary=1') {
res.path = '/intermediaryHousing'
} else if (res.url==="/pages/restOfWorld/restOfWorld") {
} else if (res.url === "/pages/restOfWorld/restOfWorld") {
res.path = '/needHousing'
} else if (res.url==='/pages/irentList/irentList') {
} else if (res.url === '/pages/irentList/irentList') {
res.path = '/apartment'
}
})
@@ -247,6 +247,7 @@ let getRecommendList = () => {
waterfallList.value = waterfallList.value.concat(res.data.data)
pagevalue.value = res.data.pagevalue
}
console.log(waterfallList.value)
if (res.data.data.length >= 30) {
loadMore.value = true
loadText.value = '下拉加载更多'
@@ -255,8 +256,11 @@ let getRecommendList = () => {
loadText.value = '到底了'
}
nextTick(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
setTimeout(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
})
})
} else {
ElMessage({
@@ -321,7 +325,7 @@ let personHouseingInfo = (type, data, areaItem) => {
}
//跳转房源页
let housingPage=(path)=>{
let housingPage = (path) => {
router.push({
path: path,
})

180
src/views/detail.vue
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 {