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

refactor: 移除调试日志并优化代码结构

Browse Source 
移除多个组件中的调试日志语句，优化代码结构以提高可读性和维护性。同时调整了部分样式和逻辑，确保功能一致性和用户体验。
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-22 18:58:39 +08:00
parent 4f3989f756
commit fbb9e5a76c
12 changed files with 512 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/App.vue
View File

@@ -3,18 +3,18 @@
<login></login> <login></login>
</template> </template>
<script setup> <script setup>
import login from "@/components/public/login.vue" import login from "@/components/public/login.vue";
import store from "@/store" import store from "@/store";
import { onMounted, watch, watchEffect } from "vue" import { onMounted, watch, watchEffect } from "vue";
import { useRoute } from "vue-router" import { useRoute } from "vue-router";
import api from "./utils/api" import api from "./utils/api";
let socketTask = null let socketTask = null;
onMounted(() => { onMounted(() => {
// useSocket() // useSocket()
document.addEventListener("visibilitychange", () => { document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible" && socketTask?.readyState != 1) useSocket() if (document.visibilityState === "visible" && socketTask?.readyState != 1) useSocket();
}) });
// 创建cnzz统计js //v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882 // 创建cnzz统计js //v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882
// const script = document.createElement("script") // const script = document.createElement("script")
@@ -22,31 +22,31 @@ onMounted(() => {
// script.language = "JavaScript" // script.language = "JavaScript"
// document.body.appendChild(script) // document.body.appendChild(script)
getBannerData() getBannerData();
}) });
const route = useRoute() const route = useRoute();
watch(route, (newValue, oldValue) => { watch(route, (newValue, oldValue) => {
if (window._czc) { if (window._czc) {
let location = window.location let location = window.location;
let contentUrl = location.pathname + location.hash let contentUrl = location.pathname + location.hash;
let refererUrl = "/" let refererUrl = "/";
window._czc.push(["_trackPageview", contentUrl, refererUrl]) window._czc.push(["_trackPageview", contentUrl, refererUrl]);
window._czc.push(["_setAutoPageview", false]) window._czc.push(["_setAutoPageview", false]);
} }
if (window._hmt) { if (window._hmt) {
if (newValue["path"]) window._hmt.push(["_trackPageview", newValue["fullPath"]]) if (newValue["path"]) window._hmt.push(["_trackPageview", newValue["fullPath"]]);
} }
}) });
const useSocketInterval = 50000 // Socket的时间间隔 const useSocketInterval = 50000; // Socket的时间间隔
const useSocket = () => { const useSocket = () => {
let token = getMiucmsSessionCookie() || "" let token = getMiucmsSessionCookie() || "";
socketTask = new WebSocket(`wss://app.gter.net/socket?token=${token}`) socketTask = new WebSocket(`wss://app.gter.net/socket?token=${token}`);
socketTask.onopen = () => { socketTask.onopen = () => {
let user = store.state.user || {} let user = store.state.user || {};
if (user && token) { if (user && token) {
socketTask.send( socketTask.send(
JSON.stringify({ JSON.stringify({
@@ -56,46 +56,46 @@ const useSocket = () => {
uid: user.uid || 0, uid: user.uid || 0,
}, },
}) })
) );
} }
setTimeout(() => timedTransmission(), useSocketInterval) setTimeout(() => timedTransmission(), useSocketInterval);
} };
socketTask.onclose = () => { socketTask.onclose = () => {
// timedTransmissionState = false // timedTransmissionState = false
console.log("socket关闭了", new Date()) console.log("socket关闭了", new Date());
} };
} };
// let timedTransmissionState = false // 定时器启动状态 // let timedTransmissionState = false // 定时器启动状态
// 定时发送 // 定时发送
const timedTransmission = () => { const timedTransmission = () => {
// if (socketTask.readyState != 1 || timedTransmissionState) return // if (socketTask.readyState != 1 || timedTransmissionState) return
if (socketTask.readyState != 1) return if (socketTask.readyState != 1) return;
// timedTransmissionState = true // timedTransmissionState = true
socketTask.send(JSON.stringify({ type: "ping" })) socketTask.send(JSON.stringify({ type: "ping" }));
setTimeout(() => timedTransmission(), useSocketInterval) setTimeout(() => timedTransmission(), useSocketInterval);
} };
const getMiucmsSessionCookie = () => { const getMiucmsSessionCookie = () => {
let cookies = document.cookie.split(";") let cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) { for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].split("=") let cookie = cookies[i].split("=");
if (cookie[0].trim() === "miucms_session") { if (cookie[0].trim() === "miucms_session") {
return cookie[1] return cookie[1];
} }
} }
return null return null;
} };
// 获取轮播图的 数据 // 获取轮播图的 数据
const getBannerData = () => { const getBannerData = () => {
api.banner().then(res => { api.banner().then((res) => {
if (res.code === 200) { if (res.code === 200) {
// bannerData // bannerData
store.state.bannerData = res.data store.state.bannerData = res.data;
} }
}) });
} };
</script> </script>
<style lang="less"> <style lang="less">
header.page-header { header.page-header {
@@ -137,7 +137,6 @@ img {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.shadow { .shadow {
@@ -180,7 +179,7 @@ img {
.box-min-1200-src { .box-min-1200-src {
min-width: 1200px; min-width: 1200px;
overflow-x: scroll; overflow-x: auto;
} }
/* // 全局css 加上以下代码，可以隐藏上下箭头 */ /* // 全局css 加上以下代码，可以隐藏上下箭头 */

8
src/assets/styles/apartmentDetail.css
View File

@@ -439,6 +439,13 @@
.content .details-box { .content .details-box {
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
position: relative;
}
.content .details-box .details-left {
transition: bottom 0.5s;
}
.content .details-box .details-left.fixed {
position: fixed;
} }
.content .details-box .details-left .special-offer { .content .details-box .details-left .special-offer {
width: 876px; width: 876px;
@@ -956,7 +963,6 @@
line-height: 24px; line-height: 24px;
font-size: 13px; font-size: 13px;
padding: 30px; padding: 30px;
margin-bottom: 100px;
} }
.content .details-box .details-left .details-item.hint-box .hint-item { .content .details-box .details-left .details-item.hint-box .hint-item {
min-height: 24px; min-height: 24px;

9
src/assets/styles/apartmentDetail.less
View File

@@ -576,8 +576,15 @@
.details-box { .details-box {
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
position: relative;
.details-left { .details-left {
&.fixed {
position: fixed;
}
transition: bottom 0.5s;
.special-offer { .special-offer {
width: 876px; width: 876px;
position: relative; position: relative;
@@ -1392,7 +1399,7 @@
line-height: 24px; line-height: 24px;
font-size: 13px; font-size: 13px;
padding: 30px; padding: 30px;
margin-bottom: 100px; // margin-bottom: 100px;
.hint-item { .hint-item {
min-height: 24px; min-height: 24px;

8
src/components/apartment/sameBrandItem.vue
View File

@@ -32,11 +32,14 @@
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue" import { defineProps } from "vue"
import { useRouter } from "vue-router";
const props = defineProps({ const props = defineProps({
item: Object, item: Object,
}); });
let router = useRouter();
const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`); const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
</script> </script>
@@ -47,9 +50,12 @@ const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
border-radius: 17px; border-radius: 17px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
padding: 8px 0; padding: 8px 0;
margin-bottom: 20px;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) {
margin-bottom: 20px;
}
&:hover { &:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
} }

1
src/components/apartment/seachModule.vue
View File

@@ -267,7 +267,6 @@ let pitchValue = ref({
watchEffect(() => { watchEffect(() => {
// nearSchoolList = store.state.apartment.school || [] // nearSchoolList = store.state.apartment.school || []
console.log('store.state.schoolList',store.state.schoolList);
nearSchoolList = store.state.schoolList || []; nearSchoolList = store.state.schoolList || [];
roomTypeList = store.state.apartment.roomtype || []; roomTypeList = store.state.apartment.roomtype || [];
roomTypeKey = store.state.roomTypeKey || {}; roomTypeKey = store.state.roomTypeKey || {};

153
src/components/pageTopBar/pageTopBar.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> --> <!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }"> <div class="top-bg-img-box pos-r" :style="{ height: bannerLists.data.length ? '450px' : '260px' }">
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length" /> <img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length" />
<img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length" /> <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length" />
<div class="info-box"> <div class="info-box">
@@ -19,9 +19,7 @@
<div class="user-out-box"> <div class="user-out-box">
<div class="box-bg dis-f jus-x"> <div class="box-bg dis-f jus-x">
<div class="top-box"></div> <div class="top-box"></div>
<a :href="quitUrl" style="color: #fff;"> <a :href="quitUrl" style="color: #fff"> 退出 </a>
退出
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -31,18 +29,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="dis-f jus-x al-item body-maxWidth" style="margin: auto;"> <div class="dis-f jus-x al-item body-maxWidth" style="margin: auto">
<div class="logo-box dis-f al-item body-maxWidth"> <div class="logo-box dis-f al-item body-maxWidth">
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()" /> <img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()" />
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()" /> <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()" />
</div> </div>
</div> </div>
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> --> <!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length"> <div class="dis-f jus-x al-item" v-if="bannerLists.data.length" style="margin-top: 37px">
<div class="body-maxWidth"> <div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;" @change="carouselChange"> <el-carousel :interval="5000" arrow="always" style="height: 236px" @change="carouselChange">
<el-carousel-item v-for="(item, i) in bannerLists.data" :key="item.feedId"> <el-carousel-item v-for="(item, i) in bannerLists.data" :key="item.feedId">
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item"> <div style="width: 100%; height: 100%" class="dis-f jus-x al-item">
<img v-if="i >= carouselIndex - 1 && i <= carouselIndex + 1" class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" /> <img v-if="i >= carouselIndex - 1 && i <= carouselIndex + 1" class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
</div> </div>
</el-carousel-item> </el-carousel-item>
@@ -50,10 +48,10 @@
</div> </div>
</div> </div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow"> <div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
<div class="body-maxWidth dis-f" style="height: 40px;"> <div class="body-maxWidth dis-f" style="height: 40px">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)"> <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
<el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']"> <el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
<div style="padding: 0 10px;">{{ item.name }}</div> <div style="padding: 0 10px">{{ item.name }}</div>
</el-badge> </el-badge>
<div v-else>{{ item.name }}</div> <div v-else>{{ item.name }}</div>
</div> </div>
@@ -64,112 +62,114 @@
</template> </template>
<script setup> <script setup>
import store from "../../store/index" import store from "../../store/index";
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router";
import { reactive, watchEffect, ref, defineProps } from "vue" import { reactive, watchEffect, ref, defineProps } from "vue";
import { goTologin } from "@/utils/util.js" import { goTologin } from "@/utils/util.js";
const props = defineProps({ const props = defineProps({
bannerList: { bannerList: {
type: Array, type: Array,
default: function () { default: function () {
return [] return [];
}, },
}, },
}) });
//退出登录 //退出登录
let url = location.href let url = location.href;
let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`) let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`);
//个人信息 //个人信息
let user = reactive({ data: {} }) let user = reactive({ data: {} });
//组件数据 //组件数据
let topTab = reactive({ data: [] }) let topTab = reactive({ data: [] });
let seachTab = reactive({ data: [] }) let seachTab = reactive({ data: [] });
let bannerLists = reactive({ data: [] }) let bannerLists = reactive({ data: [] });
watchEffect(() => { watchEffect(() => {
user.data = store.state.user user.data = store.state.user;
// bannerLists.data = props.bannerList // bannerLists.data = props.bannerList
if (!store.state.indexData.menu) return if (!store.state.indexData.menu) return;
store.state.indexData.menu.map(res => { store.state.indexData.menu.map((res) => {
if (res.name === "首页") { if (res.name === "首页") {
res.path = "/" res.path = "/";
} else if (res.name === "个人房源") { } else if (res.name === "个人房源") {
res.path = "/personHousing" res.path = "/personHousing";
} else if (res.name === "中介房源") { } else if (res.name === "中介房源") {
res.path = "/intermediaryHousing" res.path = "/intermediaryHousing";
} else if (res.name === "品牌公寓") { } else if (res.name === "品牌公寓") {
res.path = "/apartment" res.path = "/apartment";
} else if (res.name === "求房源") { } else if (res.name === "求房源") {
res.path = "/needHousing" res.path = "/needHousing";
} else if (res.name === "我的") { } else if (res.name === "我的") {
res.path = "/user" res.path = "/user";
} }
}) });
seachTab.data = store.state.indexData.menu seachTab.data = store.state.indexData.menu;
topTab.data = store.state.indexData.nav topTab.data = store.state.indexData.nav;
}) });
//顶部导航跳转 //顶部导航跳转
let topTabNum = ref("fang") let topTabNum = ref("fang");
let topTabSelect = (type, item) => { let topTabSelect = (type, item) => {
// topTabNum.value=type // topTabNum.value=type
window.open(item.url) window.open(item.url);
} };
//页面跳转 //页面跳转
const router = useRouter() const router = useRouter();
let tabBtnType = ref("/") let tabBtnType = ref("/");
let pageTopBarShow = router.currentRoute.value.meta.topBarShow let pageTopBarShow = router.currentRoute.value.meta.topBarShow;
let changeTabBtnType = item => { let changeTabBtnType = (item) => {
// 判断点击进入 user 时是否已经登录 // 判断点击进入 user 时是否已经登录
if (item["path"] == "/user" && (user.data["uid"] == 0 || user.data["uin"] == 0)) { if (item["path"] == "/user" && (user.data["uid"] == 0 || user.data["uin"] == 0)) {
loginBtn("login") loginBtn("login");
return return;
} }
tabBtnType.value = item.path tabBtnType.value = item.path;
router.push({ // router.push({
path: item.path, // path: item.path,
}) // })
}
let openInfo = data => { router.push(item.path);
window.open(data.url) };
}
let openInfo = (data) => {
window.open(data.url);
};
//监听路由 //监听路由
const route = useRoute() const route = useRoute();
let routePath = ref("") let routePath = ref("");
routePath.value = route.meta.path routePath.value = route.meta.path;
tabBtnType.value = route.meta.path tabBtnType.value = route.meta.path;
// 点击登录注册 type login 登录 register注册 // 点击登录注册 type login 登录 register注册
const loginBtn = type => { const loginBtn = (type) => {
if (type == "login") { if (type == "login") {
store.state.showloginmodal = true store.state.showloginmodal = true;
return return;
} }
goTologin() goTologin();
} };
// 跳转首页 // 跳转首页
const goIndex = () => router.push("/") const goIndex = () => router.push("/");
watchEffect(() => { watchEffect(() => {
if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || [] if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || [];
else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || [] else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || [];
else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || [] else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || [];
else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || [] else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || [];
else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || [] else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || [];
}) });
let carouselIndex = ref(0) // 轮播图的索引 let carouselIndex = ref(0); // 轮播图的索引
const carouselChange = value => { const carouselChange = (value) => {
carouselIndex.value = value carouselIndex.value = value;
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.pos-r { .pos-r {
@@ -320,8 +320,9 @@ const carouselChange = value => {
.carousel-img { .carousel-img {
margin: 0 auto; margin: 0 auto;
width: 660px; // width: 660px;
height: 280px; // height: 280px;
height: 200px;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
} }
@@ -405,6 +406,10 @@ const carouselChange = value => {
text-align: left; text-align: left;
} }
/deep/ .el-carousel__container {
height: 200px;
}
.dropdown { .dropdown {
background: #000; background: #000;
} }

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

@@ -71,7 +71,7 @@
<div class="collect-type flexacenter"> <div class="collect-type flexacenter">
<div class="collect flexacenter flex1"> <div class="collect flexacenter flex1">
<img class="flame-icon" src="@/assets/img/publicImage/flame-icon.png" /> <img class="flame-icon" src="@/assets/img/publicImage/flame-icon.png" />
近15天{{ item.collectnum }}人收藏 近15天{{ item.collectnum }}人感兴趣
</div> </div>
<div class="house-type flexacenter"> <div class="house-type flexacenter">
共{{ item.roomnum || 0 }}个房型 共{{ item.roomnum || 0 }}个房型

587
src/views/apartmentDetail.vue
View File

@@ -2,7 +2,7 @@
<page-top-bar></page-top-bar> <page-top-bar></page-top-bar>
<div class="content wid1200"> <div class="content wid1200">
<div class="header"> <div class="header" ref="headerRef">
<div class="top flexflex"> <div class="top flexflex">
<div class="brand-abstract flexflex"> <div class="brand-abstract flexflex">
<div class="flexacenter" style="height: min-content"> <div class="flexacenter" style="height: min-content">
@@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<div class="figure flexacenter"> <div class="figure flexacenter" v-if="distancePitch?.alias">
距离 距离
<div class="school">{{ distancePitch.alias }}</div> <div class="school">{{ distancePitch.alias }}</div>
{{ distancePitch.distance }}km {{ distancePitch.distance }}km
@@ -100,7 +100,7 @@
</div> </div>
<div class="vehicle flexflex"> <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 == '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 == 'driving'" class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
<img v-if="index == 'transit'" class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> <img v-if="index == 'transit'" class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
@@ -122,7 +122,7 @@
</div> </div>
</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="operate-box flexacenter" aria-label="详情的导航栏">
<div class="nav-box flexacenter"> <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>
@@ -142,107 +142,108 @@
</div> </div>
</div> </div>
</div> </div>
<div class="details-box flexflex"> <div class="details-box flexflex" ref="detailsBox">
<div class="details-left flex1" ref="detailsLeft"> <div class="flex1">
<div class="special-offer" v-if="info.promotionalactivities" ref="specialEle"> <div class="details-left flex1" :class="{ fixed: isFixed }" :style="{ bottom: FixedBottom + 'px' }" ref="detailsLeft">
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" /> <div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
<img class="head" src="@/assets/img/publicImage/special-title.png" /> <img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
<img class="gift" src="@/assets/img/publicImage/special-gift.png" /> <img class="head" src="@/assets/img/publicImage/special-title.png" />
<img class="star1" src="@/assets/img/publicImage/special-star-1.png" /> <img class="gift" src="@/assets/img/publicImage/special-gift.png" />
<img class="star2" src="@/assets/img/publicImage/special-star-2.png" /> <img class="star1" src="@/assets/img/publicImage/special-star-1.png" />
<img class="star3" src="@/assets/img/publicImage/special-star-3.png" /> <img class="star2" src="@/assets/img/publicImage/special-star-2.png" />
<img class="fireworks" src="@/assets/img/publicImage/special-fireworks.png" /> <img class="star3" src="@/assets/img/publicImage/special-star-3.png" />
<div class="board"> <img class="fireworks" src="@/assets/img/publicImage/special-fireworks.png" />
<div class="gray"> <div class="board">
<p class="text" user-select>{{ info.promotionalactivities }}</p> <div class="gray">
</div> <p class="text" user-select>{{ info.promotionalactivities }}</p>
</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> </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> </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>
<div class="return-visit flexacenter" scroll-x> <div class="remark" ref="inspectEle" v-if="spotSum > 0" @click="openInspectPop">
<template v-for="(item, index) in remarkList" :key="index"> <div class="head flexacenter">
<div class="item flex1" v-if="item.typeid == 2"> <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"> <div class="info flexacenter">
<img class="avatar" :src="item.avatar" /> <img class="avatar" :src="spotObj.avatar" />
<div class="username">{{ item.nickname }}</div> <div class="username">{{ spotObj.nickname }}</div>
<div class="label flexacenter">已入住</div> <img class="label" :src="spotObj.groupimage" />
</div> </div>
<div class="explain two-line-text">{{ item.content }}</div> <div class="explain two-line-text">{{ spotObj.content }}</div>
</div> </div>
</template> <img class="inspect-img" :src="spotObj.sources[0].thumbnail" />
</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> </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-left flex1">
<div class="type-name">{{ item["name"] }}</div> <div class="type-name">{{ item["name"] }}</div>
<div class="type-tags flexacenter" v-if="item.allowance || item.tags.length != 0"> <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 class="full-occupancy flexcenter" v-else>已租满</div>
</div> </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>
<div class="cost-box">
<div class="item" v-for="(item, index) in costList" :key="index"> <!-- 费用说明 -->
<div class="head flexacenter"> <div class="details-item cost" v-if="costList.length > 0" ref="costEle">
<img class="icon" :src="require('@/assets/img/apartmentDetail/' + item.img)" /> <div class="details-header flexacenter">
{{ item.name }} <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>
<div class="explain">{{ item.text }}</div>
</div> </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"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg" />
优惠活动 优惠活动
@@ -313,166 +314,166 @@
<div class="text" v-html="info['promotionalactivities']"></div> <div class="text" v-html="info['promotionalactivities']"></div>
</div> --> </div> -->
<!-- 地址 --> <!-- 地址 -->
<div class="details-item location" v-if="info.address" ref="addressEle"> <div class="details-item location" v-if="info.address" ref="addressEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
{{ info.location || "交通" }} {{ info.location || "交通" }}
</div> </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"> <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> <template #reference>
<div class="annex-school-box flexacenter"> <div class="annex-school-box flexacenter">
<div class="annex-left flex1 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="distance-item-value special flexacenter">
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div> <div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" /> <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" /> <img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
<div class="tool-time">{{ specialSchoolDistance?.durationText }}</div> <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 }}
</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>
<div class="academy-school-item" v-for="(item, index) in targetAcademyPitch.list" :key="index"> <div class="annex-school-item flexflex flex1" v-for="(item, index) in annexSchoolOmit" :key="index" @click="selectIndex(item.id)">
<div class="academy-school-item-header flexacenter"> <div class="distance-item-value flexacenter">
<div class="academy-school-item-left flexacenter"> <div class="mileage">{{ item.distanceText || "2.0km" }}</div>
<div class="academy-school-item-name">{{ item.title }}</div> <img v-if="!item.list[0].publictransport" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
<div class="academy-school-item-number">{{ item.distanceText || "1km" }}</div> <img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
</div> <div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 || "41min" }}</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>
<div class="academy-school-item-journey" v-if="item.publictransport"> <div class="flexcenter">
<div class="journey-item flexacenter" v-for="(item, index) in item.publictransport.segments" :key="index"> <img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
<div class="circle"></div> </div>
<!-- 步行 骑行 --> <div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
<div v-if="item.type == 'walking'" class="journey-value flex1">步行{{ item.distanceText }}</div> </div>
<!-- 地铁 --> <div class="line-img"></div>
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter"> </div>
<div class="subway-name flexcenter">{{ item.name }}</div> <div class="annex-btn flexcenter">
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div> <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>
<!-- 公交 --> {{ targetAcademyPitch.school }}
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter"> </div>
<div class="bus-name flexcenter">{{ item.name }}</div> <div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</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> </div>
</div> </div>
</div> </el-scrollbar>
</el-scrollbar> </div>
</div> </div>
</div> </el-popover>
</el-popover> </template>
</template>
<!-- 交通 --> <!-- 交通 -->
<div class="traffic-box" v-if="info['traffic']"> <div class="traffic-box" v-if="info['traffic']">
<!-- <div class="traffic-title item-title flexcenter">交通</div> --> <!-- <div class="traffic-title item-title flexcenter">交通</div> -->
<div class="traffic-content" v-html="info['traffic']"></div> <div class="traffic-content" v-html="info['traffic']"></div>
</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> </div>
<div class="facility-box"> <!-- 公寓设施 -->
<div class="item" v-for="(item, index) in facilitylist" :key="index"> <div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
<div class="head">{{ item.name }}（{{ item.label.length }}）</div> <div class="details-header flexacenter">
<div class="label flexflex"> <img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.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" /> </div>
{{ item }}
<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> <div class="img-box flexflex" v-if="item.images.length > 0">
<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" />
<img class="icon" :src="item.thumbnail" /> <div class="name">{{ item.name }}</div>
<div class="name">{{ item.name }}</div> </div>
</div> </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>
<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-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" /> <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>
<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"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
公寓设施 公寓设施
@@ -494,32 +495,34 @@
</div> </div>
</div> --> </div> -->
<!-- 生活 --> <!-- 生活 -->
<div class="details-item life" v-if="info['life']" ref="lifeEle"> <div class="details-item life" v-if="info['life']" ref="lifeEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/live.png" /> <img class="icon" src="@/assets/img/apartmentDetail/live.png" />
生活配套 生活配套
</div>
<div class="text" v-html="info['life']"></div>
</div> </div>
<div class="text" v-html="info['life']"></div>
</div>
<!-- 品牌介绍 --> <!-- 品牌介绍 -->
<div class="details-item company" v-if="company" ref="companyEle"> <div class="details-item company" v-if="company" ref="companyEle">
<div class="details-header flexacenter"> <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']" />
<div class="text" v-html="company['introduction']"></div>
</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="details-item hint-box">
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div> <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>
</div> </div>
<div class="details-right flexacenter">
<div class="details-right flexacenter" ref="detailsRigth">
<phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode> <phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode>
<groupqrcode type="apartment"></groupqrcode> <groupqrcode type="apartment"></groupqrcode>
<!-- 同品牌公寓 --> <!-- 同品牌公寓 -->
@@ -692,7 +695,7 @@ watch(route, () => {
mediaBtnstate.value = {}; mediaBtnstate.value = {};
slideshowList.value = null; slideshowList.value = null;
detailsLeft.value = null; // detailsLeft.value = null;
token = ""; token = "";
carouselIndex.value = 0; carouselIndex.value = 0;
@@ -792,7 +795,7 @@ const facilityKeyName = {
room: "房间设施", room: "房间设施",
}; };
const facilityArr = ["public", "room", "service", "sport", "outdoor", "security"]; // 公寓设施 顺序 const facilityArr = ["room", "public", "service", "sport", "outdoor", "security"]; // 公寓设施 顺序
let facilitylist = ref([]); let facilitylist = ref([]);
let costList = ref([]); let costList = ref([]);
@@ -1105,7 +1108,9 @@ const handleNavData = () => {
// 处理点击nav 滚动事件 // 处理点击nav 滚动事件
const handleClickNav = (value) => { 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" }); 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); const slideshowType = (type) => slideshowItem(carouselsconfig.value[type].index);
let detailsLeft = ref(null); let detailsLeft = ref(null);
let detailsRigth = ref(null);
onMounted(() => { onMounted(() => {
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
@@ -1220,8 +1226,43 @@ onUnmounted(() => {
window.removeEventListener("scroll", handleScroll); 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 = () => { const handleScroll = () => {
if (Math.random() > 0.3) return; 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++) { for (let i = 0; i < navList.value.length; i++) {
let element = navList.value[i]; let element = navList.value[i];

2
src/views/detail.vue
View File

@@ -170,7 +170,7 @@
<span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea" :key="i"><span v-show="i != 0">/</span>{{ item == 0 ? "不限" : indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["sunshinearea"][item] }} </span> <span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea" :key="i"><span v-show="i != 0">/</span>{{ item == 0 ? "不限" : indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["sunshinearea"][item] }} </span>
</div> </div>
</div> </div>
<div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.acreage[0]"> <div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.acreage?.[0]">
<div class="title-box"> <div class="title-box">
面积 面积
</div> </div>

27
src/views/housingView/apartment.vue
View File

@@ -86,8 +86,17 @@ onMounted(() => {
// pitchValue.value = store.getters.getApartmentPitchValue // pitchValue.value = store.getters.getApartmentPitchValue
const value = localStorage.getItem("apartmentPitchValue"); let value = localStorage.getItem("apartmentPitchValue");
if (value) pitchValue.value = JSON.parse(value); if (value) {
value = JSON.parse(value);
// 判断 学校id是否在筛选
if (value["school"]) {
const schoolList = store.state.schoolList || [];
const isExist = schoolList.some((item) => item.sid == value["school"]);
if (!isExist) value["school"] = 0;
}
pitchValue.value = value;
}
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]; if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"];
@@ -118,7 +127,7 @@ const getData = () => {
localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value)); localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value));
proxy proxy
.$post("https://api.gter.net/v1/apartment/lists", { limit: 12, page, ...pitchValue.value }) .$post("https://api.gter.net/v1/apartment/lists", { limit: 1000, page, ...pitchValue.value })
.then((res) => { .then((res) => {
if (res.code != 200) return; if (res.code != 200) return;
let data = res.data; let data = res.data;
@@ -133,8 +142,6 @@ const getData = () => {
requestLoading = false; requestLoading = false;
}); });
// console.log("pitchValue.value", pitchValue.value);
if (page == 0 && (pitchValue.value.companyid || pitchValue.value.rent_max || pitchValue.value.rent_min || pitchValue.value.roomlistings || pitchValue.value.roomtype || pitchValue.value.school || pitchValue.value.tag)) { if (page == 0 && (pitchValue.value.companyid || pitchValue.value.rent_max || pitchValue.value.rent_min || pitchValue.value.roomlistings || pitchValue.value.roomtype || pitchValue.value.school || pitchValue.value.tag)) {
morePage = 1; morePage = 1;
getMoreList(); getMoreList();
@@ -156,8 +163,10 @@ const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight; const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 350 && page != 0) getData(); if (scrollTop + clientHeight >= scrollHeight - 350) {
if (scrollTop + clientHeight >= scrollHeight - 350 && page == 0) getMoreList(); if (page != 0) getData();
else if (page == 0 && (pitchValue.value.companyid || pitchValue.value.rent_max || pitchValue.value.rent_min || pitchValue.value.roomlistings || pitchValue.value.roomtype || pitchValue.value.school || pitchValue.value.tag)) getMoreList();
}
}; };
let pitchValue = ref({ let pitchValue = ref({
@@ -213,7 +222,7 @@ const getMoreList = () => {
let notids = []; let notids = [];
list.value.forEach((element) => notids.push(element.id)); list.value.forEach((element) => notids.push(element.id));
proxy.$post("https://api.gter.net/v1/apartment/lists", { notids, page: morePage, limit: 12 }).then((res) => { proxy.$post("https://api.gter.net/v1/apartment/lists", { notids, page: morePage, limit: 1000 }).then((res) => {
if (res.code != 200) return; if (res.code != 200) return;
const data = res.data; const data = res.data;
if (!data.data) return; if (!data.data) return;
@@ -245,7 +254,7 @@ const getMoreScroll = () => {
let scrollTop = body.scrollTop; let scrollTop = body.scrollTop;
let clientHeight = body.clientHeight; let clientHeight = body.clientHeight;
let offsetHeight = body.offsetHeight; let offsetHeight = body.offsetHeight;
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList(); if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value && (pitchValue.value.companyid || pitchValue.value.rent_max || pitchValue.value.rent_min || pitchValue.value.roomlistings || pitchValue.value.roomtype || pitchValue.value.school || pitchValue.value.tag)) getMoreList();
}; };
// 处理列表的点击收藏 // 处理列表的点击收藏

25
src/views/seachIndex.vue
View File

@@ -8,7 +8,7 @@
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem> <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div> </div>
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer"> <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer">
<apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance"></apartment-item> <apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance" @handlecollect="handlecollect"></apartment-item>
</div> </div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0"> <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList> <noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
@@ -79,7 +79,6 @@ let setInitial = () => {
//获取搜索数据 //获取搜索数据
let getDataList = (data, type = true) => { let getDataList = (data, type = true) => {
console.log("data", data);
if (!type) { if (!type) {
//是否继续搜索 //是否继续搜索
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []); seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []);
@@ -186,6 +185,28 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("scroll", downLoadMore, true); window.removeEventListener("scroll", downLoadMore, true);
}); });
// 处理列表的点击收藏
const handlecollect = (uniqid) => {
let targetIndex = 0;
let token = "";
listApartment.value.forEach((element, index) => {
if (element.uniqid == uniqid) {
targetIndex = index;
token = element.token || "";
}
});
// api.apartmentCollection({ token }).then((res) => {
proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
if (res.code != 200) return;
const data = res.data;
listApartment.value[targetIndex]["iscollect"] = data.status;
ElMessage.success(res.message);
});
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
img { img {

17
src/views/user.vue
View File

@@ -215,7 +215,7 @@ import backToTop from "@/components/public/backToTop.vue";
import authenticationInfo from "@/components/seachModule/authenticationInfo.vue"; import authenticationInfo from "@/components/seachModule/authenticationInfo.vue";
import { redirectToExternalWebsite } from "@/utils/util.js"; import { redirectToExternalWebsite } from "@/utils/util.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue"; import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, onBeforeUnmount, nextTick, pushScopeId, onDeactivated } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { ElLoading, ElMessage } from "element-plus"; import { ElLoading, ElMessage } from "element-plus";
@@ -243,7 +243,6 @@ onMounted(() => {
}); });
init(); init();
console.log("onMounted");
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
}); });
@@ -341,6 +340,7 @@ const getPublishData = () => {
let favData = ref({ let favData = ref({
page: 1, page: 1,
list: [], list: [],
limit: 200000,
}); });
// 获取收藏数据 // 获取收藏数据
@@ -355,7 +355,7 @@ const getFavData = () => {
// .$post("/tenement/pc/api/user/favList", { // .$post("/tenement/pc/api/user/favList", {
// .$post("/tenement/pc/api/user/collectionList", { // .$post("/tenement/pc/api/user/collectionList", {
proxy proxy
.$post("https://app.gter.net/tenement/v2/api/user/collections", { page: favData.value["page"] }) .$post("https://app.gter.net/tenement/v2/api/user/collections", { page: favData.value["page"], limit: favData.value["limit"] })
.then((res) => { .then((res) => {
if (res.code != 200) return; if (res.code != 200) return;
let data = res.data; let data = res.data;
@@ -410,7 +410,6 @@ let cancelCollection = (data) => {
if (index == -1) return; if (index == -1) return;
// const list = favData.value.list || []; // const list = favData.value.list || [];
console.log("list", list);
proxy proxy
.$post(url, { .$post(url, {
@@ -499,6 +498,8 @@ const handleDelete = (index, status) => {
// 监听滚动到底部 // 监听滚动到底部
const handleScroll = () => { const handleScroll = () => {
// 判断是不是 user 页面
if (route.path.indexOf("/user") == -1) window.removeEventListener("scroll", handleScroll);
if (!user.value["uid"]) return; if (!user.value["uid"]) return;
const scrollHeight = document.documentElement.scrollHeight; const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight;
@@ -512,7 +513,13 @@ const handleScroll = () => {
// 跳转公寓详情页 // 跳转公寓详情页
const goApartmentDetail = (item) => redirectToExternalWebsite(`/apartmentDetail?uniqid=${item.uniqid}`); const goApartmentDetail = (item) => redirectToExternalWebsite(`/apartmentDetail?uniqid=${item.uniqid}`);
onUnmounted(() => window.removeEventListener("scroll", handleScroll)); onBeforeUnmount(() => {
window.removeEventListener("scroll", handleScroll);
});
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll);
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>