提交
This commit is contained in:
commit
385d8e34c5
@ -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}` }}
|
||||
@ -40,7 +40,7 @@
|
||||
<img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
|
||||
// type 的类型代表 attachment 图片 videos 视频 lives 直播
|
||||
@ -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)
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
show = props.show
|
||||
list.value = props.list
|
||||
if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
show = props.show
|
||||
list.value = props.list
|
||||
if (props.index >= 0) carousel.value.setActiveItem(props.index)
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
|
@ -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,
|
||||
|
@ -31,7 +31,6 @@ function copyToClipboard(text) {
|
||||
// 4. 销毁输入框
|
||||
document.body.removeChild(textareaEle);
|
||||
resolve()
|
||||
|
||||
// navigator.clipboard.writeText(text).then(() => {
|
||||
// resolve()
|
||||
// }).catch((err) => {
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
@ -294,11 +301,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>
|
||||
@ -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>
|
||||
@ -325,11 +334,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>
|
||||
@ -344,11 +354,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>
|
||||
@ -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>
|
||||
@ -440,7 +453,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' }">
|
||||
@ -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
|
||||
}
|
||||
@ -1145,11 +1160,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}`,
|
||||
@ -1171,7 +1186,7 @@ let setNavigation = () => {
|
||||
|
||||
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
store.state.routeList['thirdIndex'] = ''
|
||||
store.state.routeList['fourthIndex'] = ''
|
||||
}
|
||||
@ -1309,7 +1324,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
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user