图片查看

This commit is contained in:
2023-07-25 18:17:45 +08:00
parent b39a23dc70
commit f94ef15476
6 changed files with 226 additions and 121 deletions

View File

@@ -8,6 +8,9 @@
<div class="top-bar-box dis-f jus-x" v-show="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="housingInfo['data']&&housingInfo['data'].isintermediary" alt="">
<div class="line" v-if="housingInfo['data']&&housingInfo['data'].isintermediary"></div>
<span class="unit">HK$</span>
<span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span>/</span>
@@ -221,7 +224,7 @@
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender]
housingInfo['data'].info.gender]
}}
</span>
</div>
@@ -230,31 +233,21 @@
<div class="map-box">
<div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">{{
location&&location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
<span class="title">{{
location && location[housingInfo['data'] &&
housingInfo['data']['info'].location.substring(0,
1)]
}} > {{
location&&location[housingInfo['data']&&housingInfo['data']['info'].location]
}}</span>
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
}}</span>
</div>
<div class="dis-f jus-x" style="margin-top:15px;">
<div class="map-s">
<div class="pop-box">
<div class="address-box dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/mapMarkIcon.png" class="img" alt="">
<span>{{ housingInfo['data'] &&
housingInfo['data'].info.address }}</span>
</div>
<img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
</div>
</div>
<div v-if="housingInfo['data']">
<mapInfo :latlng="{
latitude: housingInfo['data'].info.longitude * 1,
longitude: housingInfo['data'].info.latitude * 1
}" :name="housingInfo['data'].info.address"></mapInfo>
</div>
{{ housingInfo['data']&&housingInfo['data'].info.longitude }}
{{ housingInfo['data']&&housingInfo['data'].info.latitude }}
<mapInfo :latlng="{
longitude:housingInfo['data']&&housingInfo['data'].info.longitude,
latitude:housingInfo['data']&&housingInfo['data'].info.latitude
}" :name="housingInfo['data']&&housingInfo['data'].info.address"></mapInfo>
</div>
</div>
<div class="dis-f jus-x" v-if="distanceList.length">
@@ -270,15 +263,15 @@
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
:key="index" :class="{ 'mg-t-50': index > 0 }">
<div class="icon-box dis-f al-item jus-x"
:class="{ 'home-icon':item&&item.address }">
:class="{ 'home-icon': item && item.address }">
<div class="line" v-show="index > 0"></div>
<img src="../assets/img/detail/school.png" class="icon"
v-show="item&&item.address" alt="">
<img src="../assets/img/detail/home.png" class="icon" v-show="item&&!item.address"
alt="">
v-show="item && item.address" alt="">
<img src="../assets/img/detail/home.png" class="icon"
v-show="item && !item.address" alt="">
</div>
{{ item && item.name }}
<div v-for="(items, i) in item&&item.point" :key="i">
<div v-for="(items, i) in item && item.point" :key="i">
<span class="address-info">
{{ items.title }}
</span>
@@ -298,10 +291,10 @@
<div class="line-school-box dis-f al-item" style="justify-content:space-around;">
<div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id">
<div :class="{ 'far-s': item && item.recently_distance > 4 }"
v-if="item&&!item.address" class="text-c">
v-if="item && !item.address" class="text-c">
{{ item && item.recently_distance }}km
</div>
<div class="dis-f jus-x" v-if="item&&!item.address">
<div class="dis-f jus-x" v-if="item && !item.address">
<img src="../assets/img/detail/markIcon.svg"
v-if="item && item.recently_distance <= 4" class="marker-icon"
alt="">
@@ -310,7 +303,7 @@
alt="">
</div>
<div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
v-if="item&&!item.address">{{
v-if="item && !item.address">{{
item && item.alias }}</div>
</div>
</div>
@@ -488,65 +481,72 @@
<!-- 两种信息 -->
<!-- third-concat -->
<div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1"
:class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
<div class="pop-info-box dis-f jus-x al-item"
:class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
<div class="pop-info-box dis-f jus-x al-item"
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
<div class="pop-big-bg dis-f jus-x al-item"
:class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
<div class="user-liner-box dis-f al-item" :class="{'jus-bet':concatData.data&&concatData.data.count>2}" >
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
<div class="user-liner-box dis-f al-item"
:class="{ 'jus-bet': concatData.data && concatData.data.count > 2 }">
<!-- class='s-w-100' -->
<div style="padding:0 0 30px 0;" :class="[{'s-w-100':concatData.data && concatData.data.count === 2}]">
<div style="padding:0 0 30px 0;"
:class="[{ 's-w-100': concatData.data && concatData.data.count === 2 }]">
<div class="liner-title">
联系方式
</div>
<div class="whatsapp-box" v-if="concatData.data && concatData.data.wechat&&concatData.data.count > 2">
<div class="whatsapp-box"
v-if="concatData.data && concatData.data.wechat && concatData.data.count > 2">
<div class="dis-f al-item">
<img src="../assets/img/detail/wxIcon.png" class="whatsapp-icon" alt="">
微信
</div>
<div class="dis-f al-item box-text mg-l-35">
<div style="width:120px;">
{{ concatData.data && concatData.data.wechat }}
{{ concatData.data && concatData.data.wechat }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50" @click.stop="clone(concatData.data.wechat)">
<div class="clone-btn dis-f al-item jus-x mg-l-50"
@click.stop="clone(concatData.data.wechat)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制
</div>
</div>
</div>
<div class="whatsapp-box" v-if="concatData.data && concatData.data.whatsapp&&concatData.data.count > 2">
<div class="whatsapp-box"
v-if="concatData.data && concatData.data.whatsapp && concatData.data.count > 2">
<div class="dis-f al-item">
<img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon" alt="">
WhatsApp
</div>
<div class="dis-f al-item box-text mg-l-35">
<div style="width:120px;">
<div style="width:120px;">
{{ concatData.data && concatData.data.whatsapp }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50" @click.stop="clone(concatData.data.whatsapp)">
<div class="clone-btn dis-f al-item jus-x mg-l-50"
@click.stop="clone(concatData.data.whatsapp)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制
</div>
</div>
</div>
<div class="whatsapp-box" v-if="concatData.data && concatData.data.tel&&concatData.data.count > 2">
<div class="whatsapp-box"
v-if="concatData.data && concatData.data.tel && concatData.data.count > 2">
<div class="dis-f al-item">
<img src="../assets/img/detail/phoneIcon.png" class="whatsapp-icon" alt="">
电话号码
</div>
<div class="dis-f al-item box-text mg-l-35">
<div style="width:120px;">
<div style="width:120px;">
{{ concatData.data && concatData.data.tel }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50"
@click.stop="clone(concatData.data.tel)">
<div class="clone-btn dis-f al-item jus-x mg-l-50"
@click.stop="clone(concatData.data.tel)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制
</div>
</div>
</div>
<div class="dis-f jus-x al-item whatsapp-wx-box s-w-100"
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid!==0">
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0">
<div>
<div>
<div v-if="concatData.data.whatsapp">
@@ -560,10 +560,12 @@
</div>
</div>
<div class="text-s">
{{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '' }}
{{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat ||
'' }}
</div>
<div class="dis-f jus-x al-item mg-t-60">
<div class="clone-btn dis-f al-item jus-x" @click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '')">
<div class="clone-btn dis-f al-item jus-x"
@click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '')">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制
</div>
@@ -586,7 +588,7 @@
</div>
</div>
</div>
<div v-if="concatData.data && concatData.data.count > 2&&concatData.data.wechatdata.url">
<div v-if="concatData.data && concatData.data.count > 2 && concatData.data.wechatdata.url">
<div class="wx-qrcode-s">
<img :src="concatData.data && concatData.data.wechatdata.url" class="user-img" alt="">
</div>
@@ -612,26 +614,27 @@
</div>
</div>
</div>
<img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" style="width:700px;" alt=""
v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3">
<img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;"
v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3"
class="map third-bg" alt="">
<img src="../assets/img/detail/popBigBg.svg"
v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
class="pop-bg third-bg" alt="">
<img src="../assets/img/detail/popBigBgMap.svg"
v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
class="map third-bg" alt="">
<img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" style="width:700px;"
alt=""
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3">
<img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;"
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
class="map third-bg" alt="">
<img src="../assets/img/detail/popBigBg.svg"
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
class="pop-bg third-bg" alt="">
<img src="../assets/img/detail/popBigBgMap.svg"
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
class="map third-bg" alt="">
</div>
</div>
<img src="../assets/img/detail/bigPopBg.svg"
v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
class="pop-big-bg" alt="">
<img src="../assets/img/detail/threeConcatbgImg.svg"
v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3"
class="third-concat" alt="">
<img src="../assets/img/detail/close.png" class="close-img" @click="showConcat=false" alt="">
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
class="pop-big-bg" alt="">
<img src="../assets/img/detail/threeConcatbgImg.svg"
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
class="third-concat" alt="">
<img src="../assets/img/detail/close.png" class="close-img" @click="showConcat = false" alt="">
</div>
<!-- 一种信息 -->
<div class="pop" v-show="concatData.data && concatData.data.count === 1">
@@ -682,7 +685,7 @@
<img src="../assets/img/detail/popSbgMap.svg" class="pop-bg-s" alt="">
</div>
</div>
<img src="../assets/img/detail/close.png" @click="showConcat=false" class="close-img" alt="">
<img src="../assets/img/detail/close.png" @click="showConcat = false" class="close-img" alt="">
<img src="../assets/img/detail/popBg.svg" class="img" alt="">
</div>
</div>
@@ -828,7 +831,7 @@ let setHousingArr = () => {
arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
imgList.value = imgList.value.concat(arr)
imgList.value = imgList.value.concat(arr)
console.log(imgList.value)
}
let location = store.state.indexData.config && store.state.indexData.config.location
@@ -965,7 +968,7 @@ let recommendList = () => {
}).then(res => {
console.log(res)
if (res.code === 200) {
if(res.data.length===0)return
if (res.data.length === 0) return
if (res.data.pagevalue) {
recommendListData.value = recommendListData.value.concat(res.data.data)
pagevalue.value = res.data.pagevalue
@@ -1442,6 +1445,11 @@ img {
background: #ebebeb;
}
.authentication-housing{
width:88px;
height:16px;
}
.top-bar {
width: 1200px;
@@ -2264,5 +2272,6 @@ img {
}
}
}
}</style>
}
</style>