轮播图

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;

src/views/apartmentDetail.vue

@@ -10,7 +10,8 @@
             <div class="header-content flexflex">
                 <div class="header-left">
                     <div class="slideshow">
-                        <el-carousel :autoplay="false" indicator-position="none">
+                        <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>
@@ -20,12 +21,13 @@
                         </div>
                         <div class="indicate">1/3</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" />
                         </div>
                         <div class="slideshow-list box no-scrollbar  flex1 flexacenter">
-                            <div class="item" :class="{ 'pitch': index == 0 }"
+                            <div class="item" :class="{ 'pitch': index == carouselIndex }"
                                 v-for="(item, index) in info['thumbnailList']">
                                 <img class="img" :src="item" />
                             </div>
@@ -330,7 +332,7 @@
 
 <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';
@@ -340,7 +342,7 @@ import transmitBtn from '@/components/public/transmitBtn.vue'
 
 import { copyToClipboard } from '@/utils/util.js'
 const uniqid = "aWqSz58aKKvn"
-// uniqid=aWqSz58aKKvn
+
 const { proxy } = getCurrentInstance()
 const store = useStore();
 
@@ -365,6 +367,8 @@ let company = {} // 品牌数据
 let token = ""
 let qrcode = ref("") // 小程序详情二维码
 
+let allCarouselsData = []
+
 
 proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
     if (res.code != 200) return
@@ -380,6 +384,23 @@ 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)
+
     handleNavData()
     if (data.withsameapartments > 0) dualBrandData()
 
@@ -534,26 +555,36 @@ const handleMediaBtn = (type, index) => {
     }
 }
 
+
+let carouselIndex = ref(0) // 轮播图的索引
+const remarkCaruselUp = ref(null)
+
+const carouselChange = value => {
+    carouselIndex.value = value
+
+}
+
 // 顶部轮播图的左右按钮
 const handleslideshow = (type) => {
+
     const element = document.querySelector(`.slideshow-list`);
+    // const child
     if (element) {
         let left
-        if (type == 'left') left = element.scrollLeft - 100
+        if (type == 'left') {
-        else left = element.scrollLeft + 100
+            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);
-
-        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);
-        })
     }
 }
 
@@ -683,6 +714,7 @@ const handleslideshow = (type) => {
                         width: 32px;
                         height: 100%;
                         cursor: pointer;
+                        user-select: none;
 
                         &.left {
                             // transform: rotate(180deg);