feat: 当产品的户型图有多个时 展示默认选中的图片 点击全屏预览后其他户型图出现在导航栏中

fix: 多级表头位置错乱问题

src/assets/css/normailze.css

@@ -355,15 +355,6 @@
 .viewer-play{
   display: none;
   }
-.viewer-prev {
-  display: none;
-  }
-.viewer-next {
-    display: none;
-  }
-.viewer-navbar{
-    display: none;
-  }
 .el-button--primary {
   background-color: #3974CA!important;
   border-color: #3974CA!important;

src/components/bannerDetail/index.vue

@@ -2,8 +2,12 @@
   <div class="bannerMap">
     <el-carousel :height="height" :autoplay="autoPlay" :interval="5000" arrow="always"  @change="bannerChange">
       <el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index">
-        <viewer :images="[]" :style="{height: '100%', margin: '0 auto' }">
-          <img :src="gerImageUrl(item.fileUrl)" :style="{  height: '100%' }" alt="无效路径">
+        <viewer v-if="!item.imgList" :images="[]" :style="{height: '100%', margin: '0 auto' }">
+          <img   :src="gerImageUrl(item.fileUrl)" :style="{  height: '100%' }" alt="无效路径">
+        </viewer>
+
+        <viewer v-else :images="getImgListUrl(item.imgList)" :style="{height: '100%', margin: '0 auto' }">
+          <img v-for="(src, index) in item.imgList" :key="index"  :src="gerImageUrl(src.fileUrl)" :style="{  height: src.fileOrder === 0 ? '100%' : '0' }" alt="无效路径">
         </viewer>
       </el-carousel-item>
     </el-carousel>
@@ -37,6 +41,15 @@
         default: '100%'
       }
     },
+    data() {
+      return {
+        imgList: [
+          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg',
+          'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6',
+          'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058'
+        ]
+      }
+    },
     methods: {
       bannerChange (index) {
         this.$emit('bannerChange', this.bannerData[index])
@@ -45,8 +58,15 @@
         if(filePath) {
           return process.env.VUE_APP_OSS_SRC + filePath
         } else {
-          return ''
+          return require('@assets/img/imgLoadFail.png')
         }
+      },
+      getImgListUrl (arr) {
+        if(!arr) { return [] }
+        let imgList = arr.map(item => {
+          return  process.env.VUE_APP_OSS_SRC + item.fileUrl
+        })
+        return imgList
       }
     },
   }

src/components/multilHeaderTable/index.vue

@@ -2,7 +2,7 @@
  <div class="table_container">
    <div class="table_wrap">
      <div class="table_header" :style="{ width: headerWidth + '%'}">
-       <el-row v-for="(item,index) in headerData" :key="index" :class="{ 'heighter' : item.cellHeight }">
+       <el-row v-for="(item,index) in headerData" :key="index" :class="{ 'heighter' : item.cellHeight, 'justifyRow': index < 2 }">
          <div  class="rowStyle table_header__cell-100" v-if="!item.children">{{item.trName}}</div>
          <div  class="rowStyle" v-else>
            <el-col :span="4">{{item.trName}}</el-col>
@@ -31,8 +31,12 @@
            <el-col class="productionDetail" :span="24 / item.productionProperties.length" v-for="(item2,index) in item.productionProperties" :key="index">
               <el-row v-for="(value, key) in dataMap"  :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img'}">
                 <div v-if="value === 'string'">{{item2[key] || '--'}} <span v-if="key === 'area'">m<sup>2</sup></span> </div>
-                <viewer  :images="[]"  v-else-if="value === 'img'">
-                  <el-image :src="getImageUrl(item2[key])" alt=""   style="cursor:pointer;height: 80px;max-width: 200px"></el-image>
+                <viewer  :images="getImgUrlList(item2.imgList)"  v-else-if="value === 'img'">
+                  <img v-for="(src,srcIndex) in item2.imgList"
+                       :key="srcIndex"
+                       :src="getImageUrl(src.fileUrl)"
+                       alt="失效链接"
+                       :style="{ 'cursor': 'pointer', height: src.fileOrder === 0 ? '80px' : '0', width: src.fileOrder === 0 ? '100%' : '0', maxWidth: '200px' }">
                 </viewer>
                  <div v-else-if="value === 'boolean' && item2[key] == 1" class="circle block"></div>
                  <div v-else-if="value === 'boolean' && item2[key] == 0" class="circle hollow"></div>
@@ -131,8 +135,12 @@
         if(filePath) {
           return process.env.VUE_APP_OSS_SRC + filePath
         } else {
-          return null
+          return ''
         }
+      },
+      getImgUrlList(imgList) {
+        if(!imgList) { return [] }
+        return (imgList.map((item) => { return process.env.VUE_APP_OSS_SRC + item.fileUrl }))
       }
     }
   }

src/components/unitCard/index.vue

 <template>
   <div class="unitCard">
     <div class="imgContainer">
-      <viewer :images="[]" style="width: 100%;height: 100%">
-        <img  :src="imgUrl"  width="100%" height="100%">
+      <viewer :images="getImgListUrl(imgList)" style="width: 100%;height: 100%">
+        <img
+          v-for="(item, index) in imgList"
+          :src="getImgUrl(item.fileUrl)"
+          :key="index"
+          :width="item.fileOrder === 0 ? '100%' : '0'"
+          :height="item.fileOrder === 0 ? '100%' : '0'">
       </viewer>
     </div>
   <div class="unitDetail">
@@ -41,6 +46,12 @@
        default() {
          return '0-1-2'
        }
+     },
+     imgList: {
+       type: Array,
+       default() {
+         return []
+       }
      }
     },
     data () {
@@ -54,13 +65,19 @@
         if(this.unitInfo) {
           return this.unitInfo.split('-')[0] + '室' + this.unitInfo.split('-')[1] + '厅' + this.unitInfo.split('-')[this.unitInfo.split('-').length - 1] + '卫'
         }
-      },
-      imgUrl() {
-        return this.imageUrl ? process.env.VUE_APP_OSS_SRC + this.imageUrl : require('@assets/img/zlhx.png')
       }
     },
     methods: {
-
+      getImgListUrl(arr) {
+        if(!arr) { return [] }
+        let imgListUrl = arr.map(item => {
+          return (process.env.VUE_APP_OSS_SRC + item.fileUrl + item.fileUrl) || ''
+        })
+        return imgListUrl
+      },
+      getImgUrl(fileUrl) {
+        return (fileUrl ? process.env.VUE_APP_OSS_SRC + fileUrl : require('@assets/img/imgLoadFail.png'))
+      }
     }
   }
 </script>

src/main.js

@@ -12,6 +12,7 @@ import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 import BaiduMap from 'vue-baidu-map'
 import Vcharts from 'v-charts'
 import Viewer from 'v-viewer'
+import ImageViewer from 'vue2-viewer'
 import 'viewerjs/dist/viewer.css'
 import '@assets/icons'
 
@@ -23,7 +24,8 @@ Vue.use(Viewer, {
     zIndex: 9999,
     toolbar: true,
     fullscreen: false
-  } })
+  }})
+Vue.use(ImageViewer)
 Vue.prototype.$axios = xhr
 Vue.config.productionTip = false;
 // 全局事件注册

src/views/ProductAnalysis/index.vue

@@ -144,7 +144,7 @@
          <h2 class="unitHeader" style="padding: 0 15px">{{item.productGroupName}}</h2>
          <div class="unitContainer">
            <el-col :span="8" v-for="(item2 ,index2) in pageListMap[item.productGroupName][pageList[index].page]" :key="index2" style="margin-bottom: 20px">
-             <unit-card :imageUrl="item2.imgUrl" :unit-name="item2.unitName" :unit-area="item2.unitArea" :unit-info="item2.unitHouse"></unit-card>
+             <unit-card :imgList="item2.imgList" :imageUrl="item2.imgUrl" :unit-name="item2.unitName" :unit-area="item2.unitArea" :unit-info="item2.unitHouse"></unit-card>
            </el-col>
          </div>
          <el-pagination
@@ -362,7 +362,12 @@
                   singleData.liveRoomWidth = propertySinle.bnsProduct.liveRoomWidth
                   singleData.masterRoomWidth = propertySinle.bnsProduct.masterRoomWidth
                   singleData.guestRoomWidth = propertySinle.bnsProduct.guestRoomWidth
-                  singleData.fileUrl = propertySinle.productImgList ?  propertySinle.productImgList[0].fileUrl : ''
+                  try {
+                    singleData.fileUrl = propertySinle.productImgList.find(item => { return item.fileOrder === 0 }).fileUrl
+                  } catch (e) {
+                    singleData.fileUrl = ''
+                  }
+                  singleData.imgList = propertySinle.productImgList || []
                   propertySinle.familyFunc.forEach(item => {
                     if(item.list) {
                       item.list.forEach(item2 => {
@@ -495,9 +500,12 @@
                   unit.unitHouse = (item2.bnsProduct.roomNumber || 0) + '-' + (item2.bnsProduct.hallNumber || 0) + '-' + (item2.bnsProduct.toiletNumber || 0)
                   unit.unitName = item2.projectName
                   unit.unitArea = item2.bnsProduct.unitArea
-                  if(item2.productImgList && item2.productImgList.length > 0) {
-                    unit.imgUrl = item2.productImgList[0].fileUrl
+                  try {
+                    unit.imgUrl = item2.productImgList.find(item => { return item.fileOrder === 0 }).fileUrl
+                  } catch (e) {
+                    unit.imgUrl = ''
                   }
+                  unit.imgList = item2.productImgList || []
                   children.push(unit)
                 })
                 single.children = children
@@ -530,6 +538,7 @@
                }
             })
           })
+          console.log(this.pageListMap, 'ssssssssssssssssssssssssss')
         })
       }
     },

src/views/propertiesDetail/index.vue

@@ -476,10 +476,13 @@
               singleData.masterRoomWidth = propertySinle.bnsProduct.masterRoomWidth
               singleData.guestRoomWidth = propertySinle.bnsProduct.guestRoomWidth
               try {
-                singleData.fileUrl = propertySinle.productImgList[0].fileUrl
+                singleData.fileUrl = (propertySinle.productImgList.find(item => {
+                  return item.fileOrder === 0
+                }).fileUrl)
               } catch (e) {
                 singleData.fileUrl = ''
               }
+              singleData.imgList = propertySinle.productImgList || []
               propertySinle.familyFunc.forEach(item => {
                 if(item.list) {
                   item.list.forEach(item2 => {
@@ -494,6 +497,7 @@
               })
              propertyProjectInfoArr.push(singleData)
             })
+            console.log(propertyProjectInfoArr)
             this.propertyData.propertyBanner.hxBanner = propertyProjectInfoArr
             this.hxObjectData = this.propertyData.propertyBanner.hxBanner[0] || {}
             this.propertyLoading = false
@@ -843,4 +847,13 @@
       }
     }
   }
+  .viewer-prev {
+    display: inline-block;
+  }
+  .viewer-next {
+    display: inline-block;
+  }
+  .viewer-navbar{
+    display: block;
+  }
 </style>