- ![]()
+ ![]()
-
-
+
diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index 7143474..265a3c0 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -9,31 +9,52 @@
+
+
+
-
- ![]()
+
+ ![]()
+
-
-
- {{ carouselIndex }}
直播
+
+
-
+ 直播
+ 视频
+
+ 图片
1/3
+
+
+ {{ carouselIndex - carouselsconfig[allCarouselsData[carouselIndex]['type']]['index'] + 1 }}/{{
+ carouselsconfig[allCarouselsData[carouselIndex]['type']]['amount'] }}
- 
+
+ 
-
+
+
-
@@ -339,6 +360,7 @@ 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 imageWatch from '@/components/detail/imageWatch.vue';
import { copyToClipboard } from '@/utils/util.js'
const uniqid = "aWqSz58aKKvn"
@@ -348,7 +370,8 @@ const store = useStore();
const { wechat } = toRefs(store.state);
-let mapState = ref(false) // 地图弹窗状态
+let imageShow = ref(false) // 查看大图弹窗的状态
+const cloaseImageShow = () => imageShow.value = !imageShow.value
// 房间类型
let roomList = ref([])
@@ -367,7 +390,7 @@ let company = {} // 品牌数据
let token = ""
let qrcode = ref("") // 小程序详情二维码
-let allCarouselsData = []
+let allCarouselsData = ref([])
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
@@ -377,6 +400,7 @@ proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
data['info']['coordinate'] = data['info']['coordinate'].split(',').map(item => {
return +item
})
+
info.value = data['info']
attachment.value = data['info']['attachment']
withsameapartments.value = data['withsameapartments']
@@ -384,22 +408,9 @@ proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
token = data['token']
qrcode.value = data['qrcode']
- let thumbnailList = data['info']['thumbnailList']
- data.info['videos'].forEach(element => {
- element['type'] = 'video'
- allCarouselsData.push(element)
- })
- data.info['attachment'].forEach((element, index) => {
- element = {
- imageurl: element,
- thumbnail: thumbnailList[index]
- }
- element['type'] = 'img'
- allCarouselsData.push(element)
- })
- console.log("allCarouselsData", allCarouselsData)
+ handleAllCarouselsData()
handleNavData()
if (data.withsameapartments > 0) dualBrandData()
@@ -407,6 +418,45 @@ proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
})
+let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} })
+
+// 处理 轮播图大图的索引 tab
+const handleAllCarouselsData = () => {
+ let targetInfo = { ...info.value }
+
+ let accumulativeTotal = 0 // 累计
+ for (const key in carouselsconfig.value) {
+ carouselsconfig.value[key] = {
+ amount: targetInfo[key].length,
+ index: accumulativeTotal
+ }
+ accumulativeTotal += targetInfo[key].length
+ }
+
+ targetInfo['lives'].forEach(element => {
+ element['type'] = 'lives'
+ allCarouselsData.value.push(element)
+ })
+
+ targetInfo['videos'].forEach(element => {
+ element['type'] = 'videos'
+ allCarouselsData.value.push(element)
+ })
+
+ let thumbnailList = targetInfo['thumbnailList']
+
+ targetInfo['attachment'].forEach((element, index) => {
+ element = {
+ imageurl: element,
+ thumbnail: thumbnailList[index]
+ }
+ element['type'] = 'attachment'
+ allCarouselsData.value.push(element)
+ })
+
+}
+
+
const roomEle = ref(null)
const specialEle = ref(null)
const addressEle = ref(null)
@@ -451,7 +501,7 @@ const handleNavData = () => {
}
// 处理点击nav 滚动事件
-const handleClickNav = (value) => {
+const handleClickNav = value => {
let scrollTop = 0
switch (value) {
@@ -487,7 +537,6 @@ const handleClickNav = (value) => {
navTab.value = value
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
-
}
@@ -501,12 +550,8 @@ const dualBrandData = () => {
})
}
-// 点击转发
-const copy = (value) => {
- copyToClipboard(value).then(() => {
- ElMessage.success("复制成功！！！")
- })
-}
+// 点击转发的复制链接按钮
+const copy = (value) => copyToClipboard(value).then(() => ElMessage.success("复制成功！！！"))
let contactReservationState = ref(false) // 联系预订客服的弹窗状态
let customerservicelist = ref([]) // 联系预订客服的弹窗状态
@@ -556,38 +601,36 @@ const handleMediaBtn = (type, index) => {
}
+let slideshowList = ref(null) // 轮播图小图的节点
+
+
let carouselIndex = ref(0) // 轮播图的索引
+
const remarkCaruselUp = ref(null)
const carouselChange = value => {
carouselIndex.value = value
+ const element = slideshowList.value
+ const elementchild = element.querySelector(`.item${value}`);
+ let left = elementchild.offsetLeft - element.offsetLeft
+ const scrollOptions = {
+ left,
+ behavior: 'smooth'
+ };
+ element.scrollTo(scrollOptions);
}
// 顶部轮播图的左右按钮
const handleslideshow = (type) => {
-
- const element = document.querySelector(`.slideshow-list`);
- // const child
- if (element) {
- let left
- if (type == 'left') {
- left = element.scrollLeft - 100
- if (carouselIndex.value != 0) remarkCaruselUp.value.prev()
-
- } else {
- left = element.scrollLeft + 100
- if (carouselIndex.value != 9) remarkCaruselUp.value.next()
- }
-
- const scrollOptions = {
- left,
- behavior: 'smooth'
- };
- element.scrollTo(scrollOptions);
- }
+ 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 slideshowType = type => slideshowItem(carouselsconfig.value[type].index)
@@ -653,12 +696,15 @@ const handleslideshow = (type) => {
align-items: center;
border-radius: 5px;
- img {
+ .img {
width: 100%;
object-fit: cover;
height: 340px;
display: block;
+ cursor: pointer;
}
+
+ .video-icon {}
}
}
@@ -747,11 +793,20 @@ const handleslideshow = (type) => {
}
}
+ .video-icon {
+ width: 44px;
+ height: 44px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
// overflow: hidden;
.img {
height: 100%;
- border-radius: 10px;
+ border-radius: 6px;
}
}
@@ -1009,13 +1064,6 @@ const handleslideshow = (type) => {
cursor: pointer;
user-select: none;
- .rotate180 {
- transform: rotate(180deg);
-
- }
-
-
-
.arrow {
width: 10px;
height: 17px;
- ![]()
+
+
+ ![]()
+ 
-
+
+
+
+