From 787a9df226cb9b9c1d4d109707bbfe69d340da31 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Tue, 25 Jul 2023 19:43:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |   4 +
 src/assets/img/publicImage/video-icon.svg |  21 +++
 src/components/detail/imageWatch.vue      |   6 +-
 src/components/public/viewMap.vue         |   5 +
 src/views/apartmentDetail.vue             | 184 ++++++++++++++++------
 5 files changed, 165 insertions(+), 55 deletions(-)
 create mode 100644 src/assets/img/publicImage/video-icon.svg

diff --git a/src/App.vue b/src/App.vue
index e034b4c..0f3928a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -137,4 +137,8 @@ input[type="number"] {
     /* 隐藏 Chrome 浏览器的滚动条 */
   }
 }
+
+.rotate180 {
+  transform: rotate(180deg);
+}
 </style>
diff --git a/src/assets/img/publicImage/video-icon.svg b/src/assets/img/publicImage/video-icon.svg
new file mode 100644
index 0000000..0983826
--- /dev/null
+++ b/src/assets/img/publicImage/video-icon.svg
@@ -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>
\ No newline at end of file
diff --git a/src/components/detail/imageWatch.vue b/src/components/detail/imageWatch.vue
index c60c547..958a28f 100644
--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@@ -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>
diff --git a/src/components/public/viewMap.vue b/src/components/public/viewMap.vue
index db20391..31b70cf 100644
--- a/src/components/public/viewMap.vue
+++ b/src/components/public/viewMap.vue
@@ -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;
diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index c12074c..265a3c0 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -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;