PC租房全局化-还没
This commit is contained in:
A1300399510
parent
be52dede90
commit
7e5d459302
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
|
||||
<div class="body-maxWidth" :class="{seachPage: !props.seachPage}">
|
||||
<div class="body-maxWidth" :class="{ seachPage: !props.seachPage }">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item" v-if="props.seachPage">
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="flexacenter seek-input">
|
||||
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" :show-arrow="false" popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
|
||||
<template #reference>
|
||||
<el-input class="search-input " v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
|
||||
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
|
||||
</template>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<div class="seach-hiosory-box scrollbar">
|
||||
@ -87,13 +87,13 @@
|
||||
<img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
|
||||
</div>
|
||||
|
||||
<div class="option-area flexflex" :class="{'option-area-unfold': state == 'unfold'}">
|
||||
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
|
||||
<div class="option-left">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">学校附近</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['school']}" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{pitch: item['id'] == pitchValue['school']}" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
@ -111,8 +111,8 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">房型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomtype']}" @click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomtype']}" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,8 +121,8 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">品牌</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['companyid']}" @click="selectOption('brand', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['companyid']}" v-for="item in brandList" @click="selectOption('brand', item.id)">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="item in brandList" @click="selectOption('brand', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
@ -130,8 +130,8 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">楼型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomlistings']}" @click="selectOption('roomlistings', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomlistings']}" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
@ -154,14 +154,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, toRefs, watchEffect, reactive, defineProps, nextTick} from "vue"
|
||||
import {useStore} from "vuex"
|
||||
import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue"
|
||||
import { useStore } from "vuex"
|
||||
import store from "../../store/index"
|
||||
import {useRoute, useRouter} from "vue-router"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
|
||||
|
||||
const usestore = useStore()
|
||||
const {wechat} = toRefs(usestore.state)
|
||||
const { wechat } = toRefs(usestore.state)
|
||||
const router = useRouter()
|
||||
|
||||
const route = useRoute()
|
||||
@ -175,6 +175,9 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
initPitchValue: {
|
||||
type: Object,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(["handleTransfer"])
|
||||
@ -186,27 +189,19 @@ let historyShow = ref(false)
|
||||
let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
|
||||
|
||||
let historyArr = ref([]) //历史查找记录
|
||||
let hotArr = reactive({data: []})
|
||||
let hotArr = reactive({ data: [] })
|
||||
|
||||
//获取历史搜索记录
|
||||
historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
|
||||
|
||||
let nearSchoolList = reactive([{name: "不限", id: 0}]) //学校附近
|
||||
let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近
|
||||
|
||||
let roomTypeList = reactive([]) // 房型
|
||||
|
||||
let roomlistingsList = reactive([]) // 楼型
|
||||
|
||||
let brandList = reactive([]) // 品牌数据
|
||||
|
||||
watchEffect(() => {
|
||||
nearSchoolList = store.state.apartment.school || []
|
||||
roomTypeList = store.state.apartment.roomtype || []
|
||||
roomlistingsList = store.state.apartment.roomlistings || []
|
||||
brandList = store.state.apartment.brand || []
|
||||
hotArr.data = store.state.indexData.hotSearcheWords
|
||||
})
|
||||
|
||||
// 筛选条件
|
||||
let pitchValue = ref({
|
||||
companyid: 0,
|
||||
roomtype: 0,
|
||||
@ -217,6 +212,15 @@ let pitchValue = ref({
|
||||
keyword: "",
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
nearSchoolList = store.state.apartment.school || []
|
||||
roomTypeList = store.state.apartment.roomtype || []
|
||||
roomlistingsList = store.state.apartment.roomlistings || []
|
||||
brandList = store.state.apartment.brand || []
|
||||
hotArr.data = store.state.indexData.hotSearcheWords
|
||||
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue }
|
||||
})
|
||||
|
||||
if (route.query["companyid"]) {
|
||||
pitchValue.value["companyid"] = route.query["companyid"]
|
||||
state.value = "unfold"
|
||||
|
||||
@ -192,7 +192,6 @@ const stateObj = { // btn: 0 删除 编辑 1 删除 编辑 上架 2 删除 编
|
||||
}
|
||||
}
|
||||
|
||||
console.log(data.status);
|
||||
|
||||
let stateData = ref(stateObj[data.status])
|
||||
// 监听修改的值
|
||||
|
||||
@ -59,7 +59,9 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="consult-pop flexacenter">
|
||||
<div class="consult-title flexacenter">欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询公寓</div>
|
||||
<div class="consult-title flexacenter">
|
||||
欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询公寓
|
||||
</div>
|
||||
<div class="consult-QRcode flexcenter">
|
||||
<img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
|
||||
</div>
|
||||
@ -100,7 +102,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRefs, watchEffect, reactive, defineProps } from "vue"
|
||||
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject } from "vue"
|
||||
import { useStore } from "vuex"
|
||||
|
||||
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
|
||||
@ -145,6 +147,13 @@ let seachAllType = reactive({
|
||||
orderby: "timestamp",
|
||||
})
|
||||
|
||||
const pitchValue = inject("pitchValue") || {}
|
||||
|
||||
onMounted(() => {
|
||||
// seachAllType = {...seachAllType, ...pitchValue}
|
||||
})
|
||||
|
||||
|
||||
//获取区域下列数据
|
||||
let getLocationData = data => {
|
||||
for (let item in data) {
|
||||
@ -194,34 +203,37 @@ let seachList = item => {
|
||||
})
|
||||
}
|
||||
|
||||
//设置点击一级区域
|
||||
let setLocation = (type, data) => {
|
||||
//设置点击一级区域 特殊的 选中区域的不限 需要修改值 并且去掉学校值
|
||||
let setLocation = (type, data, isupdate = true) => {
|
||||
seachAllType[type] = data
|
||||
seachAllType["school"] = ""
|
||||
if (isupdate) getDataList(seachAllType)
|
||||
}
|
||||
|
||||
//设置搜索数据
|
||||
//设置搜索数据 type: 类型 data: 数据 second: 二级数据
|
||||
let setSeachConditions = (type, data, second = null) => {
|
||||
console.log("赋值前的数据：",seachAllType);
|
||||
if (type === "rent") {
|
||||
seachAllType["rent_min"] = data.min
|
||||
seachAllType["rent_max"] = data.max
|
||||
} else if (type !== "") {
|
||||
} else if (type !== "") { // 这里是正常的数据 直接赋值
|
||||
seachAllType[type] = data
|
||||
} else if (type === "") {
|
||||
} else if (type === "") { // 电梯 阳台 认证 那些是传数组的
|
||||
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
|
||||
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
|
||||
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
|
||||
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
|
||||
}
|
||||
if (type === "school") {
|
||||
seachAllType.location = []
|
||||
}
|
||||
if (type === "location") {
|
||||
seachAllType.school = ""
|
||||
}
|
||||
// 学校和区域是 二选一
|
||||
if (type === "school") seachAllType.location = []
|
||||
if (type === "location") seachAllType.school = ""
|
||||
|
||||
if (second) {
|
||||
seachAllType[second.type] = second.id
|
||||
}
|
||||
console.log(type, data, second);
|
||||
console.log("保存前的处理数据：", seachAllType);
|
||||
|
||||
getDataList(seachAllType)
|
||||
}
|
||||
|
||||
|
||||
@ -210,7 +210,6 @@
|
||||
<div class="dropdown-btn min-btn jus-x al-item dis-f" style="border:1px solid #fff;"
|
||||
v-for="(item, i) in otherData" :key="i">
|
||||
<el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
|
||||
{{ item }}
|
||||
<!-- 特殊处理 认证房源 要红色字体 -->
|
||||
<el-checkbox :label="item.id" :style="{color: item.title == '认证房源' ? '#F95D5D' : ''}">{{ item.title }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -261,7 +260,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick, watch } from 'vue';
|
||||
import { onMounted, reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
||||
import store from '../../store/index';
|
||||
@ -288,6 +287,38 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const pitchValue = inject('pitchValue') || {}
|
||||
|
||||
onMounted(()=>{
|
||||
console.log("min", pitchValue);
|
||||
|
||||
if (pitchValue['gender']) gender.id = pitchValue['gender']
|
||||
if (pitchValue['publish']) releaseObj.id = pitchValue['publish']
|
||||
if (pitchValue['leaseterm']) hireDate.id = pitchValue['leaseterm']
|
||||
if (pitchValue['rent_min']) rentObj.min = pitchValue['rent_min']
|
||||
if (pitchValue['rent_max']) rentObj.max = pitchValue['rent_max']
|
||||
if (pitchValue['school']) schoolSelectObj.id = pitchValue['school']
|
||||
|
||||
|
||||
if (pitchValue['types']) {
|
||||
// hireTypeArr.forEach(element => {
|
||||
// if (element.id == Math.floor(pitchValue['types'])) setHireId(element, false)
|
||||
// element.hireType.forEach(ele => {
|
||||
// if (ele.id === pitchValue['types']) dropdownCommand(ele)
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
if (pitchValue['iselevator'] == 1) otherCheck.list.push('iselevator')
|
||||
if (pitchValue['isintermediary'] == 1) otherCheck.list.push('isintermediary')
|
||||
if (pitchValue['issunshinearea'] == 1) otherCheck.list.push('issunshinearea')
|
||||
if (pitchValue['isverified'] == 1) otherCheck.list.push('isverified')
|
||||
|
||||
// if (pitchValue['location']) selectSeach(pitchValue['location'])
|
||||
// selectSeach(['1.2', '1.4'])
|
||||
|
||||
})
|
||||
|
||||
let setSeachCondition = props.setSeachCondition
|
||||
let setLocation = props.setLocation//设置一级区域
|
||||
|
||||
@ -439,7 +470,7 @@ let setSelectData = (id, data = [], title) => {
|
||||
if (id) selectData.data = [{ title: '不限', id: '' }]
|
||||
schoolSelectObj.id = ''
|
||||
schoolSelectObj.title = ''
|
||||
setLocation('location', [selectTabCheck.id + ''])
|
||||
setLocation('location', [selectTabCheck.id + ''],)
|
||||
if (id === '') {
|
||||
selectData.data = []
|
||||
loactionArr.data=null
|
||||
@ -467,12 +498,14 @@ let seachAreaId = (data) => {
|
||||
//设置当前地区选项
|
||||
let checkBoxGroupInfo = ref(null)
|
||||
let setCheckBoxData = (data) => {
|
||||
console.log("data", data);
|
||||
checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data)
|
||||
}
|
||||
|
||||
let loactionArr=shallowReactive({data:null})
|
||||
//确认按钮
|
||||
let selectSeach = (data = []) => {
|
||||
console.log("data", data);
|
||||
selectData.data = seachAreaId(data)
|
||||
showSelect.value = false
|
||||
if (data.length === 0 && selectTabCheck.id) {
|
||||
@ -482,7 +515,6 @@ let selectSeach = (data = []) => {
|
||||
}
|
||||
schoolSelectObj.id = ''
|
||||
schoolSelectObj.title = ''
|
||||
console.log(loactionArr.data,data)
|
||||
if(loactionArr.data&&(loactionArr.data.toString()===data.toString()))return
|
||||
|
||||
loactionArr.data=JSON.parse(JSON.stringify(data))
|
||||
@ -538,7 +570,8 @@ let setHireTypeArr = (type, id) => {
|
||||
|
||||
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限',checkId:'' })//出租方式所选
|
||||
|
||||
let setHireId = (item) => {
|
||||
// isupdate 是否需要更新
|
||||
let setHireId = (item, isupdate = true) => {
|
||||
if(item.id===hireTypeObj.id)return
|
||||
if (hireTypeObj.hireId != item.title) {
|
||||
hireTypeObj.id = ''
|
||||
@ -548,7 +581,7 @@ let setHireId = (item) => {
|
||||
if(hireTypeObj.checkId.toString().length>1)return
|
||||
hireTypeObj.hireId = item.title
|
||||
hireTypeObj.id = item.id
|
||||
setSeachCondition('types',hireTypeObj.id)
|
||||
if(isupdate) setSeachCondition('types',hireTypeObj.id)
|
||||
}
|
||||
|
||||
let dropdownCommand = (obj) => {
|
||||
|
||||
@ -24,6 +24,9 @@ export default createStore({
|
||||
seachPage: {}
|
||||
},//保存筛选条件
|
||||
showloginmodal: false, // 是否需要登录状态
|
||||
apartmentPitchValue: {}, // 公寓筛选的值 全局化
|
||||
needPitchValue: {}, // 求房源筛选的值 全局化
|
||||
personPitchValue: {}, // 个人筛选的值 全局化
|
||||
},
|
||||
getters: {
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar>
|
||||
<!-- 筛选 -->
|
||||
<div class="screen-box wid1200">
|
||||
<seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
|
||||
<seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module>
|
||||
</div>
|
||||
|
||||
<div class="list wid1200 flexflex" ref="gridContainer">
|
||||
@ -25,33 +25,31 @@
|
||||
<circle-btn></circle-btn>
|
||||
<back-to-top></back-to-top>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
|
||||
import seachModule from "@/components/apartment/seachModule.vue";
|
||||
import apartmentItem from '@/components/public/apartment-item.vue';
|
||||
import haveQuestions from '@/components/public/have-questions.vue'
|
||||
import pageFooter from '@/components/footer/footer.vue'
|
||||
import emptyDuck from '@/components/public/empty-duck.vue'
|
||||
import circleBtn from '@/components/public/circle-btn.vue'
|
||||
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick,reactive } from 'vue';
|
||||
import { ElLoading } from 'element-plus'
|
||||
import Masonry from 'masonry-layout';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import backToTop from '@/components/public/backToTop.vue'
|
||||
|
||||
<script setup>
|
||||
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
|
||||
import seachModule from "@/components/apartment/seachModule.vue"
|
||||
import apartmentItem from "@/components/public/apartment-item.vue"
|
||||
import haveQuestions from "@/components/public/have-questions.vue"
|
||||
import pageFooter from "@/components/footer/footer.vue"
|
||||
import emptyDuck from "@/components/public/empty-duck.vue"
|
||||
import circleBtn from "@/components/public/circle-btn.vue"
|
||||
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue"
|
||||
import { ElLoading } from "element-plus"
|
||||
import Masonry from "masonry-layout"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import backToTop from "@/components/public/backToTop.vue"
|
||||
import store from "../../store/index"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
item: Object,
|
||||
});
|
||||
|
||||
const gridContainer = ref(null);
|
||||
})
|
||||
|
||||
const gridContainer = ref(null)
|
||||
|
||||
let list = ref([])
|
||||
let listCount = ref(0) // 列表数量
|
||||
@ -59,21 +57,24 @@ let listCount = ref(0) // 列表数量
|
||||
let masonryInstance = null
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化瀑布流
|
||||
masonryInstance = new Masonry(gridContainer.value, {
|
||||
itemSelector: '.item',
|
||||
gutter: 20
|
||||
});
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
|
||||
if (route.query['companyid']) pitchValue['companyid'] = route.query['companyid']
|
||||
banner()
|
||||
getData()
|
||||
pitchValue.value = store.state.apartmentPitchValue
|
||||
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
});
|
||||
banner() // 获取轮播图数据
|
||||
getData() // 获取列表数据
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
});
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
})
|
||||
|
||||
let loading = null // 加载
|
||||
let requestLoading = false // 接口加载中
|
||||
@ -82,58 +83,60 @@ const getData = () => {
|
||||
if (page == 0 || requestLoading) return
|
||||
loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
})
|
||||
requestLoading = true
|
||||
|
||||
proxy.$get("/tenement/pc/api/apartment", {
|
||||
limit: 10,
|
||||
page,
|
||||
...pitchValue
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
list.value = list.value.concat(data.data || [])
|
||||
page = data.page * data.limit >= data.count ? 0 : page + 1
|
||||
proxy
|
||||
.$get("/tenement/pc/api/apartment", {
|
||||
limit: 10,
|
||||
page,
|
||||
...pitchValue.value,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
list.value = list.value.concat(data.data || [])
|
||||
page = data.page * data.limit >= data.count ? 0 : page + 1
|
||||
|
||||
listCount = data.count
|
||||
nextTick(() => {
|
||||
masonryInstance.reloadItems();
|
||||
masonryInstance.layout();
|
||||
listCount = data.count
|
||||
nextTick(() => {
|
||||
masonryInstance.reloadItems()
|
||||
masonryInstance.layout()
|
||||
loading.close()
|
||||
requestLoading = false
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
loading.close()
|
||||
requestLoading = false
|
||||
})
|
||||
|
||||
}).catch(err => {
|
||||
loading.close()
|
||||
requestLoading = false
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const scrollHeight = document.documentElement.scrollHeight
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (scrollTop + clientHeight >= scrollHeight - 350) getData()
|
||||
};
|
||||
}
|
||||
|
||||
let pitchValue = {
|
||||
let pitchValue = ref({
|
||||
companyid: 0,
|
||||
roomtype: 0,
|
||||
rent_min: null, // 租金
|
||||
rent_max: null, // 租金
|
||||
rent_min: null, // 租金
|
||||
rent_max: null, // 租金
|
||||
school: 0,
|
||||
roomlistings: 0,
|
||||
keyword: "",
|
||||
}
|
||||
})
|
||||
|
||||
// 筛选组件的参数的中转
|
||||
const handleTransfer = (data) => {
|
||||
const handleTransfer = data => {
|
||||
for (const key in data.value) {
|
||||
if (data.value[key] != pitchValue[key]) {
|
||||
pitchValue = { ...data.value }
|
||||
if (data.value[key] != pitchValue.value[key]) {
|
||||
pitchValue.value = { ...data.value }
|
||||
store.state.apartmentPitchValue = pitchValue.value
|
||||
page = 1
|
||||
list.value = []
|
||||
getData()
|
||||
@ -146,12 +149,9 @@ 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
|
||||
}
|
||||
})
|
||||
if (res.code === 200) bannerList.data = res.data
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.screen-box {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<pageTopBar></pageTopBar>
|
||||
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="body-maxWidth mg-t-35" >
|
||||
<div class="body-maxWidth mg-t-35">
|
||||
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
|
||||
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
|
||||
</div>
|
||||
@ -18,25 +18,24 @@
|
||||
</div>
|
||||
|
||||
<back-to-top></back-to-top>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
|
||||
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
|
||||
import seachModule from "../../components/seachModule/seachModule.vue";
|
||||
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
|
||||
import listBtmPrompt from "../../components/public/have-questions.vue";
|
||||
import noList from "../../components/public/empty-duck.vue";
|
||||
import circleBtn from '@/components/public/circle-btn.vue'
|
||||
import api from "../../utils/api";
|
||||
import tool from '../../toolJs/downLoadMore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import footerTool from '@/components/footer/footer.vue'
|
||||
import loadMoreText from '../../components/loadMore/loadMoreText.vue'
|
||||
import backToTop from '@/components/public/backToTop.vue'
|
||||
import Masonry from 'masonry-layout';
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from "vue"
|
||||
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
|
||||
import seachModule from "../../components/seachModule/seachModule.vue"
|
||||
import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
|
||||
import listBtmPrompt from "../../components/public/have-questions.vue"
|
||||
import noList from "../../components/public/empty-duck.vue"
|
||||
import circleBtn from "@/components/public/circle-btn.vue"
|
||||
import api from "../../utils/api"
|
||||
import tool from "../../toolJs/downLoadMore"
|
||||
import { ElMessage } from "element-plus"
|
||||
import footerTool from "@/components/footer/footer.vue"
|
||||
import loadMoreText from "../../components/loadMore/loadMoreText.vue"
|
||||
import backToTop from "@/components/public/backToTop.vue"
|
||||
import Masonry from "masonry-layout"
|
||||
import store from "../../store/index"
|
||||
|
||||
//瀑布实例
|
||||
let listMasonryInstance = null
|
||||
@ -47,37 +46,41 @@ let dataCount = ref(0)
|
||||
let pageList = ref([])
|
||||
let seachSelectData = reactive({ data: {} })
|
||||
let loading = ref(true)
|
||||
let loadingText=ref(' 下拉加载更多 ')
|
||||
provide('count', dataCount)
|
||||
let loadingText = ref(" 下拉加载更多 ")
|
||||
provide("count", dataCount)
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data) => {
|
||||
let setSeachSelectData = data => {
|
||||
console.log("保存数据的：", data);
|
||||
store.state.needPitchValue = data
|
||||
pages.value = 1
|
||||
seachSelectData.data = {
|
||||
...data
|
||||
// ...needPitchValue,
|
||||
...data,
|
||||
}
|
||||
loading.value = true
|
||||
getDataList(seachSelectData.data)
|
||||
}
|
||||
|
||||
//获取搜索数据
|
||||
let getDataList = (data) => {
|
||||
loadingText.value=' 加载中..... '
|
||||
if(!loading.value)return
|
||||
let getDataList = data => {
|
||||
loadingText.value = " 加载中..... "
|
||||
if (!loading.value) return
|
||||
loading.value = false
|
||||
let postData = {
|
||||
page: pages.value,
|
||||
intermediary: 6,
|
||||
limit:20,
|
||||
...data
|
||||
limit: 20,
|
||||
...data,
|
||||
}
|
||||
|
||||
api.getLists(postData).then(res => {
|
||||
if (res.code === 200) {
|
||||
dataList.data = res.data.data
|
||||
if(res.data.data.length<20){
|
||||
loadingText.value=' 到底了 '
|
||||
}else{
|
||||
loadingText.value=' 下拉加载更多 '
|
||||
if (res.data.data.length < 20) {
|
||||
loadingText.value = " 到底了 "
|
||||
} else {
|
||||
loadingText.value = " 下拉加载更多 "
|
||||
}
|
||||
if (pages.value === 1) {
|
||||
pageList.value = []
|
||||
@ -87,8 +90,8 @@ let getDataList = (data) => {
|
||||
dataList.count = res.data.count
|
||||
dataCount.value = res.data.count
|
||||
nextTick(() => {
|
||||
listMasonryInstance.reloadItems();
|
||||
listMasonryInstance.layout();
|
||||
listMasonryInstance.reloadItems()
|
||||
listMasonryInstance.layout()
|
||||
if (dataList.data.length >= 20) loading.value = true
|
||||
})
|
||||
} else {
|
||||
@ -109,22 +112,26 @@ let downLoadMore = () => {
|
||||
})
|
||||
}
|
||||
|
||||
let list = ref('')
|
||||
let list = ref("")
|
||||
|
||||
//listImg
|
||||
|
||||
const needPitchValue = store.state.needPitchValue
|
||||
|
||||
provide("pitchValue", needPitchValue)
|
||||
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: '.item',
|
||||
gutter: 20
|
||||
});
|
||||
getDataList()
|
||||
window.addEventListener('scroll', downLoadMore, true);
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
getDataList({...needPitchValue})
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', downLoadMore, true);
|
||||
window.removeEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
@ -175,4 +182,3 @@ img {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,6 +55,7 @@ provide('count', dataCount)
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data) => {
|
||||
store.state.personPitchValue = data
|
||||
pages.value = 1
|
||||
seachSelectData.data = {
|
||||
...data
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user