提交
This commit is contained in:
A1300399510
parent
7e95fd62f8
commit
787a9df226
@ -137,4 +137,8 @@ input[type="number"] {
|
||||
/* 隐藏 Chrome 浏览器的滚动条 */
|
||||
}
|
||||
}
|
||||
|
||||
.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
21
src/assets/img/publicImage/video-icon.svg
Normal file
21
src/assets/img/publicImage/video-icon.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="44px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter20">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
<filter x="524px" y="654px" width="44px" height="44px" filterUnits="userSpaceOnUse" id="filter21">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.662745098039216 0 " in="shadowComposite" />
|
||||
</filter>
|
||||
<g id="widget22">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAEVElEQVR4Ae2bvY7TQBDHly8JJIqUdFxJR3gCTEdHrqMjPMFBR3fhDe4NYp4guSe40NFd7g1S0iWRKJD4OH6j+KSNbzdex7N2LLzSyvYyOzP//87Mrp3DmK51DHQMdAz8xwzcqQP7fWNeYieh9+lH15srt9sNZ+aMLOhynf025ivXdrYHxrwD+OSeMddVuugQXa1goWdMD4dPAbysAtozdym6xcZBkhEReD6ClkTEycGQgDN9wF96Vi3vvNqz2BTbjRIhK1E38Ly9xqIBR8Z5Zxp8HtcWCVmhu2gQrDONSInJPgWy9DkAQxfs40ltjJcwBJgpZ4fjElMMCxneEJZQG4TPqF3y2d3NQes81HIwARSbD6z8p1DFDcrJrrT+a8y3EB+CUkC2GxRehig8FBki4cWvzZF6p0vIFTdWXkK/VS3U58IUIJxGKHurgZ5wu0LPI/pDDX0FOp6USQWnLtlWYEjrXJ+KEZAf4dgcvc7tTHl8WbQ17kyBHxQ+fEZH9cbqL0TLT66PN9vol+paCzX0MgyFgk4BxdW/llTKG5GdRXnFXVG1zNu1n70RgHNDBFVW3zZo31Olz4iMV4yt7XHle0njgU+nlwAKn3eST9k+45zcZjiRQIQUyCgN3UOf4l0EvPFN0h6X/VrqAo4Gn+DK+MBierE4CSBfkzIGNGRXxqyIhgEkfNbQl9fhw+QkgMlJXkFdz5AwwtYxXbsuJOi81XwE9G9J1jjwh7c6HNOuC05MPgKe1ojXaSpCXXBichJA0XCy5fQ04qBmXfBhchIQEdNeqqUu4Oh7JmvXBdMKAoQ1UiLlMqSrttYQoIraUtYaArLj7NjyXeW2FQRwiDkF7YTeU0FtKXESwGnsypJp7Ba08lvjhAo+quqED5OTAIwtqhqsOl++Q/IuL5/gB1V1ZfMXLj0+AuYu4brGJN/5CCvg+4o2nZh8BMwUDZdSFTHfnZiwd7vJOzqrUGvrke+E/Fgx5Lf8F0xbA9mDLwIMRePcNSHGmHwoVc73LTd3YdlFwHRLS6QHQjDhlHepnO9b3qI73RqwHrwEZEdP9bO3ZdtQ6U9w7oIxMiBaW8vrtU+7lwCZQOic+SZWGQetfKgcU+mj6Ld9q4Qhc3SFs67PzWXHUnEs+2Gkrj+pWQkGm5DS9+ToSIkA+W1AgGv90lS4AKTYhyLAREhxw/E5ufq8WPJwJAB2xdbXL/JoZw24mYyy4c19W66hPhORxY1i9Z0oWBMFr4ulm5dgVT+yi03VPYGtlF6Yew3LpOrAbYVEwrRhgN4FEN9sX6Pc99hWDpEE8Ul8iwLapfTA0iF1+Rh9TPbZptMhZK+PSgQOyJ+lzesmQmyK7ajgyijPokHr2OwtdBC9anzVfcRkBVKOzjGIWLHqo1oLnQ9oyDgkDKQyV02NTMcgxOY+MkHvAvsotucAIuFZuuSs/Kcp53uFnN/59wV9Tpf/NDXj2rWOgY6BjoGOgVgM/AP9HjGMza5aZwAAAABJRU5ErkJggg==" x="534px" y="664px" filter="url(#filter20)" />
|
||||
</g>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -524 -654 )">
|
||||
<use xlink:href="#widget22" filter="url(#filter21)" />
|
||||
<use xlink:href="#widget22" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -6,10 +6,10 @@
|
||||
<el-carousel-item v-for="(item, i) in list" :key="i">
|
||||
<div class="dis-f jus-x al-item" v-if="item">
|
||||
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
|
||||
<img :src="item&&item.url" class="img" alt="">
|
||||
<img :src="item&&item.url || item['imageurl'] || item['image']" class="img" alt="">
|
||||
</div>
|
||||
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
|
||||
<source :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
|
||||
<source :src="item&&item.url || item['videourl']" class="img" style="width:600px" type="video/mp4">
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
|
||||
<img :src="item.thumbnail||item.image" alt="" class="img-s">
|
||||
<img :src="item.thumbnail||item.image||item['imageurl']" alt="" class="img-s">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -87,6 +87,10 @@ const showPop = () => show.value = !show.value
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -105,6 +109,7 @@ const showPop = () => show.value = !show.value
|
||||
right: -25px;
|
||||
cursor: pointer;
|
||||
z-index: 1002;
|
||||
display: none;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user