修改图片预览组件

This commit is contained in:
A1300399510
2023-07-28 14:42:45 +08:00
parent 6cb88bda8a
commit 1b8fa7b68b
6 changed files with 98 additions and 86 deletions

View File

@@ -23,7 +23,7 @@
</div>
<div class="header-content flexflex">
<div class="header-left">
<image-watch style="z-index: 1003;" arrow="never" :index="5" :show="imageShow"
<image-watch style="z-index: 1003;" arrow="never" :index="imageIndex" :show="imageShow"
:close="cloaseImageShow" :list="imageList"></image-watch>
<div class="slideshow">
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp"
@@ -263,32 +263,8 @@
</div>
</div>
<div class="details-right flexacenter">
<phoneqrcode :type="apartment" :qrcode="qrcode"></phoneqrcode>
<phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode>
<groupqrcode></groupqrcode>
<!-- <div class="QRcode-box apartment-QRcode flexflex" v-if="true">
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
<div class="QRcode-case flexcenter">
<img class="QRcode-img" :src="qrcode" alt="">
</div>
<div class="apartment-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
手机查看该公寓
</div>
</div> -->
<!-- <div class="QRcode-box group-QRcode flexflex" v-if="true">
<img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
<div class="QRcode-case flexcenter">
<img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
</div>
<div class="group-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
入群请添加
<b>方同学的小助手</b>
<b>{{ wechat['nickname'] }}</b>
</div>
</div> -->
<!-- 同品牌公寓 -->
<div class="same-brand-title flexcenter" v-if="dualBrandList.length != 0" ref="eleseEle">
<img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png">
@@ -423,8 +399,6 @@ import { copyToClipboard } from '@/utils/util.js'
const { proxy } = getCurrentInstance()
const store = useStore();
const { wechat } = toRefs(store.state);
let imageShow = ref(false) // 查看大图弹窗的状态
let imageList = ref([]) // 查看大图弹窗的状态
let imageIndex = ref(0) // 查看大图弹窗的状态
@@ -936,8 +910,6 @@ const publicJump = path => router.push(path)
transform: translate(-50%, -50%);
}
// overflow: hidden;
.img {
height: 100%;
border-radius: 6px;

View File

@@ -126,7 +126,9 @@
{{ !housingInfo['data'] || housingInfo['data'] &&
housingInfo['data'].info && housingInfo['data'].info.rentalduration
=== '0' ?
'不限' : `${ indexData['data']&&indexData['data']['config']&&indexData['data']['config']['rentalduration'][housingInfo['data'] && housingInfo['data'].info.rentalduration]}` }}
'不限' : `${indexData['data'] && indexData['data']['config'] &&
indexData['data']['config']['rentalduration'][housingInfo['data']
&& housingInfo['data'].info.rentalduration]}` }}
</div>
</div>
<div class="condition">
@@ -162,8 +164,7 @@
|| 0 }}
</div>
</div>
<div class="img-list-box dis-f jus-x al-item" @click="imageShow = true"
v-show="imgList.length > 0">
<div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0"> plm{{ imageIndex }}plm
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@click.stop="moveImageList('left')"
v-show="imgListTab === 0 && imageLIst[imageLIst.length - 1] > 800">
@@ -177,7 +178,7 @@
style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
v-show="imgList.length - 1 === imgListTab && imageLIst[imageLIst.length - 1] > 800">
<div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0">
<div v-for="(item, i) in imgList" :key="i">
<div v-for="(item, i) in imgList" :key="i" @click.stop="imageIndex = i, imageShow = true">
<div class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item">
<img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
@@ -202,7 +203,8 @@
</div>
<!-- -->
<div class="need-housing-info" v-if="pageType == 3">
<div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.property">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.property">
<div class="title-box">
房屋类型
</div>
@@ -219,7 +221,8 @@
</span>
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.floor">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.floor">
<div class="title-box">
所在楼层
</div>
@@ -235,7 +238,8 @@
<!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.elevator">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
<div class="title-box">
电梯
</div>
@@ -248,7 +252,8 @@
}}
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.sunshinearea">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
<div class="title-box">
晾晒区
</div>
@@ -264,7 +269,8 @@
}}
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.acreage[0]">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.acreage[0]">
<div class="title-box">
面积
</div>
@@ -286,7 +292,8 @@
平方呎
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.publishergender">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.publishergender">
<div class="title-box">
同住人性别要求
</div>
@@ -295,11 +302,12 @@
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.publishergender]
housingInfo['data'].info.publishergender]
}}
</div>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] && housingInfo['data'].info.gender">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.gender">
<div class="title-box">
发布者性别
</div>
@@ -317,7 +325,8 @@
</div>
<!-- -->
<div class="info-box-s" v-if="pageType != 3">
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.property">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.property">
<div class="title-box">
房屋类型
</div>
@@ -326,11 +335,12 @@
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['property'][housingInfo['data'] &&
housingInfo['data'].info.property]
housingInfo['data'].info.property]
}}
</span>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.elevator">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
<div class="title-box">
所在楼层
</div>
@@ -345,11 +355,12 @@
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['elevator'][housingInfo['data'] &&
housingInfo['data'].info.elevator]
housingInfo['data'].info.elevator]
}}
</span>
</div>
<div class="info dis-f al-item" v-if="housingInfo['data'] &&housingInfo['data'].info.sunshinearea">
<div class="info dis-f al-item"
v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
<div class="title-box">
晾晒区
</div>
@@ -365,7 +376,8 @@
}}
</span>
</div>
<div class="info dis-f al-item" style="margin-top:30px;" v-if="housingInfo['data'] && housingInfo['data'].info.acreage">
<div class="info dis-f al-item" style="margin-top:30px;"
v-if="housingInfo['data'] && housingInfo['data'].info.acreage">
<div class="title-box">
面积
</div>
@@ -376,7 +388,8 @@
}} 平方呎
</span>
</div>
<div class="info dis-f al-item" style="margin-top:30px;" v-if="housingInfo['data'] &&housingInfo['data'].info.gender">
<div class="info dis-f al-item" style="margin-top:30px;"
v-if="housingInfo['data'] && housingInfo['data'].info.gender">
<div class="title-box">
性别要求
</div>
@@ -441,7 +454,7 @@
</div>
</div>
</div>
<div class="dis-f jus-x" v-if="distanceList[0]&&distanceList[0].name && pageType != 3">
<div class="dis-f jus-x" v-if="distanceList[0] && distanceList[0].name && pageType != 3">
<div class="distance-box dis-f jus-bet">
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
@@ -595,7 +608,8 @@
v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1">
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
</div>
<div class="dis-f jus-x" v-if="pageType == 1||(pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
<div class="dis-f jus-x"
v-if="pageType == 1 || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
<div class="user-type">
{{
indexData['data'] &&
@@ -675,7 +689,7 @@
</div>
<el-affix position="top" :offset="0" @change="changeConcatType">
</el-affix>
<phoneqrcode class="mg-t-20" :type="housing"
<phoneqrcode class="mg-t-20" type="housing"
:qrcode="housingInfo['data'] && housingInfo['data'].qrcode">
</phoneqrcode>
<groupqrcode></groupqrcode>
@@ -963,7 +977,7 @@
</div>
</div>
<watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
<watchImage :show="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
<back-to-top></back-to-top>
@@ -1003,6 +1017,7 @@ let uniqid = ref('')
let showBusinessCard = ref(false)
//查看图片
let imageShow = ref(false)
let imageIndex = ref(0)
let cloaseImageShow = () => {
imageShow.value = false
}
@@ -1146,11 +1161,11 @@ let setNavigation = () => {
if (pageType.value == 1 || pageType.value == 2) {
// location=3.8,3.13&areaItem=3
// console.log(`${store.state.routeList['secondaryIndex'].path}/location/${JSON.stringify([housingInfo['data']['info'].location.substring(0, 1)])}`)
store.state.routeList['secondaryIndex']={
path:housingInfo['data']['info'].intermediary===1?'/intermediaryHousing':
housingInfo['data']['info'].intermediary===6?'/needHousing':'/personHousing',
title:housingInfo['data']['info'].intermediary===1?'中介房源':
housingInfo['data']['info'].intermediary===6?'求房源':'个人房源'
store.state.routeList['secondaryIndex'] = {
path: housingInfo['data']['info'].intermediary === 1 ? '/intermediaryHousing' :
housingInfo['data']['info'].intermediary === 6 ? '/needHousing' : '/personHousing',
title: housingInfo['data']['info'].intermediary === 1 ? '中介房源' :
housingInfo['data']['info'].intermediary === 6 ? '求房源' : '个人房源'
}
store.state.routeList['thirdIndex'] = {
path: `${store.state.routeList['secondaryIndex'].path}`,
@@ -1172,7 +1187,7 @@ let setNavigation = () => {
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
}
}else{
} else {
store.state.routeList['thirdIndex'] = ''
store.state.routeList['fourthIndex'] = ''
}
@@ -1200,8 +1215,8 @@ let getHousingInfo = () => {
})
concatInfo['data'] = store.state.indexData.wechat
if (res.data.contacts) contacts['data'] = res.data.contacts
console.log('pageType',pageType.value)
if ( pageType.value ==2) {
console.log('pageType', pageType.value)
if (pageType.value == 2) {
getPublisherList()
} else if (pageType.value == 1) {
recommendList()
@@ -1310,7 +1325,7 @@ let recommendList = () => {
}).then(res => {
console.log(res)
if (res.code === 200) {
if (res.data.data&&res.data.data.length >= 30) {
if (res.data.data && res.data.data.length >= 30) {
loadMore.value = true
} else {
loadMore.value = false

View File

@@ -557,11 +557,11 @@ onUnmounted(() => {
}
.btn-qrcode {
height: 365px;
width: 360px;
margin: 0 auto;
.bj {
height: 100%;
width: 100%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2784313725490196);
border-radius: 10px;
}