4.6新样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user