Skip to content

H
house-type
Commit aa47272e authored by wangjiankun's avatar wangjiankun
Browse files
Options

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

fix: 多级表头位置错乱问题
parent 0c8b4f6f
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 28 deletions
src/assets/css/normailze.css
View file @ aa47272e
......@@ -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
View file @ aa47272e
......@@ -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
View file @ aa47272e
......@@ -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
View file @ aa47272e
<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
View file @ aa47272e
......@@ -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
View file @ aa47272e
......@@ -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
View file @ aa47272e
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment