gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

公寓页面 图片查看合并

Browse Source
This commit is contained in:
luJianJun 2023-07-26 15:38:39 +08:00
commit b820b4240e
4 changed files with 141 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -137,4 +137,8 @@ input[type="number"] {
/* 隐藏 Chrome 浏览器的滚动条 */
}
}
.rotate180 {
transform: rotate(180deg);
}
</style>

21
src/assets/img/publicImage/video-icon.svg Normal file
View 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
src/components/detail/imageWatch.vue
View File

@ -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&&item.url">
<source :controls="true" :autoplay="false" :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
<source :src="item&&item.url || item['videourl']" class="img" style="width:600px" type="video/mp4">
</div>
</div>
</el-carousel-item>

178
src/views/apartmentDetail.vue
View File

@ -9,31 +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" ref="remarkCaruselUp"
@change="carouselChange">
<el-carousel-item class="flexcenter" v-for="item in attachment" :key="item">
<img :src="item">
<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>
{{ carouselIndex }}
<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 == carouselIndex }"
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>
@ -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)
</script>
@ -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;