From 44406ee20916c4b4bdafcf411b1860010cbba4ca Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Mon, 24 Jul 2023 19:35:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E6=88=BF=E6=BA=90=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/detail/breadcrumb.vue |  19 +-
 src/components/detail/imageWatch.vue |  28 +-
 src/utils/api.js                     |   3 +
 src/views/detail.vue                 | 398 ++++++++++++++++-----------
 4 files changed, 279 insertions(+), 169 deletions(-)

diff --git a/src/components/detail/breadcrumb.vue b/src/components/detail/breadcrumb.vue
index 8a0471e..ff69ab5 100644
--- a/src/components/detail/breadcrumb.vue
+++ b/src/components/detail/breadcrumb.vue
@@ -11,7 +11,7 @@
         </div>
         <div class="dis-f al-item jus-bet title-box">
             <div class="detail-title">
-                房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住
+                {{ data['data']['info']&&data['data']['info'].subject }}
             </div>
             <div class="tool-btn-box dis-f al-item">
                 <div class="btn-s dis-f al-item jus-x">
@@ -37,21 +37,27 @@
   
 <script setup>
 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'
 
-defineProps({
+const props=defineProps({
     data: {
-        type: Array,
+        type: Object,
         default: function () {
-            return []
+            return {}
         }
     }
 })
+let data=reactive({})
 
 //导航数据
 let storeData = store.state.routeList
-console.log(storeData)
+console.log('storeData',storeData)
+
+watchEffect(()=>{
+    data['data']=props.data
+    console.log(data['data'])
+})
 
 </script>
 <style scoped>
@@ -90,7 +96,6 @@ img {
 
 .title-top-box {
     width: 1200px;
-    height: 186px;
     background: inherit;
     background-color: rgba(255, 255, 255, 1);
     box-sizing: border-box;
diff --git a/src/components/detail/imageWatch.vue b/src/components/detail/imageWatch.vue
index 5adfeaa..642703a 100644
--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@@ -1,13 +1,13 @@
 <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="s-w-100">
                 <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
                     <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">
                                 {{ item }}
-                                <img src="" class="img" alt="">
+                                <img :src="item&&item.url" class="img" alt="">
                             </div>
                         </div>
                     </el-carousel-item>
@@ -31,12 +31,12 @@
                 </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>
 </template>
   
 <script setup>
-import { reactive, onMounted, ref, defineProps } from 'vue'
+import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 
 const props = defineProps({
     list: {
@@ -44,9 +44,19 @@ const props = defineProps({
         default: function () {
             return [1, 2, 3, 4, 5]
         }
+    },
+    close:{
+        type:Function
+    },
+    show:{
+        type:Boolean,
+        default:false
     }
 })
+
+let show=props.show
 let list = props.list
+let close=props.close
 
 let carousel = ref(null)
 let imageTab = ref(0)
@@ -65,6 +75,12 @@ let next = () => {
     carousel.value.next()
     console.log(imageTab.value)
 }
+
+watchEffect(()=>{
+    show=props.show
+    list = props.list
+    console.log('url',list)
+})
 </script>
 <style scoped>
 img {
@@ -188,7 +204,7 @@ img {
     }
 
     .img-box {
-        width: 800px;
+        width:1200px;
         height: 600px;
         background: #fff;
         border-radius: 10px;
diff --git a/src/utils/api.js b/src/utils/api.js
index efd1e3f..0fcc07e 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -24,6 +24,9 @@ export default{
     },
     apartment:(params={})=>{//获取公寓列表
         return axios.get('/tenement/pc/api/apartment',params)
+    },
+    details:(params={})=>{//房源详情
+        return axios.post('/tenement/pc/api/details',params)
     }
     
 }
\ No newline at end of file
diff --git a/src/views/detail.vue b/src/views/detail.vue
index e624c11..31fb918 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -3,19 +3,27 @@
         <pageTopBar></pageTopBar>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
-                <breadcrumb></breadcrumb>
+                <breadcrumb :data="housingInfo['data']"></breadcrumb>
                 <el-affix :offset="0" @change="changeTitleType">
                     <div class="top-bar-box dis-f jus-x" v-show="titleType">
                         <div class="top-bar dis-f al-item jus-bet">
                             <div class="dis-f al-item">
                                 <span class="unit">HK$</span>
-                                <span class="rent">123456</span>
+                                <span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span>
                                 <span>/月</span>
                                 <div class="line"></div>
                                 <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="">
-                                    两房
+                                    {{ indexData['data'] &&
+                                        indexData['data']['config'] &&
+                                        indexData['data']['config']['type'][housingInfo['data'] &&
+                                            housingInfo['data'].info.type]
+                                    }}
                                 </div>
                             </div>
                             <div class="dis-f al-item">
@@ -37,7 +45,7 @@
                                     </div>
                                 </div>
                                 <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>
@@ -48,7 +56,9 @@
                 <div class="dis-f jus-bet" style="transform: translateY(-15px);">
                     <div class="info-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 class="dis-f al-item detail-condition-box">
                             <div class="condition condition-border">
@@ -56,10 +66,18 @@
                                     <div class="icon">
 
                                     </div>
-                                    整租
+                                    {{ indexData['data'] &&
+                                        indexData['data']['config'] &&
+                                        indexData['data']['config']['type'][housingInfo['data'] &&
+                                        housingInfo['data'].info.type.substring(0, 1)]
+                                    }}
                                 </div>
                                 <div class="type-text">
-                                    两房
+                                    {{ indexData['data'] &&
+                                        indexData['data']['config'] &&
+                                        indexData['data']['config']['type'][housingInfo['data'] &&
+                                        housingInfo['data'].info.type]
+                                    }}
                                 </div>
                             </div>
                             <div class="condition condition-border">
@@ -70,7 +88,9 @@
                                     租期
                                 </div>
                                 <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 class="condition condition-border">
@@ -81,18 +101,19 @@
                                     起租日期
                                 </div>
                                 <div class="type-text">
-                                    随时
+                                    {{ housingInfo['data'] && housingInfo['data'].info.leasetime || '随时' }}
                                 </div>
                             </div>
                         </div>
                         <div class="image-box">
                             <div class="dis-f al-item">
                                 <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="">
-                                <div class="num-box">2</div>
+                                <div class="num-box">{{housingInfo['data'] &&housingInfo['data'].info.picturegroup.length ||0 }}</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=""
                                     @click="moveImageList('left')">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
@@ -101,18 +122,18 @@
                                     @click="moveImageList('right')">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
                                     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 class="video" v-if="item === 1">
+                                        <div class="video" v-if="item && !item.thumbnail">
                                             <div class="icon-box dis-f jus-x al-item">
                                                 <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
                                             </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="">
                                         </div>
-                                        <div class="img" v-if="item > 1"
+                                        <div class="img" v-if="item && item.thumbnail"
                                             :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="">
                                         </div>
                                     </div>
@@ -127,46 +148,65 @@
                                 </span>
                             </div>
                             <div class="info-box-s">
-                                <div class="info">
-                                    <span>
+                                <div class="info dis-f al-item">
+                                    <div class="title-box">
                                         房屋类型
-                                    </span>
+                                    </div>
                                     <span class="text">
-                                        洋楼
+                                        {{
+                                            indexData['data'] && indexData['data']['config']['property'][housingInfo['data'] &&
+                                            housingInfo['data'].info.property]
+                                        }}
                                     </span>
                                 </div>
-                                <div class="info">
-                                    <span>
+                                <div class="info dis-f al-item">
+                                    <div class="title-box">
                                         所在楼层
-                                    </span>
+                                    </div>
                                     <span class="text">
-                                        28
-                                    </span>|<span class="text" style="margin-left:0;">
-                                        有电梯
+                                        {{ housingInfo['data'] && housingInfo['data'].info.floor }}
+                                    </span>
+                                    |
+                                    <span class="text" style="margin-left:0;">
+                                        {{
+                                            indexData['data'] && indexData['data']['config']['elevator'][housingInfo['data'] &&
+                                            housingInfo['data'].info.elevator]
+                                        }}
                                     </span>
                                 </div>
-                                <div class="info">
-                                    <span>
+                                <div class="info dis-f al-item">
+                                    <div class="title-box">
                                         晾晒区
-                                    </span>
+                                    </div>
                                     <span class="text">
-                                        阳台
+                                        {{
+                                            indexData['data'] && housingInfo['data'] && housingInfo['data'].info.sunshinearea
+                                            !== -1 ?
+                                            indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
+                                            housingInfo['data'].info.sunshinearea] : ''
+                                        }}
                                     </span>
                                 </div>
-                                <div class="info" style="margin-top:30px;">
-                                    <span>
+                                <div class="info dis-f al-item" style="margin-top:30px;">
+                                    <div class="title-box">
                                         面积
-                                    </span>
+                                    </div>
                                     <span class="text">
-                                        680 平方呎
+                                        {{
+                                            housingInfo['data'] && housingInfo['data'].info.acreage ? housingInfo['data'] &&
+                                        housingInfo['data'].info.acreage : 0
+                                        }} 平方呎
                                     </span>
                                 </div>
-                                <div class="info" style="margin-top:30px;">
-                                    <span>
+                                <div class="info dis-f al-item" style="margin-top:30px;">
+                                    <div class="title-box">
                                         性别要求
-                                    </span>
+                                    </div>
                                     <span class="text">
-                                        男女皆可
+                                        {{
+                                            indexData['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
+                                                housingInfo['data'].info.gender]
+                                        }}
                                     </span>
                                 </div>
                             </div>
@@ -199,33 +239,28 @@
                                         <span class="title">房源距离院校</span>
                                         <img src="../assets/img/detail/close.png" class="close-icon" alt="">
                                     </div>
-                                    <div class="distance-info-data dis-f">
-                                        <!-- <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="distance-info-data dis-f" v-if="distanceList.length > 0">
                                         <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
                                             :key="index" :class="{ 'mg-t-50': index > 0 }">
-                                            <div class="icon-box dis-f al-item jus-x">
+                                            <div class="icon-box dis-f al-item jus-x"
+                                                :class="{ 'home-icon': item.address }">
                                                 <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="">
-                                                <img src="../assets/img/detail/home.png" class="icon" alt="">
                                             </div>
-                                            123
-                                            <div>
+                                            {{ item && item.name }}
+                                            <div v-for="(items,i) in item.point" :key="i">
                                                 <span class="address-info">
-                                                    北门
+                                                    {{ items.title }}
                                                 </span>
-                                                <span class="distance-text">
+                                                <span 
+                                                    v-html="setDistanceList(items &&`${items.distance}`)">
+                                                </span>
+                                                <!-- <span class="distance-text">
                                                     1.1公里
-                                                </span>
+                                                </span> -->
                                             </div>
                                         </div>
 
@@ -235,17 +270,22 @@
                                     <!-- <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="line-school-box dis-f al-item" style="justify-content:space-around;">
-                                            <div v-for="item in schoolArr" class="box-text">
-                                                <div :class="{ 'far-s': item.num > 4 }">
-                                                    {{ item.num }}km
+                                            <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id">
+                                                <div :class="{ 'far-s': item && item.recently_distance > 4 }"
+                                                    v-if="!item.address" class="text-c">
+                                                    {{ item && item.recently_distance }}km
                                                 </div>
-                                                <div class="dis-f jus-x">
-                                                    <img src="../assets/img/detail/markIcon.svg" v-if="item.num <= 4"
-                                                        class="marker-icon" alt="">
-                                                    <img src="../assets/img/detail/markIconNot.svg" v-if="item.num > 4"
-                                                        class="marker-icon" alt="">
+                                                <div class="dis-f jus-x" v-if="!item.address">
+                                                    <img src="../assets/img/detail/markIcon.svg"
+                                                        v-if="item && item.recently_distance <= 4" class="marker-icon"
+                                                        alt="">
+                                                    <img src="../assets/img/detail/markIconNot.svg"
+                                                        v-if="item && item.recently_distance > 4" class="marker-icon"
+                                                        alt="">
                                                 </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>
@@ -265,30 +305,35 @@
                                 <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
                                 <span class="title">更多介绍</span>
                             </div>
-                            <div class="introduce-text">
-                                123
+                            <div class="introduce-text" v-html="housingInfo['data']&&housingInfo['data'].info.introduction">
                             </div>
                         </div>
                         <div class="houseing-info-box dis-f al-item jus-bet">
                             <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="text">123</span>
+                                    浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view }}</span>
                                 </span>
                             </div>
                             <div class="dis-f al-item houseing-info-box-s">
                                 <span>
-                                    收藏: <span class="text">9</span>
+                                    收藏: <span class="text">
+                                        {{ housingInfo['data'] && housingInfo['data'].info.count_fav }}
+                                    </span>
                                 </span>
                             </div>
                             <div class="dis-f al-item houseing-info-box-s">
                                 <span>
-                                    发布: <span class="text">2022.08.10 19:00</span>
+                                    发布: <span class="text">
+                                        {{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
+                                    </span>
                                 </span>
                             </div>
                             <div class="dis-f al-item houseing-info-box-s" style="border-right:0px">
                                 <span>
-                                    更新: <span class="text">2022.08.10 19:00</span>
+                                    更新: <span class="text">
+                                        {{ housingInfo['data'] && housingInfo['data'].info.updatetime }}
+                                    </span>
                                 </span>
                             </div>
                         </div>
@@ -301,12 +346,12 @@
                                 <div>
                                     如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                     <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>
                                             <el-dropdown-menu>
                                                 <el-dropdown-item>
                                                     <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="">
                                                     </div>
                                                 </el-dropdown-item>
@@ -317,28 +362,35 @@
                                 </div>
                             </div>
                             <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 class="right-tool-box">
                             <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 class="user-name">
-                                123
+                                {{ housingInfo['data'] && housingInfo['data'].info.author }}
                             </div>
                             <div class="dis-f jus-x">
                                 <div class="user-type">
-                                    房东
+                                    {{
+                                        indexData['data'] && indexData['data']['config']['intermediary'][housingInfo['data'] &&
+                                        housingInfo['data'].info.intermediary]
+                                    }}
                                 </div>
                             </div>
                             <div class="dis-f al-item jus-x time-box">
                                 <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
                                 <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 class="dis-f jus-x">
                                 <div class="contact-btn">
@@ -370,7 +422,7 @@
                             </div>
                             <div class="dis-f jus-x ">
                                 <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 class="dis-f jus-x s-w-100">
@@ -386,7 +438,7 @@
             </div>
         </div>
         <footerTool></footerTool>
-        <div class="pop-box">
+        <div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
             <!-- 两种信息 -->
             <!-- third-concat -->
             <div class="pop-big-box ">
@@ -394,7 +446,7 @@
                     <div class="pop-big-bg dis-f jus-x al-item">
                         <div class="user-liner-box dis-f al-item">
                             <!-- class='s-w-100' -->
-                            <div style="padding:0 0 30px 0;"> 
+                            <div style="padding:0 0 30px 0;">
                                 <div class="liner-title">
                                     联系方式
                                 </div>
@@ -548,7 +600,7 @@
             </div> -->
         </div>
     </div>
-    <!-- <watchImage></watchImage> -->
+    <watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
     <!-- 右下角咨询 -->
     <circle-btn></circle-btn>
 </template>
@@ -562,15 +614,21 @@ import footerTool from '@/components/footer/footer.vue'
 import watchImage from '../components/detail/imageWatch.vue'
 import breadcrumb from '../components/detail/breadcrumb.vue'
 import { ElMessage } from 'element-plus'
+import store from '@/store';
 
 //
 let loadMore = ref(true)
 let pages = ref(1)
+//查看图片
+let imageShow= ref(false)
+let cloaseImageShow=()=>{
+    imageShow.value=false
+}
 
 //视频实例
 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)
 //计时器
@@ -579,7 +637,7 @@ let interval = ''
 let moveImageList = (type) => {
     if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
     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) => {
@@ -595,57 +653,24 @@ let setOffsetWidth = (num, type) => {
 let imgData = ref(null)
 //获取图片宽度
 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)
 //学校地址详情
@@ -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) => {
     let body = document.documentElement ? document.documentElement : document.body ?
@@ -699,6 +784,7 @@ const onPageSrcoll = (e) => {
     }
 }
 onMounted(() => {
+    getHousingInfo()
     setTimeout(() => {
         window.addEventListener('scroll', onPageSrcoll, true);
     }, 1000)
@@ -796,11 +882,12 @@ img {
     justify-content: center;
     align-items: center;
 
-    .third-concat{
-        height:560px !important;
+    .third-concat {
+        height: 560px !important;
     }
-    .third-bg{
-        height:480px !important;
+
+    .third-bg {
+        height: 480px !important;
     }
 
     .pop-big-box {
@@ -1292,8 +1379,6 @@ img {
 
     .user-type {
         margin-top: 15px;
-        width: 43px;
-        height: 24px;
         background: inherit;
         background-color: rgba(98, 177, 255, 1);
         border: none;
@@ -1307,6 +1392,7 @@ img {
         color: #FFFFFF;
         text-align: center;
         line-height: 24px;
+        padding: 2px 3px;
     }
 
     .time-box {
@@ -1435,7 +1521,7 @@ img {
             padding: 0 20px;
             position: relative;
             overflow: hidden;
-            height: 110px;
+            height: 115px;
             width: 100%;
             cursor: pointer;
             margin-top: 20px;
@@ -1457,6 +1543,7 @@ img {
                     width: 100px;
                     height: 100px;
                     border-radius: 10px;
+                    z-index: 66;
 
                     .icon {
                         width: 30px;
@@ -1517,6 +1604,10 @@ img {
                 color: #7F7F7F;
                 font-size: 14px;
 
+                .title-box {
+                    width: 65px;
+                }
+
                 .text {
                     font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                     font-weight: 400;
@@ -1756,7 +1847,7 @@ img {
                 flex-direction: column;
 
                 .home-icon {
-                    background: #ffcc17;
+                    background: #ffcc17 !important;
                 }
 
                 .icon-box {
@@ -1764,7 +1855,7 @@ img {
                     height: 32px;
                     border-radius: 50%;
                     background: #50e3c2;
-                    margin-right: 10px;
+                    margin-right: 15px;
                     position: relative;
                 }
 
@@ -1800,15 +1891,6 @@ img {
                         color: #333;
                         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;
             }
 
+            .text-c {
+                text-align: center
+            }
+
             .far-s {
                 font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                 font-weight: 400;