XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图组件

Browse Source
This commit is contained in:
luJianJun
2023-07-25 17:21:36 +08:00
parent cb5fc462c7
commit 2d20fe1cce
7 changed files with 168 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/detail/authenticationHousing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

0
src/assets/img/detail/threeConcatBG.svg → src/assets/img/detail/threeConcatbgImg.svg
View File

12
src/assets/img/detail/threePopBigBg.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="480px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="506" y1="12805.6956521739" x2="1311" y2="12805.6956521739" id="LinearGradient243">
<stop id="Stop244" stop-color="#ffffff" offset="0" />
<stop id="Stop245" stop-color="#eff7ff" stop-opacity="0.752941176470588" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -611 -12567 )">
<path d="M 611 12577 A 10 10 0 0 1 621 12567 L 1301 12567 A 10 10 0 0 1 1311 12577 L 1311 13037 A 10 10 0 0 1 1301 13047 L 621 13047 A 10 10 0 0 1 611 13037 L 611 12577 Z " fill-rule="nonzero" fill="url(#LinearGradient243)" stroke="none" />
</g>
</svg>

1
src/components/biserialListItem/biserialListItem.vue
View File

@@ -112,7 +112,6 @@ let props = defineProps({
let data = reactive({ data: {} }) let data = reactive({ data: {} })
watchEffect(() => { watchEffect(() => {
data.data = props.item data.data = props.item
console.log(123,data.data)
}) })

6
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -83,7 +83,7 @@
<!-- 广告 --> <!-- 广告 -->
</div> </div>
<img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt=""> <img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt="" @click="watchAdv">
</template> </template>
<script setup> <script setup>
@@ -101,6 +101,10 @@ let itemData = props.data
let location=reactive({data:{}}) let location=reactive({data:{}})
location.data=store.state.indexData.config.location location.data=store.state.indexData.config.location
let watchAdv=()=>{
}
</script> </script>
<style scoped> <style scoped>
.pos-r { .pos-r {

232
src/views/detail.vue
View File

@@ -115,7 +115,8 @@
<div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ? <div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ?
housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div> housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
<img src="../assets/img/detail/imageIcon.png" class="img-icon" alt=""> <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
<div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.picturegroup.length <div class="num-box">{{ housingInfo['data'] &&
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
|| 0 }}</div> || 0 }}</div>
</div> </div>
<div class="img-list-box dis-f jus-x al-item" @click="imageShow = true"> <div class="img-list-box dis-f jus-x al-item" @click="imageShow = true">
@@ -229,14 +230,14 @@
<div class="map-box"> <div class="map-box">
<div class="dis-f al-item title-box"> <div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt=""> <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<!-- <span class="title">{{ <span class="title">{{
location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)] location&&location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
}} > {{ }} > {{
location[housingInfo['data']&&housingInfo['data']['info'].location] location&&location[housingInfo['data']&&housingInfo['data']['info'].location]
}}</span> --> }}</span>
</div> </div>
<div class="dis-f jus-x" style="margin-top:15px;"> <div class="dis-f jus-x" style="margin-top:15px;">
<!-- <div class="map-s"> <div class="map-s">
<div class="pop-box"> <div class="pop-box">
<div class="address-box dis-f al-item jus-bet"> <div class="address-box dis-f al-item jus-bet">
<div class="dis-f al-item"> <div class="dis-f al-item">
@@ -247,13 +248,18 @@
<img src="../assets/img/detail/moreNot.svg" class="icon" alt=""> <img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
</div> </div>
</div> </div>
</div> --> </div>
<!-- <mapInfo :info="housingInfo['data']&&housingInfo['data'].info"></mapInfo> --> {{ housingInfo['data']&&housingInfo['data'].info.longitude }}
{{ housingInfo['data']&&housingInfo['data'].info.latitude }}
<mapInfo :latlng="{
longitude:housingInfo['data']&&housingInfo['data'].info.longitude,
latitude:housingInfo['data']&&housingInfo['data'].info.latitude
}" :name="housingInfo['data']&&housingInfo['data'].info.address"></mapInfo>
</div> </div>
</div> </div>
<div class="dis-f jus-x"> <div class="dis-f jus-x" v-if="distanceList.length">
<div class="distance-box dis-f jus-bet"> <div class="distance-box dis-f jus-bet">
<div class="distance-info-box" :class="{ 'show-distance-info-box': showDistance }" <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }"> :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
<div class="top-box"></div> <div class="top-box"></div>
<div class="title-box dis-f al-item jus-x"> <div class="title-box dis-f al-item jus-x">
@@ -264,15 +270,15 @@
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList" <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
:key="index" :class="{ 'mg-t-50': index > 0 }"> :key="index" :class="{ 'mg-t-50': index > 0 }">
<div class="icon-box dis-f al-item jus-x" <div class="icon-box dis-f al-item jus-x"
:class="{ 'home-icon': item.address }"> :class="{ 'home-icon':item&&item.address }">
<div class="line" v-show="index > 0"></div> <div class="line" v-show="index > 0"></div>
<img src="../assets/img/detail/school.png" class="icon" <img src="../assets/img/detail/school.png" class="icon"
v-show="item.address" alt=""> v-show="item&&item.address" alt="">
<img src="../assets/img/detail/home.png" class="icon" v-show="!item.address" <img src="../assets/img/detail/home.png" class="icon" v-show="item&&!item.address"
alt=""> alt="">
</div> </div>
{{ item && item.name }} {{ item && item.name }}
<div v-for="(items, i) in item.point" :key="i"> <div v-for="(items, i) in item&&item.point" :key="i">
<span class="address-info"> <span class="address-info">
{{ items.title }} {{ items.title }}
</span> </span>
@@ -292,10 +298,10 @@
<div class="line-school-box dis-f al-item" style="justify-content:space-around;"> <div class="line-school-box dis-f al-item" style="justify-content:space-around;">
<div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id"> <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id">
<div :class="{ 'far-s': item && item.recently_distance > 4 }" <div :class="{ 'far-s': item && item.recently_distance > 4 }"
v-if="!item.address" class="text-c"> v-if="item&&!item.address" class="text-c">
{{ item && item.recently_distance }}km {{ item && item.recently_distance }}km
</div> </div>
<div class="dis-f jus-x" v-if="!item.address"> <div class="dis-f jus-x" v-if="item&&!item.address">
<img src="../assets/img/detail/markIcon.svg" <img src="../assets/img/detail/markIcon.svg"
v-if="item && item.recently_distance <= 4" class="marker-icon" v-if="item && item.recently_distance <= 4" class="marker-icon"
alt=""> alt="">
@@ -304,7 +310,7 @@
alt=""> alt="">
</div> </div>
<div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c" <div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
v-if="!item.address">{{ v-if="item&&!item.address">{{
item && item.alias }}</div> item && item.alias }}</div>
</div> </div>
</div> </div>
@@ -465,75 +471,99 @@
附近房源 附近房源
</div> </div>
</div> </div>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item" style="position: relative;z-index:-1;">
<div class="body-maxWidth" ref="gridContainer" <div class="body-maxWidth">
style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;"> <div ref="gridContainer"
<indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id"> style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
</indexWaterfallBox> <indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
</indexWaterfallBox>
</div>
</div> </div>
</div> </div>
<!-- <footerTool></footerTool> --> <div class="dis-f jus-x bottom-tps">
<div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat"> - {{ loadText }} -
</div>
<footerTool></footerTool>
<div class="pop-box" v-show="showConcat">
<!-- 两种信息 --> <!-- 两种信息 -->
<!-- third-concat --> <!-- third-concat -->
<div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1"> <div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1"
<div class="pop-info-box dis-f jus-x al-item"> :class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
<div class="pop-big-bg dis-f jus-x al-item"> <div class="pop-info-box dis-f jus-x al-item"
<div class="user-liner-box dis-f al-item"> :class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
<div class="pop-big-bg dis-f jus-x al-item"
:class="{'third-concat':concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3}">
<div class="user-liner-box dis-f al-item" :class="{'jus-bet':concatData.data&&concatData.data.count>2}" >
<!-- class='s-w-100' --> <!-- class='s-w-100' -->
<div style="padding:0 0 30px 0;"> <div style="padding:0 0 30px 0;" :class="[{'s-w-100':concatData.data && concatData.data.count === 2}]">
<div class="liner-title"> <div class="liner-title">
联系方式 联系方式
</div> </div>
<div class="whatsapp-box"> <div class="whatsapp-box" v-if="concatData.data && concatData.data.wechat&&concatData.data.count > 2">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/wxIcon.png" class="whatsapp-icon" alt=""> <img src="../assets/img/detail/wxIcon.png" class="whatsapp-icon" alt="">
微信 微信
</div> </div>
<div class="dis-f al-item box-text mg-l-35"> <div class="dis-f al-item box-text mg-l-35">
987654321 <div style="width:120px;">
<div class="clone-btn dis-f al-item jus-x mg-l-70"> {{ concatData.data && concatData.data.wechat }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50" @click.stop="clone(concatData.data.wechat)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
</div> </div>
</div> </div>
<div class="whatsapp-box"> <div class="whatsapp-box" v-if="concatData.data && concatData.data.whatsapp&&concatData.data.count > 2">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon" alt=""> <img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon" alt="">
WhatsApp WhatsApp
</div> </div>
<div class="dis-f al-item box-text mg-l-35"> <div class="dis-f al-item box-text mg-l-35">
987654321 <div style="width:120px;">
<div class="clone-btn dis-f al-item jus-x mg-l-70"> {{ concatData.data && concatData.data.whatsapp }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50" @click.stop="clone(concatData.data.whatsapp)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="whatsapp-box"> <div class="whatsapp-box" v-if="concatData.data && concatData.data.tel&&concatData.data.count > 2">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/phoneIcon.png" class="whatsapp-icon" alt=""> <img src="../assets/img/detail/phoneIcon.png" class="whatsapp-icon" alt="">
电话号码 电话号码
</div> </div>
<div class="dis-f al-item box-text mg-l-35"> <div class="dis-f al-item box-text mg-l-35">
987654321 <div style="width:120px;">
<div class="clone-btn dis-f al-item jus-x mg-l-70"> {{ concatData.data && concatData.data.tel }}
</div>
<div class="clone-btn dis-f al-item jus-x mg-l-50"
@click.stop="clone(concatData.data.tel)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
</div> </div>
</div> --> </div>
<!-- <div class="dis-f jus-x al-item whatsapp-wx-box s-w-100"> <div class="dis-f jus-x al-item whatsapp-wx-box s-w-100"
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid!==0">
<div> <div>
<div> <div>
WhatsApp <div v-if="concatData.data.whatsapp">
WhatsApp
</div>
<div v-if="concatData.data.tel">
电话
</div>
<div v-if="concatData.data.wechat">
微信
</div>
</div> </div>
<div class="text-s"> <div class="text-s">
987654321 {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '' }}
</div> </div>
<div class="dis-f jus-x al-item mg-t-60"> <div class="dis-f jus-x al-item mg-t-60">
<div class="clone-btn dis-f al-item jus-x"> <div class="clone-btn dis-f al-item jus-x" @click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '')">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
@@ -541,10 +571,11 @@
</div> </div>
<div class="liner"></div> <div class="liner"></div>
<div> <div>
<div class="wx-qrcode-s"> <div class="wx-qrcode-s dis-f jus-x al-item">
<img src="" class="user-img" alt=""> <img :src="concatData.data && concatData.data.wechatdata.url" class="user-img"
alt="">
</div> </div>
<div style="margin-top:15px;font-size:14px;"> <div style="margin-top:15px;font-size:14px;text-align: center;">
<div> <div>
微信扫码添加好友 微信扫码添加好友
</div> </div>
@@ -553,13 +584,13 @@
</div> </div>
</div> </div>
</div> </div>
</div> -->
</div>
<!-- <div>
<div class="wx-qrcode-s">
<img src="" class="user-img" alt="">
</div> </div>
<div style="margin-top:15px;font-size:14px;"> </div>
<div v-if="concatData.data && concatData.data.count > 2&&concatData.data.wechatdata.url">
<div class="wx-qrcode-s">
<img :src="concatData.data && concatData.data.wechatdata.url" class="user-img" alt="">
</div>
<div style="margin-top:15px;font-size:14px;text-align: center;">
<div> <div>
微信扫码添加好友 微信扫码添加好友
</div> </div>
@@ -567,8 +598,9 @@
备注：寄托租房 备注：寄托租房
</div> </div>
</div> </div>
</div> --> </div>
<div class="round dis-f jus-x al-item"> <div class="round dis-f jus-x al-item"
v-if="concatData.data && !concatData.data.wechatdata.url">
<div class="deepen dis-f jus-x al-item"> <div class="deepen dis-f jus-x al-item">
<div class="center-box dis-f jus-x al-item"> <div class="center-box dis-f jus-x al-item">
<div class="center-s dis-f jus-x al-item"> <div class="center-s dis-f jus-x al-item">
@@ -580,15 +612,26 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" alt=""> <img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" style="width:700px;" alt=""
<img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;" class="map third-bg" alt=""> --> v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3">
<img src="../assets/img/detail/popBigBg.svg" class="pop-bg third-bg" alt=""> <img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;"
<img src="../assets/img/detail/popBigBgMap.svg" class="map third-bg" alt=""> v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3"
class="map third-bg" alt="">
<img src="../assets/img/detail/popBigBg.svg"
v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
class="pop-bg third-bg" alt="">
<img src="../assets/img/detail/popBigBgMap.svg"
v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
class="map third-bg" alt="">
</div> </div>
</div> </div>
<img src="../assets/img/detail/bigPopBg.svg" class="pop-big-bg" alt=""> <img src="../assets/img/detail/bigPopBg.svg"
<!-- <img src="../assets/img/detail/threeConcatBG.svg" class="third-concat" alt=""> --> v-if="concatData.data&&concatData.data.count===3?concatData.data.wechatdata.url:concatData.data&&concatData.data.count<3"
<img src="../assets/img/detail/close.png" class="close-img" alt=""> class="pop-big-bg" alt="">
<img src="../assets/img/detail/threeConcatbgImg.svg"
v-if="concatData.data&&concatData.data.count===3?!concatData.data.wechatdata.url:concatData.data&&concatData.data.count>3"
class="third-concat" alt="">
<img src="../assets/img/detail/close.png" class="close-img" @click="showConcat=false" alt="">
</div> </div>
<!-- 一种信息 --> <!-- 一种信息 -->
<div class="pop" v-show="concatData.data && concatData.data.count === 1"> <div class="pop" v-show="concatData.data && concatData.data.count === 1">
@@ -598,7 +641,7 @@
<div class="title s-w-100"> <div class="title s-w-100">
联系方式 联系方式
</div> </div>
<div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata"> <div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata.aid != 0">
<div class="wx-qrcode s-w-100 dis-f al-item jus-x"> <div class="wx-qrcode s-w-100 dis-f al-item jus-x">
<img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt=""> <img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
</div> </div>
@@ -611,17 +654,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="s-w-100" v-if="concatData.data && concatData.data.whatsapp"> <div class="s-w-100"
<div class="whatsapp-title"> v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
<div class="whatsapp-title" v-if="concatData.data.whatsapp">
WhatsApp WhatsApp
</div> </div>
<div class="whatsapp-title" v-if="concatData.data.tel">
电话
</div>
<div class="whatsapp-title" v-if="concatData.data.wechat">
微信
</div>
<div class="whatsapp-text"> <div class="whatsapp-text">
987654321 {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '' }}
</div> </div>
</div> </div>
<div class="s-w-100 dis-f jus-x al-item mg-t-35"> <div class="s-w-100 dis-f jus-x al-item mg-t-35">
<div class="clone-btn dis-f al-item jus-x" <div class="clone-btn dis-f al-item jus-x"
v-if="concatData.data && concatData.data.whatsapp"> v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)"
@click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
@@ -631,7 +682,7 @@
<img src="../assets/img/detail/popSbgMap.svg" class="pop-bg-s" alt=""> <img src="../assets/img/detail/popSbgMap.svg" class="pop-bg-s" alt="">
</div> </div>
</div> </div>
<img src="../assets/img/detail/close.png" class="close-img" alt=""> <img src="../assets/img/detail/close.png" @click="showConcat=false" class="close-img" alt="">
<img src="../assets/img/detail/popBg.svg" class="img" alt=""> <img src="../assets/img/detail/popBg.svg" class="img" alt="">
</div> </div>
</div> </div>
@@ -652,6 +703,7 @@ import watchImage from '../components/detail/imageWatch.vue'
import breadcrumb from '../components/detail/breadcrumb.vue' import breadcrumb from '../components/detail/breadcrumb.vue'
import mapInfo from '../components/public/viewMap.vue' import mapInfo from '../components/public/viewMap.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue"; import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import Masonry from 'masonry-layout'; import Masonry from 'masonry-layout';
import transmitBtn from '@/components/public/transmitBtn.vue' import transmitBtn from '@/components/public/transmitBtn.vue'
@@ -662,6 +714,7 @@ import store from '@/store';
let loadMore = ref(true) let loadMore = ref(true)
//推荐列表页数 //推荐列表页数
let pages = ref(1) let pages = ref(1)
let uniqid = ref('')
//查看图片 //查看图片
let imageShow = ref(false) let imageShow = ref(false)
let cloaseImageShow = () => { let cloaseImageShow = () => {
@@ -714,8 +767,8 @@ let distanceList = ref([])
//地址数字高亮 //地址数字高亮
let setDistanceList = (text = '') => { let setDistanceList = (text = '') => {
if (!text) return text if (!text) return text
let oRegExp = new RegExp(/\d+\.\d+/, "g"); let oRegExp = new RegExp(/\d+(\.\d+)?/, "g");
text = text.replace(/\d+\.\d+/g, `<span style="font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; text = text.replace(/\d+(\.\d+)?/g, `<span style="font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;font-style: normal; font-weight: 400;font-style: normal;
font-size: 14px; font-size: 14px;
color: #62B1FF; color: #62B1FF;
@@ -773,7 +826,7 @@ let concatInfo = reactive({})
let setHousingArr = () => { let setHousingArr = () => {
let arr = [] let arr = []
arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : [] arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
imgList.value = imgList.value.concat(arr) imgList.value = imgList.value.concat(arr)
imgList.value = imgList.value.concat(arr) imgList.value = imgList.value.concat(arr)
} }
@@ -798,7 +851,7 @@ let setNavigation = () => {
//获取房源详情 //获取房源详情
let getHousingInfo = () => { let getHousingInfo = () => {
api.details({ api.details({
uniqid: '44qeSnfmf9GD' uniqid: uniqid.value
}).then(res => { }).then(res => {
console.log(res) console.log(res)
if (res.code === 200) { if (res.code === 200) {
@@ -841,6 +894,7 @@ let setOperation = () => {
let concatData = reactive({}) let concatData = reactive({})
let getConcatData = () => { let getConcatData = () => {
showConcat.value = true showConcat.value = true
console.log(concatData['data'])
if (concatData['data']) return if (concatData['data']) return
api.contactData({ api.contactData({
token: housingInfo['data'].token token: housingInfo['data'].token
@@ -850,7 +904,8 @@ let getConcatData = () => {
concatData['data'] = res.data concatData['data'] = res.data
let dataCount = 0 let dataCount = 0
Object.keys(concatData['data']).map(res => { Object.keys(concatData['data']).map(res => {
if (concatData['data'][res]) { console.log(res === 'wechatdata' && concatData['data'][res].aid != 0)
if ((concatData['data'][res] && res != 'wechatdata') || (res === 'wechatdata' && concatData['data'][res].aid != 0)) {
dataCount++ dataCount++
} }
}) })
@@ -888,6 +943,7 @@ const onPageSrcoll = (e) => {
if (loadMore.value) { if (loadMore.value) {
loadMore.value = false loadMore.value = false
pages.value += 1 pages.value += 1
recommendList()
} }
} }
} }
@@ -902,13 +958,14 @@ let loadText = ref('加载中......')
let recommendList = () => { let recommendList = () => {
api.recommendList({ api.recommendList({
page: pages.value, page: pages.value,
limit: 10, limit: 30,
type: 'nearby', type: 'nearby',
pagevalue: pagevalue.value, pagevalue: pagevalue.value,
token: housingInfo['data'].token token: housingInfo['data'].token
}).then(res => { }).then(res => {
console.log(res) console.log(res)
if (res.code === 200) { if (res.code === 200) {
if(res.data.length===0)return
if (res.data.pagevalue) { if (res.data.pagevalue) {
recommendListData.value = recommendListData.value.concat(res.data.data) recommendListData.value = recommendListData.value.concat(res.data.data)
pagevalue.value = res.data.pagevalue pagevalue.value = res.data.pagevalue
@@ -920,8 +977,6 @@ let recommendList = () => {
loadText.value = '到底了' loadText.value = '到底了'
} }
nextTick(() => { nextTick(() => {
console.log(recommendListData.value)
masonryInstance.reloadItems(); masonryInstance.reloadItems();
masonryInstance.layout(); masonryInstance.layout();
@@ -942,11 +997,15 @@ let recommendList = () => {
//瀑布流模块 //瀑布流模块
const gridContainer = ref(null); const gridContainer = ref(null);
let masonryInstance = null let masonryInstance = null
let router = useRouter()
onMounted(() => { onMounted(() => {
let { id } = router.currentRoute.value.query
uniqid.value = id
getHousingInfo() getHousingInfo()
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.waterfall-box', itemSelector: '.waterfall-box',
gutter: 20 gutter: 10
}); });
setTimeout(() => { setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true); window.addEventListener('scroll', onPageSrcoll, true);
@@ -1014,6 +1073,16 @@ img {
color: #333; color: #333;
} }
.bottom-tps {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
text-align: center;
padding: 30px 0;
}
.clone-btn { .clone-btn {
width: 100px; width: 100px;
height: 32px; height: 32px;
@@ -1202,8 +1271,8 @@ img {
margin-left: 35px; margin-left: 35px;
} }
.mg-l-70 { .mg-l-50 {
margin-left: 70px; margin-left: 50px;
} }
.whatsapp-box { .whatsapp-box {
@@ -1597,6 +1666,8 @@ img {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px; font-size: 14px;
padding: 30px 20px; padding: 30px 20px;
position: relative;
z-index: 666;
.detail-price-box { .detail-price-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -1999,7 +2070,7 @@ img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 110px; top: 110px;
z-index: 333; z-index: 666;
width: 100%; width: 100%;
max-height: 610px; max-height: 610px;
overflow-y: scroll; overflow-y: scroll;
@@ -2193,6 +2264,5 @@ img {
} }
} }
} }
} }</style>
</style>

8
src/views/housingView/person.vue
View File

@@ -2,9 +2,6 @@
<div> <div>
<pageTopBar></pageTopBar> <pageTopBar></pageTopBar>
<seachModule :getDataList="setSeachSelectData"></seachModule> <seachModule :getDataList="setSeachSelectData"></seachModule>
<div @click="btns">
1
</div>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0"> <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
@@ -143,11 +140,6 @@ let downLoadMore = () => {
getDataList(seachSelectData.data) getDataList(seachSelectData.data)
}) })
} }
let btns=()=>{
router.push({
path:'/detail'
})
}
//listImg //listImg
onMounted(() => { onMounted(() => {