修改求房源列表 筛选出现 位置报错问题 和增加 列表的更多数据
This commit is contained in:
A1300399510
parent
c3c446584d
commit
ec95879d91
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
dist/css/housing.9446fef2.css
vendored
1
dist/css/housing.9446fef2.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/housing.eb3b0b2e.css
vendored
Normal file
1
dist/css/housing.eb3b0b2e.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -1,4 +1,4 @@
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.25ef79b4.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.1b015cfb.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.96d24200.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"></script><script>var _hmt = _hmt || [];
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.fde77efe.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.f5f600f1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"></script><script>var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
dist/js/app.1b015cfb.js
vendored
1
dist/js/app.1b015cfb.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/app.fde77efe.js
vendored
Normal file
1
dist/js/app.fde77efe.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/detail.150f07a0.js
vendored
1
dist/js/detail.150f07a0.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/detail.3b446794.js
vendored
Normal file
1
dist/js/detail.3b446794.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,87 +1,74 @@
|
||||
<template>
|
||||
<div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
|
||||
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
|
||||
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
|
||||
alt="">
|
||||
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="" />
|
||||
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2" alt="" />
|
||||
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
|
||||
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
|
||||
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
|
||||
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
|
||||
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="" />
|
||||
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="" />
|
||||
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="" />
|
||||
</div>
|
||||
<div class="top-box">
|
||||
<div class="title-text">
|
||||
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
|
||||
style="float:left;margin:3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
|
||||
{{ data && data.data && data.data.subject || '暂无标题' }}
|
||||
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" style="float: left; margin: 3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="" />
|
||||
{{ (data && data.data && data.data.subject) || "暂无标题" }}
|
||||
</div>
|
||||
<div class="mg-t-20 dis-f al-item-start jus-bet s-w-100">
|
||||
<div>
|
||||
<div class="dis-f al-item">
|
||||
<div class="tab-item first-tab">
|
||||
{{ data && data.data && data.data.gptype || '' }}
|
||||
{{ (data && data.data && data.data.gptype) || "" }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8"
|
||||
v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
|
||||
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
|
||||
<div class="tab-item mg-l-8" v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
|
||||
{{ (listData.data && listData.data.type[data && data.data && data.data.type]) || "" }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8"
|
||||
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
|
||||
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
|
||||
||
|
||||
'' }}
|
||||
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
|
||||
{{ (listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]) || "" }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8"
|
||||
v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
|
||||
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
|
||||
data.data.sunshinearea] || '' }}
|
||||
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
|
||||
{{ (listData && listData.data && listData.data.sunshinearea[data && data.data && data.data.sunshinearea]) || "" }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8"
|
||||
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
|
||||
{{
|
||||
listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
|
||||
''
|
||||
}}
|
||||
<div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
|
||||
{{ (listData && listData.data && listData.data.gender[data && data.data && data.data.gender]) || "" }}
|
||||
</div>
|
||||
<div class="tab-item mg-l-8"
|
||||
v-if="listData.data && listData.data.rentalduration">
|
||||
{{ data.data.rentalduration
|
||||
=== '0' ? '租期不限' :
|
||||
listData.data.rentalduration[data.data && data.data.rentalduration] || ''
|
||||
}}
|
||||
<div class="tab-item mg-l-8" v-if="listData.data && listData.data.rentalduration">
|
||||
{{ data.data.rentalduration === "0" ? "租期不限" : listData.data.rentalduration[data.data && data.data.rentalduration] || "" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-text dis-f al-item"
|
||||
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||||
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="" />
|
||||
<span>{{
|
||||
location && location.data && location.data[1] ? `${location && location.data &&
|
||||
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
|
||||
${location &&
|
||||
location.data[data && data.data && data.data.location]}` : ''
|
||||
location && location.data && location.data[1]
|
||||
? `${location && location.data && location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
|
||||
${location && location.data[data && data.data && data.data.location]}`
|
||||
: ""
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;"
|
||||
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
|
||||
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
|
||||
v-for="(item, i) in data.data.location" :key="i">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||||
<span>{{
|
||||
location && location.data && location.data[1] ? `${location && location.data &&
|
||||
location.data[item.substring(0,
|
||||
1)]} >
|
||||
${item.length === 1 ? '不限' : location &&
|
||||
location.data[item]}` : ''
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;" v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
|
||||
<template v-if="data && data.data && data.data.location">
|
||||
<div class="address-text dis-f al-item mg-r-15" v-for="(item, i) in data.data.location" :key="i">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="" />
|
||||
<span>{{
|
||||
location && location.data && location.data[1]
|
||||
? `${location && location.data && location.data[Math.floor(item)]} >
|
||||
${item.length === 1 ? "不限" : location && location.data[item]}`
|
||||
: ""
|
||||
}}</span>
|
||||
<!-- <span>{{
|
||||
location && location.data && location.data[1]
|
||||
? `${location && location.data && location.data[item.substring(0, 1)]} >
|
||||
${item.length === 1 ? "不限" : location && location.data[item]}`
|
||||
: ""
|
||||
}}</span> -->
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="price-text dis-f" style="align-items: end;">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
|
||||
&& data.data.rent }}</div>
|
||||
<div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
|
||||
&&
|
||||
data.data.rent[0] }}<span style="margin:0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span></div>
|
||||
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data && data.data.rent }}</div>
|
||||
<div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">
|
||||
{{ data && data.data && data.data.rent[0] }}<span style="margin: 0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span>
|
||||
</div>
|
||||
<span>/{{ data && data.data && data.data.rentalperiod }}</span>
|
||||
<!-- <span class="time"
|
||||
v-show="data && data.data && data.data.rentalduration != 0 && pageType == 2">[
|
||||
@ -93,70 +80,57 @@
|
||||
<!-- 'img-150':routePath==='/detail' -->
|
||||
<div class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }">
|
||||
<div class="dis-f">
|
||||
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
|
||||
@load="loadFinish" @error="loadFinish" class="img "
|
||||
:class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }"
|
||||
alt=""
|
||||
v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false">
|
||||
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''" @load="loadFinish" @error="loadFinish" class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }" alt="" v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false" />
|
||||
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
|
||||
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
|
||||
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
|
||||
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
|
||||
class="tab-img" alt="">
|
||||
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
|
||||
alt="">
|
||||
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="" />
|
||||
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'" class="tab-img" alt="" />
|
||||
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img" alt="" />
|
||||
</div>
|
||||
<div class="btm-line"></div>
|
||||
<div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
|
||||
<div class="dis-f al-item">
|
||||
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
|
||||
<img :src="data && data.data && data.data.avatar" class="user-img" alt="" />
|
||||
<span class="user-name">{{ data && data.data && data.data.author }}</span>
|
||||
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
|
||||
{{
|
||||
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
|
||||
{{ listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
|
||||
</div>
|
||||
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{
|
||||
data &&
|
||||
data.data.intermediary_text
|
||||
}}</div>
|
||||
<div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{
|
||||
listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender]
|
||||
}}</div>
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png"
|
||||
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
|
||||
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data && data.data.intermediary_text }}</div>
|
||||
<div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{ listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender] }}</div>
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="" />
|
||||
</div>
|
||||
<!-- <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
|
||||
v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import store from '../../store/index';
|
||||
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import store from "../../store/index"
|
||||
let props = defineProps({
|
||||
item: {
|
||||
type: Object
|
||||
type: Object,
|
||||
},
|
||||
imgLoad: {
|
||||
type: Function,
|
||||
default: function () {
|
||||
return () => { }
|
||||
}
|
||||
return () => {}
|
||||
},
|
||||
},
|
||||
listId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
detailShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
let data = reactive({ data: {} })
|
||||
//显示样式
|
||||
@ -165,7 +139,6 @@ watchEffect(() => {
|
||||
data.data = props.item
|
||||
})
|
||||
|
||||
|
||||
let listId = props.listId
|
||||
let imgRef = null
|
||||
let loadFinish = () => {
|
||||
@ -175,19 +148,18 @@ let loadFinish = () => {
|
||||
|
||||
//监听路由
|
||||
const route = useRouter()
|
||||
let routePath = ref('')
|
||||
let routePath = ref("")
|
||||
routePath.value = route.currentRoute.value.meta.path
|
||||
|
||||
//地区数据
|
||||
let location = reactive({ data: {} })
|
||||
location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
|
||||
|
||||
|
||||
//数据包
|
||||
let listData = reactive({ data: {} })
|
||||
listData.data = store.state.indexData && store.state.indexData.config || {}
|
||||
listData.data = (store.state.indexData && store.state.indexData.config) || {}
|
||||
|
||||
let pageType = ref('')
|
||||
let pageType = ref("")
|
||||
|
||||
//跳转
|
||||
let router = useRouter()
|
||||
@ -195,7 +167,7 @@ let watchInfo = () => {
|
||||
let seachData = router.currentRoute.value.query
|
||||
if (pageType.value === 4) {
|
||||
for (let key in data) {
|
||||
store.state.seachSelect['seachPage'][key] = seachData[key]
|
||||
store.state.seachSelect["seachPage"][key] = seachData[key]
|
||||
}
|
||||
}
|
||||
// console.log(document.location.origin)
|
||||
@ -206,7 +178,6 @@ onMounted(() => {
|
||||
imgRef = getCurrentInstance()
|
||||
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
@ -352,7 +323,7 @@ img {
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
@ -374,11 +345,11 @@ img {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
color: #7f7f7f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -387,14 +358,13 @@ img {
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
.img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@ -404,7 +374,7 @@ img {
|
||||
}
|
||||
|
||||
.price-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
@ -413,26 +383,26 @@ img {
|
||||
line-height: 17px;
|
||||
|
||||
.time {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
color: #7f7f7f;
|
||||
margin-left: 15px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #F95D5D;
|
||||
color: #f95d5d;
|
||||
line-height: 20px;
|
||||
margin: 0 5PX;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
@ -464,7 +434,7 @@ img {
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
@ -485,7 +455,7 @@ img {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
@ -495,6 +465,3 @@ img {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
|
||||
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
|
||||
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
|
||||
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)" />
|
||||
<img class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
@ -72,6 +72,7 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
|
||||
height: 244px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 19px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@ -26,7 +26,10 @@ export default createStore({
|
||||
showloginmodal: false, // 是否需要登录状态
|
||||
apartmentPitchValue: {}, // 公寓筛选的值 全局化
|
||||
needPitchValue: {}, // 求房源筛选的值 全局化
|
||||
personPitchValue: {}, // 个人筛选的值 全局化
|
||||
personPitchValue: {
|
||||
types: 1.5,
|
||||
// school: 314,
|
||||
}, // 个人筛选的值 全局化
|
||||
intermediaryPitchValue: {}, // 中介筛选的值 全局化
|
||||
locationObj: {}, // 地区数据
|
||||
bannerData: {}, // 所有轮播数据
|
||||
|
||||
@ -22,6 +22,9 @@ export default{
|
||||
getLists:(params={})=>{//获取搜索数据 个人/中介/求房源
|
||||
return axios.get('/tenement/pc/api/lists',params)
|
||||
},
|
||||
getMoreLists:(params={})=>{// 获取 更多搜索数据
|
||||
return axios.get('/tenement/pc/api/lists/moreRecommendations',params)
|
||||
},
|
||||
apartment:(params={})=>{//获取公寓列表
|
||||
return axios.get('/tenement/pc/api/apartment',params)
|
||||
},
|
||||
|
||||
@ -7,13 +7,21 @@
|
||||
</div>
|
||||
|
||||
<div class="list wid1200 flexflex" ref="gridContainer">
|
||||
<apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
|
||||
<template v-if="list.length != 0">
|
||||
<apartment-item v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
|
||||
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
|
||||
</div>
|
||||
|
||||
<!-- 其他附近房源 -->
|
||||
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
|
||||
<div class="wid1200" ref="moreShowList">
|
||||
<apartment-item v-for="(item, index) in moreList" :key="index" :item="item"></apartment-item>
|
||||
</div>
|
||||
|
||||
<div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
|
||||
<div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div>
|
||||
|
||||
@ -41,6 +49,7 @@ import Masonry from "masonry-layout"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import backToTop from "@/components/public/backToTop.vue"
|
||||
import store from "../../store/index"
|
||||
import api from "../../utils/api"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
@ -56,6 +65,7 @@ let list = ref([])
|
||||
let listCount = ref(0) // 列表数量
|
||||
|
||||
let masonryInstance = null
|
||||
// let masonryInstanceMore = null
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化瀑布流
|
||||
@ -64,11 +74,16 @@ onMounted(() => {
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
// masonryInstanceMore = new Masonry(moreShowList.value, {
|
||||
// itemSelector: ".item",
|
||||
// gutter: 20,
|
||||
// })
|
||||
|
||||
pitchValue.value = store.state.apartmentPitchValue
|
||||
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
|
||||
|
||||
// banner() // 获取轮播图数据
|
||||
getData() // 获取列表数据
|
||||
getData() // 获取列表数据
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
})
|
||||
@ -109,6 +124,12 @@ const getData = () => {
|
||||
loading.close()
|
||||
requestLoading = false
|
||||
})
|
||||
|
||||
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
|
||||
// if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
|
||||
// morePage.value = 1
|
||||
// getMoreList()
|
||||
// }
|
||||
})
|
||||
.catch(err => {
|
||||
loading.close()
|
||||
@ -128,6 +149,7 @@ let pitchValue = ref({
|
||||
roomtype: 0,
|
||||
rent_min: null, // 租金
|
||||
rent_max: null, // 租金
|
||||
location: [],
|
||||
school: 0,
|
||||
roomlistings: 0,
|
||||
keyword: "",
|
||||
@ -147,13 +169,49 @@ const handleTransfer = data => {
|
||||
}
|
||||
}
|
||||
|
||||
//轮播
|
||||
// let bannerList = reactive({ data: [] })
|
||||
// let banner = () => {
|
||||
// proxy.$get("/tenement/pc/api/banner").then(res => {
|
||||
// if (res.code === 200) bannerList.data = res.data
|
||||
// })
|
||||
// }
|
||||
let moreShowList = ref(null)
|
||||
let moreState = ref(false) // 更多列表 显示状态
|
||||
let morePage = ref(1)
|
||||
let moreList = ref([])
|
||||
let moreLoading = ref(false)
|
||||
|
||||
// 加载更多数据列表
|
||||
const getMoreList = () => {
|
||||
if (morePage.value == 0 || moreLoading.value) return
|
||||
console.log("11111");
|
||||
moreLoading.value = true
|
||||
let postData = {
|
||||
page: morePage.value,
|
||||
...pitchValue.value,
|
||||
}
|
||||
|
||||
api.getMoreLists(postData).then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
if (!data.data) return
|
||||
|
||||
moreList.value = moreList.value.concat(data.data)
|
||||
moreState.value = true
|
||||
if (data.data && data.data.length < data.limit) morePage.value = 0
|
||||
else {
|
||||
morePage.value++
|
||||
window.addEventListener("scroll", getMoreScroll, true)
|
||||
}
|
||||
nextTick(() => {
|
||||
masonryInstanceMore.reloadItems()
|
||||
masonryInstanceMore.layout()
|
||||
moreLoading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getMoreScroll = () => {
|
||||
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
|
||||
let scrollTop = body.scrollTop
|
||||
let clientHeight = body.clientHeight
|
||||
let offsetHeight = body.offsetHeight
|
||||
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.screen-box {
|
||||
@ -191,4 +249,14 @@ const handleTransfer = data => {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.other-nearby-listings-box {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: #525151;
|
||||
background: rgba(245, 251, 255, 1);
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 其他附近房源 -->
|
||||
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> -->
|
||||
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
|
||||
<div style="width: 1200px;" ref="moreShowList">
|
||||
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
|
||||
@ -43,6 +46,8 @@ import store from "../../store/index"
|
||||
|
||||
//瀑布实例
|
||||
let listMasonryInstance = null
|
||||
let listMasonryInstanceMore = null
|
||||
|
||||
//获取数据
|
||||
let pages = ref(1)
|
||||
let dataList = reactive({ data: [], count: 0 })
|
||||
@ -76,7 +81,7 @@ let setSeachSelectData = (data, noMask = false) => {
|
||||
}
|
||||
|
||||
//获取搜索数据
|
||||
let getDataList = (data) => {
|
||||
let getDataList = data => {
|
||||
loadingText.value = " 加载中..... "
|
||||
if (!loading.value) return
|
||||
loading.value = false
|
||||
@ -86,6 +91,10 @@ let getDataList = (data) => {
|
||||
limit: 20,
|
||||
...data,
|
||||
}
|
||||
|
||||
moreList.value = []
|
||||
window.removeEventListener("scroll", getMoreScroll, true)
|
||||
|
||||
api.getLists(postData).then(res => {
|
||||
if (res.code === 200) {
|
||||
dataList.data = res.data.data
|
||||
@ -106,6 +115,12 @@ let getDataList = (data) => {
|
||||
listMasonryInstance.layout()
|
||||
if (dataList.data.length >= 20) loading.value = true
|
||||
})
|
||||
|
||||
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
|
||||
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
|
||||
morePage.value = 1
|
||||
getMoreList(data)
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
@ -126,12 +141,63 @@ let downLoadMore = () => {
|
||||
|
||||
let list = ref("")
|
||||
|
||||
let moreShowList = ref(null)
|
||||
let moreState = ref(false) // 更多列表 显示状态
|
||||
let morePage = ref(1)
|
||||
let moreList = ref([])
|
||||
let moreLoading = ref(false)
|
||||
|
||||
// 加载更多数据列表
|
||||
const getMoreList = data => {
|
||||
if (morePage.value == 0 || moreLoading.value) return
|
||||
moreLoading.value = true
|
||||
|
||||
let postData = {
|
||||
page: morePage.value,
|
||||
intermediary: 1,
|
||||
...seachSelectData.data,
|
||||
}
|
||||
|
||||
if (!postData["orderby"]) postData["orderby"] = "timestamp"
|
||||
|
||||
api.getMoreLists(postData)
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
moreList.value = moreList.value.concat(data.data)
|
||||
moreState.value = true
|
||||
if (data.data && data.data.length < data.limit) morePage.value = 0
|
||||
else {
|
||||
morePage.value++
|
||||
window.addEventListener("scroll", getMoreScroll, true)
|
||||
}
|
||||
nextTick(() => {
|
||||
listMasonryInstanceMore.reloadItems()
|
||||
listMasonryInstanceMore.layout()
|
||||
})
|
||||
})
|
||||
.finally(() => (moreLoading.value = false))
|
||||
}
|
||||
|
||||
const getMoreScroll = () => {
|
||||
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
|
||||
let scrollTop = body.scrollTop
|
||||
let clientHeight = body.clientHeight
|
||||
let offsetHeight = body.offsetHeight
|
||||
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
|
||||
}
|
||||
|
||||
//listImg
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
listMasonryInstanceMore = new Masonry(moreShowList.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
// getDataList()
|
||||
// banner()
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
@ -196,5 +262,6 @@ img {
|
||||
background: rgba(245, 251, 255, 1);
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
|
||||
<noList hint-text-two="建议放宽筛选条件"></noList>
|
||||
</div>
|
||||
|
||||
<!-- 其他附近房源 -->
|
||||
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
|
||||
<div style="width: 1200px;" ref="moreShowList">
|
||||
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
|
||||
@ -39,6 +46,8 @@ import store from "../../store/index"
|
||||
|
||||
//瀑布实例
|
||||
let listMasonryInstance = null
|
||||
let listMasonryInstanceMore = null
|
||||
|
||||
//获取数据
|
||||
let pages = ref(1)
|
||||
let dataList = reactive({ data: [], count: 0 })
|
||||
@ -73,6 +82,9 @@ let getDataList = data => {
|
||||
...data,
|
||||
}
|
||||
|
||||
moreList.value = []
|
||||
window.removeEventListener("scroll", getMoreScroll, true)
|
||||
|
||||
api.getLists(postData).then(res => {
|
||||
if (res.code === 200) {
|
||||
dataList.data = res.data.data
|
||||
@ -93,6 +105,12 @@ let getDataList = data => {
|
||||
listMasonryInstance.layout()
|
||||
if (dataList.data.length >= 20) loading.value = true
|
||||
})
|
||||
|
||||
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
|
||||
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
|
||||
morePage.value = 1
|
||||
getMoreList(data)
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
@ -113,6 +131,50 @@ let downLoadMore = () => {
|
||||
|
||||
let list = ref("")
|
||||
|
||||
let moreShowList = ref(null)
|
||||
let moreState = ref(false) // 更多列表 显示状态
|
||||
let morePage = ref(1)
|
||||
let moreList = ref([])
|
||||
let moreLoading = ref(false)
|
||||
|
||||
// 加载更多数据列表
|
||||
const getMoreList = data => {
|
||||
if (morePage.value == 0 || moreLoading.value) return
|
||||
moreLoading.value = true
|
||||
let postData = {
|
||||
page: morePage.value,
|
||||
intermediary: 0,
|
||||
...seachSelectData.data,
|
||||
}
|
||||
|
||||
if (!postData["orderby"]) postData["orderby"] = "timestamp"
|
||||
|
||||
api.getMoreLists(postData).then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
moreList.value = moreList.value.concat(data.data)
|
||||
moreState.value = true
|
||||
if (data.data && data.data.length < data.limit) morePage.value = 0
|
||||
else {
|
||||
morePage.value++
|
||||
window.addEventListener("scroll", getMoreScroll, true)
|
||||
}
|
||||
nextTick(() => {
|
||||
listMasonryInstanceMore.reloadItems()
|
||||
listMasonryInstanceMore.layout()
|
||||
moreLoading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getMoreScroll = () => {
|
||||
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
|
||||
let scrollTop = body.scrollTop
|
||||
let clientHeight = body.clientHeight
|
||||
let offsetHeight = body.offsetHeight
|
||||
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
|
||||
}
|
||||
|
||||
// const needPitchValue = reactive({ ...store.state.needPitchValue })
|
||||
|
||||
onMounted(() => {
|
||||
@ -120,6 +182,12 @@ onMounted(() => {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
listMasonryInstanceMore = new Masonry(moreShowList.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
// getDataList()
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
@ -176,4 +244,13 @@ img {
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
.other-nearby-listings-box {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: #525151;
|
||||
background: rgba(245, 251, 255, 1);
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,8 +13,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 其他附近房源 -->
|
||||
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> -->
|
||||
|
||||
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
|
||||
<div style="width: 1200px;" ref="moreShowList">
|
||||
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
|
||||
@ -26,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick,getCurrentInstance } from "vue"
|
||||
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } from "vue"
|
||||
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
|
||||
import seachModule from "../../components/seachModule/seachModule1.vue"
|
||||
import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
|
||||
@ -42,12 +44,14 @@ import loadMoreText from "../../components/loadMore/loadMoreText.vue"
|
||||
import backToTop from "@/components/public/backToTop.vue"
|
||||
import Masonry from "masonry-layout"
|
||||
import store from "../../store/index"
|
||||
import { set } from "nprogress"
|
||||
|
||||
//路由
|
||||
const router = useRouter()
|
||||
|
||||
//瀑布实例
|
||||
let listMasonryInstance = null
|
||||
let listMasonryInstanceMore = null
|
||||
|
||||
//获取数据
|
||||
let pages = ref(1)
|
||||
@ -61,7 +65,6 @@ provide("count", dataCount)
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data, noMask = false) => {
|
||||
store.state.personPitchValue = data
|
||||
@ -96,6 +99,9 @@ let getDataList = data => {
|
||||
}
|
||||
if (!postData["orderby"]) postData["orderby"] = "timestamp"
|
||||
|
||||
moreList.value = []
|
||||
window.removeEventListener("scroll", getMoreScroll, true)
|
||||
|
||||
api.getLists(postData).then(res => {
|
||||
if (res.code === 200) {
|
||||
dataList.data = res.data.data
|
||||
@ -116,6 +122,12 @@ let getDataList = data => {
|
||||
listMasonryInstance.layout()
|
||||
if (dataList.data.length >= 20) loading.value = true
|
||||
})
|
||||
|
||||
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
|
||||
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
|
||||
morePage.value = 1
|
||||
getMoreList(data)
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
@ -135,12 +147,62 @@ let downLoadMore = () => {
|
||||
}
|
||||
|
||||
let list = ref(null)
|
||||
let moreShowList = ref(null)
|
||||
let moreState = ref(false) // 更多列表 显示状态
|
||||
let morePage = ref(1)
|
||||
let moreList = ref([])
|
||||
let moreLoading = ref(false)
|
||||
|
||||
// 加载更多数据列表
|
||||
const getMoreList = data => {
|
||||
if (morePage.value == 0 || moreLoading.value) return
|
||||
moreLoading.value = true
|
||||
let postData = {
|
||||
page: morePage.value,
|
||||
intermediary: 0,
|
||||
...seachSelectData.data,
|
||||
}
|
||||
|
||||
if (!postData["orderby"]) postData["orderby"] = "timestamp"
|
||||
|
||||
api.getMoreLists(postData).then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
moreList.value = moreList.value.concat(data.data)
|
||||
moreState.value = true
|
||||
if (data.data && data.data.length < data.limit) morePage.value = 0
|
||||
else {
|
||||
morePage.value++
|
||||
window.addEventListener("scroll", getMoreScroll, true)
|
||||
}
|
||||
nextTick(() => {
|
||||
listMasonryInstanceMore.reloadItems()
|
||||
listMasonryInstanceMore.layout()
|
||||
moreLoading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getMoreScroll = () => {
|
||||
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
|
||||
let scrollTop = body.scrollTop
|
||||
let clientHeight = body.clientHeight
|
||||
let offsetHeight = body.offsetHeight
|
||||
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
|
||||
}
|
||||
|
||||
//listImg
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
listMasonryInstanceMore = new Masonry(moreShowList.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
// let { type, data } = router.currentRoute.value.query
|
||||
// let typeData = null
|
||||
// if (data) typeData = JSON.parse(data)
|
||||
@ -153,6 +215,7 @@ onMounted(() => {
|
||||
// }
|
||||
// banner()
|
||||
// getDataList(seachSelectData.data)
|
||||
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
@ -216,5 +279,6 @@ img {
|
||||
background: rgba(245, 251, 255, 1);
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user