bug fix: 39958 （上海工业博物馆-PC端）概述总览-管理后台上传多张图片，在企业中详情中只显示首张图片

src/views/General.vue

@@ -86,13 +86,23 @@
         alt=""
         draggable="false"
       >
-      <img
+      <div
         v-if="bannerImgList.value.length"
-        class="banner"
-        :src="`${prefix}/${bannerImgList.value[0].filePath}`"
-        alt=""
-        draggable="false"
+        class="swiper-root"
       >
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+        <div class="swiper-wrapper">
+          <img
+            v-for="(item, index) in bannerImgList.value"
+            :key="index"
+            class="banner swiper-slide"
+            :src="`${prefix}/${item.filePath}`"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </div>
       <div
         class="txt"
         v-html="activeCorpInfo?.description ? activeCorpInfo.description.replace(/\x20\x20/g, '&emsp;&emsp;') : ''"
@@ -115,7 +125,10 @@ import {
   watch,
   reactive,
   ref,
+  nextTick,
 } from 'vue'
+import Swiper from 'swiper/bundle'
+import 'swiper/css/bundle'
 
 export default {
   name: 'GeneralView',
@@ -165,6 +178,35 @@ export default {
     //   immediate: true,
     // })
 
+    /**
+     * swiper 相关
+     */
+    let swiper = null
+    const activeSwiperItemIndex = ref(0)
+    function initSwiper() {
+      swiper = new Swiper('.swiper-root', {
+        // pagination: {
+        //   el: '.swiper-pagination',
+        // },
+
+        // Navigation arrows
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+
+        on: {
+          afterInit: function (e) {
+            activeSwiperItemIndex.value = e.activeIndex
+          },
+          slideChange: function(e) {
+            activeSwiperItemIndex.value = e.activeIndex
+          }
+        }
+      })
+    }
+
+
     // 被选中的数据
     const activeCorpId = ref(null)
     const isShowDesc = ref(true)
@@ -182,10 +224,13 @@ export default {
       if (vNew) {
         const res = await api.getGeneralDetail(vNew)
         bannerImgList.value = res.file
+        swiper && swiper.destroy()
+        nextTick(() => {
+          bannerImgList.value.length && initSwiper()
+        })
       } else {
         bannerImgList.value = []
       }
-
     })
 
     // 无论是网页里还是unity内部点击了企业，都调用这个
@@ -485,7 +530,11 @@ export default {
         }
       }
     }
-    &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    &::-webkit-scrollbar {
+      background: transparent;
+      width: 4px;
+      height: 0;
+    } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
     &::-webkit-scrollbar-thumb {
       background: transparent;
       border-radius: 2px;
@@ -543,12 +592,44 @@ export default {
       width: 100%;
       margin-bottom: 37px;
     }
-    >img.banner {
+    >.swiper-root{
       flex: 0 0 auto;
       width: 100%;
       height: 34.8%;
-      object-fit: contain;
       margin-bottom: 20px;
+      overflow: hidden;
+      position: relative;
+      >.swiper-button-prev {
+        left: 0;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/arrow-left-2.png);
+        background-repeat: no-repeat;
+        background-size: contain;
+        &::after {
+          content: '';
+        }
+      }
+      >.swiper-button-next {
+        right: 0;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/arrow-right-2.png);
+        background-repeat: no-repeat;
+        background-size: contain;
+        &::after {
+          content: '';
+        }
+      }
+      >.swiper-wrapper{
+        width: 100%;
+        height: 100%;
+        >img.banner {
+          width: calc(100% - 40px * 2 - 5px * 2);
+          height: 100%;
+          object-fit: contain;
+        }
+      }
     }
     >.txt {
       flex: 1 0 1px;
@@ -781,7 +862,11 @@ export default {
           }
         }
       }
-      &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 110vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar {
+        background: transparent;
+        width: calc(4 / 1080 * 110vh);
+        height: 0;
+      } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
       &::-webkit-scrollbar-thumb {
         background: transparent;
         border-radius: 2px;
@@ -838,12 +923,44 @@ export default {
         width: 100%;
         margin-bottom: calc(37 / 1080 * 83vh);
       }
-      >img.banner {
+      >.swiper-root{
         flex: 0 0 auto;
         width: 100%;
         height: 34.8%;
-        object-fit: contain;
         margin-bottom: calc(20 / 1080 * 83vh);
+        overflow: hidden;
+        position: relative;
+        >.swiper-button-prev {
+          left: 0;
+          width: 20px;
+          height: 20px;
+          background-image: url(@/assets/images/arrow-left-2.png);
+          background-repeat: no-repeat;
+          background-size: contain;
+          &::after {
+            content: '';
+          }
+        }
+        >.swiper-button-next {
+          right: 0;
+          width: 20px;
+          height: 20px;
+          background-image: url(@/assets/images/arrow-right-2.png);
+          background-repeat: no-repeat;
+          background-size: contain;
+          &::after {
+            content: '';
+          }
+        }
+        >.swiper-wrapper{
+          width: 100%;
+          height: 100%;
+          >img.banner {
+            width: calc(100% - 20px * 2 - 5px * 2);
+            height: 100%;
+            object-fit: contain;
+          }
+        }
       }
       >.txt {
         flex: 1 0 1px;