This commit is contained in:
2023-07-28 14:45:45 +08:00
6 changed files with 96 additions and 84 deletions

View File

@@ -3,7 +3,7 @@
<div class="pos-r dis-f al-item mg-t-60">
<div class="s-w-100">
<el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index"
indicator-position="none" ref="carousel">
indicator-position="none" ref="carousel" @change="carouselChange">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" style="width:600px" v-if="item['type'] != 'attachment'">
@@ -16,8 +16,8 @@
</el-carousel-item>
</el-carousel>
</div>
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="next" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="prev" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="prev" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="next" alt="">
</div>
<div class="tab-text">
{{ `${imageTab + 1}/${list.length}` }}
@@ -53,7 +53,12 @@ const props = defineProps({
return []
}
},
index: Number,
index: {
type: Number,
default: function () {
return 0
}
},
close: {
type: Function
},
@@ -70,33 +75,31 @@ let close = props.close
let carousel = ref(null)
let imageTab = ref(0)
if(!props['index']) imageTab = props['index']
//上一张
let prev = () => {
if (imageTab.value === list.value.length - 1) return
imageTab.value++
carousel.value.prev()
}
let prev = () => carousel.value.prev()
// 轮播图滚动后事件
const carouselChange = value => imageTab.value = value
//下一张
let next = () => {
if (imageTab.value <= 0) return
imageTab.value--
carousel.value.next()
}
let next = () => carousel.value.next()
//点击预览图
let watchSet = (num) => {
imageTab.value = num
carousel.value.setActiveItem(num)
}
onMounted(() => {
watchEffect(() => {
show = props.show
list.value = props.list
if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
if (props.index >= 0) carousel.value.setActiveItem(props.index)
})
})
</script>
<style scoped>
img {

View File

@@ -5,6 +5,29 @@
</template>
<script setup>
onMounted(() => {
window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
const handleScroll = () => {
if (Math.random() > 0.3) return
// for (let i = 0; i < navList.value.length; i++) {
// let element = navList.value[i]
// const rect = eval(element.value).value.getBoundingClientRect();
// const distanceToTop = rect.top;
// if (distanceToTop >= 0) {
// navTab.value = element.value
// break;
// }
// }
}
const screenroll = () => {
window.scrollTo({
top: 0,

View File

@@ -31,7 +31,6 @@ function copyToClipboard(text) {
// 4. 销毁输入框
document.body.removeChild(textareaEle);
resolve()
// navigator.clipboard.writeText(text).then(() => {
// resolve()
// }).catch((err) => {

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

@@ -125,7 +125,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">
@@ -161,8 +163,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">
@@ -176,7 +177,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="">
@@ -201,7 +202,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>
@@ -218,7 +220,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>
@@ -234,7 +237,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>
@@ -247,7 +251,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>
@@ -263,7 +268,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>
@@ -285,7 +291,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>
@@ -298,7 +305,8 @@
}}
</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>
@@ -316,7 +324,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>
@@ -329,7 +338,8 @@
}}
</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>
@@ -348,7 +358,8 @@
}}
</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>
@@ -364,7 +375,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>
@@ -375,7 +387,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>
@@ -594,7 +607,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'] &&
@@ -674,7 +688,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>
@@ -962,7 +976,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>
@@ -1002,6 +1016,7 @@ let uniqid = ref('')
let showBusinessCard = ref(false)
//查看图片
let imageShow = ref(false)
let imageIndex = ref(0)
let cloaseImageShow = () => {
imageShow.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;
}