This commit is contained in:
luJianJun 2023-07-28 14:45:45 +08:00
commit 385d8e34c5
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}` }}
@ -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 {

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>
@ -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

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;
}