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

重写筛选组件和筛选参数全局化

Browse Source
This commit is contained in:
A1300399510
2024-03-22 17:16:42 +08:00
parent 172b7274a9
commit 5db2d47c2d
22 changed files with 284 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/202.4eb9402e.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/717.e26cb89d.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/app.808130ab.css → dist/css/app.254dfcb1.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.244d341a.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.efc10b3b.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/user.25617d9a.css → dist/css/user.8bfebe70.css vendored
View File

File diff suppressed because one or more lines are too long

6
dist/img/arrow-black-down.a672749f.svg vendored Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1494 -4445 )">
<path d="M 11.8797595190381 0.721649484536082 C 11.9599198396794 0.801832760595645 12 0.894043528064146 12 0.998281786941581 C 12 1.10252004581901 11.9599198396794 1.19473081328751 11.8797595190381 1.27491408934708 L 6.27655310621242 6.87972508591065 C 6.19639278557114 6.95990836197022 6.10420841683367 7 6 7 C 5.89579158316633 7 5.80360721442886 6.95990836197022 5.72344689378757 6.87972508591065 L 0.120240480961924 1.27491408934708 C 0.0400801603206414 1.19473081328751 0 1.10252004581901 0 0.998281786941581 C 0 0.894043528064146 0.0400801603206414 0.801832760595645 0.120240480961924 0.721649484536082 L 0.721442885771543 0.120274914089347 C 0.801603206412826 0.0400916380297814 0.893787575150301 0 0.997995991983968 0 C 1.10220440881764 0 1.19438877755511 0.0400916380297814 1.27454909819639 0.120274914089347 L 6 4.84707903780069 L 10.7254509018036 0.120274914089347 C 10.8056112224449 0.0400916380297814 10.8977955911824 0 11.002004008016 0 C 11.1062124248497 0 11.1983967935872 0.0400916380297814 11.2785571142285 0.120274914089347 L 11.8797595190381 0.721649484536082 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1494 4445 )" />
</g>
</svg>

6
dist/img/tick-green.e2abef05.svg vendored Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="9px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1205 -4919 )">
<path d="M 11.7832258064516 1.24242424242424 C 11.9277419354839 1.38383838383838 12 1.55555555555556 12 1.75757575757576 C 12 1.95959595959596 11.9277419354839 2.13131313131313 11.7832258064516 2.27272727272727 L 6.17806451612903 7.75757575757576 L 5.12516129032258 8.78787878787879 C 4.98064516129032 8.92929292929293 4.80516129032258 9 4.59870967741935 9 C 4.39225806451613 9 4.21677419354839 8.92929292929293 4.07225806451613 8.78787878787879 L 3.01935483870968 7.75757575757576 L 0.216774193548387 5.01515151515152 C 0.0722580645161291 4.87373737373737 0 4.7020202020202 0 4.5 C 0 4.2979797979798 0.0722580645161291 4.12626262626263 0.216774193548387 3.98484848484849 L 1.26967741935484 2.95454545454545 C 1.4141935483871 2.81313131313131 1.58967741935484 2.74242424242424 1.79612903225806 2.74242424242424 C 2.00258064516129 2.74242424242424 2.17806451612903 2.81313131313131 2.32258064516129 2.95454545454545 L 4.59870967741935 5.18939393939394 L 9.67741935483871 0.212121212121212 C 9.82193548387097 0.0707070707070704 9.99741935483871 0 10.2038709677419 0 C 10.4103225806452 0 10.5858064516129 0.0707070707070704 10.7303225806452 0.212121212121212 L 11.7832258064516 1.24242424242424 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 1205 4919 )" />
</g>
</svg>

2
dist/index.html vendored
View File

@@ -1,4 +1,4 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.318d02a5.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.808130ab.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || []; <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.12f7ab02.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.254dfcb1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || [];
(function () { (function () {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"; hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";

1
dist/js/202.85e93b53.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/717.19735484.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.12f7ab02.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.318d02a5.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/housing.61560cf1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/housing.80f4fa9d.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/seachPage.95337f59.js → dist/js/seachPage.b742b09d.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/user.d859aa17.js → dist/js/user.658353d8.js vendored
View File

File diff suppressed because one or more lines are too long

6
src/assets/img/publicImage/arrow-black-down.svg Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1494 -4445 )">
<path d="M 11.8797595190381 0.721649484536082 C 11.9599198396794 0.801832760595645 12 0.894043528064146 12 0.998281786941581 C 12 1.10252004581901 11.9599198396794 1.19473081328751 11.8797595190381 1.27491408934708 L 6.27655310621242 6.87972508591065 C 6.19639278557114 6.95990836197022 6.10420841683367 7 6 7 C 5.89579158316633 7 5.80360721442886 6.95990836197022 5.72344689378757 6.87972508591065 L 0.120240480961924 1.27491408934708 C 0.0400801603206414 1.19473081328751 0 1.10252004581901 0 0.998281786941581 C 0 0.894043528064146 0.0400801603206414 0.801832760595645 0.120240480961924 0.721649484536082 L 0.721442885771543 0.120274914089347 C 0.801603206412826 0.0400916380297814 0.893787575150301 0 0.997995991983968 0 C 1.10220440881764 0 1.19438877755511 0.0400916380297814 1.27454909819639 0.120274914089347 L 6 4.84707903780069 L 10.7254509018036 0.120274914089347 C 10.8056112224449 0.0400916380297814 10.8977955911824 0 11.002004008016 0 C 11.1062124248497 0 11.1983967935872 0.0400916380297814 11.2785571142285 0.120274914089347 L 11.8797595190381 0.721649484536082 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1494 4445 )" />
</g>
</svg>

6
src/assets/img/publicImage/tick-green.svg Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="9px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1205 -4919 )">
<path d="M 11.7832258064516 1.24242424242424 C 11.9277419354839 1.38383838383838 12 1.55555555555556 12 1.75757575757576 C 12 1.95959595959596 11.9277419354839 2.13131313131313 11.7832258064516 2.27272727272727 L 6.17806451612903 7.75757575757576 L 5.12516129032258 8.78787878787879 C 4.98064516129032 8.92929292929293 4.80516129032258 9 4.59870967741935 9 C 4.39225806451613 9 4.21677419354839 8.92929292929293 4.07225806451613 8.78787878787879 L 3.01935483870968 7.75757575757576 L 0.216774193548387 5.01515151515152 C 0.0722580645161291 4.87373737373737 0 4.7020202020202 0 4.5 C 0 4.2979797979798 0.0722580645161291 4.12626262626263 0.216774193548387 3.98484848484849 L 1.26967741935484 2.95454545454545 C 1.4141935483871 2.81313131313131 1.58967741935484 2.74242424242424 1.79612903225806 2.74242424242424 C 2.00258064516129 2.74242424242424 2.17806451612903 2.81313131313131 2.32258064516129 2.95454545454545 L 4.59870967741935 5.18939393939394 L 9.67741935483871 0.212121212121212 C 9.82193548387097 0.0707070707070704 9.99741935483871 0 10.2038709677419 0 C 10.4103225806452 0 10.5858064516129 0.0707070707070704 10.7303225806452 0.212121212121212 L 11.7832258064516 1.24242424242424 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 1205 4919 )" />
</g>
</svg>

224
src/components/apartment/seachModule.vue
View File

@@ -89,14 +89,14 @@
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }"> <div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
<div class="option-left"> <div class="option-left">
<div class="option-item flexflex"> <div class="option-item flexflex" style="padding-bottom: 10px;">
<div class="option-title">学校附近</div> <div class="option-title">学校附近</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div> <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div> <div class="item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
</div> </div>
</div> </div>
<div class="option-item flexflex"> <div class="option-item flexflex" style="padding-top: 20px;">
<div class="option-title flexacenter">租金</div> <div class="option-title flexacenter">租金</div>
<div class="option-box flexacenter flex1 option-input-box"> <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" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div> <div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
@@ -108,39 +108,110 @@
</div> </div>
</div> </div>
<div class="option-item flexflex"> <!-- <div class="option-item flexflex">
<div class="option-title">房型</div> <div class="option-title">房型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div> <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div>
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div> <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="option-right"> <div class="option-right">
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title flexacenter">品牌</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ brandKey[pitchValue["companyid"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title flexacenter">房型</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ roomTypeKey[pitchValue["roomtype"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title flexacenter">楼型</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ roomlistingsKey[pitchValue["roomlistings"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<!-- <div class="option-item flexflex">
<div class="option-title">品牌</div> <div class="option-title">品牌</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">不限</div> <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">不限</div>
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="item in brandList" @click="selectOption('brand', item.id)"> <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
{{ item["name"] }} {{ item["name"] }}
</div> </div>
</div> </div>
</div> </div> -->
<div class="option-item flexflex"> <!-- <div class="option-item flexflex">
<div class="option-title">楼型</div> <div class="option-title">楼型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">不限</div> <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">不限</div>
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)"> <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
{{ item["name"] }} {{ item["name"] }}
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<!-- 收起按钮 --> <!-- 收起按钮 -->
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div> <!-- <div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div> -->
<div class="screen-footer flexacenter" v-if="props.seachPage"> <div class="screen-footer flexacenter" v-if="props.seachPage">
<div class="quantity flexacenter"> <div class="quantity flexacenter">
@@ -182,7 +253,7 @@ const props = defineProps({
const emit = defineEmits(["handleTransfer"]) const emit = defineEmits(["handleTransfer"])
let state = ref("pack") // 筛选状态 unfold 展开 pack 收起 let state = ref("unfold") // 筛选状态 unfold 展开 pack 收起
//搜索框 //搜索框
let historyShow = ref(false) let historyShow = ref(false)
@@ -197,10 +268,14 @@ historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近 let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近
let roomTypeList = reactive([]) // 房型 let roomTypeList = reactive([]) // 房型
let roomTypeKey = reactive([]) // 房型 键值对
let roomlistingsList = reactive([]) // 楼型 let roomlistingsList = reactive([]) // 楼型
let roomlistingsKey = reactive([]) // 楼型 键值对
let brandList = reactive([]) // 品牌数据 let brandList = reactive([]) // 品牌数据
let brandKey = reactive([]) // 品牌数据 键值对
// 筛选条件 // 筛选条件
let pitchValue = ref({ let pitchValue = ref({
companyid: 0, companyid: 0,
@@ -215,8 +290,11 @@ let pitchValue = ref({
watchEffect(() => { watchEffect(() => {
nearSchoolList = store.state.apartment.school || [] nearSchoolList = store.state.apartment.school || []
roomTypeList = store.state.apartment.roomtype || [] roomTypeList = store.state.apartment.roomtype || []
roomTypeKey = store.state.roomTypeKey || {}
roomlistingsList = store.state.apartment.roomlistings || [] roomlistingsList = store.state.apartment.roomlistings || []
roomlistingsKey = store.state.roomlistingsKey || {}
brandList = store.state.apartment.brand || [] brandList = store.state.apartment.brand || []
brandKey = store.state.brandKey || {}
hotArr.data = store.state.indexData.hotSearcheWords hotArr.data = store.state.indexData.hotSearcheWords
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue } pitchValue.value = { ...pitchValue.value, ...props.initPitchValue }
}) })
@@ -379,8 +457,8 @@ let deleteSeachVal = i => {
} }
.location-box { .location-box {
width: 62px; width: 80px;
height: 32px; height: 40px;
background: inherit; background: inherit;
background-color: rgba(68, 68, 68, 1); background-color: rgba(68, 68, 68, 1);
border-radius: 8px; border-radius: 8px;
@@ -404,9 +482,7 @@ let deleteSeachVal = i => {
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
// bottom: -46px; bottom: -47px;
// left: -6px;
bottom: -39px;
left: -7px; left: -7px;
} }
@@ -431,7 +507,7 @@ let deleteSeachVal = i => {
width: 20px; width: 20px;
height: 20px; height: 20px;
object-fit: contain; object-fit: contain;
margin-right: 1px; margin-right: 4px;
} }
.tool-btn { .tool-btn {
@@ -569,12 +645,13 @@ let deleteSeachVal = i => {
.option-area { .option-area {
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
height: 0; // height: 0;
transition: height 0.25s linear 0s; transition: height 0.25s linear 0s;
&.option-area-unfold { &.option-area-unfold {
height: 335px; // height: 335px;
border-top: 1px solid #ebebeb; border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
} }
.option-left, .option-left,
@@ -672,6 +749,42 @@ let deleteSeachVal = i => {
} }
} }
} }
.option-right {
padding-top: 18px;
.option-item {
margin-left: 32px;
border-bottom: none !important;
padding: 0;
margin-bottom: 18px;
.option-title {
width: 73px;
}
.option-dropdown {
width: 477px;
height: 40px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
justify-content: space-between;
padding-left: 12px;
padding-right: 10px;
cursor: pointer;
.option-dropdown-value {
font-size: 14px;
color: #000000;
line-height: 24px;
}
.option-dropdown-img {
width: 12px;
height: 7px;
}
}
}
}
} }
.seach-hiosory-box { .seach-hiosory-box {
@@ -807,13 +920,31 @@ let deleteSeachVal = i => {
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
box-shadow: none; box-shadow: none;
background: none; background: none;
// border: 1px solid #dcdfe6;
}
/deep/ .el-input__wrapper {
// border: 1px solid #dcdfe6;
}
/deep/ .el-input__inner {
height: 100%;
} }
img { img {
width: 18px !important; width: 20px !important;
}
.seach-btn {
font-size: 16px;
color: #000;
} }
} }
// .screen-btn /deep/ .el-input__wrapper {
// border: 1px solid #dcdfe6;
// }
.seach-btn { .seach-btn {
width: 32px !important; width: 32px !important;
height: 32px !important; height: 32px !important;
@@ -821,3 +952,50 @@ let deleteSeachVal = i => {
margin-right: 3px; margin-right: 3px;
} }
</style> </style>
<style lang="less">
.el-popper.el-dropdown__popper.option-dropdown-box {
width: 477px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
border: none;
overflow: hidden;
.el-dropdown-menu {
padding: 20px 12px;
.el-dropdown-menu__item {
width: 100%;
height: 40px;
border-radius: 5px;
font-size: 14px;
color: #7f7f7f;
line-height: 24px;
padding-left: 20px;
background: #fff;
justify-content: space-between;
.dropdown-icon {
display: none;
}
&:hover {
background: rgba(246, 246, 246, 1);
}
&.pitch {
color: #50e3c2;
background-color: rgba(246, 246, 246, 1);
.dropdown-icon {
display: block;
}
}
}
}
}
.option-dropdown-box.el-dropdown__popper.el-popper[data-popper-placement^="bottom"] .el-popper__arrow::before {
display: none;
}
</style>

31
src/components/seachModule/seachModule1.vue
View File

@@ -158,7 +158,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="option-item flexflex" v-else> <div class="option-item flexacenter" style="height: 96px;" v-else>
<div class="option-title">目标区域</div> <div class="option-title">目标区域</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div> <div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
@@ -252,7 +252,7 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">其他</div> <div class="option-title">其他</div>
<div class="option-box flexacenter flex1"> <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')"> <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> <span class="item-checkbox__inner"></span>
认证房源 认证房源
</div> </div>
@@ -268,11 +268,6 @@
<span class="item-checkbox__inner"></span> <span class="item-checkbox__inner"></span>
有阳台 有阳台
</div> </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> </div>
@@ -312,7 +307,9 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="sort-box"> <el-dropdown-menu class="sort-box">
<el-dropdown-item class="sort-item" :class="{ pitch: item.type == pitchValue.orderby }" @click="selectOption('orderby', item.type)" v-for="item in orderbyList" :key="item.type">{{ item.name }}</el-dropdown-item> <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> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@@ -397,7 +394,7 @@ onMounted(() => {
pitchValue["school"] = "" pitchValue["school"] = ""
const arr = queryParams["location"].split(",") const arr = queryParams["location"].split(",")
pitchValue["location"] = arr pitchValue["location"] = arr
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0) // selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
} else pitchValue = Object.assign({}, pitchValue, queryParams) } else pitchValue = Object.assign({}, pitchValue, queryParams)
} else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue } } else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue }
else pitchValue = { ...pitchValue, ...store.state.needPitchValue } else pitchValue = { ...pitchValue, ...store.state.needPitchValue }
@@ -407,6 +404,8 @@ onMounted(() => {
geographicState.value = "school" geographicState.value = "school"
} }
if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
getDataList(pitchValue) getDataList(pitchValue)
}) })
@@ -549,6 +548,11 @@ onMounted(() => {
//设置区域状态 //设置区域状态
let setSelectPosition = type => { let setSelectPosition = type => {
geographicState.value = type geographicState.value = type
if (type !== "school") return
locationTemp.key = 0
locationTemp.value = []
locationTemp.state = false
} }
//学校区域状态 //学校区域状态
@@ -635,6 +639,7 @@ const selectDistrict = type => {
locationTemp.key = 0 locationTemp.key = 0
locationTemp.state = false locationTemp.state = false
pitchValue["school"] = ""
} else { } else {
// 点击选好了 数组为空代表 选择不限 // 点击选好了 数组为空代表 选择不限
if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value] if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value]
@@ -643,6 +648,7 @@ const selectDistrict = type => {
locationTemp.value = [] locationTemp.value = []
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
pitchValue["school"] = ""
locationTemp.key = 0 locationTemp.key = 0
locationTemp.state = false locationTemp.state = false
getDataList(pitchValue) getDataList(pitchValue)
@@ -1495,6 +1501,10 @@ defineExpose({
margin-right: 20px; margin-right: 20px;
color: #606266; color: #606266;
&.item-checkbox-housing {
color: #f95d5d;
}
&.pitch { &.pitch {
color: #000; color: #000;
font-weight: 650; font-weight: 650;
@@ -1745,7 +1755,8 @@ defineExpose({
margin-bottom: 30px; margin-bottom: 30px;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
&.pitch { .pitch {
width: 100%;
color: #000; color: #000;
font-weight: 650; font-weight: 650;
position: relative; position: relative;

42
src/main.js
View File

@@ -78,30 +78,35 @@ app.use(store).use(router).use(Axios)
api.index() api.index()
.then(res => { .then(res => {
store.state.seachTypeData = res.data.combination const data = res.data
store.state.indexData = res.data store.state.seachTypeData = data.combination
store.state.ListSelectBtn = res.data.recommendedTab store.state.indexData = data
store.state.user = res.data.user store.state.ListSelectBtn = data.recommendedTab
store.state.nav = res.data.nav store.state.user = data.user
store.state.wechat = res.data.wechat store.state.nav = data.nav
store.state.apartment = res.data.config.apartment store.state.wechat = data.wechat
store.state.schoolList = res.data.schoolList store.state.apartment = data.config.apartment
store.state.advData = res.data.adv store.state.schoolList = data.schoolList
store.state.typeKey = res.data.config.type store.state.advData = data.adv
store.state.locationKey = res.data.config.location store.state.typeKey = data.config.type
store.state.locationKey = data.config.location
// 将 location 转换为对象 好用于级联选择器 // 将 location 转换为对象 好用于级联选择器
const location = res.data.config.location || {} const location = data.config.location || {}
const type = res.data.config.type || {} const type = data.config.type || {}
store.state.locationObj = optimalValue(location) store.state.locationObj = optimalValue(location)
store.state.typeObj = optimalValue(type) store.state.typeObj = optimalValue(type)
store.state.brandKey = optimalValueArray(data.config.apartment.brand || [])
store.state.roomTypeKey = optimalValueArray(data.config.apartment.roomtype || [])
store.state.roomlistingsKey = optimalValueArray(data.config.apartment.roomlistings || [])
}) })
.finally(() => { .finally(() => {
app.mount("#app") app.mount("#app")
}) })
// 优化值 // 优化值 1 1.1 1.2 类似的值
const optimalValue = data => { const optimalValue = data => {
let obj = {} let obj = {}
for (const key in data) { for (const key in data) {
@@ -120,3 +125,12 @@ const optimalValue = data => {
return obj || {} return obj || {}
} }
// 优化值 数组 转对象
const optimalValueArray = data => {
let obj = {}
data.forEach(item => {
obj[item.id] = item.name
})
return obj
}