refactor: 移除调试日志并优化代码结构
移除多个组件中的调试日志语句，优化代码结构以提高可读性和维护性。同时调整了部分样式和逻辑，确保功能一致性和用户体验。
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -2,7 +2,7 @@
|
||||
<page-top-bar></page-top-bar>
|
||||
|
||||
<div class="content wid1200">
|
||||
<div class="header">
|
||||
<div class="header" ref="headerRef">
|
||||
<div class="top flexflex">
|
||||
<div class="brand-abstract flexflex">
|
||||
<div class="flexacenter" style="height: min-content">
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="figure flexacenter">
|
||||
<div class="figure flexacenter" v-if="distancePitch?.alias">
|
||||
距离
|
||||
<div class="school">{{ distancePitch.alias }}</div>
|
||||
{{ distancePitch.distance }}km
|
||||
@@ -100,7 +100,7 @@
|
||||
</div>
|
||||
|
||||
<div class="vehicle flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in distancePitch.obj" :key="index">
|
||||
<div class="item flexacenter" v-for="(item, index) in distancePitch?.obj" :key="index">
|
||||
<img v-if="index == 'walking'" class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
|
||||
<img v-if="index == 'driving'" class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
|
||||
<img v-if="index == 'transit'" class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
|
||||
@@ -122,7 +122,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="operate-box-bj flexcenter">
|
||||
<div class="operate-box-bj flexcenter" v-if="isOperateShow">
|
||||
<div class="operate-box flexacenter" aria-label="详情的导航栏">
|
||||
<div class="nav-box flexacenter">
|
||||
<div class="nav-item flexcenter" :class="{ pitch: navTab == item.value }" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @click="handleClickNav(item.value)">{{ item["value"] == "roomEle" ? `${item["name"]} ${roomList.length}` : item["name"] }}</div>
|
||||
@@ -142,107 +142,108 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="details-left flex1" ref="detailsLeft">
|
||||
<div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
|
||||
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
|
||||
<img class="head" src="@/assets/img/publicImage/special-title.png" />
|
||||
<img class="gift" src="@/assets/img/publicImage/special-gift.png" />
|
||||
<img class="star1" src="@/assets/img/publicImage/special-star-1.png" />
|
||||
<img class="star2" src="@/assets/img/publicImage/special-star-2.png" />
|
||||
<img class="star3" src="@/assets/img/publicImage/special-star-3.png" />
|
||||
<img class="fireworks" src="@/assets/img/publicImage/special-fireworks.png" />
|
||||
<div class="board">
|
||||
<div class="gray">
|
||||
<p class="text" user-select>{{ info.promotionalactivities }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="bottom-white" src="@/assets/img/publicImage/special-bottom-white.svg" />
|
||||
<img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" />
|
||||
</div>
|
||||
|
||||
<div class="remark" ref="inspectEle" v-if="spotSum > 0" @click="openInspectPop">
|
||||
<div class="head flexacenter">
|
||||
<div class="text">寄托实地考察</div>
|
||||
<div class="more flexacenter">
|
||||
{{ spotSum }}
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect flexacenter">
|
||||
<div class="left flex1">
|
||||
<div class="info flexacenter">
|
||||
<img class="avatar" :src="spotObj.avatar" />
|
||||
<div class="username">{{ spotObj.nickname }}</div>
|
||||
<img class="label" :src="spotObj.groupimage" />
|
||||
<div class="details-box flexflex" ref="detailsBox">
|
||||
<div class="flex1">
|
||||
<div class="details-left flex1" :class="{ fixed: isFixed }" :style="{ bottom: FixedBottom + 'px' }" ref="detailsLeft">
|
||||
<div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
|
||||
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
|
||||
<img class="head" src="@/assets/img/publicImage/special-title.png" />
|
||||
<img class="gift" src="@/assets/img/publicImage/special-gift.png" />
|
||||
<img class="star1" src="@/assets/img/publicImage/special-star-1.png" />
|
||||
<img class="star2" src="@/assets/img/publicImage/special-star-2.png" />
|
||||
<img class="star3" src="@/assets/img/publicImage/special-star-3.png" />
|
||||
<img class="fireworks" src="@/assets/img/publicImage/special-fireworks.png" />
|
||||
<div class="board">
|
||||
<div class="gray">
|
||||
<p class="text" user-select>{{ info.promotionalactivities }}</p>
|
||||
</div>
|
||||
<div class="explain two-line-text">{{ spotObj.content }}</div>
|
||||
</div>
|
||||
<img class="inspect-img" :src="spotObj.sources[0].thumbnail" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remark" ref="followEle" v-if="returnSum > 0" @click="openInspectPop">
|
||||
<div class="head flexacenter">
|
||||
<div class="text">寄托回访</div>
|
||||
<div class="more flexacenter">
|
||||
{{ returnSum }}
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<img class="bottom-white" src="@/assets/img/publicImage/special-bottom-white.svg" />
|
||||
<img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" />
|
||||
</div>
|
||||
|
||||
<div class="return-visit flexacenter" scroll-x>
|
||||
<template v-for="(item, index) in remarkList" :key="index">
|
||||
<div class="item flex1" v-if="item.typeid == 2">
|
||||
<div class="remark" ref="inspectEle" v-if="spotSum > 0" @click="openInspectPop">
|
||||
<div class="head flexacenter">
|
||||
<div class="text">寄托实地考察</div>
|
||||
<div class="more flexacenter">
|
||||
{{ spotSum }}
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect flexacenter">
|
||||
<div class="left flex1">
|
||||
<div class="info flexacenter">
|
||||
<img class="avatar" :src="item.avatar" />
|
||||
<div class="username">{{ item.nickname }}</div>
|
||||
<div class="label flexacenter">已入住</div>
|
||||
<img class="avatar" :src="spotObj.avatar" />
|
||||
<div class="username">{{ spotObj.nickname }}</div>
|
||||
<img class="label" :src="spotObj.groupimage" />
|
||||
</div>
|
||||
<div class="explain two-line-text">{{ item.content }}</div>
|
||||
<div class="explain two-line-text">{{ spotObj.content }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房间类型 -->
|
||||
<div class="type-box" v-if="roomList.length !== 0" ref="roomEle">
|
||||
<div class="item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||
<div class="media" v-if="item.thumbnail" @click="cloaseImageShow([...item['videos'], ...item['images']], 0, `media${index}`)">
|
||||
<img class="icon" :src="item.thumbnail" />
|
||||
<img v-if="item.isVideo" class="play" src="@/assets/img/publicImage/video-icon.svg" />
|
||||
</div>
|
||||
<div class="info flex1">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="tags flexflex">
|
||||
<div class="tags-item green" v-if="item.allowance">剩余{{ item.allowance }}间</div>
|
||||
<div class="tags-item" v-for="(item, index) in item.tags" key="index">{{ item }}</div>
|
||||
</div>
|
||||
<div class="price flexflex">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="number">{{ item.discountprice || item.price }}</div>
|
||||
<div class="month">/月</div>
|
||||
|
||||
<div class="original" v-if="item.discountprice">HK$ {{ item.price }}/月</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flexacenter">
|
||||
<div v-if="item.iscollection" class="collect flexcenter red" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-red.svg" />
|
||||
已收藏
|
||||
</div>
|
||||
<div v-else class="collect flexcenter" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" />
|
||||
收藏
|
||||
</div>
|
||||
<div v-if="item.status == 1" class="consult flexcenter" @click="modificationContact">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
|
||||
咨询
|
||||
</div>
|
||||
<div v-else class="full-rent flexcenter">已租满</div>
|
||||
<img class="inspect-img" :src="spotObj.sources[0].thumbnail" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||
|
||||
<div class="remark" ref="followEle" v-if="returnSum > 0" @click="openInspectPop">
|
||||
<div class="head flexacenter">
|
||||
<div class="text">寄托回访</div>
|
||||
<div class="more flexacenter">
|
||||
{{ returnSum }}
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="return-visit flexacenter" scroll-x>
|
||||
<template v-for="(item, index) in remarkList" :key="index">
|
||||
<div class="item flex1" v-if="item.typeid == 2">
|
||||
<div class="info flexacenter">
|
||||
<img class="avatar" :src="item.avatar" />
|
||||
<div class="username">{{ item.nickname }}</div>
|
||||
<div class="label flexacenter">已入住</div>
|
||||
</div>
|
||||
<div class="explain two-line-text">{{ item.content }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房间类型 -->
|
||||
<div class="type-box" v-if="roomList.length !== 0" ref="roomEle">
|
||||
<div class="item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||
<div class="media" v-if="item.thumbnail" @click="cloaseImageShow([...item['videos'], ...item['images']], 0, `media${index}`)">
|
||||
<img class="icon" :src="item.thumbnail" />
|
||||
<img v-if="item.isVideo" class="play" src="@/assets/img/publicImage/video-icon.svg" />
|
||||
</div>
|
||||
<div class="info flex1">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="tags flexflex">
|
||||
<div class="tags-item green" v-if="item.allowance">剩余{{ item.allowance }}间</div>
|
||||
<div class="tags-item" v-for="(item, index) in item.tags" key="index">{{ item }}</div>
|
||||
</div>
|
||||
<div class="price flexflex">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="number">{{ item.discountprice || item.price }}</div>
|
||||
<div class="month">/月</div>
|
||||
|
||||
<div class="original" v-if="item.discountprice">HK$ {{ item.price }}/月</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flexacenter">
|
||||
<div v-if="item.iscollection" class="collect flexcenter red" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-red.svg" />
|
||||
已收藏
|
||||
</div>
|
||||
<div v-else class="collect flexcenter" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" />
|
||||
收藏
|
||||
</div>
|
||||
<div v-if="item.status == 1" class="consult flexcenter" @click="modificationContact">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
|
||||
咨询
|
||||
</div>
|
||||
<div v-else class="full-rent flexcenter">已租满</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||
<div class="type-left flex1">
|
||||
<div class="type-name">{{ item["name"] }}</div>
|
||||
<div class="type-tags flexacenter" v-if="item.allowance || item.tags.length != 0">
|
||||
@@ -285,27 +286,27 @@
|
||||
<div class="full-occupancy flexcenter" v-else>已租满</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 费用说明 -->
|
||||
<div class="details-item cost" v-if="costList.length > 0" ref="costEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" />
|
||||
费用说明
|
||||
</div>
|
||||
<div class="cost-box">
|
||||
<div class="item" v-for="(item, index) in costList" :key="index">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" :src="require('@/assets/img/apartmentDetail/' + item.img)" />
|
||||
{{ item.name }}
|
||||
|
||||
<!-- 费用说明 -->
|
||||
<div class="details-item cost" v-if="costList.length > 0" ref="costEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" />
|
||||
费用说明
|
||||
</div>
|
||||
<div class="cost-box">
|
||||
<div class="item" v-for="(item, index) in costList" :key="index">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" :src="require('@/assets/img/apartmentDetail/' + item.img)" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="explain">{{ item.text }}</div>
|
||||
</div>
|
||||
<div class="explain">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠活动 -->
|
||||
<!-- <div class="details-item special-offer" v-if="info['promotionalactivities']" ref="specialEle">
|
||||
<!-- 优惠活动 -->
|
||||
<!-- <div class="details-item special-offer" v-if="info['promotionalactivities']" ref="specialEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg" />
|
||||
优惠活动
|
||||
@@ -313,166 +314,166 @@
|
||||
<div class="text" v-html="info['promotionalactivities']"></div>
|
||||
</div> -->
|
||||
|
||||
<!-- 地址 -->
|
||||
<div class="details-item location" v-if="info.address" ref="addressEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
|
||||
{{ info.location || "交通" }}
|
||||
</div>
|
||||
<view-map ref="viewMapRef" :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
|
||||
<!-- 地址 -->
|
||||
<div class="details-item location" v-if="info.address" ref="addressEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
|
||||
{{ info.location || "交通" }}
|
||||
</div>
|
||||
<view-map ref="viewMapRef" :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
|
||||
|
||||
<template v-if="false">
|
||||
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
|
||||
<template #reference>
|
||||
<div class="annex-school-box flexacenter">
|
||||
<div class="annex-left flex1 flexacenter">
|
||||
<div class="annex-school-item flexflex flex1" @click="selectIndex()" v-if="specialSchoolDistance">
|
||||
<div class="distance-item-value special flexacenter">
|
||||
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
|
||||
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||||
<div class="tool-time">{{ specialSchoolDistance?.durationText }}</div>
|
||||
</div>
|
||||
<div class="flexcenter">
|
||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||||
</div>
|
||||
<div class="alias-text flexcenter">{{ specialSchoolDistance.alias || "都大" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="annex-school-item flexflex flex1" v-for="(item, index) in annexSchoolOmit" :key="index" @click="selectIndex(item.id)">
|
||||
<div class="distance-item-value flexacenter">
|
||||
<div class="mileage">{{ item.distanceText || "2.0km" }}</div>
|
||||
<img v-if="!item.list[0].publictransport" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||||
<div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 || "41min" }}</div>
|
||||
</div>
|
||||
<div class="flexcenter">
|
||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||||
</div>
|
||||
<div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
|
||||
</div>
|
||||
<div class="line-img"></div>
|
||||
</div>
|
||||
<div class="annex-btn flexcenter">
|
||||
<img class="annex-btn-bj" src="@/assets/img/detail/infoBtnBg.svg" />
|
||||
更多
|
||||
<img class="annex-btn-icon" src="@/assets/img/detail/arrowIcon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="distance-info-box pos-r" :style="{ height: `${50 * annexSchoolList.length + 70}px` }">
|
||||
<div class="title-box dis-f al-item jus-x">
|
||||
房源
|
||||
<img class="distance-arrow" src="@/assets/img/detail/arrow-circle-blue.svg" />
|
||||
院校
|
||||
<img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance = false" alt="" />
|
||||
</div>
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="distance-info-left">
|
||||
<div class="distance-info-left-item flexcenter" :class="{ pitch: index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||||
</div>
|
||||
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
|
||||
<div class="distance-info-right flex1">
|
||||
<div class="distance-header-box flexacenter">
|
||||
<div class="flexacenter">
|
||||
<div class="distance-header-icon flexcenter">
|
||||
<img src="@/assets/img/detail/home.png" alt="" class="distance-header-img" />
|
||||
</div>
|
||||
{{ targetAcademyPitch.school }}
|
||||
<template v-if="false">
|
||||
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
|
||||
<template #reference>
|
||||
<div class="annex-school-box flexacenter">
|
||||
<div class="annex-left flex1 flexacenter">
|
||||
<div class="annex-school-item flexflex flex1" @click="selectIndex()" v-if="specialSchoolDistance">
|
||||
<div class="distance-item-value special flexacenter">
|
||||
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
|
||||
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||||
<div class="tool-time">{{ specialSchoolDistance?.durationText }}</div>
|
||||
</div>
|
||||
<div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
|
||||
<div class="flexcenter">
|
||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||||
</div>
|
||||
<div class="alias-text flexcenter">{{ specialSchoolDistance.alias || "都大" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="academy-school-item" v-for="(item, index) in targetAcademyPitch.list" :key="index">
|
||||
<div class="academy-school-item-header flexacenter">
|
||||
<div class="academy-school-item-left flexacenter">
|
||||
<div class="academy-school-item-name">{{ item.title }}</div>
|
||||
<div class="academy-school-item-number">{{ item.distanceText || "1km" }}</div>
|
||||
</div>
|
||||
<div class="academy-school-item-right flexacenter">
|
||||
<img v-if="item.publictransport" class="academy-school-item-icon" src="@/assets/img/detail/subway-icon.png" mode="widthFix" />
|
||||
<img v-else class="academy-school-item-icon" src="@/assets/img/detail/walk-icon.png" mode="widthFix" />
|
||||
<div class="academy-school-item-time">{{ item?.publictransport?.durationText || item.durationText || "1分钟" }}</div>
|
||||
</div>
|
||||
<img class="arrow-green" mode="widthFix" src="@/assets/img/detail/arrow-green.svg" />
|
||||
<div class="annex-school-item flexflex flex1" v-for="(item, index) in annexSchoolOmit" :key="index" @click="selectIndex(item.id)">
|
||||
<div class="distance-item-value flexacenter">
|
||||
<div class="mileage">{{ item.distanceText || "2.0km" }}</div>
|
||||
<img v-if="!item.list[0].publictransport" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||||
<div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 || "41min" }}</div>
|
||||
</div>
|
||||
<div class="academy-school-item-journey" v-if="item.publictransport">
|
||||
<div class="journey-item flexacenter" v-for="(item, index) in item.publictransport.segments" :key="index">
|
||||
<div class="circle"></div>
|
||||
<!-- 步行 骑行 -->
|
||||
<div v-if="item.type == 'walking'" class="journey-value flex1">步行{{ item.distanceText }}</div>
|
||||
<!-- 地铁 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
|
||||
<div class="subway-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
<div class="flexcenter">
|
||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||||
</div>
|
||||
<div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
|
||||
</div>
|
||||
<div class="line-img"></div>
|
||||
</div>
|
||||
<div class="annex-btn flexcenter">
|
||||
<img class="annex-btn-bj" src="@/assets/img/detail/infoBtnBg.svg" />
|
||||
更多
|
||||
<img class="annex-btn-icon" src="@/assets/img/detail/arrowIcon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="distance-info-box pos-r" :style="{ height: `${50 * annexSchoolList.length + 70}px` }">
|
||||
<div class="title-box dis-f al-item jus-x">
|
||||
房源
|
||||
<img class="distance-arrow" src="@/assets/img/detail/arrow-circle-blue.svg" />
|
||||
院校
|
||||
<img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance = false" alt="" />
|
||||
</div>
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="distance-info-left">
|
||||
<div class="distance-info-left-item flexcenter" :class="{ pitch: index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||||
</div>
|
||||
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
|
||||
<div class="distance-info-right flex1">
|
||||
<div class="distance-header-box flexacenter">
|
||||
<div class="flexacenter">
|
||||
<div class="distance-header-icon flexcenter">
|
||||
<img src="@/assets/img/detail/home.png" alt="" class="distance-header-img" />
|
||||
</div>
|
||||
<!-- 公交 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
|
||||
<div class="bus-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
{{ targetAcademyPitch.school }}
|
||||
</div>
|
||||
<div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
|
||||
</div>
|
||||
|
||||
<div class="academy-school-item" v-for="(item, index) in targetAcademyPitch.list" :key="index">
|
||||
<div class="academy-school-item-header flexacenter">
|
||||
<div class="academy-school-item-left flexacenter">
|
||||
<div class="academy-school-item-name">{{ item.title }}</div>
|
||||
<div class="academy-school-item-number">{{ item.distanceText || "1km" }}</div>
|
||||
</div>
|
||||
<div class="academy-school-item-right flexacenter">
|
||||
<img v-if="item.publictransport" class="academy-school-item-icon" src="@/assets/img/detail/subway-icon.png" mode="widthFix" />
|
||||
<img v-else class="academy-school-item-icon" src="@/assets/img/detail/walk-icon.png" mode="widthFix" />
|
||||
<div class="academy-school-item-time">{{ item?.publictransport?.durationText || item.durationText || "1分钟" }}</div>
|
||||
</div>
|
||||
<img class="arrow-green" mode="widthFix" src="@/assets/img/detail/arrow-green.svg" />
|
||||
</div>
|
||||
<div class="academy-school-item-journey" v-if="item.publictransport">
|
||||
<div class="journey-item flexacenter" v-for="(item, index) in item.publictransport.segments" :key="index">
|
||||
<div class="circle"></div>
|
||||
<!-- 步行 骑行 -->
|
||||
<div v-if="item.type == 'walking'" class="journey-value flex1">步行{{ item.distanceText }}</div>
|
||||
<!-- 地铁 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
|
||||
<div class="subway-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
</div>
|
||||
<!-- 公交 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
|
||||
<div class="bus-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<!-- 交通 -->
|
||||
<div class="traffic-box" v-if="info['traffic']">
|
||||
<!-- <div class="traffic-title item-title flexcenter">交通</div> -->
|
||||
<div class="traffic-content" v-html="info['traffic']"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公寓设施 -->
|
||||
<div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
|
||||
公寓设施
|
||||
<!-- 交通 -->
|
||||
<div class="traffic-box" v-if="info['traffic']">
|
||||
<!-- <div class="traffic-title item-title flexcenter">交通</div> -->
|
||||
<div class="traffic-content" v-html="info['traffic']"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="facility-box">
|
||||
<div class="item" v-for="(item, index) in facilitylist" :key="index">
|
||||
<div class="head">{{ item.name }}（{{ item.label.length }}）</div>
|
||||
<div class="label flexflex">
|
||||
<div class="label-item flexacenter" v-for="(item, index) in item.label" :key="index">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
|
||||
{{ item }}
|
||||
<!-- 公寓设施 -->
|
||||
<div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
|
||||
公寓设施
|
||||
</div>
|
||||
|
||||
<div class="facility-box">
|
||||
<div class="item" v-for="(item, index) in facilitylist" :key="index">
|
||||
<div class="head">{{ item.name }}（{{ item.label.length }}）</div>
|
||||
<div class="label flexflex">
|
||||
<div class="label-item flexacenter" v-for="(item, index) in item.label" :key="index">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box flexflex" v-if="item.images.length > 0">
|
||||
<div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.imageurl)">
|
||||
<img class="icon" :src="item.thumbnail" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="img-box flexflex" v-if="item.images.length > 0">
|
||||
<div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.imageurl)">
|
||||
<img class="icon" :src="item.thumbnail" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-btn flexcenter" v-if="isHideFacilities" @click="openFacilities">
|
||||
展开全部
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-btn flexcenter" v-if="isHideFacilities" @click="openFacilities">
|
||||
展开全部
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房源详情 -->
|
||||
<div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
|
||||
房源详情
|
||||
<!-- 房源详情 -->
|
||||
<div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
|
||||
房源详情
|
||||
</div>
|
||||
<div class="text" v-html="info['message']"></div>
|
||||
<div class="bottom-btn flexcenter" v-if="isHideDetails" @click="openDetails">
|
||||
展开全部
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text" v-html="info['message']"></div>
|
||||
<div class="bottom-btn flexcenter" v-if="isHideDetails" @click="openDetails">
|
||||
展开全部
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公寓设施 -->
|
||||
<!-- <div class="details-item apartment-facilities" v-if="info['facilities']" ref="facilitiesEle">
|
||||
<!-- 公寓设施 -->
|
||||
<!-- <div class="details-item apartment-facilities" v-if="info['facilities']" ref="facilitiesEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
|
||||
公寓设施
|
||||
@@ -494,32 +495,34 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 生活 -->
|
||||
<div class="details-item life" v-if="info['life']" ref="lifeEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/live.png" />
|
||||
生活配套
|
||||
<!-- 生活 -->
|
||||
<div class="details-item life" v-if="info['life']" ref="lifeEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/live.png" />
|
||||
生活配套
|
||||
</div>
|
||||
<div class="text" v-html="info['life']"></div>
|
||||
</div>
|
||||
<div class="text" v-html="info['life']"></div>
|
||||
</div>
|
||||
|
||||
<!-- 品牌介绍 -->
|
||||
<div class="details-item company" v-if="company" ref="companyEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" style="width: 20px; height: 20px" src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
||||
品牌介绍
|
||||
<!-- 品牌介绍 -->
|
||||
<div class="details-item company" v-if="company" ref="companyEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" style="width: 20px; height: 20px" src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
||||
品牌介绍
|
||||
</div>
|
||||
<img class="company-img flexflex" v-lazy="company['imageurl']" />
|
||||
<div class="text" v-html="company['introduction']"></div>
|
||||
</div>
|
||||
<img class="company-img flexflex" v-lazy="company['imageurl']" />
|
||||
<div class="text" v-html="company['introduction']"></div>
|
||||
</div>
|
||||
|
||||
<div class="details-item hint-box">
|
||||
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
|
||||
<div class="hint-item"></div>
|
||||
<div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
|
||||
<div class="details-item hint-box">
|
||||
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
|
||||
<div class="hint-item"></div>
|
||||
<div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-right flexacenter">
|
||||
|
||||
<div class="details-right flexacenter" ref="detailsRigth">
|
||||
<phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode>
|
||||
<groupqrcode type="apartment"></groupqrcode>
|
||||
<!-- 同品牌公寓 -->
|
||||
@@ -692,7 +695,7 @@ watch(route, () => {
|
||||
mediaBtnstate.value = {};
|
||||
|
||||
slideshowList.value = null;
|
||||
detailsLeft.value = null;
|
||||
// detailsLeft.value = null;
|
||||
token = "";
|
||||
|
||||
carouselIndex.value = 0;
|
||||
@@ -792,7 +795,7 @@ const facilityKeyName = {
|
||||
room: "房间设施",
|
||||
};
|
||||
|
||||
const facilityArr = ["public", "room", "service", "sport", "outdoor", "security"]; // 公寓设施 顺序
|
||||
const facilityArr = ["room", "public", "service", "sport", "outdoor", "security"]; // 公寓设施 顺序
|
||||
let facilitylist = ref([]);
|
||||
let costList = ref([]);
|
||||
|
||||
@@ -1105,7 +1108,9 @@ const handleNavData = () => {
|
||||
|
||||
// 处理点击nav 滚动事件
|
||||
const handleClickNav = (value) => {
|
||||
let scrollTop = eval(value).value.offsetTop + 136;
|
||||
const headerHeight = headerRef.value.getBoundingClientRect().height + 20 + 260 - 36 - 20;
|
||||
|
||||
let scrollTop = eval(value).value.offsetTop + headerHeight;
|
||||
window.scrollTo({ top: scrollTop, behavior: "smooth" });
|
||||
};
|
||||
|
||||
@@ -1211,6 +1216,7 @@ const slideshowItem = (index) => remarkCaruselUp.value.setActiveItem(index);
|
||||
const slideshowType = (type) => slideshowItem(carouselsconfig.value[type].index);
|
||||
|
||||
let detailsLeft = ref(null);
|
||||
let detailsRigth = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
@@ -1220,8 +1226,43 @@ onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
let isFixed = ref(false); // 详情左侧是否固定
|
||||
let FixedBottom = ref(0); // 详情左侧固定的距离
|
||||
|
||||
let detailsBox = ref(null); // 详情的节点
|
||||
let headerRef = ref(null); // 头部节点
|
||||
|
||||
let isOperateShow = ref(true); // 底部操作栏是否显示
|
||||
|
||||
const handleScroll = () => {
|
||||
if (Math.random() > 0.3) return;
|
||||
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
|
||||
let offsetHeight = body.offsetHeight
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
const scrollTop = document.documentElement.scrollTop;
|
||||
const top = scrollTop + clientHeight;
|
||||
|
||||
const headerHeight = headerRef.value.getBoundingClientRect().height + 20;
|
||||
|
||||
const left = detailsLeft.value.getBoundingClientRect();
|
||||
const rigth = detailsRigth.value.getBoundingClientRect();
|
||||
const leftHeight = left.height;
|
||||
const rigthHeight = rigth.height;
|
||||
|
||||
if (leftHeight < rigthHeight) {
|
||||
// 整个左边高度到顶部的距离
|
||||
const topDistance = 260 - 36 + headerHeight + leftHeight + 223;
|
||||
if (top > topDistance && isFixed.value == false) {
|
||||
isFixed.value = true;
|
||||
FixedBottom.value = document.querySelector(".index-footer").getBoundingClientRect().height + 20
|
||||
}
|
||||
|
||||
if (top < topDistance && isFixed.value == true) isFixed.value = false;
|
||||
}
|
||||
|
||||
if (scrollTop + clientHeight >= offsetHeight - 200) isOperateShow.value = false;
|
||||
else isOperateShow.value = true;
|
||||
|
||||
for (let i = 0; i < navList.value.length; i++) {
|
||||
let element = navList.value[i];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user