1780 lines
69 KiB
Vue
1780 lines
69 KiB
Vue
<template>
|
||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
|
||
<div class="body-maxWidth">
|
||
<div class="s-w-100 seach-box-bg">
|
||
<div class="seach-box">
|
||
<div class="top-seach dis-f al-item">
|
||
<div style="position: absolute; left: -8px; top: 20px;">
|
||
<div class="location-box dis-f jus-x al-item">
|
||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
|
||
香港
|
||
</div>
|
||
<div class="triangle"></div>
|
||
</div>
|
||
<div class="dis-f al-item pos-r seek-input">
|
||
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px;"></el-input>
|
||
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
|
||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
|
||
<!-- 搜索 -->
|
||
</div>
|
||
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
|
||
<el-scrollbar height="375px">
|
||
<div class="seach-history-info">
|
||
<div>
|
||
<div class="title">
|
||
历史搜索
|
||
</div>
|
||
<div class="info-box">
|
||
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="" /></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 30px;">
|
||
<div class="title">
|
||
热门推荐
|
||
</div>
|
||
<div class="info-box">
|
||
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="tool-btn dis-f jus-x al-item map-btn">
|
||
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
|
||
地图找房
|
||
</div> -->
|
||
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }" style="position: relative;">
|
||
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
|
||
发布房源
|
||
<choosing-identity></choosing-identity>
|
||
</div>
|
||
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300" trigger="hover" :show-arrow="false" popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
|
||
<template #reference>
|
||
<div class="tool-btn consult-btn flexcenter" v-if="routePath == '/needHousing'">
|
||
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png" />
|
||
咨询方同学
|
||
</div>
|
||
</template>
|
||
<div class="consult-pop flexacenter">
|
||
<div class="consult-title flexacenter">
|
||
欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询公寓
|
||
</div>
|
||
<div class="consult-QRcode flexcenter">
|
||
<img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
|
||
</div>
|
||
<div class="consult-hint">微信扫码添加好友</div>
|
||
<!-- <div class="consult-remark flexacenter">备注：<b>寄托租房</b></div> -->
|
||
</div>
|
||
</el-popover>
|
||
|
||
<div class="dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
|
||
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="" />
|
||
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="" />
|
||
<div class="btn-qrcode">
|
||
<authentication-info :type="1"></authentication-info>
|
||
</div>
|
||
</div>
|
||
<div class="dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath === '/intermediaryHousing'">
|
||
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="" />
|
||
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="" />
|
||
<div class="btn-qrcode">
|
||
<authentication-info :type="2"></authentication-info>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seach-info-box dis-f" v-if="routePath === '/'">
|
||
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn"> </seachInfo>
|
||
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
|
||
<seachInfo title="区域找房" seachType="3" style="margin-top: 30px;" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
|
||
<seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
|
||
</div>
|
||
<!-- -->
|
||
<!-- {{ 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="routePath !== '/needHousing'">
|
||
<div class="option-title">地理位置</div>
|
||
<div class="option-box flexflex flex1" style="flex-direction: column;">
|
||
<div class="geography-tab flexacenter">
|
||
<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="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" 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>
|
||
不限
|
||
</div>
|
||
<div class="district-option">
|
||
<el-checkbox-group v-model="locationTemp.value">
|
||
<el-checkbox :label="i" v-for="(item, i) in locationObj[locationTemp.key]?.children" :key="i">{{ item }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<div class="district-btn-box flexacenter">
|
||
<div class="district-btn flexcenter district-cancel" @click="selectDistrict(1)">取消</div>
|
||
<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 flexacenter" style="height: 96px;" 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>
|
||
<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>
|
||
<div class="district-pop" v-if="locationTemp.state">
|
||
<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>
|
||
不限
|
||
</div>
|
||
<div class="district-option">
|
||
<el-checkbox-group v-model="locationTemp.value">
|
||
<el-checkbox :label="i" v-for="(item, i) in locationObj[locationTemp.key]?.children" :key="i">{{ item }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<div class="district-btn-box flexacenter">
|
||
<div class="district-btn flexcenter district-cancel" @click="selectDistrict(1)">取消</div>
|
||
<div class="district-btn flexcenter district-ok" @click="selectDistrict()">选好了</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="option-item flexflex">
|
||
<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" :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 }}
|
||
|
||
<div class="select-type-text" v-if="pitchValue.types"> > {{ pitchValue.types == index ? "不限" : typeKey[pitchValue.types] }}</div>
|
||
|
||
<img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
|
||
<img class="item-icon item-icon-pitch" style="margin-left: 30px;" src="@/assets/homeImage/dropDownIcon.svg" />
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu class="sort-box">
|
||
<el-dropdown-item class="sort-item" :class="{ pitch: index == pitchValue.types }" @click="selectType(index)">不限</el-dropdown-item>
|
||
<el-dropdown-item class="sort-item" :class="{ pitch: i == pitchValue.types }" @click="selectType(i)" v-for="(ite, i) in typeObj[Math.floor(pitchValue.types)]?.children" :key="i">{{ ite }}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="option-item flexflex">
|
||
<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>
|
||
|
||
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
|
||
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
|
||
清除金额
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="option-right">
|
||
<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)" :key="item.id">{{ item["name"] }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="option-item flexflex">
|
||
<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" :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 flexacenter flex1">
|
||
<div class="item-checkbox flexacenter item-checkbox-housing" v-if="routePath == '/personHousing'" :class="{ pitch: pitchValue.isverified == 1 }" @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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screen-footer flexacenter">
|
||
<div class="screen-footer-left flexacenter">
|
||
<div class="quantity flexacenter">
|
||
共 <b class="b">{{ count }}</b> 条{{ routePath === '/personHousing' ? '个人房源' : routePath === '/intermediaryHousing' ? '中介房源' : routePath === '/needHousing' ? '求房源' : '' }}
|
||
</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">
|
||
<div class="sort-btn flexacenter">
|
||
<template v-for="item in orderbyList">{{ item.type == pitchValue.orderby ? item.name : "" }}</template>
|
||
<img class="sort-icon" src="@/assets/homeImage/sortIcon.png" />
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu class="sort-box">
|
||
<el-dropdown-item class="sort-item" @click="selectOption('orderby', item.type)" v-for="item in orderbyList" :key="item.type">
|
||
<div :class="{ pitch: item.type === pitchValue.orderby }">{{ item.name }}</div>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject, getCurrentInstance, watch, nextTick } from "vue"
|
||
import { useStore } from "vuex"
|
||
|
||
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
|
||
import selectTabBox from "../selectTabBox/selectTabBox.vue"
|
||
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
|
||
import { useRouter } from "vue-router"
|
||
import store from "../../store/index"
|
||
import api from "../../utils/api"
|
||
import authenticationInfo from "./authenticationInfo.vue"
|
||
const usestore = useStore()
|
||
|
||
const { wechat } = toRefs(usestore.state)
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const props = defineProps({
|
||
getDataList: {
|
||
type: Function,
|
||
},
|
||
})
|
||
|
||
let getDataList = props.getDataList
|
||
|
||
//搜索框
|
||
let historyShow = ref(false)
|
||
let setHistoryShow = () => {
|
||
if (historyShow.value) {
|
||
setTimeout(() => {
|
||
historyShow.value = !historyShow.value
|
||
}, 500)
|
||
return
|
||
}
|
||
historyShow.value = !historyShow.value
|
||
}
|
||
let seachSchoolBtn = reactive({ data: [] }) //学校地区
|
||
let hireType = {} //整租
|
||
let allHireType = {} //合租
|
||
let seachArea = {} //区域找房
|
||
let historyArr = reactive({ data: [] }) //历史查找记录
|
||
let hotArr = reactive({ data: [] })
|
||
let seachAllType = reactive({
|
||
keyword: "",
|
||
location: [],
|
||
orderby: "timestamp",
|
||
})
|
||
|
||
// const pitchValue = inject("pitchValue") || {}
|
||
|
||
let pitchValue = reactive({
|
||
location: [],
|
||
school: "",
|
||
rent_min: "",
|
||
rent_max: "",
|
||
leaseterm: "",
|
||
roomtype: 0,
|
||
gender: 0,
|
||
iselevator: 0,
|
||
issunshinearea: 0,
|
||
orderby: "timestamp",
|
||
publish: "",
|
||
types: "",
|
||
})
|
||
|
||
onMounted(() => {
|
||
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"
|
||
}
|
||
|
||
if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||
|
||
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) {
|
||
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
|
||
if (item.length > 1) {
|
||
seachArea.data[item.substring(0, 1) - 1].data.push({
|
||
title: data[item],
|
||
id: item,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
//监听路由
|
||
const route = useRouter()
|
||
let routePath = ref("")
|
||
routePath.value = route.currentRoute.value.meta.path
|
||
|
||
watchEffect(() => {
|
||
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
|
||
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
|
||
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
|
||
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
|
||
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
|
||
hotArr.data = store.state.indexData.hotSearcheWords
|
||
})
|
||
|
||
//获取历史搜索记录
|
||
historyArr.data = JSON.parse(localStorage.getItem("historyArr")) || []
|
||
|
||
//搜索数据
|
||
let seachList = item => {
|
||
let string = seachAllType.keyword
|
||
if (!string.replace(/\s/g, "")) return
|
||
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
|
||
historyArr.data.unshift(seachAllType.keyword)
|
||
}
|
||
if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
|
||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||
sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
|
||
route.push({
|
||
path: "/seachPage",
|
||
query: {
|
||
keyword: seachAllType.keyword,
|
||
isNeedHousing: routePath.value === "/needHousing",
|
||
},
|
||
})
|
||
}
|
||
|
||
//设置点击一级区域 特殊的 选中区域的不限 需要修改值 并且去掉学校值
|
||
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 !== "") {
|
||
// 这里是正常的数据 直接赋值
|
||
seachAllType[type] = data
|
||
} 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 (second) {
|
||
seachAllType[second.type] = second.id
|
||
}
|
||
console.log(type, data, second)
|
||
console.log("保存前的处理数据：", seachAllType)
|
||
|
||
getDataList(seachAllType)
|
||
}
|
||
|
||
//点击历史搜索记录
|
||
let setSeachVal = item => {
|
||
seachAllType.keyword = item
|
||
seachList()
|
||
// getDataList(seachAllType)
|
||
}
|
||
//删除历史记录
|
||
let deleteSeachVal = i => {
|
||
historyArr.data.splice(i, 1)
|
||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||
}
|
||
|
||
//点击热门地区
|
||
let setHotSeach = item => {
|
||
seachAllType.keyword = item
|
||
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
|
||
if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
|
||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||
seachList()
|
||
}
|
||
|
||
//点击选项
|
||
let checkBtn = (data, type, areaItem) => {
|
||
getDataList(type, data, 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
|
||
setSchoolData()
|
||
})
|
||
|
||
//设置区域状态
|
||
let setSelectPosition = type => {
|
||
geographicState.value = type
|
||
|
||
if (type !== "school") return
|
||
locationTemp.key = 0
|
||
locationTemp.value = []
|
||
locationTemp.state = false
|
||
}
|
||
|
||
//学校区域状态
|
||
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,
|
||
value: [],
|
||
state: false,
|
||
})
|
||
|
||
// 目标区域的 选择 type 0 不限 1 取消 2 选择
|
||
const selectDistrict = type => {
|
||
// 不限
|
||
if (type == 0) locationTemp.value = []
|
||
else if (type == 1) {
|
||
locationTemp.value = []
|
||
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||
|
||
locationTemp.key = 0
|
||
locationTemp.state = false
|
||
pitchValue["school"] = ""
|
||
} else {
|
||
// 点击选好了 数组为空代表 选择不限
|
||
if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value]
|
||
|
||
pitchValue["location"] = locationTemp.value
|
||
locationTemp.value = []
|
||
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||
|
||
pitchValue["school"] = ""
|
||
locationTemp.key = 0
|
||
locationTemp.state = false
|
||
getDataList(pitchValue)
|
||
proxy.$forceUpdate()
|
||
}
|
||
}
|
||
|
||
// 目标区域的选中
|
||
let selectDistrictPitchShow = ref("")
|
||
|
||
// 处理输入筛选金额后
|
||
const rentBlur = () => {
|
||
getDataList(pitchValue)
|
||
proxy.$forceUpdate()
|
||
}
|
||
|
||
// 清除筛选的金额
|
||
const clearingAmount = () => {
|
||
pitchValue["rent_min"] = ""
|
||
pitchValue["rent_max"] = ""
|
||
getDataList(pitchValue)
|
||
proxy.$forceUpdate()
|
||
}
|
||
|
||
// 租期配置数据
|
||
let leasetermList = reactive([
|
||
{ name: "不限", id: 0 },
|
||
{ name: "一年以上", id: 1 },
|
||
{ name: "低于一年", id: 2 },
|
||
])
|
||
|
||
// //性别配置数据
|
||
let genderList = reactive([
|
||
{ name: "不限", id: 0 },
|
||
{ name: "女", id: 1 },
|
||
{ name: "男", id: 2 },
|
||
])
|
||
|
||
//发布时间配置数据
|
||
let publishList = reactive([
|
||
{ name: "不限", id: 0 },
|
||
{ name: "三天", id: "triduum" },
|
||
{ name: "一周", id: "hebdomad" },
|
||
{ name: "一个月内", id: "onemonth" },
|
||
{ name: "两个月内", id: "twomonth" },
|
||
{ name: "三个月内", id: "trimester" },
|
||
])
|
||
|
||
// 排序的选项
|
||
let orderbyList = reactive([
|
||
{ name: "最新发布", type: "timestamp" },
|
||
{ name: "热门", type: "hotnum" },
|
||
{ name: "价格从低到高", type: "rentasc" },
|
||
{ name: "价格从高到低", type: "rentdesc" },
|
||
])
|
||
|
||
// 排序弹窗的状态
|
||
let orderbyPopoverState = ref(false)
|
||
|
||
const itemText = ref(null)
|
||
|
||
// 筛选选中的中转
|
||
const selectOption = (key, value) => {
|
||
// 特殊处理 目标区域不等于 0 时 弹窗区域选择框
|
||
if (key == "location" && value != 0) {
|
||
// 再次同一个分区选中 通过 选中的值来判断
|
||
if (Math.floor(pitchValue["location"][0] || 0) == value) {
|
||
// 判断本来就是选择不限的 需要value等于空 不让会乱
|
||
if (pitchValue["location"][0] == value) {
|
||
locationTemp.value = []
|
||
} else {
|
||
locationTemp.value = [...new Set(pitchValue["location"])]
|
||
}
|
||
} else locationTemp.value = [] // 选择其他分区
|
||
|
||
locationTemp.key = value
|
||
locationTemp.state = true
|
||
selectDistrictPitchShow.value = value
|
||
return
|
||
} else if (key == "location" && value == 0) {
|
||
// 这里时直接点击 区域的不限的
|
||
locationTemp.state = false
|
||
selectDistrictPitchShow.value = 0
|
||
}
|
||
|
||
// 特殊的 学校和区域只能二选一
|
||
if (key == "school") pitchValue["location"] = []
|
||
else if (key == "location") pitchValue["school"] = ""
|
||
|
||
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
|
||
|
||
pitchValue.types = value
|
||
if (isFirstFloor) getDataList(pitchValue, true)
|
||
// 请求不要蒙版
|
||
else getDataList(pitchValue)
|
||
|
||
proxy.$forceUpdate()
|
||
}
|
||
|
||
// 区域判断不限
|
||
const districtUnlimited = index => {
|
||
if (selectDistrictPitchShow.value != index || pitchValue["location"].length == 0) return false
|
||
if (pitchValue["location"].length == 1 && pitchValue["location"][0] == index) return true
|
||
}
|
||
|
||
// 区域判断 显示数量
|
||
const districtQuantity = index => {
|
||
if (selectDistrictPitchShow.value != index && pitchValue["location"].length != 0) return false
|
||
// 排除 不限
|
||
if (selectDistrictPitchShow.value == pitchValue["location"][0]) return false
|
||
// 获取 location 值 判断和index 是否相等
|
||
if (Math.floor(pitchValue["location"][0]) == index) return true
|
||
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")
|
||
|
||
defineExpose({
|
||
historyShow,
|
||
})
|
||
</script>
|
||
<style scoped lang="less">
|
||
.dis-f {
|
||
display: flex;
|
||
}
|
||
|
||
.jus-x {
|
||
justify-content: center;
|
||
}
|
||
|
||
.al-item {
|
||
align-items: center;
|
||
}
|
||
|
||
.pos-r {
|
||
position: relative;
|
||
}
|
||
|
||
.body-maxWidth {
|
||
width: 1200px;
|
||
min-width: 1200px;
|
||
}
|
||
|
||
.s-w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.jus-bet {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.authentication-btn:hover .btn-qrcode {
|
||
display: block;
|
||
}
|
||
|
||
.btn-qrcode {
|
||
height: 365px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 58px;
|
||
z-index: 333;
|
||
display: none;
|
||
}
|
||
|
||
.btn-qrcode .bj {
|
||
height: 100%;
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2784313725490196);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.btn-qrcode .QR-code {
|
||
position: absolute;
|
||
width: 100px;
|
||
height: 110px;
|
||
border-radius: 50%;
|
||
bottom: 86px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.seach-box-bg {
|
||
background: #d7d7d7 !important;
|
||
background: inherit;
|
||
border: none;
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
font-size: 14px;
|
||
margin-top: 20px;
|
||
padding-top: 5px;
|
||
|
||
.seach-box {
|
||
background: #ffffff;
|
||
/* transform: translate(0, 5px); */
|
||
border-radius: 16px;
|
||
|
||
.top-seach {
|
||
padding: 20px;
|
||
position: relative;
|
||
justify-content: end;
|
||
border-bottom: 1px solid #ebebeb;
|
||
.intermediary-btn:hover {
|
||
background: #f4f7f9 !important;
|
||
}
|
||
.intermediary-btn {
|
||
background: rgba(241, 245, 247, 1) !important;
|
||
}
|
||
|
||
.authentication-btn:hover {
|
||
background: #f6f5ff;
|
||
}
|
||
.authentication-btn {
|
||
width: 160px;
|
||
height: 40px;
|
||
background: inherit;
|
||
background-color: rgba(244, 243, 255, 1);
|
||
border: none;
|
||
border-radius: 68px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
.text-img {
|
||
width: 100px;
|
||
height: 20px;
|
||
}
|
||
|
||
.code-img {
|
||
width: 20px;
|
||
height: 16px;
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
|
||
.seach-history-h {
|
||
max-height: 375px !important;
|
||
transition: max-height 0.5s ease-in-out;
|
||
}
|
||
|
||
.seach-hiosory-box {
|
||
position: absolute;
|
||
top: 55px;
|
||
z-index: 99;
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.seach-history-info {
|
||
width: 560px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
padding: 20px 25px;
|
||
overflow-y: auto;
|
||
|
||
.title {
|
||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
}
|
||
|
||
.info-box :hover .img {
|
||
display: block;
|
||
}
|
||
|
||
.info-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 15px;
|
||
color: #555555;
|
||
text-align: left;
|
||
|
||
.img {
|
||
width: 8px;
|
||
height: 8px;
|
||
position: absolute;
|
||
top: 6px;
|
||
right: -8px;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
|
||
.btn {
|
||
margin: 10px 30px 0 0;
|
||
padding: 0 10px 0 0;
|
||
cursor: pointer;
|
||
word-wrap: break-word;
|
||
max-width: 100%;
|
||
position: relative;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.location-box {
|
||
width: 64px;
|
||
height: 32px;
|
||
background: inherit;
|
||
background-color: rgba(68, 68, 68, 1);
|
||
border: none;
|
||
border-radius: 8px;
|
||
border-top-left-radius: 0px;
|
||
border-bottom-left-radius: 0px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
line-height: 48px;
|
||
position: absolute;
|
||
z-index: 666;
|
||
}
|
||
|
||
.triangle {
|
||
border: 7px solid;
|
||
border-color: transparent #000 transparent transparent;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
bottom: -39px;
|
||
left: -7px;
|
||
}
|
||
|
||
.seach-btn:hover {
|
||
background: #81c1ff !important;
|
||
}
|
||
.seach-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: inherit;
|
||
background-color: rgba(98, 177, 255, 1);
|
||
border: none;
|
||
border-right: 0px;
|
||
border-radius: 0 8px 8px 0;
|
||
line-height: 48px;
|
||
cursor: pointer;
|
||
transform: translateX(-3px);
|
||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
}
|
||
|
||
.img {
|
||
width: 20px;
|
||
// height: 20px;
|
||
object-fit: contain;
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.map-btn {
|
||
background: rgba(80, 227, 194, 1);
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.add-btn:hover {
|
||
background: #fde177 !important;
|
||
}
|
||
.add-btn {
|
||
background: rgba(253, 218, 85, 1);
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mg-l-10 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 160px;
|
||
height: 40px;
|
||
border: none;
|
||
border-radius: 68px;
|
||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
line-height: 48px;
|
||
|
||
img {
|
||
width: 15px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
&.consult-btn {
|
||
background: rgba(144, 216, 72, 1);
|
||
margin-left: 20px;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.consult-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.seach-info-box {
|
||
padding: 20px 10px;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-input__wrapper {
|
||
background: rgba(246, 246, 246, 1);
|
||
border-radius: 8px 0 0 8px;
|
||
}
|
||
|
||
.seek-input {
|
||
border-radius: 65px;
|
||
overflow: hidden;
|
||
background-color: #f6f6f6;
|
||
border: solid 1px var(--el-input-border-color, var(--el-border-color));
|
||
.seach-btn {
|
||
border-radius: 50% !important;
|
||
img {
|
||
width: 18px !important;
|
||
}
|
||
}
|
||
::v-deep .el-input__wrapper {
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|
||
}
|
||
|
||
.el-popover.el-popper.consult-popover {
|
||
.consult-pop {
|
||
width: 300px;
|
||
height: 300px;
|
||
border-radius: 10px;
|
||
padding-top: 45px;
|
||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
background-color: #fff;
|
||
flex-direction: column;
|
||
|
||
.consult-title {
|
||
font-size: 15px;
|
||
color: #555555;
|
||
margin-bottom: 24px;
|
||
|
||
b {
|
||
color: #000;
|
||
font-weight: 650;
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
|
||
.consult-QRcode {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 20px;
|
||
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
margin-bottom: 20px;
|
||
background: #fff;
|
||
|
||
.consult-QRcode-img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
.consult-hint {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.consult-hint,
|
||
.consult-remark {
|
||
font-size: 13px;
|
||
color: #555555;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.consult-remark {
|
||
b {
|
||
font-weight: 650;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.option-area {
|
||
flex-wrap: wrap;
|
||
transition: height 0.25s linear 0s;
|
||
border-bottom: 1px solid rgb(235, 235, 235);
|
||
|
||
.option-left,
|
||
.option-right {
|
||
width: 600px;
|
||
|
||
&:not(:last-of-type) {
|
||
border-right: 1px #ebebeb dotted;
|
||
}
|
||
|
||
.option-item {
|
||
// padding-top: 24px;
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
margin: 0 30px 0 20px;
|
||
position: relative;
|
||
|
||
&:not(:last-of-type) {
|
||
border-bottom: 1px #ebebeb dotted;
|
||
}
|
||
|
||
.option-title {
|
||
font-size: 14px;
|
||
color: #b5b5b5;
|
||
width: 90px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.option-box {
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
padding: 5px 10px;
|
||
height: 30px;
|
||
display: flex;
|
||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
border-radius: 10px;
|
||
margin-right: 10px;
|
||
// margin-bottom: 10px;
|
||
cursor: pointer;
|
||
color: #7f7f7f;
|
||
border: 1px solid transparent;
|
||
|
||
&:hover {
|
||
border: 1px solid rgba(235, 235, 235, 1);
|
||
}
|
||
|
||
&.pitch {
|
||
color: #50e3c2;
|
||
border: 1px solid #50e3c2;
|
||
background: #eefcf9;
|
||
|
||
.item-icon {
|
||
display: none;
|
||
}
|
||
.item-icon-pitch {
|
||
display: block;
|
||
}
|
||
.select-type-text {
|
||
display: block;
|
||
}
|
||
}
|
||
.item-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
.item-icon-pitch {
|
||
display: none;
|
||
}
|
||
|
||
.select-type-text {
|
||
display: none;
|
||
}
|
||
|
||
.select-num {
|
||
padding: 0 10px;
|
||
background-color: #50e3c2;
|
||
border-radius: 13px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
height: 16px;
|
||
line-height: 16px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
&.option-input-box {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
line-height: 20px;
|
||
|
||
.eliminate {
|
||
width: 96px;
|
||
height: 30px;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
border-radius: 50px;
|
||
font-size: 14px;
|
||
color: #7f7f7f;
|
||
cursor: pointer;
|
||
|
||
.eliminate-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
|
||
.option-input {
|
||
width: 100px;
|
||
height: 40px;
|
||
border: 1px solid rgba(179, 179, 179, 1);
|
||
border-radius: 10px;
|
||
// outline: none;
|
||
font-size: 14px;
|
||
margin: 0 10px;
|
||
padding: 10px;
|
||
|
||
&:first-of-type {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.district-pop {
|
||
position: absolute;
|
||
top: 80px;
|
||
width: 459px;
|
||
background-color: #fff;
|
||
border: 1px solid #ebebeb;
|
||
border-radius: 16px;
|
||
z-index: 1;
|
||
|
||
.district-unlimited {
|
||
font-size: 14px;
|
||
color: #7f7f7f;
|
||
line-height: 20px;
|
||
margin: 25px 20px 0;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px dotted #ebebeb;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
|
||
&.pitch {
|
||
color: #000;
|
||
font-weight: 650;
|
||
.unlimited-no {
|
||
display: none;
|
||
}
|
||
.unlimited-yes {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.unlimited-no {
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.unlimited-yes {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 10px;
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.district-option {
|
||
/deep/ .el-checkbox-group {
|
||
padding: 15px 20px 20px;
|
||
}
|
||
border-bottom: 1px solid #ebebeb;
|
||
}
|
||
|
||
.district-btn-box {
|
||
justify-content: flex-end;
|
||
padding: 20px 20px 25px 0;
|
||
|
||
.district-btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
border-radius: 150px;
|
||
cursor: pointer;
|
||
|
||
&.district-ok {
|
||
background-color: #62b1ff;
|
||
border: 1px solid #62b1ff;
|
||
color: #fff;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
&.district-cancel {
|
||
border: 1px solid #aaa;
|
||
color: #555;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.geography-tab {
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #7f7f7f;
|
||
|
||
.geography-item {
|
||
padding: 5px 10px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-radius: 10px;
|
||
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;
|
||
|
||
&.item-checkbox-housing {
|
||
color: #f95d5d;
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||
background: #50e3c2;
|
||
border-color: #50e3c2;
|
||
}
|
||
|
||
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
|
||
font-family: PingFangSC-Semibold, PingFang SC Semibold, PingFang SC, sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000;
|
||
}
|
||
|
||
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
|
||
background-color: initial;
|
||
color: initial;
|
||
}
|
||
|
||
.screen-footer {
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
color: #000;
|
||
line-height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 650;
|
||
|
||
.sort-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
width: 150px;
|
||
padding: 0;
|
||
border-radius: 10px;
|
||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
|
||
.sort-box {
|
||
padding: 26px 20px 2px;
|
||
font-size: 14px;
|
||
color: #7f7f7f;
|
||
border-radius: 10px;
|
||
|
||
.sort-item {
|
||
margin-bottom: 30px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
.pitch {
|
||
width: 100%;
|
||
color: #000;
|
||
font-weight: 650;
|
||
position: relative;
|
||
&::before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 14px;
|
||
background-color: rgba(80, 227, 194, 1);
|
||
border-radius: 3px;
|
||
display: block;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|