修改bug和修改学校距离单位

This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-26 19:04:51 +08:00
parent cd1f1ecf83
commit c1df4e8cbf
10 changed files with 148 additions and 50 deletions

View File

@@ -999,7 +999,7 @@
color: #555555; color: #555555;
line-height: 30px; line-height: 30px;
padding: 0 15px; padding: 0 15px;
margin-bottom: 26px; margin-bottom: 20px;
white-space: pre-line; white-space: pre-line;
} }
.content .details-box .details-right { .content .details-box .details-right {

View File

@@ -1438,7 +1438,7 @@
color: #555555; color: #555555;
line-height: 30px; line-height: 30px;
padding: 0 15px; padding: 0 15px;
margin-bottom: 26px; margin-bottom: 20px;
white-space: pre-line; white-space: pre-line;
} }
} }

View File

@@ -51,6 +51,7 @@ const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
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;
cursor: pointer; cursor: pointer;
transition: all .3s;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 20px; margin-bottom: 20px;

View File

@@ -23,7 +23,7 @@
<div v-if="historyArr.length != 0" style="margin-bottom: 30px"> <div v-if="historyArr.length != 0" style="margin-bottom: 30px">
<div class="title">历史搜索</div> <div class="title">历史搜索</div>
<div class="info-box"> <div class="info-box">
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)"> <div v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
<div class="flexflex">{{ item }}</div> <div class="flexflex">{{ item }}</div>
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" /> <img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
</div> </div>

View File

@@ -50,20 +50,20 @@
<div class="figure flexflex" v-if="item.distance?.distance"> <div class="figure flexflex" v-if="item.distance?.distance">
距离 距离
<div class="school">{{ item.distance.alias }}</div> <div class="school">{{ item.distance.alias }}</div>
<div class="mile">{{ calculateDistance(item.distance.distance) }}km</div> <div class="mile">{{ item.distance.distance }}公里</div>
</div> </div>
<div class="vehicle-list flex1 flexflex"> <div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
{{ calculateDuration(item.distance.walking_duration) }} {{ item.distance.walking_duration }}时长()
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
{{ calculateDuration(item.distance.transit_duration) }} {{ item.distance.transit_duration }}时长()
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ calculateDuration(item.distance.driving_duration) }} {{ item.distance.driving_duration }}时长()
</div> </div>
</div> </div>
</div> </div>
@@ -85,10 +85,10 @@
<div class="price flexflex"> <div class="price flexflex">
<div class="type-data flexacenter"> <div class="type-data flexacenter">
<div class="unit">HK$</div> <div class="unit">HK$</div>
<div class="price">{{ it.discountprice || it["price"] }}</div> <div class="price">{{ it.discountprice || it.price }}</div>
/ /
</div> </div>
<div class="original-price" v-if="it.discountprice">HK${{ it.discountprice }}/</div> <div class="original-price" v-if="it.discountprice">HK${{ it.price }}/</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -130,7 +130,7 @@ defineExpose({
#container { #container {
cursor: pointer; cursor: pointer;
width: 816px; width: 814px;
height: 180px; height: 180px;
margin-top: 20px; margin-top: 20px;
// margin-bottom: 40px; // margin-bottom: 40px;

View File

@@ -124,17 +124,26 @@
</div> </div>
</div> </div>
<span class="dis-f al-item sort-text" v-show="tabType !== 'apartment'"> <span class="dis-f al-item sort-text" v-show="tabType !== 'apartment'">
<el-dropdown trigger="click" @command="listSortCheck"> <el-dropdown popper-class="popover-sort" trigger="click" @command="listSortCheck">
<span class="dis-f al-item sort-text"> {{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="" /> </span> <div class="sort-btn flexacenter">
{{ listSort.check }}
<img class="sort-icon" src="@/assets/homeImage/sortIcon.png" />
</div>
<!-- <span class="dis-f al-item sort-text"> {{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="" /> </span> -->
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="pd-10 el-dropdown-menu"> <el-dropdown-menu class="sort-box">
<el-dropdown-item class="sort-item" v-for="(item, j) in listSort.type" :key="j" :command="j">
<div :class="{ pitch: listSort.checkType === item.type }">{{ item.title }}</div>
</el-dropdown-item>
</el-dropdown-menu>
<!-- <el-dropdown-menu class="pd-10 el-dropdown-menu">
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j"> <el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j">
<div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"> <div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }">
{{ items.title }} {{ items.title }}
<div class="type-icon" v-show="listSort.checkType === items.type"></div> <div class="type-icon" v-show="listSort.checkType === items.type"></div>
</div> </div>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu> -->
</template> </template>
</el-dropdown> </el-dropdown>
</span> </span>
@@ -438,13 +447,14 @@ let selectTabCheck = reactive({
//最新发布选项 //最新发布选项
let listSort = shallowReactive({ let listSort = shallowReactive({
type: [ type: [
{ title: "综合", type: "default" },
{ title: "最新发布", type: "timestamp" }, { title: "最新发布", type: "timestamp" },
{ title: "热门", type: "hotnum" }, { title: "热门", type: "hotnum" },
{ title: "价格从低到高", type: "rentasc" }, { title: "价格从低到高", type: "rentasc" },
{ title: "价格从高到低", type: "rentdesc" }, { title: "价格从高到低", type: "rentdesc" },
], ],
checkType: "timestamp", checkType: "default",
check: "最新发布", check: "综合",
}); });
//搜索列表排序 //搜索列表排序
let listSortCheck = (item) => { let listSortCheck = (item) => {
@@ -844,6 +854,20 @@ img {
color: #000000; color: #000000;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
.sort-btn {
cursor: pointer;
color: #000;
line-height: 24px;
font-size: 14px;
font-weight: 650;
.sort-icon {
width: 20px;
height: 20px;
margin-left: 10px;
}
}
} }
.img { .img {
@@ -1003,3 +1027,51 @@ img {
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1); --el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
} }
</style> </style>
<style lang="less">
.el-popper.popover-sort {
width: 150px;
padding: 0;
border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
.sort-box {
padding: 26px 20px 2px;
font-size: 14px;
color: #7f7f7f;
border-radius: 10px;
.sort-item {
margin-bottom: 30px;
cursor: pointer;
padding: 0;
&:not(.is-disabled):focus{
background-color: #fff;
color: #7f7f7f;
}
.pitch {
width: 100%;
color: #000;
font-weight: 650;
position: relative;
&::before {
content: "";
width: 6px;
height: 14px;
background-color: rgba(80, 227, 194, 1);
border-radius: 3px;
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
}
}
}
</style>

View File

@@ -95,16 +95,30 @@
<div class="figure flexacenter" v-if="distancePitch?.alias"> <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 }}公里
<div class="btn" @click="openSelectSchool">[切换院校]</div> <div class="btn" @click="openSelectSchool">[切换院校]</div>
</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" />
{{ item }} {{ item }}
</div> -->
<div class="item flexcenter" v-if="distancePitch.walking_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
{{ distancePitch.walking_duration }}时长()
</div>
<div class="item flexcenter" v-if="distancePitch.transit_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ distancePitch.transit_duration }}时长()
</div>
<div class="item flexcenter" v-if="distancePitch.driving_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
{{ distancePitch.driving_duration }}时长()
</div> </div>
</div> </div>
</div> </div>
@@ -179,7 +193,7 @@
</div> </div>
<div class="explain two-line-text">{{ spotObj.content }}</div> <div class="explain two-line-text">{{ spotObj.content }}</div>
</div> </div>
<img class="inspect-img" :src="spotObj.sources[0].thumbnail" /> <img class="inspect-img" :src="spotObj.sources[0]?.thumbnail" />
</div> </div>
</div> </div>
@@ -603,14 +617,20 @@
<div class="distance flexacenter"> <div class="distance flexacenter">
距离 距离
<div class="abbreviation">{{ item.alias }}</div> <div class="abbreviation">{{ item.alias }}</div>
{{ item.distance }}km {{ item.distance }}公里
</div> </div>
<div class="vehicle flexflex flex1"> <div class="vehicle flexflex flex1">
<div class="item flexcenter" v-for="(item, index) in item.obj" :key="index"> <div class="item flexcenter" v-if="item.walking_duration > 0">
<img v-if="index == 'walking'" class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
<img v-else-if="index == 'driving'" class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> {{ item.walking_duration }}时长()
<img v-else class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> </div>
{{ item }} <div class="item flexcenter" v-if="item.transit_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ item.transit_duration }}时长()
</div>
<div class="item flexcenter" v-if="item.driving_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
{{ item.driving_duration }}时长()
</div> </div>
</div> </div>
</div> </div>
@@ -1236,8 +1256,8 @@ 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 body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element");
let offsetHeight = body.offsetHeight let offsetHeight = body.offsetHeight;
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop; const scrollTop = document.documentElement.scrollTop;
const top = scrollTop + clientHeight; const top = scrollTop + clientHeight;
@@ -1254,7 +1274,7 @@ const handleScroll = () => {
const topDistance = 260 - 36 + headerHeight + leftHeight + 223; const topDistance = 260 - 36 + headerHeight + leftHeight + 223;
if (top > topDistance && isFixed.value == false) { if (top > topDistance && isFixed.value == false) {
isFixed.value = true; isFixed.value = true;
FixedBottom.value = document.querySelector(".index-footer").getBoundingClientRect().height + 20 FixedBottom.value = document.querySelector(".index-footer").getBoundingClientRect().height + 20;
} }
if (top < topDistance && isFixed.value == true) isFixed.value = false; if (top < topDistance && isFixed.value == true) isFixed.value = false;
@@ -1422,24 +1442,25 @@ const getMapDistance = () => {
let arr = []; let arr = [];
let pitch = null; let pitch = null;
distance.forEach((element) => { distance.forEach((element) => {
let obj = {}; // let obj = {};
element.distance = calculateDistance(element.distance); // element.distance = calculateDistance(element.distance);
if (element.walking && element.walking.duration) obj["walking"] = calculateDuration(element.walking.duration); // if (element.walking && element.walking.duration) obj["walking"] = calculateDuration(element.walking.duration);
if (element.transit && element.transit.duration) obj["transit"] = calculateDuration(element.transit.duration); // if (element.transit && element.transit.duration) obj["transit"] = calculateDuration(element.transit.duration);
if (element.driving && element.driving.duration) obj["driving"] = calculateDuration(element.driving.duration); // if (element.driving && element.driving.duration) obj["driving"] = calculateDuration(element.driving.duration);
const target = { // const target = {
name: element.name, // name: element.name,
distance: element.distance, // distance: element.distance,
alias: element.alias, // alias: element.alias,
sid: element.sid, // sid: element.sid,
obj, // obj,
}; // };
arr.push(target); // arr.push(target);
if (element.sid == sid) pitch = target; if (element.sid == sid) pitch = element
}); });
if (pitch == null) pitch = arr[0];
distanceList.value = arr; if (pitch == null) pitch = distance[0];
distanceList.value = distance;
distancePitch.value = pitch; distancePitch.value = pitch;
}); });
}; };
@@ -1450,6 +1471,7 @@ const openSelectSchool = () => {
isSelectSchool.value = true; isSelectSchool.value = true;
nextTick(() => { nextTick(() => {
return
const item = selectSchoolRef.value.querySelector(`.item${distancePitch.value.sid}`); const item = selectSchoolRef.value.querySelector(`.item${distancePitch.value.sid}`);
if (!item) return; if (!item) return;
selectSchoolRef.value.scrollTo({ top: item.offsetTop - 20, behavior: "smooth" }); selectSchoolRef.value.scrollTo({ top: item.offsetTop - 20, behavior: "smooth" });
@@ -2055,6 +2077,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
margin-top: 7px; margin-top: 7px;
padding-bottom: 7px;
.abbreviation { .abbreviation {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -2143,7 +2166,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
padding-left: 20px; padding-left: 20px;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px dashed #d7d7d7; border-bottom: 1px #d7d7d7 dotted;
} }
.avatar { .avatar {

View File

@@ -8,7 +8,7 @@
<div class="info-box"> <div class="info-box">
<div class="top-bar-box dis-f jus-x" :class="{ intermediary: housingInfo['data'] && (housingInfo['data'].isintermediary == 1 || housingInfo['data'].info.verified) }"> <div class="top-bar-box dis-f jus-x" :class="{ intermediary: housingInfo['data'] && (housingInfo['data'].isintermediary == 1 || housingInfo['data'].info.verified) }">
<div class="top-bar dis-f al-item jus-bet"> <div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item"> <div class="dis-f al-item" style="margin-right: 10px;">
<img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" v-if="pageType == 1 && housingInfo['data'] && housingInfo['data'].info.verified" alt="" /> <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" v-if="pageType == 1 && housingInfo['data'] && housingInfo['data'].info.verified" alt="" />
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" style="margin-right: 10px" v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1" alt="" /> <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" style="margin-right: 10px" v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1" alt="" />
<div class="line" v-if="(housingInfo['data'] && housingInfo['data'].info.verified) || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1)"></div> <div class="line" v-if="(housingInfo['data'] && housingInfo['data'].info.verified) || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1)"></div>
@@ -1825,7 +1825,7 @@ img {
} }
.top-bar { .top-bar {
width: 750px; min-width: 750px;
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;

View File

@@ -126,6 +126,8 @@ const getData = () => {
localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value)); localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value));
pitchValue.value['sid'] = pitchValue.value['school'] || 0;
proxy proxy
.$post("https://api.gter.net/v1/apartment/lists", { limit: 1000, page, ...pitchValue.value }) .$post("https://api.gter.net/v1/apartment/lists", { limit: 1000, page, ...pitchValue.value })
.then((res) => { .then((res) => {