重新筛选
This commit is contained in:
A1300399510
@@ -92,33 +92,37 @@
|
||||
<seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
|
||||
</div>
|
||||
<!-- -->
|
||||
{{ pitchValue }}
|
||||
<!-- {{ pitchValue }} -->
|
||||
|
||||
<div class="option-area flexflex" v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
|
||||
<!-- <selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox> -->
|
||||
<div class="option-left">
|
||||
<div class="option-item flexflex" v-if="true">
|
||||
<!-- 地理位置时除 求房源 显示的 -->
|
||||
<div class="option-item flexflex" v-if="routePath !== '/needHousing'">
|
||||
<div class="option-title">地理位置</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="option-box flexflex flex1" style="flex-direction: column;">
|
||||
<div class="geography-tab flexacenter">
|
||||
<!-- pitch -->
|
||||
<div class="geography-item flexcenter">按区域</div>
|
||||
<div class="geography-item flexcenter">按学校</div>
|
||||
<div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'area' }" @click="setSelectPosition('area')">按区域</div>
|
||||
<div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'school' }" @click="setSelectPosition('school')">按学校</div>
|
||||
</div>
|
||||
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
|
||||
<div v-for="(item, index) in locationObj" :key="index" class="item flexcenter location-item" :class="{ pitch: selectDistrictPitchShow == index }" @click="selectOption('location', index)">
|
||||
{{ item.name }}
|
||||
<template v-if="districtUnlimited(index)">> 不限</template>
|
||||
<template v-if="districtQuantity(index)">
|
||||
>
|
||||
<div class="select-num">{{ pitchValue["location"].length }}</div>
|
||||
</template>
|
||||
|
||||
<img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
|
||||
<img class="item-icon item-icon-pitch" src="@/assets/homeImage/dropDownIcon.svg" />
|
||||
<!-- 区域的内容 -->
|
||||
<div class="geography-box" v-if="geographicState == 'area'">
|
||||
<img class="geography-bj" src="@/assets/homeImage/checkBG.svg" />
|
||||
<div class="geography-list flexacenter">
|
||||
<div class="geography-item flexacenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
|
||||
<div class="geography-item flexacenter" :class="{ pitch: selectDistrictPitchShow == index }" v-for="(item, index) in locationObj" :key="index" @click="selectOption('location', index)">
|
||||
{{ item.name }}
|
||||
<template v-if="districtUnlimited(index)">> 不限</template>
|
||||
<template v-if="districtQuantity(index)">
|
||||
>
|
||||
<div class="select-num">{{ pitchValue["location"].length }}</div>
|
||||
</template>
|
||||
<img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
|
||||
<img class="item-icon item-icon-pitch" src="@/assets/homeImage/selectImg.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="district-pop" v-if="locationTemp.state">
|
||||
<div class="district-pop" v-if="locationTemp.state" style="top: 120px;">
|
||||
<div class="district-unlimited flexacenter" :class="{ 'pitch': locationTemp.value.length == 0 }" @click="selectDistrict(0)">
|
||||
<img class="unlimited-yes" src="@/assets/homeImage/topTitleIcon.svg" />
|
||||
<div class="unlimited-no"></div>
|
||||
@@ -134,9 +138,27 @@
|
||||
<div class="district-btn flexcenter district-ok" @click="selectDistrict()">选好了</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 学校内容 -->
|
||||
<div class="school-info-box" v-show="geographicState === 'school'">
|
||||
<div class="lef-btn item-btn flexcenter" @click="prevSchoolData">
|
||||
<img v-if="schoolPages === 0" class="img" src="@/assets/homeImage/selectInfoTabIcon.svg" />
|
||||
<img v-else class="img" src="@/assets/homeImage/selectImg.svg" />
|
||||
</div>
|
||||
<div class="right-btn item-btn flexcenter" @click="nextSchoolData">
|
||||
<img v-if="schoolPages === shcoolData.length - 1" class="img" src="@/assets/homeImage/selectInfoTabIcon.svg" />
|
||||
<img v-else class="img" src="@/assets/homeImage/selectImg.svg" />
|
||||
</div>
|
||||
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px" indicator-position="none" class="s-w-100" ref="schoolData" :initial-index="schoolPages" :key="pitchValue.school">
|
||||
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
|
||||
<div class="school-carousel-box">
|
||||
<div v-for="items in item" :key="items.id" @click="selectOption('school', items.id)" class="carousel-info-box" :class="{ 'pitch': pitchValue.school == items.id }">{{ items.name }}</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex" v-if="false">
|
||||
<div class="option-item flexflex" v-else>
|
||||
<div class="option-title">目标区域</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
|
||||
@@ -171,11 +193,11 @@
|
||||
</div>
|
||||
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">求租方式</div>
|
||||
<div class="option-title flexacenter">{{ routePath !== "/needHousing" ? "出租" : "求租" }}方式</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue.types }" @click="selectType('')">不限</div>
|
||||
|
||||
<template v-for="(item, index) in typeObj">
|
||||
<template v-for="(item, index) in typeObj" :key="index">
|
||||
<el-dropdown popper-class="popover-sort" trigger="click">
|
||||
<div class="item flexcenter" :class="{ pitch: Math.floor(pitchValue.types) == index }" @click="selectType(index, true)">
|
||||
{{ item.name }}
|
||||
@@ -197,7 +219,7 @@
|
||||
</div>
|
||||
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">租金</div>
|
||||
<div class="option-title flexacenter">租金{{ routePath !== "/needHousing" ? "" : "预算" }}</div>
|
||||
<div class="option-box flexacenter flex1 option-input-box">
|
||||
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" />HK$/月</div>
|
||||
|
||||
@@ -212,36 +234,75 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">租期</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['leaseterm'] }" v-for="item in leasetermList" @click="selectOption('leaseterm', item.id)">{{ item["name"] }}</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['leaseterm'] }" v-for="item in leasetermList" @click="selectOption('leaseterm', item.id)" :key="item.id">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">求租者性别</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['gender'] }" v-for="item in genderList" @click="selectOption('gender', item.id)">{{ item["name"] }}</div>
|
||||
<div class="option-title">{{ routePath !== "/needHousing" ? "性别要求" : "求租者性别" }}</div>
|
||||
<div class="option-box flexflex flex1" :key="pitchValue['gender']">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['gender'] }" v-for="item in genderList" @click="selectOption('gender', item.id)" :key="item.id">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">发布时间</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['publish'] }" v-for="item in publishList" @click="selectOption('publish', item.id)">{{ item["name"] }}</div>
|
||||
<div class="option-box flexflex flex1" :key="pitchValue['publish']">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['publish'] }" v-for="item in publishList" @click="selectOption('publish', item.id)" :key="item.id">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">其他</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<el-checkbox v-model="pitchValue.iselevator" @change="" :true-label="1" :false-label="0">有电梯</el-checkbox>
|
||||
<el-checkbox v-model="pitchValue.issunshinearea" @change="" :true-label="1" :false-label="0">有阳台</el-checkbox>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<div class="item-checkbox flexacenter" v-if="routePath == '/personHousing'" :class="{ pitch: pitchValue.isverified == 1 }" style="color: #f95d5d;" @click="selectCheckboxOption('isverified')">
|
||||
<span class="item-checkbox__inner"></span>
|
||||
认证房源
|
||||
</div>
|
||||
<div class="item-checkbox flexacenter" v-if="routePath == '/intermediaryHousing'" :class="{ pitch: pitchValue.isintermediary == 1 }" @click="selectCheckboxOption('isintermediary')">
|
||||
<span class="item-checkbox__inner"></span>
|
||||
认证中介
|
||||
</div>
|
||||
<div class="item-checkbox flexacenter" :class="{ pitch: pitchValue.iselevator == 1 }" @click="selectCheckboxOption('iselevator')">
|
||||
<span class="item-checkbox__inner"></span>
|
||||
有电梯
|
||||
</div>
|
||||
<div class="item-checkbox flexacenter" :class="{ pitch: pitchValue.issunshinearea == 1 }" @click="selectCheckboxOption('issunshinearea')">
|
||||
<span class="item-checkbox__inner"></span>
|
||||
有阳台
|
||||
</div>
|
||||
|
||||
<!-- <el-checkbox v-if="routePath == '/personHousing'" v-model="pitchValue.isverified" style="color: #f95d5d;" @change="selectCheckboxOption('isverified')" :key="pitchValue['isverified']" true-value="1" false-label="0">认证房源</el-checkbox>
|
||||
<el-checkbox v-if="routePath == '/intermediaryHousing'" v-model="pitchValue.isintermediary" @change="selectCheckboxOption('isintermediary')" :key="pitchValue['isintermediary']">认证中介</el-checkbox>
|
||||
<el-checkbox v-model="pitchValue.iselevator" @change="selectCheckboxOption('iselevator')" :key="pitchValue['iselevator']">有电梯</el-checkbox>
|
||||
<el-checkbox v-model="pitchValue.issunshinearea" @change="selectCheckboxOption('issunshinearea')" :key="pitchValue['issunshinearea']">有阳台</el-checkbox> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-footer flexacenter">
|
||||
<div class="screen-footer-left">
|
||||
<div class="screen-footer-left flexacenter">
|
||||
<div class="quantity flexacenter">
|
||||
共 <b class="b">{{ count }}</b> 个求房源
|
||||
</div>
|
||||
<template v-if="pitchValue['location'].length != 0">
|
||||
<span style="color: rgb(170, 170, 170); margin: 0px 15px;">|</span>
|
||||
<div class="screen-location flexacenter">
|
||||
<div class="screen-location-name">{{ locationKey[selectDistrictPitchShow || 1] }}:</div>
|
||||
<template v-if="pitchValue['location'][0] == selectDistrictPitchShow">
|
||||
<div class="screen-location-list flexacenter">
|
||||
<div class="screen-location-item flexacenter">
|
||||
不限
|
||||
<img class="screen-location-img" @click="closeLocationKey(0)" src="@/assets/homeImage/closeIcon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="screen-location-list flexacenter">
|
||||
<div class="screen-location-item flexacenter" v-for="(item, index) in pitchValue['location']" :key="index">
|
||||
{{ locationKey[item] }}
|
||||
<img class="screen-location-img" @click="closeLocationKey(index)" src="@/assets/homeImage/closeIcon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="screen-footer-rigth">
|
||||
<el-dropdown popper-class="popover-sort" trigger="click">
|
||||
@@ -264,7 +325,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject } from "vue"
|
||||
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject, getCurrentInstance, watch, nextTick } from "vue"
|
||||
import { useStore } from "vuex"
|
||||
|
||||
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
|
||||
@@ -278,6 +339,8 @@ const usestore = useStore()
|
||||
|
||||
const { wechat } = toRefs(usestore.state)
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const props = defineProps({
|
||||
getDataList: {
|
||||
type: Function,
|
||||
@@ -311,9 +374,9 @@ let seachAllType = reactive({
|
||||
|
||||
// const pitchValue = inject("pitchValue") || {}
|
||||
|
||||
const pitchValue = reactive({
|
||||
let pitchValue = reactive({
|
||||
location: [],
|
||||
school: 0,
|
||||
school: "",
|
||||
rent_min: "",
|
||||
rent_max: "",
|
||||
leaseterm: "",
|
||||
@@ -323,13 +386,42 @@ const pitchValue = reactive({
|
||||
issunshinearea: 0,
|
||||
orderby: "timestamp",
|
||||
publish: "",
|
||||
types: 1,
|
||||
types: "",
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// seachAllType = {...seachAllType, ...pitchValue}
|
||||
if (routePath.value === "/personHousing") {
|
||||
pitchValue = { ...pitchValue, ...store.state.personPitchValue }
|
||||
const queryParams = getQueryParams()
|
||||
if (queryParams["location"]) {
|
||||
pitchValue["school"] = ""
|
||||
const arr = queryParams["location"].split(",")
|
||||
pitchValue["location"] = arr
|
||||
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||||
} else pitchValue = Object.assign({}, pitchValue, queryParams)
|
||||
} else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue }
|
||||
else pitchValue = { ...pitchValue, ...store.state.needPitchValue }
|
||||
|
||||
if (routePath.value !== "/needHousing" && pitchValue["school"]) {
|
||||
pitchValue["location"] = []
|
||||
geographicState.value = "school"
|
||||
}
|
||||
|
||||
getDataList(pitchValue)
|
||||
})
|
||||
|
||||
// 获取URL中的查询参数
|
||||
const getQueryParams = () => {
|
||||
const queryParams = {}
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
|
||||
for (const [key, value] of urlParams) {
|
||||
if (value) queryParams[key] = value
|
||||
}
|
||||
|
||||
return queryParams
|
||||
}
|
||||
|
||||
//获取区域下列数据
|
||||
let getLocationData = data => {
|
||||
for (let item in data) {
|
||||
@@ -442,16 +534,90 @@ let checkBtn = (data, type, areaItem) => {
|
||||
}
|
||||
|
||||
let locationObj = reactive({}) // 位置配置信息
|
||||
let locationKey = reactive({}) // 位置配置信息 键值对
|
||||
let typeObj = reactive({}) // 方式配置信息
|
||||
let typeKey = reactive({}) // 方式配置信息 键值对
|
||||
|
||||
onMounted(() => {
|
||||
locationObj = store.state.locationObj
|
||||
locationKey = store.state.locationKey
|
||||
typeObj = store.state.typeObj
|
||||
typeKey = store.state.typeKey
|
||||
console.log("typeObj", typeKey)
|
||||
setSchoolData()
|
||||
})
|
||||
|
||||
//设置区域状态
|
||||
let setSelectPosition = type => {
|
||||
geographicState.value = type
|
||||
}
|
||||
|
||||
//学校区域状态
|
||||
let schoolSelectObj = reactive({ id: "", title: "不限", page: 0 })
|
||||
let schoolPages = ref(0) //页数
|
||||
let shcoolData = reactive([]) // 学校数据
|
||||
|
||||
let geographicState = ref("area") // 地理位置tab状态 区域 area 学校 school
|
||||
|
||||
let setSchoolData = () => {
|
||||
// let arr = routePath.value === "/" ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
|
||||
// if (arr[0] && arr[0].id) arr.unshift({ name: "不限", id: "" })
|
||||
let arr = JSON.parse(JSON.stringify(store.state.schoolList)) || []
|
||||
arr.unshift({ name: "不限", id: "" })
|
||||
|
||||
let num = 0
|
||||
let accumulationWidth = 0
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let width = accumulationWidth + getStrWidth(arr[i].name) + 20
|
||||
if (width > 380) {
|
||||
num++
|
||||
accumulationWidth = getStrWidth(arr[i].name) + 20
|
||||
} else accumulationWidth = width
|
||||
|
||||
if (!shcoolData[num]) shcoolData[num] = []
|
||||
shcoolData[num].push(arr[i])
|
||||
}
|
||||
|
||||
// 判断一下值有没有学校 ，如果有看一下ID是不是在第一页
|
||||
if (pitchValue.school) {
|
||||
for (let i = 0; i < shcoolData.length; i++) {
|
||||
for (let j = 0; j < shcoolData[i].length; j++) {
|
||||
if (shcoolData[i][j].id == pitchValue.school) {
|
||||
schoolPages.value = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 计算字符串在屏幕的显示宽度
|
||||
let getStrWidth = str => {
|
||||
let width = 0
|
||||
let fontSize = 14
|
||||
let font = fontSize + "px Arial"
|
||||
let canvas = document.createElement("canvas")
|
||||
let context = canvas.getContext("2d")
|
||||
context.font = font
|
||||
width = context.measureText(str).width
|
||||
return width
|
||||
}
|
||||
|
||||
//学校轮播组件
|
||||
let prevSchoolData = () => {
|
||||
if (schoolPages.value === 0) return
|
||||
const schoolData = proxy.$refs.schoolData
|
||||
schoolPages.value--
|
||||
schoolData.prev()
|
||||
}
|
||||
|
||||
let nextSchoolData = () => {
|
||||
if (schoolPages.value === shcoolData.length - 1) return
|
||||
|
||||
const schoolData = proxy.$refs.schoolData
|
||||
schoolPages.value++
|
||||
schoolData.next()
|
||||
}
|
||||
|
||||
// 目标区域的临时值
|
||||
let locationTemp = reactive({
|
||||
key: 0,
|
||||
@@ -479,6 +645,8 @@ const selectDistrict = type => {
|
||||
|
||||
locationTemp.key = 0
|
||||
locationTemp.state = false
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -487,13 +655,16 @@ let selectDistrictPitchShow = ref("")
|
||||
|
||||
// 处理输入筛选金额后
|
||||
const rentBlur = () => {
|
||||
// getDataList()
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
|
||||
// 清除筛选的金额
|
||||
const clearingAmount = () => {
|
||||
pitchValue["rent_min"] = ""
|
||||
pitchValue["rent_max"] = ""
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
|
||||
// 租期配置数据
|
||||
@@ -532,6 +703,7 @@ let orderbyList = reactive([
|
||||
let orderbyPopoverState = ref(false)
|
||||
|
||||
const itemText = ref(null)
|
||||
|
||||
// 筛选选中的中转
|
||||
const selectOption = (key, value) => {
|
||||
// 特殊处理 目标区域不等于 0 时 弹窗区域选择框
|
||||
@@ -556,18 +728,33 @@ const selectOption = (key, value) => {
|
||||
selectDistrictPitchShow.value = 0
|
||||
}
|
||||
|
||||
// 另一个特殊的 方式 相同方式类型 不需要直接改值
|
||||
// if (key == "types" && pitchValue["types"] == value) return
|
||||
// 特殊的 学校和区域只能二选一
|
||||
if (key == "school") pitchValue["location"] = []
|
||||
else if (key == "location") pitchValue["school"] = ""
|
||||
|
||||
pitchValue[key] = value
|
||||
nextTick(() => {
|
||||
pitchValue[key] = value
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
})
|
||||
}
|
||||
|
||||
const selectCheckboxOption = key => {
|
||||
pitchValue[key] = pitchValue[key] == 1 ? 0 : 1
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
|
||||
// 特殊的 方式选中
|
||||
const selectType = (value, isFirstFloor) => {
|
||||
if (isFirstFloor && Math.floor(pitchValue["types"]) == value) {
|
||||
return
|
||||
}
|
||||
// if (isFirstFloor && Math.floor(pitchValue["types"]) == value) return
|
||||
|
||||
pitchValue.types = value
|
||||
if (isFirstFloor) getDataList(pitchValue, true)
|
||||
// 请求不要蒙版
|
||||
else getDataList(pitchValue)
|
||||
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
|
||||
// 区域判断不限
|
||||
@@ -586,6 +773,15 @@ const districtQuantity = index => {
|
||||
return false
|
||||
}
|
||||
|
||||
// 删除地区底部的选中
|
||||
const closeLocationKey = index => {
|
||||
if (pitchValue.location.length == 1 && pitchValue.location[0] != selectDistrictPitchShow.value) pitchValue.location = [selectDistrictPitchShow.value]
|
||||
else pitchValue.location.splice(index, 1)
|
||||
|
||||
getDataList(pitchValue)
|
||||
proxy.$forceUpdate()
|
||||
}
|
||||
|
||||
//列表总数
|
||||
const count = inject("count")
|
||||
|
||||
@@ -999,7 +1195,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.option-item {
|
||||
padding-top: 24px;
|
||||
// padding-top: 24px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 30px 0 20px;
|
||||
position: relative;
|
||||
@@ -1029,7 +1226,7 @@ defineExpose({
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
// margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
color: #7f7f7f;
|
||||
border: 1px solid transparent;
|
||||
@@ -1198,7 +1395,7 @@ defineExpose({
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #7f7f7f;
|
||||
|
||||
|
||||
.geography-item {
|
||||
padding: 5px 10px;
|
||||
height: 30px;
|
||||
@@ -1207,6 +1404,136 @@ defineExpose({
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
&.pitch {
|
||||
color: #50e3c2 !important;
|
||||
border: 1px solid #50e3c2 !important;
|
||||
background: #eefcf9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.geography-box {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
z-index: 1;
|
||||
.geography-bj {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 459px;
|
||||
height: 55px;
|
||||
z-index: -1;
|
||||
}
|
||||
.geography-list {
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
margin-top: 5px;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.geography-item {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
color: #000;
|
||||
font-weight: 650;
|
||||
.item-icon {
|
||||
display: none;
|
||||
}
|
||||
.item-icon-pitch {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.geography-item-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.item-icon-pitch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-num {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
border-radius: 13px;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
line-height: 16px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
color: #606266;
|
||||
|
||||
&.pitch {
|
||||
color: #000;
|
||||
font-weight: 650;
|
||||
.item-checkbox__inner {
|
||||
background: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
&:after {
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-checkbox__inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #fff;
|
||||
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
margin-right: 8px;
|
||||
|
||||
&::after {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
transition: transform 0.15s ease-in 50ms;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1236,19 +1563,44 @@ defineExpose({
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
|
||||
.quantity {
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
height: 72px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
.screen-footer-left {
|
||||
.quantity {
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
height: 72px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
.b {
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
.b {
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-location {
|
||||
.screen-location-name {
|
||||
font-weight: 650;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.screen-location-list {
|
||||
flex-wrap: wrap;
|
||||
width: 800px;
|
||||
.screen-location-item {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 20px;
|
||||
|
||||
.screen-location-img {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-footer-rigth {
|
||||
.sort-btn {
|
||||
cursor: pointer;
|
||||
@@ -1265,6 +1617,114 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.school-info-box {
|
||||
// position: absolute;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0px;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-left: 1px solid #ebebeb;
|
||||
border-top: 1px solid #ebebeb;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 99px;
|
||||
z-index: 1111;
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.school-carousel-box {
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mg-l-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mg-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.carousel-info-box {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
&:first-of-type {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
&.pitch {
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__container {
|
||||
height: 50px;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 30px;
|
||||
height: 48px;
|
||||
z-index: 66;
|
||||
cursor: pointer;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
|
||||
.img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&.lef-btn {
|
||||
border-right: 1px dashed #ebebeb;
|
||||
border-radius: 10px 0 0 10px;
|
||||
left: 1px;
|
||||
|
||||
.img {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.middle-btn {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
&.right-btn {
|
||||
border-left: 1px dashed #ebebeb;
|
||||
border-radius: 0 10px 10px 0;
|
||||
right: 1px;
|
||||
|
||||
.img {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.el-popper.popover-sort {
|
||||
|
||||
@@ -88,6 +88,7 @@ api.index()
|
||||
store.state.schoolList = res.data.schoolList
|
||||
store.state.advData = res.data.adv
|
||||
store.state.typeKey = res.data.config.type
|
||||
store.state.locationKey = res.data.config.location
|
||||
|
||||
// 将 location 转换为对象 好用于级联选择器
|
||||
const location = res.data.config.location || {}
|
||||
|
||||
@@ -27,6 +27,7 @@ export default createStore({
|
||||
apartmentPitchValue: {}, // 公寓筛选的值 全局化
|
||||
needPitchValue: {}, // 求房源筛选的值 全局化
|
||||
personPitchValue: {}, // 个人筛选的值 全局化
|
||||
intermediaryPitchValue: {}, // 中介筛选的值 全局化
|
||||
locationObj: {}, // 地区数据
|
||||
},
|
||||
getters: {
|
||||
|
||||
@@ -1,33 +1,45 @@
|
||||
import axios from 'axios';
|
||||
import QS from 'qs';
|
||||
import { goTologin } from '@/utils/util.js'
|
||||
import { showFullScreenLoading, tryHideFullScreenLoading } from './loading'
|
||||
import store from '@/store/index';
|
||||
import axios from "axios"
|
||||
import QS from "qs"
|
||||
import { goTologin } from "@/utils/util.js"
|
||||
import { showFullScreenLoading, tryHideFullScreenLoading } from "./loading"
|
||||
import store from "@/store/index"
|
||||
|
||||
axios.defaults.baseURL = 'https://app.gter.net'
|
||||
axios.defaults.baseURL = "https://app.gter.net"
|
||||
// axios.defaults.baseURL = '/index'
|
||||
axios.defaults.emulateJSON = true
|
||||
axios.defaults.withCredentials = true
|
||||
|
||||
axios.interceptors.request.use( //响应拦截
|
||||
axios.interceptors.request.use(
|
||||
//响应拦截
|
||||
async config => {
|
||||
if (config.url != '/tenement/pc/api/user/operation') showFullScreenLoading()
|
||||
// 不需要遮罩
|
||||
let noMask = false
|
||||
|
||||
|
||||
if (config.method == "get") noMask = config.params?.noMask || false
|
||||
|
||||
if (config.url != "/tenement/pc/api/user/operation" && !noMask) showFullScreenLoading()
|
||||
// 开发时登录用的，可以直接替换小程序的 authorization
|
||||
// if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
|
||||
if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "gifqtoiomgb2efu7tcr16kcgs2"
|
||||
return config;
|
||||
if (process.env.NODE_ENV == "development") config["headers"]["authorization"] = "gifqtoiomgb2efu7tcr16kcgs2"
|
||||
|
||||
// 当 noMask == true 和 confing.method == 'get' 时,删除 config.params['noMask']
|
||||
if (noMask && config.method == "get") delete config.params["noMask"]
|
||||
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.error(error);
|
||||
})
|
||||
return Promise.error(error)
|
||||
}
|
||||
)
|
||||
// 响应拦截器
|
||||
axios.interceptors.response.use(
|
||||
response => {
|
||||
tryHideFullScreenLoading()
|
||||
if (response.status === 200) return Promise.resolve(response); //进行中
|
||||
else return Promise.reject(response); //失败
|
||||
if (response.status === 200) return Promise.resolve(response) //进行中
|
||||
else return Promise.reject(response) //失败
|
||||
},
|
||||
// 服务器状态码不是200的情况
|
||||
// 服务器状态码不是200的情况
|
||||
error => {
|
||||
tryHideFullScreenLoading()
|
||||
if (error.response.status) {
|
||||
@@ -40,57 +52,62 @@ axios.interceptors.response.use(
|
||||
case 403:
|
||||
// router.push('/login')
|
||||
break
|
||||
// 404请求不存在
|
||||
// 404请求不存在
|
||||
case 404:
|
||||
break;
|
||||
break
|
||||
// 其他错误，直接抛出错误提示
|
||||
default:
|
||||
}
|
||||
return Promise.reject(error.response);
|
||||
return Promise.reject(error.response)
|
||||
}
|
||||
}
|
||||
);
|
||||
/**
|
||||
* get方法，对应get请求
|
||||
* @param {String} url [请求的url地址]
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
)
|
||||
/**
|
||||
* get方法，对应get请求
|
||||
* @param {String} url [请求的url地址]
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
*/
|
||||
const $get = (url, params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(url, {
|
||||
params: params,
|
||||
}).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
});
|
||||
axios
|
||||
.get(url, {
|
||||
params: params,
|
||||
})
|
||||
.then(res => {
|
||||
resolve(res.data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
/**
|
||||
* post方法，对应post请求
|
||||
* @param {String} url [请求的url地址]
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
/**
|
||||
* post方法，对应post请求
|
||||
* @param {String} url [请求的url地址]
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
*/
|
||||
const $post = (url, params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//是将对象 序列化成URL的形式，以&进行拼接
|
||||
axios.post(url, QS.stringify(params)).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
if (err.data.code == 401) {
|
||||
resolve(err.data);
|
||||
} else reject(err.data)
|
||||
|
||||
})
|
||||
});
|
||||
//是将对象 序列化成URL的形式，以&进行拼接
|
||||
axios
|
||||
.post(url, QS.stringify(params))
|
||||
.then(res => {
|
||||
resolve(res.data)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.data.code == 401) {
|
||||
resolve(err.data)
|
||||
} else reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
//下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
|
||||
export default {
|
||||
get: $get,
|
||||
post: $post,
|
||||
install: (app) => {
|
||||
app.config.globalProperties['$get'] = $get;
|
||||
app.config.globalProperties['$post'] = $post;
|
||||
app.config.globalProperties['$axios'] = axios;
|
||||
}
|
||||
}
|
||||
install: app => {
|
||||
app.config.globalProperties["$get"] = $get
|
||||
app.config.globalProperties["$post"] = $post
|
||||
app.config.globalProperties["$axios"] = axios
|
||||
},
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@ const getData = () => {
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
})
|
||||
|
||||
requestLoading = true
|
||||
|
||||
proxy
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<pageTopBar :bannerList="bannerList.data.intermediaryHousing"></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>
|
||||
@@ -17,26 +17,25 @@
|
||||
<footerTool></footerTool>
|
||||
</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';
|
||||
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from "vue"
|
||||
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
|
||||
import seachModule from "../../components/seachModule/seachModule1.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,24 +46,26 @@ 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 bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data) => {
|
||||
let setSeachSelectData = (data, noMask = false) => {
|
||||
pages.value = 1
|
||||
store.state.intermediaryPitchValue = data
|
||||
seachSelectData.data = {
|
||||
...data
|
||||
...data,
|
||||
noMask,
|
||||
}
|
||||
loading.value = true
|
||||
getDataList(seachSelectData.data)
|
||||
@@ -72,22 +73,22 @@ let setSeachSelectData = (data) => {
|
||||
|
||||
//获取搜索数据
|
||||
let getDataList = (data) => {
|
||||
loadingText.value=' 加载中..... '
|
||||
if(!loading.value)return
|
||||
loadingText.value = " 加载中..... "
|
||||
if (!loading.value) return
|
||||
loading.value = false
|
||||
let postData = {
|
||||
page: pages.value,
|
||||
intermediary: 1,
|
||||
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 = []
|
||||
@@ -97,8 +98,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 {
|
||||
@@ -119,23 +120,22 @@ let downLoadMore = () => {
|
||||
})
|
||||
}
|
||||
|
||||
let list = ref('')
|
||||
let list = ref("")
|
||||
|
||||
//listImg
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: '.item',
|
||||
gutter: 20
|
||||
});
|
||||
getDataList()
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
// getDataList()
|
||||
banner()
|
||||
window.addEventListener('scroll', downLoadMore, true);
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', downLoadMore, true);
|
||||
window.removeEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
@@ -186,4 +186,3 @@ img {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,13 +50,12 @@ let loadingText = ref(" 下拉加载更多 ")
|
||||
provide("count", dataCount)
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = data => {
|
||||
console.log("保存数据的：", data);
|
||||
let setSeachSelectData = (data, noMask = false) => {
|
||||
store.state.needPitchValue = data
|
||||
pages.value = 1
|
||||
seachSelectData.data = {
|
||||
// ...needPitchValue,
|
||||
...data,
|
||||
noMask,
|
||||
}
|
||||
loading.value = true
|
||||
getDataList(seachSelectData.data)
|
||||
@@ -114,18 +113,14 @@ let downLoadMore = () => {
|
||||
|
||||
let list = ref("")
|
||||
|
||||
//listImg
|
||||
|
||||
const needPitchValue = store.state.needPitchValue
|
||||
|
||||
provide("pitchValue", needPitchValue)
|
||||
// const needPitchValue = reactive({ ...store.state.needPitchValue })
|
||||
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
getDataList({...needPitchValue})
|
||||
// getDataList()
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<seachModule :getDataList="setSeachSelectData"></seachModule>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="body-maxWidth mg-t-35">
|
||||
<div v-show="dataList.data && dataList.data.length > 0" style="width:1200px;" ref="list">
|
||||
<div v-show="dataList.data && dataList.data.length > 0" style="width: 1200px;" ref="list">
|
||||
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
|
||||
</div>
|
||||
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
|
||||
@@ -19,23 +19,23 @@
|
||||
|
||||
<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 { useRouter } from 'vue-router'
|
||||
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 { 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"
|
||||
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 { useRouter } from "vue-router"
|
||||
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"
|
||||
|
||||
//路由
|
||||
@@ -51,15 +51,19 @@ 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)
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data) => {
|
||||
let setSeachSelectData = (data, noMask = false) => {
|
||||
store.state.personPitchValue = data
|
||||
pages.value = 1
|
||||
seachSelectData.data = {
|
||||
...data
|
||||
...data,
|
||||
noMask,
|
||||
}
|
||||
loading.value = true
|
||||
getDataList(seachSelectData.data)
|
||||
@@ -68,31 +72,32 @@ let setSeachSelectData = (data) => {
|
||||
//轮播
|
||||
let bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取搜索数据
|
||||
let getDataList = (data) => {
|
||||
loadingText.value=' 加载中..... '
|
||||
let getDataList = data => {
|
||||
loadingText.value = " 加载中..... "
|
||||
if (!loading.value) return
|
||||
loading.value = false
|
||||
let postData = {
|
||||
page: pages.value,
|
||||
intermediary: 0,
|
||||
...data
|
||||
...data,
|
||||
}
|
||||
if(!postData['orderby'])postData['orderby']='timestamp'
|
||||
if (!postData["orderby"]) postData["orderby"] = "timestamp"
|
||||
|
||||
api.getLists(postData).then(res => {
|
||||
if (res.code === 200) {
|
||||
dataList.data = res.data.data
|
||||
if (res.data.data.length < 20) {
|
||||
loadingText.value = ' 到底了 '
|
||||
loadingText.value = " 到底了 "
|
||||
} else {
|
||||
loadingText.value = ' 下拉加载更多 '
|
||||
loadingText.value = " 下拉加载更多 "
|
||||
}
|
||||
if (pages.value === 1) {
|
||||
pageList.value = []
|
||||
@@ -102,8 +107,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 {
|
||||
@@ -115,7 +120,6 @@ let getDataList = (data) => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//加载更多
|
||||
let downLoadMore = () => {
|
||||
tool.loadMore(() => {
|
||||
@@ -125,14 +129,13 @@ let downLoadMore = () => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let list = ref(null)
|
||||
//listImg
|
||||
onMounted(() => {
|
||||
listMasonryInstance = new Masonry(list.value, {
|
||||
itemSelector: '.item',
|
||||
gutter: 20
|
||||
});
|
||||
itemSelector: ".item",
|
||||
gutter: 20,
|
||||
})
|
||||
// let { type, data } = router.currentRoute.value.query
|
||||
// let typeData = null
|
||||
// if (data) typeData = JSON.parse(data)
|
||||
@@ -144,14 +147,13 @@ onMounted(() => {
|
||||
// }
|
||||
// }
|
||||
banner()
|
||||
getDataList(seachSelectData.data)
|
||||
window.addEventListener('scroll', downLoadMore, true);
|
||||
// getDataList(seachSelectData.data)
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', downLoadMore, true);
|
||||
window.removeEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
@@ -202,4 +204,3 @@ img {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user