XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加一项交通方式:地铁巴士

Browse Source
This commit is contained in:
A1300399510
2025-08-20 15:23:09 +08:00
parent 43da99a6e7
commit 61cd5e5066
22 changed files with 285 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/public/apartment-item.vue
View File

@@ -32,7 +32,8 @@
<div class="label-item flexacenter violet">0服务费</div>
<div class="label-item flexacenter red" v-for="(item, index) in item.hottags" :key="index">{{ item }}</div>
<template v-if="item.tags">
<div class="label-item flexacenter" v-for="(item, index) in item.tags.split(',')" :key="index">{{ item }}</div>
<div class="label-item flexacenter" v-for="(item, index) in item.tags.split(',')" :key="index">{{ item
}}</div>
</template>
</div>
<!-- <div class="title">{{ item["title"] }}</div>
@@ -52,19 +53,19 @@
<div class="school">{{ item.distance.alias }}</div>
<div class="mile" v-if="item.distance.distance > 0">{{ item.distance.distance }}km</div>
</div>
<div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
步行{{ calculateDuration(item.distance.walking_duration) }}
<div class="vehicle-list flex1 flexflex" v-if="distanceArr.length > 0">
<div class="vehicle-item flexacenter" v-for="(item, index) in distanceArr" :key="index">{{ item.text + item.duration }}</div>
<!-- <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
步行{{ calculateDuration(item.distance.walking_duration) }}
</div>
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
地铁{{ calculateDuration(item.distance.driving_duration) }}
地铁{{ calculateDuration(item.distance.driving_duration) }}
</div>
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
巴士{{ calculateDuration(item.distance.transit_duration) }}
</div>
巴士{{ calculateDuration(item.distance.transit_duration) }}
</div> -->
</div>
</div>
@@ -102,7 +103,7 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
const router = useRouter();
@@ -113,6 +114,42 @@ const props = defineProps({
masonryInstance: Object,
});
let distanceArr = ref([])
// 监听 item 变化
watch(
() => props.item,
(newItem) => {
const keyobj = {
metrobus_duration: "地铁巴士",
walking_duration: "步行",
driving_duration: "地铁",
transit_duration: "巴士",
}
const arr = ["metrobus_duration", "walking_duration", "transit_duration", "driving_duration"]
const distance = newItem.distance || {}
let valueArr = []
arr.forEach(key => {
if (distance[key] > 0) {
const value = distance[key]
valueArr.push({
text: keyobj[key],
value,
duration: calculateDuration(value),
})
}
})
distanceArr.value = valueArr.sort((a, b) => Number(a.value) - Number(b.value)).slice(0, 3);
},
{
immediate: true, // 初始化时立即执行一次
deep: true // 如果需要监听 item 内部属性的深层变化
}
);
const emit = defineEmits(["handlecollect"]);
const goapArtmentDetails = () => {
@@ -253,6 +290,7 @@ const loadload = () => {
.label-list {
flex-wrap: wrap;
margin: 0 12px 7px;
.label-item {
color: #434343;
text-align: center;
@@ -342,6 +380,7 @@ const loadload = () => {
.distance {
padding: 0 1px 12px 29px;
border-bottom: 1px dotted #d7d7d7;
.figure {
font-size: 14px;
color: #555555;
@@ -366,6 +405,7 @@ const loadload = () => {
.vehicle-list {
flex-wrap: wrap;
padding-right: 5px;
.vehicle-item {
height: 22px;
@@ -394,6 +434,7 @@ const loadload = () => {
.collect-type {
margin: 0 12px;
height: 52px;
.collect {
.flame-icon {
width: 20px;
@@ -424,6 +465,7 @@ const loadload = () => {
border-radius: 12px;
padding: 0 10px;
margin: 0 12px;
.type-item {
height: 54px;
@@ -440,6 +482,7 @@ const loadload = () => {
.price {
flex-direction: column;
align-items: flex-end;
.type-data {
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
@@ -458,12 +501,14 @@ const loadload = () => {
font-size: 13px;
color: #555555;
}
.original-price {
text-align: right;
font-size: 13px;
color: #7f7f7f;
position: relative;
width: max-content;
&::after {
position: absolute;
top: 50%;
@@ -509,6 +554,7 @@ const loadload = () => {
margin-left: 16px;
color: #50e3c2;
position: relative;
&::after {
content: "|";
position: absolute;

296
src/views/apartmentDetail.vue
View File

@@ -19,41 +19,62 @@
<div class="header-content flexflex">
<div class="header-left">
<!-- <image-watch style="z-index: 10000;" arrow="never" :index="imageIndex" :show="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch> -->
<image-watch arrow="never" :index="imageIndex" v-if="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch>
<image-watch arrow="never" :index="imageIndex" v-if="imageShow" :close="cloaseImageShow"
:list="imageList"></image-watch>
<div class="slideshow">
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp" @change="carouselChange">
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp"
@change="carouselChange">
<el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData" :key="index">
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img" :src="item['image'] || item['imageurl']" alt="公寓图片" @click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')" />
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img"
:src="item['image'] || item['imageurl']" alt="公寓图片"
@click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')" />
</el-carousel-item>
</el-carousel>
<div class="indicate-type flexacenter" v-if="indicateTypeState()">
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播</div>
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }" v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频</div>
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }" v-if="info['attachment'] && info['attachment'].length != 0" @click="slideshowType('attachment')">图片</div>
<div class="indicate-item"
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }"
v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播
</div>
<div class="indicate-item"
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }"
v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频
</div>
<div class="indicate-item"
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }"
v-if="info['attachment'] && info['attachment'].length != 0"
@click="slideshowType('attachment')">图片</div>
</div>
<div class="indicate" v-if="allCarouselsData.length != 0">{{ carouselIndex - carouselsconfig[allCarouselsData[carouselIndex]["type"]]["index"] + 1 }}/{{ carouselsconfig[allCarouselsData[carouselIndex]["type"]]["amount"] }}</div>
<div class="indicate" v-if="allCarouselsData.length != 0">{{ carouselIndex -
carouselsconfig[allCarouselsData[carouselIndex]["type"]]["index"] + 1 }}/{{
carouselsconfig[allCarouselsData[carouselIndex]["type"]]["amount"] }}</div>
</div>
<div class="slideshow-across flexflex">
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
<img v-if="carouselIndex == 0" class="arrow" alt="不可点击的左箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow rotate180" alt="可点击的左箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
<img v-if="carouselIndex == 0" class="arrow" alt="不可点击的左箭头切换"
src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow rotate180" alt="可点击的左箭头切换"
src="@/assets/img/publicImage/black-arrow.svg" />
</div>
<div ref="slideshowList" class="slideshow-list box no-scrollbar flex1 flexacenter">
<!-- <div class="item" :class="({ pitch: index == carouselIndex }, `item${index}`)" v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)" :key="index"> -->
<div class="item" :class="getClass(index)" v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)" :key="index">
<div class="item" :class="getClass(index)" v-for="(item, index) in allCarouselsData"
@click="slideshowItem(index)" :key="index">
<img class="img" alt="公寓图片缩略图" v-lazy="item['thumbnail'] || item['imageurl']" />
<img class="video-icon" v-if="item['type'] != 'attachment'" src="@/assets/img/publicImage/video-icon.svg" />
<img class="video-icon" v-if="item['type'] != 'attachment'"
src="@/assets/img/publicImage/video-icon.svg" />
</div>
</div>
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180" alt="不可点击的右箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180"
alt="不可点击的右箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow" alt="可点击的右箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div>
<div class="header-right flex1">
<img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
<img class="header-bj" alt="头部的地图背景"
src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
<!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
<!-- <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
<div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
@@ -99,19 +120,19 @@
<div class="btn" @click="openSelectSchool">[切换院校]</div>
</div>
<div class="vehicle flexflex">
<div class="item flexcenter" v-if="distancePitch?.walking_duration > 0">
<!-- <img class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
<div class="vehicle flexflex" v-if="distancePitch.distanceArr?.length > 0">
<div class="item flexcenter" v-for="(item, index) in distancePitch.distanceArr"
:key="index">{{ item.text +
item.duration }}</div>
<!-- <div class="item flexcenter" v-if="distancePitch?.walking_duration > 0">
步行{{ calculateDuration(distancePitch.walking_duration) }}
</div>
<div class="item flexcenter" v-if="distancePitch?.driving_duration > 0">
<!-- <img class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
地铁{{ calculateDuration(distancePitch.driving_duration) }}
</div>
<div class="item flexcenter" v-if="distancePitch?.transit_duration > 0">
<!-- <img class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
巴士{{ calculateDuration(distancePitch.transit_duration) }}
</div>
</div> -->
</div>
</div>
<!-- <div class="else flexacenter" v-if="withsameapartments">
@@ -131,11 +152,15 @@
<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>
<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>
</div>
<div class="btn-box flexacenter">
<div class="btn-item transmit-btn flexcenter" @click="handleCollect">
<img v-if="info.iscollect == 1" alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collectT.png" />
<img v-if="info.iscollect == 1" alt="收藏图标" class="transmit-icon"
src="@/assets/img/detail/collectT.png" />
<img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
收藏
</div>
@@ -150,7 +175,8 @@
</div>
<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="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" />
@@ -185,7 +211,8 @@
</div>
<div class="explain two-line-text">{{ spotObj.content }}</div>
</div>
<img v-if="spotObj.sources[0]?.thumbnail" class="inspect-img" :src="spotObj.sources[0]?.thumbnail" />
<img v-if="spotObj.sources[0]?.thumbnail" class="inspect-img"
:src="spotObj.sources[0]?.thumbnail" />
</div>
</div>
@@ -215,7 +242,8 @@
<!-- 房间类型 -->
<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}`)">
<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>
@@ -223,7 +251,8 @@
<div class="name">{{ item.name }}</div>
<div class="tags flexflex" v-if="item.allowance || (item.tags && item.tags.length > 0)">
<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 class="tags-item" v-for="(item, index) in item.tags" key="index">{{ item }}
</div>
</div>
<div class="price flexflex">
<div class="unit">HK$</div>
@@ -234,7 +263,8 @@
</div>
</div>
<div class="btn flexacenter">
<div v-if="item.iscollection" class="collect flexcenter red" @click="roomCollect(item.id, index)">
<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>
@@ -326,35 +356,51 @@
<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>
<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">
<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="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/apartmentDetail/subway-icon.png" />
<div class="tool-time">{{ specialSchoolDistance?.durationText }}</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/apartmentDetail/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="" />
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon"
alt="" />
</div>
<div class="alias-text flexcenter">{{ specialSchoolDistance.alias || "都大" }}</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="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/apartmentDetail/subway-icon.png" />
<div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 || "41min" }}</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/apartmentDetail/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="" />
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon"
alt="" />
</div>
<div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
</div>
@@ -367,56 +413,83 @@
</div>
</div>
</template>
<div class="distance-info-box pos-r" :style="{ height: `${50 * annexSchoolList.length + 70}px` }">
<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="" />
<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 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' }">
<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" />
<img src="@/assets/img/detail/home.png" alt=""
class="distance-header-img" />
</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"
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 || "" }}</div>
<div class="academy-school-item-number">{{ item.distanceText
|| "" }}</div>
</div>
<div class="academy-school-item-right flexacenter">
<img v-if="item.publictransport" class="academy-school-item-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
<img v-else class="academy-school-item-icon" src="@/assets/img/detail/walk-icon.png" />
<div class="academy-school-item-time">{{ item?.publictransport?.durationText || item.durationText || "" }}</div>
<img v-if="item.publictransport"
class="academy-school-item-icon"
src="@/assets/img/apartmentDetail/subway-icon.png" />
<img v-else class="academy-school-item-icon"
src="@/assets/img/detail/walk-icon.png" />
<div class="academy-school-item-time">{{
item?.publictransport?.durationText
|| item.durationText || "" }}</div>
</div>
<img class="arrow-green" src="@/assets/img/detail/arrow-green.svg" />
<img class="arrow-green"
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="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-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 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 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 class="flex1" style="white-space: nowrap">{{
item.via_num }}站·{{
item.durationText }}</div>
</div>
</div>
</div>
@@ -436,7 +509,8 @@
</div>
<!-- 公寓设施 -->
<div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
<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" />
公寓设施
@@ -446,13 +520,16 @@
<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" />
<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 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)">
<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>
@@ -466,7 +543,8 @@
</div>
<!-- 房源详情 -->
<div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
<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" />
房源详情
@@ -513,7 +591,8 @@
<!-- 品牌介绍 -->
<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" />
<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']" />
@@ -521,9 +600,12 @@
</div>
<div class="details-item hint-box">
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
<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="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a
@click="copy('ad@gter.net')">ad@gter.net</a>
</div>
</div>
</div>
</div>
@@ -557,7 +639,8 @@
<img class="add-customer-violet violet2" src="@/assets/img/apartmentDetail/add-customer-violet2.svg" />
<div class="add-customer-interior flexflex">
<img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-map2.png" />
<img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-interior-bj2.svg" />
<img class="add-customer-interior-bj bj2"
src="@/assets/img/apartmentDetail/add-customer-interior-bj2.svg" />
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-map.svg" />
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-interior-bj.svg" />
@@ -600,7 +683,8 @@
</div>
</div>
<div class="select-list" ref="selectSchoolRef">
<div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]" v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
<div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]"
v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
<div class="select-icon flexcenter">
<img class="select-img" src="@/assets/img/apartmentDetail/u1834.png" />
</div>
@@ -611,36 +695,41 @@
<div class="abbreviation">{{ item.alias }}</div>
<template v-if="item.distance > 0">{{ item.distance }}km</template>
</div>
<div class="vehicle flexflex flex1">
<div class="item flexcenter" v-if="item.walking_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
<div class="vehicle flexflex flex1" v-if="distancePitch.distanceArr?.length > 0">
<div class="item flexcenter" v-for="(item, index) in distancePitch.distanceArr" :key="index">{{
item.text + item.duration }}</div>
<!-- <div class="item flexcenter" v-if="item.walking_duration > 0">
步行{{ calculateDuration(item.walking_duration) }}
</div>
<div class="item flexcenter" v-if="item.driving_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
地铁{{ calculateDuration(item.driving_duration) }}
</div>
<div class="item flexcenter" v-if="item.transit_duration > 0">
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
巴士{{ calculateDuration(item.transit_duration) }}
</div>
</div> -->
</div>
</div>
<img class="tick" v-if="distancePitch.sid == item.sid" src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
<img class="tick" v-if="distancePitch.sid == item.sid"
src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
</div>
</div>
</el-dialog>
<el-dialog v-model="isInspectPop" width="600" class="inspectPop" :show-close="false">
<div class="type flexacenter">
<div class="item" :class="{ pitch: remarkTypeid == 0 }" @click="cutRemarkType(0)">全部 {{ spotSum + returnSum }}</div>
<div class="item" :class="{ pitch: remarkTypeid == 0 }" @click="cutRemarkType(0)">全部 {{ spotSum + returnSum
}}
</div>
<div class="item" :class="{ pitch: remarkTypeid == 1 }" @click="cutRemarkType(1)">寄托实地考察 {{ spotSum }}</div>
<div v-if="returnSum > 0" class="item" :class="{ pitch: remarkTypeid == 2 }" @click="cutRemarkType(2)">寄托回访 {{ returnSum }}</div>
<div v-if="returnSum > 0" class="item" :class="{ pitch: remarkTypeid == 2 }" @click="cutRemarkType(2)">寄托回访
{{
returnSum }}</div>
</div>
<div class="list">
<template v-for="(item, index) in remarkList" :key="index">
<div class="item flexflex" v-if="remarkTypeid == 0 || (remarkTypeid == 1 && item.typeid == 1) || (remarkTypeid == 2 && item.typeid == 2)">
<div class="item flexflex"
v-if="remarkTypeid == 0 || (remarkTypeid == 1 && item.typeid == 1) || (remarkTypeid == 2 && item.typeid == 2)">
<img class="avatar" :src="item.avatar" />
<div class="remark-content flexflex flex1">
<div class="type flexacenter" v-if="item.typeid == 1">
@@ -659,9 +748,11 @@
<div class="date">{{ item.date }}</div>
<div class="text">{{ item.content }}</div>
<div class="media" scroll-x>
<div class="media-item" v-for="(item, i) in item.sources" :key="i" @click="previewImg(index, i)">
<div class="media-item" v-for="(item, i) in item.sources" :key="i"
@click="previewImg(index, i)">
<img class="media-img" :src="item.thumbnail" />
<img class="media-icon" v-if="item.type == 'videos'" src="@/assets/img/publicImage/video-icon.svg" />
<img class="media-icon" v-if="item.type == 'videos'"
src="@/assets/img/publicImage/video-icon.svg" />
</div>
</div>
</div>
@@ -1456,6 +1547,34 @@ const getMapDistance = () => {
// obj,
// };
// arr.push(target);
const keyobj = {
metrobus_duration: "地铁巴士",
walking_duration: "步行",
driving_duration: "地铁",
transit_duration: "巴士",
}
const arr = ["metrobus_duration", "walking_duration", "transit_duration", "driving_duration"]
let valueArr = []
// element['metrobus_duration'] = 6
// element['walking_duration'] = 6
// element['transit_duration'] = 6
// element['driving_duration'] = 6
arr.forEach(key => {
if (element[key] > 0) {
const value = element[key]
valueArr.push({
text: keyobj[key],
value,
duration: calculateDuration(value),
})
}
})
element['distanceArr'] = valueArr.sort((a, b) => Number(a.value) - Number(b.value))
if (element.sid == sid) pitch = element;
});
@@ -1605,6 +1724,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
/deep/ body {
padding-bottom: 70px;
}
// 引入公共样式
@import "@/assets/styles/apartmentDetail.less";
</style>
@@ -1654,6 +1774,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
border-radius: 12px 0 0 12px;
position: relative;
z-index: 1;
.annex-school-item {
flex-direction: column;
align-items: center;
@@ -1713,6 +1834,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
border-radius: 0 12px 12px 0;
position: relative;
z-index: 1;
.annex-btn-bj {
width: 100%;
height: 100%;
@@ -1769,6 +1891,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
font-size: 14px;
color: #555555;
cursor: pointer;
&.pitch {
font-weight: 650;
color: #000000;
@@ -1783,12 +1906,14 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
.distance-info-right {
padding: 30px 40px;
.distance-header-box {
color: #333333;
font-weight: 650;
font-size: 16px;
margin-bottom: 30px;
justify-content: space-between;
.distance-header-icon {
width: 30px;
height: 30px;
@@ -1885,7 +2010,8 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
height: 100%;
display: block;
background-image: linear-gradient(to bottom, #aaaaaa 50%, transparent 50%);
background-size: 1px 4px; /* 控制虚线的宽度和间距 */
background-size: 1px 4px;
/* 控制虚线的宽度和间距 */
}
.journey-item:first-of-type::after {
@@ -1971,6 +2097,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
.selectSchoolPop {
border-radius: 16px;
overflow: hidden;
.el-dialog__header {
display: none;
}
@@ -1988,6 +2115,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
text-align: center;
padding-top: 25px;
padding-bottom: 16px;
.close-icon {
width: 20px;
height: 20px;
@@ -2036,10 +2164,12 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
min-height: 300px;
overflow: auto;
position: relative;
.select-item {
padding: 10px 15px;
border-top: 1px dotted #d7d7d7;
cursor: pointer;
&.pitch {
background-color: rgba(245, 244, 249, 1);
@@ -2097,6 +2227,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
.item {
height: 20px;
line-height: 20px;
line-height: 20px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(127, 127, 127, 1);
border-radius: 30px;
@@ -2130,15 +2261,18 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
border-radius: 16px;
overflow: hidden;
word-break: break-word;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
.type {
padding: 20px 20px;
border-bottom: 1px dotted #d7d7d7;
.item {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;