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:51:14 +08:00
parent b820b4240e
commit 5d917321d0
1 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/detail.vue
View File

@@ -4,7 +4,7 @@
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
<breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb> <breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
<el-affix :offset="0" @change="changeTitleType"> <el-affix :offset="0" @change="changeTitleType" z-index="700">
<div class="top-bar-box dis-f jus-x" v-show="titleType"> <div class="top-bar-box dis-f jus-x" v-show="titleType">
<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">
@@ -18,7 +18,16 @@
<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="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" 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>/月</span> <span>/月</span>
<div class="line"></div> <div class="line"></div>
<div class="dis-f al-item"> <div class="dis-f al-item">
@@ -68,8 +77,16 @@
<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="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span><span class="rent">{{ <span class="unit">HK$</span><span class="rent" v-if="pageType != 3">{{
housingInfo['data'] && housingInfo['data'].info.rent }}</span> 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>/月</span> <span>/月</span>
</div> </div>
<div class="dis-f al-item detail-condition-box"> <div class="dis-f al-item detail-condition-box">
@@ -121,13 +138,26 @@
</div> </div>
<div class="image-box"> <div class="image-box">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/videoIcon.png" class="img-video" alt=""> <img src="../assets/img/detail/videoIcon.png" v-if="housingInfo['data'] &&
<div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ? housingInfo['data'].info.video &&
housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div> housingInfo['data'].info.video.length > 0" class="img-video" alt="">
<img src="../assets/img/detail/imageIcon.png" class="img-icon" alt=""> <div class="num-box" v-if="housingInfo['data'] &&
<div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video &&
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length housingInfo['data'].info.video.length">
|| 0 }}</div> {{ housingInfo['data'] && housingInfo['data'].info.video ?
housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
<img src="../assets/img/detail/imageIcon.png"
v-if="housingInfo['data'] &&
housingInfo['data'].info.picturegroup &&
housingInfo['data'].info.picturegroup.length"
class="img-icon" alt="">
<div class="num-box" v-if="housingInfo['data'] &&
housingInfo['data'].info.picturegroup &&
housingInfo['data'].info.picturegroup.length">
{{ housingInfo['data'] &&
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
|| 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"> v-show="imgList.length > 0">
@@ -362,10 +392,9 @@
目标区域 目标区域
</span> </span>
</div> </div>
{{ housingLocation }}
<div class="need-housing-location"> <div class="need-housing-location">
<div class="dis-f al-item" v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.location" <div class="dis-f al-item" :class="{ 'mg-t-15': i != 0 }"
:key="i"> v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.location" :key="i">
<span> <span>
{{ {{
location && location[item.substring(0, 1)] location && location[item.substring(0, 1)]
@@ -1065,8 +1094,6 @@ 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
@@ -1082,10 +1109,7 @@ let setNavigation = () => {
path: "", path: "",
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}` title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
} }
} else {
} }
} }
//中介数据 //中介数据
let contacts = reactive({ let contacts = reactive({
@@ -1945,6 +1969,7 @@ img {
.crowd-box { .crowd-box {
width: 120px; width: 120px;
height: 120px; height: 120px;
margin-top:30px;
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: none; border: none;
@@ -2221,15 +2246,21 @@ img {
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #000000; color: #000000;
.icon{
width:16px; .mg-t-15 {
height:16px; margin-top: 15px;
border-radius:50%; }
.icon {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fdda55; background: #fdda55;
margin:0 8px; margin: 0 8px;
.icon-img{
width:5px; .icon-img {
height:8px; width: 5px;
height: 8px;
} }
} }
} }