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

提交

Browse Source
This commit is contained in:
A1300399510
2023-07-25 19:43:56 +08:00
parent 7e95fd62f8
commit 787a9df226
5 changed files with 165 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/apartmentDetail.vue
View File

@@ -9,29 +9,52 @@
</div>
<div class="header-content flexflex">
<div class="header-left">
<!-- <image-watch :show="imageShow" :close="cloaseImageShow" :list="allCarouselsData"></image-watch> -->
<image-watch style="z-index: 1003;" :show="imageShow" :close="cloaseImageShow" :list="allCarouselsData"></image-watch>
<div class="slideshow">
<el-carousel :autoplay="false" indicator-position="none">
<el-carousel-item class="flexcenter" v-for="item in attachment" :key="item">
<img :src="item">
<el-carousel :autoplay="false" indicator-position="none" ref="remarkCaruselUp"
@change="carouselChange">
<el-carousel-item class="flexcenter" v-for="item in allCarouselsData">
<img class="img" :src="item['image'] || item['imageurl']" @click="cloaseImageShow">
<!-- <img class="video-icon" src="@/assets/img/publicImage/video-icon.svg" alt=""> -->
</el-carousel-item>
</el-carousel>
<div class="indicate-type flexacenter">
<div class="indicate-item" :class="{ 'pitch': item == 1 }" v-for="item in 3">直播</div>
<div class="indicate-type flexacenter" v-if="allCarouselsData.length != 0">
<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>
<div class="indicate">1/3</div>
<div class="indicate" v-if="allCarouselsData.length != 0">
{{ carouselIndex - carouselsconfig[allCarouselsData[carouselIndex]['type']]['index'] + 1 }}/{{
carouselsconfig[allCarouselsData[carouselIndex]['type']]['amount'] }}</div>
</div>
<div class="slideshow-across flexflex">
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
<img class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-if="carouselIndex == 0" class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow rotate180" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
<div class="slideshow-list box no-scrollbar flex1 flexacenter">
<div class="item" :class="{ 'pitch': index == 0 }"
v-for="(item, index) in info['thumbnailList']">
<img class="img" :src="item" />
<div ref="slideshowList" class="slideshow-list box no-scrollbar flex1 flexacenter">
<div class="item" :class="{ 'pitch': index == carouselIndex }, `item${index}`"
v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)">
<img class="img" :src="item['thumbnail'] || item['imageurl']" />
<img class="video-icon" v-if="item['type'] != 'attachment'"
src="@/assets/img/publicImage/video-icon.svg">
</div>
</div>
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180"
src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div>
@@ -330,23 +353,25 @@
<script setup>
import { ref, onMounted, toRefs, watch, getCurrentInstance, nextTick } from 'vue';
import { ElMessage } from 'element-plus'
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 imageWatch from '@/components/detail/imageWatch.vue';
import { copyToClipboard } from '@/utils/util.js'
const uniqid = "aWqSz58aKKvn"
// uniqid=aWqSz58aKKvn
const { proxy } = getCurrentInstance()
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([])
@@ -365,6 +390,8 @@ let company = {} // 品牌数据
let token = ""
let qrcode = ref("") // 小程序详情二维码
let allCarouselsData = ref([])
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
if (res.code != 200) return
@@ -373,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']
@@ -380,12 +408,55 @@ proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
token = data['token']
qrcode.value = data['qrcode']
handleAllCarouselsData()
handleNavData()
if (data.withsameapartments > 0) dualBrandData()
})
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)
@@ -430,7 +501,7 @@ const handleNavData = () => {
}
// 处理点击nav 滚动事件
const handleClickNav = (value) => {
const handleClickNav = value => {
let scrollTop = 0
switch (value) {
@@ -466,7 +537,6 @@ const handleClickNav = (value) => {
navTab.value = value
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
}
@@ -480,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([]) // 联系预订客服的弹窗状态
@@ -534,29 +600,37 @@ const handleMediaBtn = (type, index) => {
}
}
// 顶部轮播图的左右按钮
const handleslideshow = (type) => {
const element = document.querySelector(`.slideshow-list`);
if (element) {
let left
if (type == 'left') left = element.scrollLeft - 100
else left = element.scrollLeft + 100
const scrollOptions = {
left,
behavior: 'smooth'
};
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);
})
}
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) => {
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)
</script>
@@ -622,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 {}
}
}
@@ -683,6 +760,7 @@ const handleslideshow = (type) => {
width: 32px;
height: 100%;
cursor: pointer;
user-select: none;
&.left {
// transform: rotate(180deg);
@@ -715,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;
}
}
@@ -977,13 +1064,6 @@ const handleslideshow = (type) => {
cursor: pointer;
user-select: none;
.rotate180 {
transform: rotate(180deg);
}
.arrow {
width: 10px;
height: 17px;