求房源
This commit is contained in:
parent
6efebca2cf
commit
3fcc93e4cd
BIN
src/assets/img/detail/businessCard.png
Normal file
BIN
src/assets/img/detail/businessCard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/img/detail/intermediaryDetailLogo.png
Normal file
BIN
src/assets/img/detail/intermediaryDetailLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/img/detail/intermediaryDetailTItle.png
Normal file
BIN
src/assets/img/detail/intermediaryDetailTItle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="list-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="">
|
||||
<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="">
|
||||
@ -97,11 +97,11 @@
|
||||
data &&
|
||||
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="">
|
||||
</div>
|
||||
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
|
||||
v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png"
|
||||
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<div class="pos-r">
|
||||
<div class="authentication-top" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
|
||||
<div class="authentication-top"
|
||||
:class="[pageType==2?'intermediary-top':'']"
|
||||
v-if="data['data'] && data['data'].info && data['data'].info.verified === 1">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div>
|
||||
<div v-if="pageType==1">
|
||||
<img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
|
||||
<img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
|
||||
</div>
|
||||
<div v-if="pageType==2" class="dis-f al-item">
|
||||
<img src="../../assets/img/detail/intermediaryDetailLogo.png" class="logo" alt="">
|
||||
<img src="../../assets/img/detail/intermediaryDetailTItle.png" style="margin-left:-7px;" class="title" alt="">
|
||||
</div>
|
||||
<div class="dis-f al-item">
|
||||
<div class="dis-f al-item">
|
||||
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
|
||||
<span>
|
||||
{{data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房产证明':'真实牌照'}}
|
||||
</span>
|
||||
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
|
||||
<span>
|
||||
{{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房产证明' : '真实牌照' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-f al-item" style="margin-left:20px;">
|
||||
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
|
||||
<span>
|
||||
{{ data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房东身份证':'身份证明' }}
|
||||
{{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-top-box pos-r" style="z-index:666;">
|
||||
<div class="top-round" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
|
||||
<div class="top-round-s"></div>
|
||||
<div class="top-round" v-if="data['data'] && data['data'].info && data['data'].info.verified === 1">
|
||||
<div class="top-round-s" :class="[pageType==2?'intermediary-bg':'']"></div>
|
||||
</div>
|
||||
<div class="breadcrumb-box">
|
||||
<el-breadcrumb :separator-icon="ArrowRight">
|
||||
@ -69,6 +75,7 @@ import { ArrowRight } from '@element-plus/icons-vue'
|
||||
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
|
||||
import store from '@/store'
|
||||
import transmitBtn from '@/components/public/transmitBtn.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@ -85,6 +92,12 @@ let data = reactive({})
|
||||
|
||||
let operation = props.operation
|
||||
|
||||
//获取路由参数
|
||||
let router = useRouter()
|
||||
//页面类型
|
||||
let pageType=ref('')
|
||||
let {type}=router.currentRoute.value.query
|
||||
pageType.value=type
|
||||
//导航数据
|
||||
let storeData = store.state.routeList
|
||||
console.log('storeData', storeData)
|
||||
@ -129,6 +142,19 @@ img {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.intermediary-top {
|
||||
background: -webkit-linear-gradient(165.253098840457deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
||||
background: -moz-linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
||||
background: linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.authentication-top {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -163,10 +189,10 @@ img {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.type-icon{
|
||||
.type-icon {
|
||||
width: 18px;
|
||||
height:18px;
|
||||
margin-right:8px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,21 +211,26 @@ img {
|
||||
font-size: 14px;
|
||||
transform: translateY(-38px);
|
||||
position: relative;
|
||||
.top-round{
|
||||
width:22px ;
|
||||
height:22px;
|
||||
|
||||
.top-round {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top:-8px;
|
||||
right:-1px;
|
||||
.top-round-s{
|
||||
top: -8px;
|
||||
right: -1px;
|
||||
|
||||
.top-round-s {
|
||||
position: absolute;
|
||||
top:-13px;
|
||||
left:-1px;
|
||||
border-radius:0 0 16px 0;
|
||||
background:rgba(174, 159, 251, 1);
|
||||
width:23px;
|
||||
height:20px;
|
||||
top: -13px;
|
||||
left: -1px;
|
||||
border-radius: 0 0 16px 0;
|
||||
background: rgba(174, 159, 251, 1);
|
||||
width: 23px;
|
||||
height: 20px;
|
||||
}
|
||||
.intermediary-bg{
|
||||
background: rgba(173,214,247,1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
|
||||
<img :src="item&&item.url" class="img" alt="">
|
||||
</div>
|
||||
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
|
||||
<source :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
|
||||
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail&&item.url">
|
||||
<source :controls="true" :autoplay="false" :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
@ -29,7 +29,7 @@
|
||||
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
|
||||
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i },{'voide':!item.thumbnail}]">
|
||||
<img :src="item.thumbnail||item.image" alt="" class="img-s">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,9 +9,14 @@
|
||||
<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'] &&
|
||||
v-if="pageType == 1 &&
|
||||
housingInfo['data'] &&
|
||||
housingInfo['data'].info.verified" alt="">
|
||||
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" v-if="pageType == 2 &&
|
||||
housingInfo['data'] &&
|
||||
housingInfo['data'].isintermediary == 1" alt="">
|
||||
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified"></div>
|
||||
<span class="need-houing-type" v-if="pageType == 3">预算</span>
|
||||
<span class="unit">HK$</span>
|
||||
<span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span>
|
||||
<span>/月</span>
|
||||
@ -59,9 +64,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-affix>
|
||||
<div class="dis-f jus-bet" style="transform: translateY(-15px);">
|
||||
<div class="dis-f jus-bet" style="margin-top: -15px;">
|
||||
<div class="info-box">
|
||||
<div class="detail-price-box">
|
||||
<span class="need-houing-type" v-if="pageType == 3">预算</span>
|
||||
<span class="unit">HK$</span><span class="rent">{{
|
||||
housingInfo['data'] && housingInfo['data'].info.rent }}</span>
|
||||
<span>/月</span>
|
||||
@ -101,7 +107,7 @@
|
||||
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="condition condition-border">
|
||||
<div class="condition">
|
||||
<div class="dis-f al-item">
|
||||
<div class="icon">
|
||||
|
||||
@ -123,7 +129,8 @@
|
||||
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
|
||||
|| 0 }}</div>
|
||||
</div>
|
||||
<div class="img-list-box dis-f jus-x al-item" @click="imageShow = true">
|
||||
<div class="img-list-box dis-f jus-x al-item" @click="imageShow = true"
|
||||
v-show="imgList.length > 0">
|
||||
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
||||
@click.stop="moveImageList('left')" v-show="imgListTab === 0">
|
||||
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
|
||||
@ -158,7 +165,123 @@
|
||||
基本信息
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-box-s">
|
||||
<!-- -->
|
||||
<div class="need-housing-info" v-if="pageType == 3">
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
房屋类型
|
||||
</div>
|
||||
<div class="text mg-l-30">
|
||||
<span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.property"
|
||||
:key="i">
|
||||
<span v-show="i != 0">/</span>
|
||||
{{
|
||||
item == 0 ? '不限' :
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['property'][item]
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
所在楼层
|
||||
</div>
|
||||
<div class="text"
|
||||
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor" :key="i"
|
||||
:class="{ 'mg-l-30': i === 0 }">
|
||||
{{
|
||||
item == 0 ? '不限' :
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['floor'][item]
|
||||
}}
|
||||
<!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
电梯
|
||||
</div>
|
||||
<div class="text mg-l-30">
|
||||
{{
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['elevator'][housingInfo['data'] &&
|
||||
housingInfo['data'].info.elevator]
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
晾晒区
|
||||
</div>
|
||||
<div class="text"
|
||||
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
|
||||
:key="i" :class="{ 'mg-l-30': i === 0 }">
|
||||
{{
|
||||
item == 0 ? '不限' :
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
|
||||
housingInfo['data'].info.sunshinearea]
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
面积
|
||||
</div>
|
||||
<div class="text mg-l-30">
|
||||
<span>
|
||||
{{
|
||||
housingInfo['data'] && housingInfo['data'].info.acreage[0] ? housingInfo['data']
|
||||
&&
|
||||
housingInfo['data'].info.acreage[0] : 0
|
||||
}}
|
||||
</span>~
|
||||
<span>
|
||||
{{
|
||||
housingInfo['data'] && housingInfo['data'].info.acreage[1] ? housingInfo['data']
|
||||
&&
|
||||
housingInfo['data'].info.acreage[1] : 0
|
||||
}}
|
||||
</span>
|
||||
平方呎
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
同住人性别要求
|
||||
</div>
|
||||
<div class="text mg-l-30">
|
||||
{{
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||||
housingInfo['data'].info.publishergender]
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
发布者性别
|
||||
</div>
|
||||
<div class="text mg-l-30">
|
||||
{{
|
||||
housingInfo['data'] && housingInfo['data'].info.gender ?
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||||
housingInfo['data'].info.gender] :
|
||||
'不限'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="info-box-s" v-if="pageType == 1 || pageType == 2">
|
||||
<div class="info dis-f al-item">
|
||||
<div class="title-box">
|
||||
房屋类型
|
||||
@ -225,22 +348,51 @@
|
||||
indexData['data'] &&
|
||||
indexData['data']['config'] &&
|
||||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||||
housingInfo['data'].info.gender]
|
||||
housingInfo['data'].info.gender]
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-box">
|
||||
<!-- 求房源-目标区域 -->
|
||||
<div class="housing-info">
|
||||
<div class="title dis-f al-item">
|
||||
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
|
||||
<span>
|
||||
目标区域
|
||||
</span>
|
||||
</div>
|
||||
{{ housingLocation }}
|
||||
<div class="need-housing-location">
|
||||
<div class="dis-f al-item" v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.location"
|
||||
:key="i">
|
||||
<span>
|
||||
{{
|
||||
location && location[item.substring(0, 1)]
|
||||
}}
|
||||
</span>
|
||||
<div class="icon dis-f jus-x al-item">
|
||||
<img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="">
|
||||
</div>
|
||||
<span>
|
||||
{{
|
||||
location && location[item]
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="map-box" v-if="pageType == 1 || pageType == 2">
|
||||
<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)]
|
||||
}} > {{
|
||||
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
|
||||
}}</span>
|
||||
housingInfo['data']['info'].location.substring(0, 1)]
|
||||
}} >
|
||||
{{
|
||||
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="dis-f jus-x" style="margin-top:15px;">
|
||||
<div v-if="housingInfo['data']">
|
||||
@ -251,7 +403,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x" v-if="distanceList.length">
|
||||
<div class="dis-f jus-x" v-if="distanceList.length && pageType != 3">
|
||||
<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' }">
|
||||
@ -398,7 +550,11 @@
|
||||
<div class="user-name">
|
||||
{{ housingInfo['data'] && housingInfo['data'].info.author }}
|
||||
</div>
|
||||
<div class="dis-f jus-x">
|
||||
<div class="dis-f jus-x"
|
||||
v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1">
|
||||
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
|
||||
</div>
|
||||
<div class="dis-f jus-x" v-if="pageType == 1">
|
||||
<div class="user-type">
|
||||
{{
|
||||
indexData['data'] &&
|
||||
@ -414,11 +570,62 @@
|
||||
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
|
||||
}} </span>
|
||||
</div>
|
||||
<div class="dis-f al-item jus-x time-box" v-if="housingInfo['data']&&housingInfo['data'].verifiedlistingcount">
|
||||
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
|
||||
<span>认证房源 x{{ housingInfo['data']&&housingInfo['data'].verifiedlistingcount }}</span>
|
||||
<div v-if="checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)">
|
||||
<div class="dis-f al-item jus-x time-box" v-if="housingInfo['data'] &&
|
||||
housingInfo['data'].intermediarylistingcount > 0 &&
|
||||
housingInfo['data']['config']['intermediary'] == 1 &&
|
||||
housingInfo['data'].isintermediary == 1">
|
||||
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
|
||||
<span>房源 x{{ housingInfo['data'] && housingInfo['data'].intermediarylistingcount
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="dis-f al-item jus-x time-box"
|
||||
v-if="housingInfo['data'] && housingInfo['data'].verifiedlistingcount">
|
||||
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
|
||||
<span>认证房源 x{{ housingInfo['data'] && housingInfo['data'].verifiedlistingcount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x">
|
||||
<div class="intermediary-info-box" v-if="housingInfo['data'] && housingInfo['data'].contacts">
|
||||
<div v-if="contacts['data'].proxynumber">
|
||||
<span>
|
||||
代理人牌照号：
|
||||
</span>
|
||||
<span>
|
||||
{{ contacts['data'].proxynumber }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mg-t-10" v-if="contacts['data'].companyname">
|
||||
<span>
|
||||
代理人牌照号：
|
||||
</span>
|
||||
<span>
|
||||
{{ contacts['data'].companyname }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mg-t-10" v-if="contacts['data'].companyaddress">
|
||||
<span>
|
||||
公司地址：
|
||||
</span>
|
||||
<span>
|
||||
{{ contacts['data'].companyaddress }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mg-t-10" v-if="contacts['data'].companylicensenumber">
|
||||
<span>
|
||||
公司牌照号：
|
||||
</span>
|
||||
<span>
|
||||
{{ contacts['data'].companylicensenumber }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-f jus-x" v-if="contacts['data'].businesscard">
|
||||
<div class="business-card-btn dis-f jus-x al-item" @click="showBusinessCard = true">
|
||||
<img src="../assets/img/detail/businessCard.png" class="logo" alt="">
|
||||
查看名片
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x ">
|
||||
<div class="contact-btn" @click="getConcatData">
|
||||
联系方式
|
||||
</div>
|
||||
@ -463,13 +670,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中介名片弹窗 -->
|
||||
<div class="dis-f jus-x al-item business-card-img-pop" v-show="showBusinessCard">
|
||||
<img src="../assets/img/detail/imageClose.svg" @click="showBusinessCard = false" class="close-img" alt="">
|
||||
<img :src="contacts['data'].businesscard" class="img" alt="">
|
||||
</div>
|
||||
<!-- 推荐 -->
|
||||
<div class="dis-f jus-x">
|
||||
<div class="dis-f jus-x" v-if="pageType != 3">
|
||||
<div class="body-maxWidth housing-title" style="margin-top:30px;">
|
||||
附近房源
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index:-1;">
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index:-1;" v-if="pageType != 3">
|
||||
<div class="body-maxWidth" v-show="recommendListData.length > 0">
|
||||
<div ref="gridContainer"
|
||||
style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
|
||||
@ -484,7 +696,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x bottom-tps">
|
||||
<div class="dis-f jus-x bottom-tps" v-if="pageType != 3">
|
||||
- {{ loadText }} -
|
||||
</div>
|
||||
<footerTool></footerTool>
|
||||
@ -725,11 +937,17 @@ import biserialItem from '../components/biserialListItem/biserialListItem.vue'
|
||||
|
||||
import store from '@/store';
|
||||
|
||||
//页面类型
|
||||
let pageType = ref('')
|
||||
|
||||
//加载状态
|
||||
let loadMore = ref(true)
|
||||
//推荐列表页数
|
||||
let pages = ref(1)
|
||||
let uniqid = ref('')
|
||||
|
||||
//显示中介名片
|
||||
let showBusinessCard = ref(false)
|
||||
//查看图片
|
||||
let imageShow = ref(false)
|
||||
let cloaseImageShow = () => {
|
||||
@ -847,21 +1065,33 @@ let setHousingArr = () => {
|
||||
}
|
||||
|
||||
let location = store.state.indexData.config && store.state.indexData.config.location
|
||||
let housingLocation=reactive(location)
|
||||
console.log('housingLocation',housingLocation)
|
||||
//设置顶部导航
|
||||
let setNavigation = () => {
|
||||
let type = store.state.indexData.config && store.state.indexData.config.type
|
||||
indexData['data'] = store.state.indexData
|
||||
if (!location) return
|
||||
store.state.routeList['thirdIndex'] = {
|
||||
path: "",
|
||||
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
|
||||
}
|
||||
if (housingInfo['data']['info'].location.length > 0)
|
||||
store.state.routeList['fourthIndex'] = {
|
||||
if (pageType.value == 1 || pageType.value == 2) {
|
||||
store.state.routeList['thirdIndex'] = {
|
||||
path: "",
|
||||
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
|
||||
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
|
||||
}
|
||||
if (housingInfo['data']['info'].location.length > 0)
|
||||
store.state.routeList['fourthIndex'] = {
|
||||
path: "",
|
||||
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
//中介数据
|
||||
let contacts = reactive({
|
||||
data: {
|
||||
}
|
||||
})
|
||||
|
||||
//获取房源详情
|
||||
let getHousingInfo = () => {
|
||||
@ -879,6 +1109,7 @@ let getHousingInfo = () => {
|
||||
name: housingInfo['data']['info'].address,
|
||||
})
|
||||
concatInfo['data'] = store.state.indexData.wechat
|
||||
if (res.data.contacts) contacts['data'] = res.data.contacts
|
||||
if (housingInfo['data'].info.verified) {
|
||||
getPublisherList()
|
||||
} else {
|
||||
@ -1050,16 +1281,20 @@ let masonryInstance = null
|
||||
|
||||
let router = useRouter()
|
||||
onMounted(() => {
|
||||
let { id } = router.currentRoute.value.query
|
||||
let { id, type } = router.currentRoute.value.query
|
||||
uniqid.value = id
|
||||
pageType.value = type
|
||||
getHousingInfo()
|
||||
masonryInstance = new Masonry(gridContainer.value, {
|
||||
itemSelector: '.waterfall-box',
|
||||
gutter: 10
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.addEventListener('scroll', onPageSrcoll, true);
|
||||
}, 1000)
|
||||
if (pageType.value != 3) {
|
||||
setTimeout(() => {
|
||||
window.addEventListener('scroll', onPageSrcoll, true);
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -1133,6 +1368,23 @@ img {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.need-houing-type {
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.clone-btn {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
@ -1157,6 +1409,29 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
.business-card-img-pop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #4c4c4c;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
.close-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -1497,6 +1772,10 @@ img {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.intermediary-logo {
|
||||
width: 85px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
width: 1200px;
|
||||
@ -1587,6 +1866,56 @@ img {
|
||||
font-size: 14px;
|
||||
padding: 35px 25px;
|
||||
|
||||
.intermediary-info-box {
|
||||
width: 100%;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 0.603921568627451);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
color: #7F7F7F;
|
||||
padding: 20px 10px;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.business-card-btn {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 0);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(215, 215, 215, 1);
|
||||
border-radius: 4px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
||||
.logo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mg-t-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.intermediary-logo {
|
||||
width: 85px;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.wx-title {
|
||||
width: 201px;
|
||||
height: 24px;
|
||||
@ -1885,6 +2214,57 @@ img {
|
||||
.housing-info {
|
||||
margin-top: 50px;
|
||||
|
||||
.need-housing-location {
|
||||
margin-top: 20px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
.icon{
|
||||
width:16px;
|
||||
height:16px;
|
||||
border-radius:50%;
|
||||
background: #fdda55;
|
||||
margin:0 8px;
|
||||
.icon-img{
|
||||
width:5px;
|
||||
height:8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.need-housing-info {
|
||||
margin-top: 30px;
|
||||
|
||||
.info {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #7F7F7F;
|
||||
font-size: 14px;
|
||||
|
||||
.title-box {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed rgba(237, 237, 237, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mg-l-30 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-s {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
|
||||
@ -75,7 +75,7 @@ let getDataList = (data) => {
|
||||
loading.value = false
|
||||
let postData = {
|
||||
page: pages.value,
|
||||
intermediary: 0,
|
||||
intermediary: 6,
|
||||
limit:20,
|
||||
...data
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user