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-26 15:08:31 +08:00
parent 6efebca2cf
commit 3fcc93e4cd
8 changed files with 475 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/detail/businessCard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/img/detail/intermediaryDetailLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/img/detail/intermediaryDetailTItle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}"> <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/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/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"> <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/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt=""> <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -97,11 +97,11 @@
data && data &&
data.data.intermediary_text data.data.intermediary_text
}}</div> }}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div> </div>
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> 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>
</div> </div>
</template> </template>

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

@@ -1,30 +1,36 @@
<template> <template>
<div class="pos-r"> <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 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/authenticationLogon.png" class="logo" alt="">
<img src="../../assets/img/detail/authenticationTitle.png" class="title" alt=""> <img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
</div> </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">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""> <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
<span> <span>
{{data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房产证明':'真实牌照'}} {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房产证明' : '真实牌照' }}
</span> </span>
</div> </div>
<div class="dis-f al-item" style="margin-left:20px;"> <div class="dis-f al-item" style="margin-left:20px;">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""> <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
<span> <span>
{{ data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房东身份证':'身份证明' }} {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明' }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="title-top-box pos-r" style="z-index:666;"> <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" v-if="data['data'] && data['data'].info && data['data'].info.verified === 1">
<div class="top-round-s"></div> <div class="top-round-s" :class="[pageType==2?'intermediary-bg':'']"></div>
</div> </div>
<div class="breadcrumb-box"> <div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight"> <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 { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
import store from '@/store' import store from '@/store'
import transmitBtn from '@/components/public/transmitBtn.vue' import transmitBtn from '@/components/public/transmitBtn.vue'
import { useRouter } from 'vue-router';
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -85,6 +92,12 @@ let data = reactive({})
let operation = props.operation let operation = props.operation
//获取路由参数
let router = useRouter()
//页面类型
let pageType=ref('')
let {type}=router.currentRoute.value.query
pageType.value=type
//导航数据 //导航数据
let storeData = store.state.routeList let storeData = store.state.routeList
console.log('storeData', storeData) console.log('storeData', storeData)
@@ -129,6 +142,19 @@ img {
justify-content: space-between; 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 { .authentication-top {
position: absolute; position: absolute;
left: 0px; left: 0px;
@@ -163,10 +189,10 @@ img {
margin-left: 8px; margin-left: 8px;
} }
.type-icon{ .type-icon {
width: 18px; width: 18px;
height:18px; height: 18px;
margin-right:8px; margin-right: 8px;
} }
} }
@@ -185,21 +211,26 @@ img {
font-size: 14px; font-size: 14px;
transform: translateY(-38px); transform: translateY(-38px);
position: relative; position: relative;
.top-round{
width:22px ; .top-round {
height:22px; width: 22px;
height: 22px;
background: #fff; background: #fff;
position: absolute; position: absolute;
top:-8px; top: -8px;
right:-1px; right: -1px;
.top-round-s{
.top-round-s {
position: absolute; position: absolute;
top:-13px; top: -13px;
left:-1px; left: -1px;
border-radius:0 0 16px 0; border-radius: 0 0 16px 0;
background:rgba(174, 159, 251, 1); background: rgba(174, 159, 251, 1);
width:23px; width: 23px;
height:20px; height: 20px;
}
.intermediary-bg{
background: rgba(173,214,247,1);
} }
} }

6
src/components/detail/imageWatch.vue
View File

@@ -8,8 +8,8 @@
<div class="img-box dis-f jus-x" v-if="item.thumbnail"> <div class="img-box dis-f jus-x" v-if="item.thumbnail">
<img :src="item&&item.url" class="img" alt=""> <img :src="item&&item.url" class="img" alt="">
</div> </div>
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail"> <div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail&&item.url">
<source :src="item&&item.url" class="img" style="width:600px" type="video/mp4"> <source :controls="true" :autoplay="false" :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
@@ -29,7 +29,7 @@
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt=""> <img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
</div> </div>
</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"> <img :src="item.thumbnail||item.image" alt="" class="img-s">
</div> </div>
</div> </div>

444
src/views/detail.vue
View File

@@ -9,9 +9,14 @@
<div class="top-bar dis-f al-item jus-bet"> <div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" <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=""> 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> <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="unit">HK$</span>
<span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span> <span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span>/月</span> <span>/月</span>
@@ -59,9 +64,10 @@
</div> </div>
</div> </div>
</el-affix> </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="info-box">
<div class="detail-price-box"> <div class="detail-price-box">
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span><span class="rent">{{ <span class="unit">HK$</span><span class="rent">{{
housingInfo['data'] && housingInfo['data'].info.rent }}</span> housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span>/月</span> <span>/月</span>
@@ -101,7 +107,7 @@
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }} ${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
</div> </div>
</div> </div>
<div class="condition condition-border"> <div class="condition">
<div class="dis-f al-item"> <div class="dis-f al-item">
<div class="icon"> <div class="icon">
@@ -123,7 +129,8 @@
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
|| 0 }}</div> || 0 }}</div>
</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="" <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@click.stop="moveImageList('left')" v-show="imgListTab === 0"> @click.stop="moveImageList('left')" v-show="imgListTab === 0">
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
@@ -158,7 +165,123 @@
基本信息 基本信息
</span> </span>
</div> </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="info dis-f al-item">
<div class="title-box"> <div class="title-box">
房屋类型 房屋类型
@@ -225,22 +348,51 @@
indexData['data'] && indexData['data'] &&
indexData['data']['config'] && indexData['data']['config'] &&
indexData['data']['config']['gender'][housingInfo['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender] housingInfo['data'].info.gender]
}} }}
</span> </span>
</div> </div>
</div> </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"> <div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt=""> <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">{{ <span class="title">{{
location && location[housingInfo['data'] && location && location[housingInfo['data'] &&
housingInfo['data']['info'].location.substring(0, housingInfo['data']['info'].location.substring(0, 1)]
1)] }} >
}} > {{ {{
location && location[housingInfo['data'] && housingInfo['data']['info'].location] location && location[housingInfo['data'] && housingInfo['data']['info'].location]
}}</span> }}</span>
</div> </div>
<div class="dis-f jus-x" style="margin-top:15px;"> <div class="dis-f jus-x" style="margin-top:15px;">
<div v-if="housingInfo['data']"> <div v-if="housingInfo['data']">
@@ -251,7 +403,7 @@
</div> </div>
</div> </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-box dis-f jus-bet">
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }" <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }"> :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
@@ -398,7 +550,11 @@
<div class="user-name"> <div class="user-name">
{{ housingInfo['data'] && housingInfo['data'].info.author }} {{ housingInfo['data'] && housingInfo['data'].info.author }}
</div> </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"> <div class="user-type">
{{ {{
indexData['data'] && indexData['data'] &&
@@ -414,11 +570,62 @@
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime) {{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
}} </span> }} </span>
</div> </div>
<div class="dis-f al-item jus-x time-box" v-if="housingInfo['data']&&housingInfo['data'].verifiedlistingcount"> <div v-if="checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)">
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt=""> <div class="dis-f al-item jus-x time-box" v-if="housingInfo['data'] &&
<span>认证房源 x{{ housingInfo['data']&&housingInfo['data'].verifiedlistingcount }}</span> 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>
<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 class="contact-btn" @click="getConcatData">
联系方式 联系方式
</div> </div>
@@ -463,13 +670,18 @@
</div> </div>
</div> </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 class="body-maxWidth housing-title" style="margin-top:30px;">
附近房源 附近房源
</div> </div>
</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 class="body-maxWidth" v-show="recommendListData.length > 0">
<div ref="gridContainer" <div ref="gridContainer"
style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px"> style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
@@ -484,7 +696,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="dis-f jus-x bottom-tps"> <div class="dis-f jus-x bottom-tps" v-if="pageType != 3">
- {{ loadText }} - - {{ loadText }} -
</div> </div>
<footerTool></footerTool> <footerTool></footerTool>
@@ -725,11 +937,17 @@ import biserialItem from '../components/biserialListItem/biserialListItem.vue'
import store from '@/store'; import store from '@/store';
//页面类型
let pageType = ref('')
//加载状态 //加载状态
let loadMore = ref(true) let loadMore = ref(true)
//推荐列表页数 //推荐列表页数
let pages = ref(1) let pages = ref(1)
let uniqid = ref('') let uniqid = ref('')
//显示中介名片
let showBusinessCard = ref(false)
//查看图片 //查看图片
let imageShow = ref(false) let imageShow = ref(false)
let cloaseImageShow = () => { let cloaseImageShow = () => {
@@ -847,21 +1065,33 @@ let setHousingArr = () => {
} }
let location = store.state.indexData.config && store.state.indexData.config.location let location = store.state.indexData.config && store.state.indexData.config.location
let housingLocation=reactive(location)
console.log('housingLocation',housingLocation)
//设置顶部导航 //设置顶部导航
let setNavigation = () => { let setNavigation = () => {
let type = store.state.indexData.config && store.state.indexData.config.type let type = store.state.indexData.config && store.state.indexData.config.type
indexData['data'] = store.state.indexData indexData['data'] = store.state.indexData
if (!location) return if (!location) return
store.state.routeList['thirdIndex'] = { if (pageType.value == 1 || pageType.value == 2) {
path: "", store.state.routeList['thirdIndex'] = {
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: "", 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 = () => { let getHousingInfo = () => {
@@ -879,6 +1109,7 @@ let getHousingInfo = () => {
name: housingInfo['data']['info'].address, name: housingInfo['data']['info'].address,
}) })
concatInfo['data'] = store.state.indexData.wechat concatInfo['data'] = store.state.indexData.wechat
if (res.data.contacts) contacts['data'] = res.data.contacts
if (housingInfo['data'].info.verified) { if (housingInfo['data'].info.verified) {
getPublisherList() getPublisherList()
} else { } else {
@@ -1050,16 +1281,20 @@ let masonryInstance = null
let router = useRouter() let router = useRouter()
onMounted(() => { onMounted(() => {
let { id } = router.currentRoute.value.query let { id, type } = router.currentRoute.value.query
uniqid.value = id uniqid.value = id
pageType.value = type
getHousingInfo() getHousingInfo()
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.waterfall-box', itemSelector: '.waterfall-box',
gutter: 10 gutter: 10
}); });
setTimeout(() => { if (pageType.value != 3) {
window.addEventListener('scroll', onPageSrcoll, true); setTimeout(() => {
}, 1000) window.addEventListener('scroll', onPageSrcoll, true);
}, 1000)
}
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -1133,6 +1368,23 @@ img {
padding: 30px 0; 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 { .clone-btn {
width: 100px; width: 100px;
height: 32px; 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 { .pop-box {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@@ -1497,6 +1772,10 @@ img {
height: 16px; height: 16px;
} }
.intermediary-logo {
width: 85px;
height: 20px;
}
.top-bar { .top-bar {
width: 1200px; width: 1200px;
@@ -1587,6 +1866,56 @@ img {
font-size: 14px; font-size: 14px;
padding: 35px 25px; 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 { .wx-title {
width: 201px; width: 201px;
height: 24px; height: 24px;
@@ -1885,6 +2214,57 @@ img {
.housing-info { .housing-info {
margin-top: 50px; 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 { .info-box-s {
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;

2
src/views/housingView/needHousing.vue
View File

@@ -75,7 +75,7 @@ let getDataList = (data) => {
loading.value = false loading.value = false
let postData = { let postData = {
page: pages.value, page: pages.value,
intermediary: 0, intermediary: 6,
limit:20, limit:20,
...data ...data
} }