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

4.6新样式

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-09 18:27:24 +08:00
parent 1ea3894be8
commit 3e4daeb420
11 changed files with 1062 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

702
src/views/apartmentDetail.vue
View File

@@ -5,7 +5,7 @@
<div class="header">
<div class="top flexflex">
<div class="brand-abstract flexflex">
<div class="flexacenter" style="height: min-content;">
<div class="flexacenter" style="height: min-content">
<a class="item" href="/">港校租房</a>
<img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg" />
<a class="item" href="/apartment">品牌公寓</a>
@@ -27,9 +27,7 @@
</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'] == '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>
@@ -57,22 +55,48 @@
<div class="header-right flex1">
<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-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>
</div>
</div> -->
<div class="apartment-name wordbreak" v-if="info['title']">{{ info["title"] }}</div>
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
<div class="place flexacenter" v-if="info['address']">
<div class="left flexacenter">
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
<div class="place-text ellipsis">{{ info["address"] }}</div>
<div class="label-list flexacenter">
<div class="label-item flexacenter blue">
<img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
实地考察
</div>
<div class="right flexacenter" @click="handleClickNav('addressEle')">
位置与交通
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
<div class="label-item flexacenter violet">费用全包</div>
<div class="label-item flexacenter red">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
</div>
<div class="introduce">
<div class="introduce-head flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
<div class="name">iRent</div>
<div class="full-name flex1">油尖旺中心地带的品质公寓</div>
<div class="more flexacenter">
同品牌
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
</div>
<!-- <div class="synopsis wordbreak">{{ info["introduction"] }}</div> -->
<div class="place flexacenter" v-if="info['address']">
<div class="place-head flexacenter">
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
<div class="text flex1 ellipsis">{{ info["address"] }}</div>
<div class="more flexacenter" @click="handleClickNav('addressEle')">
位置与交通
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div>
<div class="else flexacenter" v-if="withsameapartments">
<!-- <div class="else flexacenter" v-if="withsameapartments">
<div class="left flexacenter">
<img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
同品牌其他公寓
@@ -81,7 +105,7 @@
<div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div>
<img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -223,7 +247,7 @@
</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' }">
<div class="distance-info-right flex1">
@@ -258,12 +282,12 @@
<!-- 地铁 -->
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
<div class="subway-name flexcenter">{{ item.name }}</div>
<div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
<div class="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 class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
</div>
</div>
</div>
@@ -325,7 +349,7 @@
<!-- 品牌介绍 -->
<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']" />
@@ -333,9 +357,7 @@
</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>
@@ -422,179 +444,179 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue"
import { ElMessage, valueEquals } from "element-plus"
import { useStore } from "vuex"
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue";
import { ElMessage, valueEquals } from "element-plus";
import { useStore } from "vuex";
import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
import footerpage from "@/components/footer/footer.vue"
import viewMap from "@/components/public/viewMap.vue"
import transmitBtn from "@/components/public/transmitBtn.vue"
import backToTop from "@/components/public/backToTop.vue"
import imageWatch from "@/components/detail/imageWatch.vue"
import phoneqrcode from "@/components/public/phoneQRcode.vue"
import groupqrcode from "@/components/public/group-QRcode.vue"
import api from "@/utils/api"
import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
import footerpage from "@/components/footer/footer.vue";
import viewMap from "@/components/public/viewMap.vue";
import transmitBtn from "@/components/public/transmitBtn.vue";
import backToTop from "@/components/public/backToTop.vue";
import imageWatch from "@/components/detail/imageWatch.vue";
import phoneqrcode from "@/components/public/phoneQRcode.vue";
import groupqrcode from "@/components/public/group-QRcode.vue";
import api from "@/utils/api";
import { useRouter, useRoute } from "vue-router"
let router = useRouter()
import { useRouter, useRoute } from "vue-router";
let router = useRouter();
const route = useRoute()
const route = useRoute();
watch(route, () => {
uniqid = router.currentRoute.value.query["uniqid"]
pitchSchool = router.currentRoute.value.query["school"] || ""
info.value = {}
roomList.value = []
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} }
navList.value = []
navTab.value = "roomEle"
dualBrandList.value = []
contactReservationState.value = false
customerservicelist.value = []
mediaBtnstate.value = {}
uniqid = router.currentRoute.value.query["uniqid"];
pitchSchool = router.currentRoute.value.query["school"] || "";
info.value = {};
roomList.value = [];
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
navList.value = [];
navTab.value = "roomEle";
dualBrandList.value = [];
contactReservationState.value = false;
customerservicelist.value = [];
mediaBtnstate.value = {};
slideshowList.value = null
detailsLeft.value = null
token = ""
slideshowList.value = null;
detailsLeft.value = null;
token = "";
carouselIndex.value = 0
allCarouselsData.value = []
carouselIndex.value = 0;
allCarouselsData.value = [];
// mediaBtnstate.value = {}
init()
distanceSchool()
})
init();
distanceSchool();
});
let { uniqid } = router.currentRoute.value.query
let pitchSchool = route.query.school || 0
let { uniqid } = router.currentRoute.value.query;
let pitchSchool = route.query.school || 0;
import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js"
import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js";
const { proxy } = getCurrentInstance()
const store = useStore()
const { proxy } = getCurrentInstance();
const store = useStore();
let imageShow = ref(false) // 查看大图弹窗的状态
let imageList = ref([]) // 查看大图弹窗的状态
let imageIndex = ref(0) // 查看大图弹窗的状态
let imageType = "" // 查看大图弹窗的状态
let imageShow = ref(false); // 查看大图弹窗的状态
let imageList = ref([]); // 查看大图弹窗的状态
let imageIndex = ref(0); // 查看大图弹窗的状态
let imageType = ""; // 查看大图弹窗的状态
const cloaseImageShow = (list, index, type) => {
if (list && imageType != type) {
imageList.value = list
imageIndex.value = index
imageType = type
imageList.value = list;
imageIndex.value = index;
imageType = type;
}
imageShow.value = !imageShow.value
}
imageShow.value = !imageShow.value;
};
// 房间类型
let roomList = ref([])
let info = ref({})
let roomList = ref([]);
let info = ref({});
let facilitiesKeyValue = {
// 设施的键值对
public: "公共",
kitchen: "餐厨",
lavatory: "洗手间",
}
};
let withsameapartments = ref(0) // 其他公寓数量
let attachment = ref([]) // 轮播图数据
let withsameapartments = ref(0); // 其他公寓数量
let attachment = ref([]); // 轮播图数据
let company = {} // 品牌数据
let token = ""
let qrcode = ref("") // 小程序详情二维码
let company = {}; // 品牌数据
let token = "";
let qrcode = ref(""); // 小程序详情二维码
let allCarouselsData = ref([])
let allCarouselsData = ref([]);
onMounted(() => {
init()
distanceSchool()
})
init();
distanceSchool();
});
const init = () => {
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then((res) => {
if (res.code != 200) {
ElMessage.error(res["message"])
return
ElMessage.error(res["message"]);
return;
}
let data = res.data
let data = res.data;
data["roomList"].forEach(element => {
element["images"].forEach(element => {
element["type"] = "attachment"
})
element["videos"].forEach(element => {
element["type"] = "videos"
})
})
data["roomList"].forEach((element) => {
element["images"].forEach((element) => {
element["type"] = "attachment";
});
element["videos"].forEach((element) => {
element["type"] = "videos";
});
});
roomList.value = data["roomList"]
data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map(item => {
return +item
})
roomList.value = data["roomList"];
data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map((item) => {
return +item;
});
info.value = data["info"]
attachment.value = data["info"]["attachment"]
withsameapartments.value = data["withsameapartments"]
company = data["company"]
token = data["token"]
qrcode.value = data["qrcode"]
info.value = data["info"];
attachment.value = data["info"]["attachment"];
withsameapartments.value = data["withsameapartments"];
company = data["company"];
token = data["token"];
qrcode.value = data["qrcode"];
handleAllCarouselsData()
handleAllCarouselsData();
document.title = data?.info?.title || "港校租房-品牌公寓详情"
document.title = data?.info?.title || "港校租房-品牌公寓详情";
nextTick(() => handleNavData())
nextTick(() => handleNavData());
if (data.withsameapartments > 0) dualBrandData()
})
}
if (data.withsameapartments > 0) dualBrandData();
});
};
let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} })
let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} });
// 处理 轮播图大图的索引 tab
const handleAllCarouselsData = () => {
let targetInfo = { ...info.value }
let targetInfo = { ...info.value };
let accumulativeTotal = 0 // 累计
let accumulativeTotal = 0; // 累计
for (const key in carouselsconfig.value) {
carouselsconfig.value[key] = {
amount: targetInfo[key].length,
index: accumulativeTotal,
}
accumulativeTotal += targetInfo[key].length
};
accumulativeTotal += targetInfo[key].length;
}
targetInfo["lives"].forEach(element => {
element["type"] = "lives"
allCarouselsData.value.push(element)
})
targetInfo["lives"].forEach((element) => {
element["type"] = "lives";
allCarouselsData.value.push(element);
});
targetInfo["videos"].forEach(element => {
element["type"] = "videos"
allCarouselsData.value.push(element)
})
targetInfo["videos"].forEach((element) => {
element["type"] = "videos";
allCarouselsData.value.push(element);
});
let thumbnailList = targetInfo["thumbnailList"]
let thumbnailList = targetInfo["thumbnailList"];
targetInfo["attachment"].forEach((element, index) => {
element = {
imageurl: element,
thumbnail: thumbnailList[index],
}
element["type"] = "attachment"
allCarouselsData.value.push(element)
})
}
};
element["type"] = "attachment";
allCarouselsData.value.push(element);
});
};
const roomEle = ref(null)
const specialEle = ref(null)
const addressEle = ref(null)
const messageEle = ref(null)
const facilitiesEle = ref(null)
const lifeEle = ref(null)
const companyEle = ref(null)
const eleseEle = ref(null)
const roomEle = ref(null);
const specialEle = ref(null);
const addressEle = ref(null);
const messageEle = ref(null);
const facilitiesEle = ref(null);
const lifeEle = ref(null);
const companyEle = ref(null);
const eleseEle = ref(null);
let navconfig = [
{
@@ -625,36 +647,36 @@ let navconfig = [
name: "品牌介绍",
value: "companyEle",
},
]
let navList = ref([])
];
let navList = ref([]);
let navTab = ref("roomEle")
let navTab = ref("roomEle");
// 处理 navList 数据
const handleNavData = () => {
navconfig.forEach(element => {
if (eval(element["value"]).value) navList.value.push(element)
})
}
navconfig.forEach((element) => {
if (eval(element["value"]).value) navList.value.push(element);
});
};
// 处理点击nav 滚动事件
const handleClickNav = value => {
let scrollTop = eval(value).value.offsetTop + 136
window.scrollTo({ top: scrollTop, behavior: "smooth" })
}
const handleClickNav = (value) => {
let scrollTop = eval(value).value.offsetTop + 136;
window.scrollTo({ top: scrollTop, behavior: "smooth" });
};
let dualBrandList = ref([]) // 同品牌数据
let dualBrandList = ref([]); // 同品牌数据
// 同品牌请求数据
const dualBrandData = () => {
proxy.$get("/tenement/pc/api/apartment", { token }).then(res => {
if (res.code != 200) return
let data = res.data
dualBrandList.value = data.data
})
}
proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
if (res.code != 200) return;
let data = res.data;
dualBrandList.value = data.data;
});
};
// 点击转发的复制链接按钮
const copy = value =>
const copy = (value) =>
copyToClipboard(value).then(() => {
ElMessage({
message: "复制成功",
@@ -662,17 +684,17 @@ const copy = value =>
offset: 320,
duration: 1000,
customClass: "message-info",
})
})
});
});
let contactReservationState = ref(false) // 联系预订客服的弹窗状态
let customerservicelist = ref([]) // 联系预订客服的弹窗状态
let contactReservationState = ref(false); // 联系预订客服的弹窗状态
let customerservicelist = ref([]); // 联系预订客服的弹窗状态
// 修改 客服 弹窗状态
const modificationContact = () => {
if (customerservicelist.value.length == 0) contactReservationService()
else contactReservationState.value = !contactReservationState.value
}
if (customerservicelist.value.length == 0) contactReservationService();
else contactReservationState.value = !contactReservationState.value;
};
// 联系预订客服 请求数据
const contactReservationService = () => {
@@ -681,212 +703,212 @@ const contactReservationService = () => {
customerservice: info.value["customerservice"],
token,
})
.then(res => {
if (res.code != 200) return
let data = res.data
customerservicelist.value = data["customerservicelist"]
contactReservationState.value = !contactReservationState.value
})
}
.then((res) => {
if (res.code != 200) return;
let data = res.data;
customerservicelist.value = data["customerservicelist"];
contactReservationState.value = !contactReservationState.value;
});
};
let mediaBtnstate = ref({}) // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
let mediaBtnstate = ref({}); // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
const handleMediaBtn = (type, index) => {
const element = document.querySelector(`.element${index}`)
const element = document.querySelector(`.element${index}`);
if (element) {
let left
if (type == "left") left = element.scrollLeft - 86
else left = element.scrollLeft + 86
let left;
if (type == "left") left = element.scrollLeft - 86;
else left = element.scrollLeft + 86;
const scrollOptions = {
left,
behavior: "smooth",
}
element.scrollTo(scrollOptions)
};
element.scrollTo(scrollOptions);
nextTick(() => {
setTimeout(() => {
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
else mediaBtnstate.value[index] = 2
}, 150)
})
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0;
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1;
else mediaBtnstate.value[index] = 2;
}, 150);
});
}
}
};
let slideshowList = ref(null) // 轮播图小图的节点
let slideshowList = ref(null); // 轮播图小图的节点
let carouselIndex = ref(0) // 轮播图的索引
let carouselIndex = ref(0); // 轮播图的索引
const remarkCaruselUp = ref(null)
const remarkCaruselUp = ref(null);
const carouselChange = value => {
carouselIndex.value = value
const element = slideshowList.value
const elementchild = element.querySelector(`.item${value}`)
const carouselChange = (value) => {
carouselIndex.value = value;
const element = slideshowList.value;
const elementchild = element.querySelector(`.item${value}`);
let left = elementchild.offsetLeft - element.offsetLeft
let left = elementchild.offsetLeft - element.offsetLeft;
const scrollOptions = {
left,
behavior: "smooth",
}
element.scrollTo(scrollOptions)
}
};
element.scrollTo(scrollOptions);
};
// 顶部轮播图的左右按钮
const handleslideshow = type => {
if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev()
if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next()
}
const handleslideshow = (type) => {
if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev();
if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next();
};
// 直接点击轮播图的小图就行切换
const slideshowItem = index => remarkCaruselUp.value.setActiveItem(index)
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);
onMounted(() => {
window.addEventListener("scroll", handleScroll)
})
window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll)
})
window.removeEventListener("scroll", handleScroll);
});
const gobrand = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)
const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
const handleScroll = () => {
if (Math.random() > 0.3) return
if (Math.random() > 0.3) return;
for (let i = 0; i < navList.value.length; i++) {
let element = navList.value[i]
let element = navList.value[i];
const rect = eval(element.value).value.getBoundingClientRect()
const distanceToTop = rect.top
const rect = eval(element.value).value.getBoundingClientRect();
const distanceToTop = rect.top;
if (distanceToTop >= 0) {
navTab.value = element.value
break
navTab.value = element.value;
break;
}
}
}
};
const indicateTypeState = () => {
let total = 0 // 累计
let total = 0; // 累计
for (const key in carouselsconfig.value) {
if (carouselsconfig.value[key]["amount"] > 0) total++
if (carouselsconfig.value[key]["amount"] > 0) total++;
}
return total > 1 ? true : false
}
return total > 1 ? true : false;
};
// 公共跳转
const publicJump = path => router.push(path)
const publicJump = (path) => router.push(path);
// 获取 距离学校距离
const distanceSchool = () => {
api.detailsDistance({
uniqid,
istype: 2,
}).then(res => {
const data = res.data
if (res.code != 200) return
}).then((res) => {
const data = res.data;
if (res.code != 200) return;
let specialSchoolDistanceTarget = null
let academyPitchIndexTarget = 0
const school = pitchSchool || ""
let annexSchoolOmitTarget = []
let specialSchoolDistanceTarget = null;
let academyPitchIndexTarget = 0;
const school = pitchSchool || "";
let annexSchoolOmitTarget = [];
data.forEach((element, index) => {
element["distanceText"] = metersToKilometers(element.distance)
element.list.forEach(ele => {
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese")
ele["durationText2"] = secondsToHoursMinutes(ele.duration)
ele["distanceText"] = metersToKilometers(ele.distance)
element["distanceText"] = metersToKilometers(element.distance);
element.list.forEach((ele) => {
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese");
ele["durationText2"] = secondsToHoursMinutes(ele.duration);
ele["distanceText"] = metersToKilometers(ele.distance);
if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") {
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese")
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0)
const segments = ele.publictransport["segments"]
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese");
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0);
const segments = ele.publictransport["segments"];
if (Array.isArray(segments)) {
segments.forEach(e => {
e["via_num"] = 1 + Math.floor(e.via_num)
e["durationText"] = secondsToHoursMinutes(e.duration)
e["distanceText"] = metersToKilometers(e.distance, "chinese")
})
segments.forEach((e) => {
e["via_num"] = 1 + Math.floor(e.via_num);
e["durationText"] = secondsToHoursMinutes(e.duration);
e["distanceText"] = metersToKilometers(e.distance, "chinese");
});
}
} else ele.publictransport = null
})
} else ele.publictransport = null;
});
if (school == element.id) {
academyPitchIndexTarget = index
const obj = element.list[0] || {}
let toolText = "步行"
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁"
academyPitchIndexTarget = index;
const obj = element.list[0] || {};
let toolText = "步行";
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁";
specialSchoolDistanceTarget = {
alias: element.alias,
distanceText: obj["distanceText"],
durationText: obj.publictransport?.durationText2 || obj["durationText2"],
toolText,
}
} else annexSchoolOmitTarget.push(element)
})
};
} else annexSchoolOmitTarget.push(element);
});
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4)
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5)
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4);
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5);
annexSchoolOmit.value = annexSchoolOmitTarget
annexSchoolList.value = data
targetAcademyPitch.value = data[academyPitchIndexTarget]
specialSchoolDistance.value = specialSchoolDistanceTarget
academyPitchIndex.value = academyPitchIndexTarget
})
}
annexSchoolOmit.value = annexSchoolOmitTarget;
annexSchoolList.value = data;
targetAcademyPitch.value = data[academyPitchIndexTarget];
specialSchoolDistance.value = specialSchoolDistanceTarget;
academyPitchIndex.value = academyPitchIndexTarget;
});
};
let annexSchoolOmit = ref([]) // 附近院校 前面 7个 或者 6个的
let annexSchoolList = ref([]) // 附近院校数据
let academyPitchIndex = ref(0) // 附近学校距离选中院校 下标
let targetAcademyPitch = ref({}) // 附近学校距离选中院校 数据
let specialSchoolDistance = ref(null) // 特殊的 用户带有school参数 则需要特殊显示 学校距离
const elscrollbarRef = ref(null) // 滚动条
let annexSchoolOmit = ref([]); // 附近院校 前面 7个 或者 6个的
let annexSchoolList = ref([]); // 附近院校数据
let academyPitchIndex = ref(0); // 附近学校距离选中院校 下标
let targetAcademyPitch = ref({}); // 附近学校距离选中院校 数据
let specialSchoolDistance = ref(null); // 特殊的 用户带有school参数 则需要特殊显示 学校距离
const elscrollbarRef = ref(null); // 滚动条
// 选择附近学校距离的学校下标
const selectAcademyIndex = index => {
academyPitchIndex.value = index || 0
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
elscrollbarRef.value.setScrollTop(0)
}
const selectAcademyIndex = (index) => {
academyPitchIndex.value = index || 0;
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
elscrollbarRef.value.setScrollTop(0);
};
// 选择附近学校距离的学校下标
const selectIndex = id => {
if (!id) id = pitchSchool
const data = annexSchoolOmit.value || []
const selectIndex = (id) => {
if (!id) id = pitchSchool;
const data = annexSchoolOmit.value || [];
data.forEach((element, index) => {
if (element.id == id) {
academyPitchIndex.value = index || 0
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
academyPitchIndex.value = index || 0;
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
}
})
});
// showDistance.value = true
}
};
//显示详情
let showDistance = ref(false)
let showDistance = ref(false);
// 点击收藏
const handleCollect = () => {
api.apartmentCollection({ token }).then(res => {
if (res.code != 200) return
const data = res.data
info.value.iscollect = data.status || 0
ElMessage.success(res.message)
})
}
api.apartmentCollection({ token }).then((res) => {
if (res.code != 200) return;
const data = res.data;
info.value.iscollect = data.status || 0;
ElMessage.success(res.message);
});
};
// 设置媒体列表的类名
const getClass = index => {
const getClass = (index) => {
return {
pitch: index === carouselIndex.value,
[`item${index}`]: true,
}
}
};
};
</script>
<style lang="less" scoped>
@@ -999,7 +1021,7 @@ const getClass = index => {
height: 340px;
display: flex;
align-items: center;
border-radius: 5px;
border-radius: 8px;
.img {
width: 100%;
@@ -1167,18 +1189,106 @@ const getClass = index => {
}
.apartment-name {
font-size: 28px;
color: #000000;
line-height: 46px;
// font-size: 28px;
// color: #000000;
// line-height: 46px;
margin-bottom: 20px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 32px;
color: #000000;
}
.synopsis {
font-size: 14px;
color: #7f7f7f;
line-height: 24px;
margin-bottom: 20px;
white-space: pre-wrap;
.label-list {
flex-wrap: wrap;
padding-bottom: 14px;
border-bottom: 1px solid #ebebeb;
.label-item {
.safety-icon {
width: 14px;
height: 14px;
margin-right: 5px;
}
color: #555555;
text-align: center;
height: 22px;
line-height: 22px;
background-color: rgba(235, 235, 235, 1);
border-radius: 8px;
color: #555555;
line-height: 26px;
padding: 0 8px;
font-size: 13px;
margin-right: 10px;
margin-bottom: 8px;
&.blue {
color: #ffffff;
background-color: rgba(98, 177, 255, 1);
}
&.violet {
color: #ffffff;
background-color: rgba(128, 128, 255, 1);
}
&.red {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
}
}
.introduce {
padding-top: 20px;
.introduce-head {
margin-bottom: 12px;
.icon {
width: 18px;
height: 18px;
}
.name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-left: 12px;
margin-right: 11px;
}
.full-name {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #555;
font-size: 14px;
}
.more {
color: #333333;
font-size: 14px;
.icon {
width: 6px;
height: 10px;
margin-left: 10px;
}
}
}
.synopsis {
font-size: 14px;
color: #7f7f7f;
line-height: 24px;
margin-bottom: 20px;
white-space: pre-wrap;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
padding-left: 29px;
}
}
.place-text {

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

@@ -72,7 +72,7 @@ onMounted(() => {
// 初始化瀑布流
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item",
gutter: 15,
gutter: 22,
})
// masonryInstanceMore = new Masonry(moreShowList.value, {
@@ -240,7 +240,7 @@ const handlecollect = uniqid => {
}
.list {
margin: 32px auto 0;
margin: 20px auto 0;
flex-wrap: wrap;
justify-content: space-between;