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-24 19:35:17 +08:00
parent 3712c1bc4c
commit 44406ee209
4 changed files with 279 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@
</div> </div>
<div class="dis-f al-item jus-bet title-box"> <div class="dis-f al-item jus-bet title-box">
<div class="detail-title"> <div class="detail-title">
房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住 {{ data['data']['info']&&data['data']['info'].subject }}
</div> </div>
<div class="tool-btn-box dis-f al-item"> <div class="tool-btn-box dis-f al-item">
<div class="btn-s dis-f al-item jus-x"> <div class="btn-s dis-f al-item jus-x">
@@ -37,21 +37,27 @@
<script setup> <script setup>
import { ArrowRight } from '@element-plus/icons-vue' import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps } from 'vue' import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
import store from '@/store' import store from '@/store'
defineProps({ const props=defineProps({
data: { data: {
type: Array, type: Object,
default: function () { default: function () {
return [] return {}
} }
} }
}) })
let data=reactive({})
//导航数据 //导航数据
let storeData = store.state.routeList let storeData = store.state.routeList
console.log(storeData) console.log('storeData',storeData)
watchEffect(()=>{
data['data']=props.data
console.log(data['data'])
})
</script> </script>
<style scoped> <style scoped>
@@ -90,7 +96,6 @@ img {
.title-top-box { .title-top-box {
width: 1200px; width: 1200px;
height: 186px;
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;

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

@@ -1,13 +1,13 @@
<template> <template>
<div class="watch-box"> <div class="watch-box" v-show="show">
<div class="pos-r dis-f al-item mg-t-60"> <div class="pos-r dis-f al-item mg-t-60">
<div class="s-w-100"> <div class="s-w-100">
<el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel"> <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
<el-carousel-item v-for="(item, i) in list" :key="i"> <el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item" v-if="item">
<div class="img-box"> <div class="img-box">
{{ item }} {{ item }}
<img src="" class="img" alt=""> <img :src="item&&item.url" class="img" alt="">
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
@@ -31,12 +31,12 @@
</div> </div>
</div> </div>
</div> </div>
<img src="../../assets/img/detail/imageClose.svg" class="close-img" alt=""> <img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="">
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, onMounted, ref, defineProps } from 'vue' import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
const props = defineProps({ const props = defineProps({
list: { list: {
@@ -44,9 +44,19 @@ const props = defineProps({
default: function () { default: function () {
return [1, 2, 3, 4, 5] return [1, 2, 3, 4, 5]
} }
},
close:{
type:Function
},
show:{
type:Boolean,
default:false
} }
}) })
let show=props.show
let list = props.list let list = props.list
let close=props.close
let carousel = ref(null) let carousel = ref(null)
let imageTab = ref(0) let imageTab = ref(0)
@@ -65,6 +75,12 @@ let next = () => {
carousel.value.next() carousel.value.next()
console.log(imageTab.value) console.log(imageTab.value)
} }
watchEffect(()=>{
show=props.show
list = props.list
console.log('url',list)
})
</script> </script>
<style scoped> <style scoped>
img { img {
@@ -188,7 +204,7 @@ img {
} }
.img-box { .img-box {
width: 800px; width:1200px;
height: 600px; height: 600px;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;

3
src/utils/api.js
View File

@@ -24,6 +24,9 @@ export default{
}, },
apartment:(params={})=>{//获取公寓列表 apartment:(params={})=>{//获取公寓列表
return axios.get('/tenement/pc/api/apartment',params) return axios.get('/tenement/pc/api/apartment',params)
},
details:(params={})=>{//房源详情
return axios.post('/tenement/pc/api/details',params)
} }
} }

398
src/views/detail.vue
View File

@@ -3,19 +3,27 @@
<pageTopBar></pageTopBar> <pageTopBar></pageTopBar>
<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></breadcrumb> <breadcrumb :data="housingInfo['data']"></breadcrumb>
<el-affix :offset="0" @change="changeTitleType"> <el-affix :offset="0" @change="changeTitleType">
<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">
<span class="unit">HK$</span> <span class="unit">HK$</span>
<span class="rent">123456</span> <span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</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">
整租 {{ 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=""> <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> </div>
<div class="dis-f al-item"> <div class="dis-f al-item">
@@ -37,7 +45,7 @@
</div> </div>
</div> </div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }"> <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn" style="margin:0 0 0 10px;"> <div class="contact-btn" style="margin:0 0 0 10px;" @click="showConcat = true">
联系方式 联系方式
</div> </div>
</div> </div>
@@ -48,7 +56,9 @@
<div class="dis-f jus-bet" style="transform: translateY(-15px);"> <div class="dis-f jus-bet" style="transform: translateY(-15px);">
<div class="info-box"> <div class="info-box">
<div class="detail-price-box"> <div class="detail-price-box">
<span class="unit">HK$</span><span class="rent">123456</span><span>/月</span> <span class="unit">HK$</span><span class="rent">{{
housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span>/月</span>
</div> </div>
<div class="dis-f al-item detail-condition-box"> <div class="dis-f al-item detail-condition-box">
<div class="condition condition-border"> <div class="condition condition-border">
@@ -56,10 +66,18 @@
<div class="icon"> <div class="icon">
</div> </div>
整租 {{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type.substring(0, 1)]
}}
</div> </div>
<div class="type-text"> <div class="type-text">
两房 {{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type]
}}
</div> </div>
</div> </div>
<div class="condition condition-border"> <div class="condition condition-border">
@@ -70,7 +88,9 @@
租期 租期
</div> </div>
<div class="type-text"> <div class="type-text">
一年 {{ housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
'不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
</div> </div>
</div> </div>
<div class="condition condition-border"> <div class="condition condition-border">
@@ -81,18 +101,19 @@
起租日期 起租日期
</div> </div>
<div class="type-text"> <div class="type-text">
随时 {{ housingInfo['data'] && housingInfo['data'].info.leasetime || '随时' }}
</div> </div>
</div> </div>
</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" class="img-video" alt="">
<div class="num-box">1</div> <div class="num-box">{{ housingInfo['data'] &&housingInfo['data'].info.video?
housingInfo['data']&&housingInfo['data'].info.video.length:0 }}</div>
<img src="../assets/img/detail/imageIcon.png" class="img-icon" alt=""> <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
<div class="num-box">2</div> <div class="num-box">{{housingInfo['data'] &&housingInfo['data'].info.picturegroup.length ||0 }}</div>
</div> </div>
<div class="img-list-box dis-f jus-x al-item"> <div class="img-list-box dis-f jus-x al-item" @click="imageShow=true">
<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="moveImageList('left')"> @click="moveImageList('left')">
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
@@ -101,18 +122,18 @@
@click="moveImageList('right')"> @click="moveImageList('right')">
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt="" <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
style="transform: rotate(180deg);" @click="moveImageList('right')"> style="transform: rotate(180deg);" @click="moveImageList('right')">
<div class="dis-f al-item list-box" ref="imageList"> <div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0">
<div v-for="(item, i) in imgList" :key="i"> <div v-for="(item, i) in imgList" :key="i">
<div class="video" v-if="item === 1"> <div class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item"> <div class="icon-box dis-f jus-x al-item">
<img src="../assets/img/detail/videoStop.svg" class="icon" alt=""> <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
</div> </div>
<img class="video" ref="imgData" src="" @load="setImageWidth(i)" <img class="video" ref="imgData" :src="item.image" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt=""> @error="setImageWidth(i)" alt="">
</div> </div>
<div class="img" v-if="item > 1" <div class="img" v-if="item && item.thumbnail"
:style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }"> :style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }">
<img class="img" ref="imgData" src="" @load="setImageWidth(i)" <img class="img" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt=""> @error="setImageWidth(i)" alt="">
</div> </div>
</div> </div>
@@ -127,46 +148,65 @@
</span> </span>
</div> </div>
<div class="info-box-s"> <div class="info-box-s">
<div class="info"> <div class="info dis-f al-item">
<span> <div class="title-box">
房屋类型 房屋类型
</span> </div>
<span class="text"> <span class="text">
洋楼 {{
indexData['data'] && indexData['data']['config']['property'][housingInfo['data'] &&
housingInfo['data'].info.property]
}}
</span> </span>
</div> </div>
<div class="info"> <div class="info dis-f al-item">
<span> <div class="title-box">
所在楼层 所在楼层
</span> </div>
<span class="text"> <span class="text">
28 {{ housingInfo['data'] && housingInfo['data'].info.floor }}
</span>|<span class="text" style="margin-left:0;"> </span>
有电梯 |
<span class="text" style="margin-left:0;">
{{
indexData['data'] && indexData['data']['config']['elevator'][housingInfo['data'] &&
housingInfo['data'].info.elevator]
}}
</span> </span>
</div> </div>
<div class="info"> <div class="info dis-f al-item">
<span> <div class="title-box">
晾晒区 晾晒区
</span> </div>
<span class="text"> <span class="text">
阳台 {{
indexData['data'] && housingInfo['data'] && housingInfo['data'].info.sunshinearea
!== -1 ?
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea] : ''
}}
</span> </span>
</div> </div>
<div class="info" style="margin-top:30px;"> <div class="info dis-f al-item" style="margin-top:30px;">
<span> <div class="title-box">
面积 面积
</span> </div>
<span class="text"> <span class="text">
680 平方呎 {{
housingInfo['data'] && housingInfo['data'].info.acreage ? housingInfo['data'] &&
housingInfo['data'].info.acreage : 0
}} 平方呎
</span> </span>
</div> </div>
<div class="info" style="margin-top:30px;"> <div class="info dis-f al-item" style="margin-top:30px;">
<span> <div class="title-box">
性别要求 性别要求
</span> </div>
<span class="text"> <span class="text">
男女皆可 {{
indexData['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender]
}}
</span> </span>
</div> </div>
</div> </div>
@@ -199,33 +239,28 @@
<span class="title">房源距离院校</span> <span class="title">房源距离院校</span>
<img src="../assets/img/detail/close.png" class="close-icon" alt=""> <img src="../assets/img/detail/close.png" class="close-icon" alt="">
</div> </div>
<div class="distance-info-data dis-f"> <div class="distance-info-data dis-f" v-if="distanceList.length > 0">
<!-- <div class="dis-f al-item school-info">
<div class="icon-box dis-f al-item jus-x">
<img src="../assets/img/detail/school.png" class="icon" v-show="false"
alt="">
<img src="../assets/img/detail/home.png" class="icon" alt="">
</div>
123
<span></span>
</div> -->
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList" <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
:key="index" :class="{ 'mg-t-50': index > 0 }"> :key="index" :class="{ 'mg-t-50': index > 0 }">
<div class="icon-box dis-f al-item jus-x"> <div class="icon-box dis-f al-item jus-x"
:class="{ 'home-icon': item.address }">
<div class="line" v-show="index > 0"></div> <div class="line" v-show="index > 0"></div>
<img src="../assets/img/detail/school.png" class="icon" v-show="false" <img src="../assets/img/detail/school.png" class="icon"
v-show="item.address" alt="">
<img src="../assets/img/detail/home.png" class="icon" v-show="!item.address"
alt=""> alt="">
<img src="../assets/img/detail/home.png" class="icon" alt="">
</div> </div>
123 {{ item && item.name }}
<div> <div v-for="(items,i) in item.point" :key="i">
<span class="address-info"> <span class="address-info">
北门 {{ items.title }}
</span> </span>
<span class="distance-text"> <span
v-html="setDistanceList(items &&`${items.distance}`)">
</span>
<!-- <span class="distance-text">
1.1公里 1.1公里
</span> </span> -->
</div> </div>
</div> </div>
@@ -235,17 +270,22 @@
<!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> --> <!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
<div class="dis-f al-item s-w-100" style="position:absolute;"> <div class="dis-f al-item s-w-100" style="position:absolute;">
<div class="line-school-box dis-f al-item" style="justify-content:space-around;"> <div class="line-school-box dis-f al-item" style="justify-content:space-around;">
<div v-for="item in schoolArr" class="box-text"> <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id">
<div :class="{ 'far-s': item.num > 4 }"> <div :class="{ 'far-s': item && item.recently_distance > 4 }"
{{ item.num }}km v-if="!item.address" class="text-c">
{{ item && item.recently_distance }}km
</div> </div>
<div class="dis-f jus-x"> <div class="dis-f jus-x" v-if="!item.address">
<img src="../assets/img/detail/markIcon.svg" v-if="item.num <= 4" <img src="../assets/img/detail/markIcon.svg"
class="marker-icon" alt=""> v-if="item && item.recently_distance <= 4" class="marker-icon"
<img src="../assets/img/detail/markIconNot.svg" v-if="item.num > 4" alt="">
class="marker-icon" alt=""> <img src="../assets/img/detail/markIconNot.svg"
v-if="item && item.recently_distance > 4" class="marker-icon"
alt="">
</div> </div>
<div :class="{ 'far-s': item.num > 4 }">{{ item.title }}</div> <div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
v-if="!item.address">{{
item && item.alias }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -265,30 +305,35 @@
<img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt=""> <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
<span class="title">更多介绍</span> <span class="title">更多介绍</span>
</div> </div>
<div class="introduce-text"> <div class="introduce-text" v-html="housingInfo['data']&&housingInfo['data'].info.introduction">
123
</div> </div>
</div> </div>
<div class="houseing-info-box dis-f al-item jus-bet"> <div class="houseing-info-box dis-f al-item jus-bet">
<div class="dis-f al-item houseing-info-box-s"> <div class="dis-f al-item houseing-info-box-s">
房源ID: <span class="houseing-id" @click="clone('123456789')">123456789</span> 房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] && housingInfo['data'].info.uid }}</span>
<span class="browse-box"> <span class="browse-box">
浏览: <span class="text">123</span> 浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view }}</span>
</span> </span>
</div> </div>
<div class="dis-f al-item houseing-info-box-s"> <div class="dis-f al-item houseing-info-box-s">
<span> <span>
收藏: <span class="text">9</span> 收藏: <span class="text">
{{ housingInfo['data'] && housingInfo['data'].info.count_fav }}
</span>
</span> </span>
</div> </div>
<div class="dis-f al-item houseing-info-box-s"> <div class="dis-f al-item houseing-info-box-s">
<span> <span>
发布: <span class="text">2022.08.10 19:00</span> 发布: <span class="text">
{{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
</span>
</span> </span>
</div> </div>
<div class="dis-f al-item houseing-info-box-s" style="border-right:0px"> <div class="dis-f al-item houseing-info-box-s" style="border-right:0px">
<span> <span>
更新: <span class="text">2022.08.10 19:00</span> 更新: <span class="text">
{{ housingInfo['data'] && housingInfo['data'].info.updatetime }}
</span>
</span> </span>
</div> </div>
</div> </div>
@@ -301,12 +346,12 @@
<div> <div>
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号 如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
<el-dropdown> <el-dropdown>
<span class="text-line" @click="clone('gternet2')">gternet2</span> <span class="text-line" @click="clone('gternet2')">{{ concatInfo.data&&concatInfo.data.wechat }}</span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item> <el-dropdown-item>
<div class="wx-qrcode-s"> <div class="wx-qrcode-s">
<img src="../assets/img/detail/wxQrcode.jpg" <img :src="concatInfo.data&&concatInfo.data.wechatqrcode"
style="width:130px;height:130px" alt=""> style="width:130px;height:130px" alt="">
</div> </div>
</el-dropdown-item> </el-dropdown-item>
@@ -317,28 +362,35 @@
</div> </div>
</div> </div>
<div class="mg-t-30"> <div class="mg-t-30">
公寓/酒店/中介房源推广合作请联系：<span class="text-line" @click="clone('456789')">123456</span> 公寓/酒店/中介房源推广合作请联系：<span class="text-line" @click="clone('ad@gter.net')">ad@gter.net</span>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="right-tool-box"> <div class="right-tool-box">
<div class="dis-f jus-x"> <div class="dis-f jus-x">
<img src="" class="user-img" alt=""> <img :src="housingInfo['data'] && housingInfo['data'].info.avatar" class="user-img" alt="">
</div> </div>
<div class="user-name"> <div class="user-name">
123 {{ housingInfo['data'] && housingInfo['data'].info.author }}
</div> </div>
<div class="dis-f jus-x"> <div class="dis-f jus-x">
<div class="user-type"> <div class="user-type">
房东 {{
indexData['data'] && indexData['data']['config']['intermediary'][housingInfo['data'] &&
housingInfo['data'].info.intermediary]
}}
</div> </div>
</div> </div>
<div class="dis-f al-item jus-x time-box"> <div class="dis-f al-item jus-x time-box">
<img src="../assets/img/detail/timeIcon.svg" class="icon" alt=""> <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
<span> <span>
456789 {{
</span> (new Date().getTime() - new
Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) / 3600000
< 3600000 ? '一小时内' : `${Math.floor((new Date().getTime() - new
Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) /
3600000)}` }} </span>
</div> </div>
<div class="dis-f jus-x"> <div class="dis-f jus-x">
<div class="contact-btn"> <div class="contact-btn">
@@ -370,7 +422,7 @@
</div> </div>
<div class="dis-f jus-x "> <div class="dis-f jus-x ">
<div class="crowd-box dis-f jus-x al-item"> <div class="crowd-box dis-f jus-x al-item">
<img src="../assets/img/detail/crowdImg.jpg" class="img" alt=""> <img :src="concatInfo.data&&concatInfo.data.wechatqrcode" class="img" alt="">
</div> </div>
</div> </div>
<div class="dis-f jus-x s-w-100"> <div class="dis-f jus-x s-w-100">
@@ -386,7 +438,7 @@
</div> </div>
</div> </div>
<footerTool></footerTool> <footerTool></footerTool>
<div class="pop-box"> <div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
<!-- 两种信息 --> <!-- 两种信息 -->
<!-- third-concat --> <!-- third-concat -->
<div class="pop-big-box "> <div class="pop-big-box ">
@@ -394,7 +446,7 @@
<div class="pop-big-bg dis-f jus-x al-item"> <div class="pop-big-bg dis-f jus-x al-item">
<div class="user-liner-box dis-f al-item"> <div class="user-liner-box dis-f al-item">
<!-- class='s-w-100' --> <!-- class='s-w-100' -->
<div style="padding:0 0 30px 0;"> <div style="padding:0 0 30px 0;">
<div class="liner-title"> <div class="liner-title">
联系方式 联系方式
</div> </div>
@@ -548,7 +600,7 @@
</div> --> </div> -->
</div> </div>
</div> </div>
<!-- <watchImage></watchImage> --> <watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
<!-- 右下角咨询 --> <!-- 右下角咨询 -->
<circle-btn></circle-btn> <circle-btn></circle-btn>
</template> </template>
@@ -562,15 +614,21 @@ import footerTool from '@/components/footer/footer.vue'
import watchImage from '../components/detail/imageWatch.vue' import watchImage from '../components/detail/imageWatch.vue'
import breadcrumb from '../components/detail/breadcrumb.vue' import breadcrumb from '../components/detail/breadcrumb.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import store from '@/store';
// //
let loadMore = ref(true) let loadMore = ref(true)
let pages = ref(1) let pages = ref(1)
//查看图片
let imageShow= ref(false)
let cloaseImageShow=()=>{
imageShow.value=false
}
//视频实例 //视频实例
let imageList = ref(null) let imageList = ref(null)
//图片数组
let imgList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]) let imgList = ref([])
let imgListTab = ref(0) let imgListTab = ref(0)
//计时器 //计时器
@@ -579,7 +637,7 @@ let interval = ''
let moveImageList = (type) => { let moveImageList = (type) => {
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++ type === 'left' ? imgListTab.value-- : imgListTab.value++
setOffsetWidth(imgList.value[imgListTab.value] * imgListTab.value, type) setOffsetWidth(imgList.value[imgListTab.value]['value'] * imgListTab.value, type)
} }
//设置滚动 //设置滚动
let setOffsetWidth = (num, type) => { let setOffsetWidth = (num, type) => {
@@ -595,57 +653,24 @@ let setOffsetWidth = (num, type) => {
let imgData = ref(null) let imgData = ref(null)
//获取图片宽度 //获取图片宽度
let setImageWidth = (num) => { let setImageWidth = (num) => {
imgList.value[num] = imgData.value[num].offsetWidth + 10 imgList.value[num]['value'] = imgData.value[num] && imgData.value[num].offsetWidth + 10
} }
//地名数据
let schoolArr = ref([
{
title: '理大',
num: 4
},
{
title: '理大',
num: 4.2
},
{
title: '理大',
num: 5
},
{
title: '理大',
num: 8
},
{
title: '理大',
num: 6
},
{
title: '理大',
num: 7
},
{
title: '理大',
num: 6
},
{
title: '理大',
num: 8
},
{
title: '理大',
num: 8
}, {
title: '理大',
num: 8
}, {
title: '理大',
num: 8
}
])
//学校地址数据 //学校地址数据
let distanceList = ref([1, 2, 3, 4, 5]) let distanceList = ref([])
//地址数字高亮
let setDistanceList = (text = '') => {
if (!text) return text
let oRegExp = new RegExp(/\d+\.\d+/, "g");
text = text.replace(/\d+\.\d+/g, `<span style="font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;font-style: normal;
font-size: 14px;
color: #62B1FF;
margin-left: 5px;">${text.match(oRegExp) ? text.match(oRegExp)[0] : ''}公里</span>`)
return text
}
//显示详情 //显示详情
let showDistance = ref(false) let showDistance = ref(false)
//学校地址详情 //学校地址详情
@@ -683,6 +708,66 @@ let clone = (text) => {
}) })
} }
//显示联系方式
let showConcat = ref(false)
//数据包
let indexData = reactive({})
//房源详情
let housingInfo = reactive({})
//联系
let concatInfo= reactive({})
let setHousingArr = () => {
let arr = []
arr = housingInfo['data'].info.video?arr.concat(housingInfo['data'] && housingInfo['data'].info.video):[]
arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup)
imgList.value = imgList.value.concat(arr)
// console.log('imgList',imgList.value)
}
//设置顶部导航
let setNavigation = () => {
let location = store.state.indexData.config && store.state.indexData.config.location
let type = store.state.indexData.config && store.state.indexData.config.type
indexData['data'] = store.state.indexData
// console.log(123, indexData['data'])
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'] = {
path: "",
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
}
}
//获取房源详情
let getHousingInfo = () => {
api.details({
uniqid: '44qeSnfmf9GD'
}).then(res => {
console.log(res)
if (res.code === 200) {
housingInfo['data'] = res.data
setHousingArr()
setNavigation()
distanceList.value = distanceList.value.concat(housingInfo['data']['info'].pointData)
distanceList.value.unshift({
address: true,
name: housingInfo['data']['info'].address,
})
concatInfo['data']=store.state.indexData.wechat
console.log(distanceList.value)
} else {
ElMessage({
message: res.message
})
}
})
}
//监听滚动条 //监听滚动条
const onPageSrcoll = (e) => { const onPageSrcoll = (e) => {
let body = document.documentElement ? document.documentElement : document.body ? let body = document.documentElement ? document.documentElement : document.body ?
@@ -699,6 +784,7 @@ const onPageSrcoll = (e) => {
} }
} }
onMounted(() => { onMounted(() => {
getHousingInfo()
setTimeout(() => { setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true); window.addEventListener('scroll', onPageSrcoll, true);
}, 1000) }, 1000)
@@ -796,11 +882,12 @@ img {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.third-concat{ .third-concat {
height:560px !important; height: 560px !important;
} }
.third-bg{
height:480px !important; .third-bg {
height: 480px !important;
} }
.pop-big-box { .pop-big-box {
@@ -1292,8 +1379,6 @@ img {
.user-type { .user-type {
margin-top: 15px; margin-top: 15px;
width: 43px;
height: 24px;
background: inherit; background: inherit;
background-color: rgba(98, 177, 255, 1); background-color: rgba(98, 177, 255, 1);
border: none; border: none;
@@ -1307,6 +1392,7 @@ img {
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
padding: 2px 3px;
} }
.time-box { .time-box {
@@ -1435,7 +1521,7 @@ img {
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 110px; height: 115px;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
@@ -1457,6 +1543,7 @@ img {
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 10px; border-radius: 10px;
z-index: 66;
.icon { .icon {
width: 30px; width: 30px;
@@ -1517,6 +1604,10 @@ img {
color: #7F7F7F; color: #7F7F7F;
font-size: 14px; font-size: 14px;
.title-box {
width: 65px;
}
.text { .text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400; font-weight: 400;
@@ -1756,7 +1847,7 @@ img {
flex-direction: column; flex-direction: column;
.home-icon { .home-icon {
background: #ffcc17; background: #ffcc17 !important;
} }
.icon-box { .icon-box {
@@ -1764,7 +1855,7 @@ img {
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: #50e3c2; background: #50e3c2;
margin-right: 10px; margin-right: 15px;
position: relative; position: relative;
} }
@@ -1800,15 +1891,6 @@ img {
color: #333; color: #333;
margin-left: 30px; margin-left: 30px;
} }
.distance-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #62B1FF;
margin-left: 5px;
}
} }
} }
@@ -1865,6 +1947,10 @@ img {
color: #000000; color: #000000;
} }
.text-c {
text-align: center
}
.far-s { .far-s {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400; font-weight: 400;