公寓筛选

src/components/apartment/seachModule.vue

@@ -56,7 +56,7 @@
                     </div>
 
                     <!-- 展示的 展开和隐藏按钮 -->
-                    <div class="screen-btn flexcenter">
+                    <div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
                         <b>筛选</b>
                         <div class="screen-btn-text" style="margin-left:0;">：学校附近</div> | <div class="screen-btn-text">品牌
                         </div> | <div class="screen-btn-text">租金</div> | <div class="screen-btn-text">房型</div> | <div
@@ -64,31 +64,76 @@
                         <img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
                     </div>
 
+                    <div class="option-area flexflex" v-if="state == 'unfold'">
+                        <div class="option-left">
+                            <div class="option-item flexflex">
+                                <div class="option-title">学校附近</div>
+                                <div class="option-box flexflex flex1">
+                                    <div class="item flexcenter" :class="{ 'pitch': 0 == nearSchoolListValue }"
+                                        @click="selectOption('nearSchool', 0)">不限</div>
+                                    <div class="item flexcenter" v-for="item in nearSchoolList"
+                                        :class="{ 'pitch': item['id'] == nearSchoolListValue }"
+                                        @click="selectOption('nearSchool', item.id)">{{ item['name']
+                                        }}</div>
+                                </div>
+                            </div>
+                            <div class="option-item flexflex">
+                                <div class="option-title">租金</div>
+                                <div class="option-box flexacenter flex1 option-input-box">
+                                    <input class="option-input" type="number" v-model="rent_min" /> ~ <input
+                                        class="option-input" type="number" v-model="rent_max" /> HK$/月
+                                </div>
+                            </div>
+
+                            <div class="option-item flexflex">
+                                <div class="option-title">房型</div>
+                                <div class="option-box flexflex flex1">
+                                    <div class="item flexcenter" :class="{ 'pitch': 0 == roomTypeValue }"
+                                        @click="selectOption('roomType', 0)">不限</div>
+                                    <div class="item flexcenter" :class="{ 'pitch': item['id'] == roomTypeValue }"
+                                        v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{
+                                            item['name'] }}</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': 0 == brandValue }"
+                                        @click="selectOption('brand', 0)">不限</div>
+                                    <div class="item flexcenter" :class="{ 'pitch': item['id'] == brandValue }"
+                                        v-for="item in brandList" @click="selectOption('brand', 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': 0 == roomlistingsValue }"
+                                        @click="selectOption('roomlistings', 0)">不限</div>
+                                    <div class="item flexcenter" :class="{ 'pitch': item['id'] == roomlistingsValue }"
+                                        v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">{{
+                                            item['name'] }}</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="screen-footer flexacenter">
                         <div class="quantity flexacenter">
                             共 <b class="b">43</b> 个品牌公寓
                         </div>
 
-                        <div class="sort">最新发布</div>
-
                     </div>
-
-                    <!-- <div class="seach-info-box dis-f" v-if="routePath === '/'"> -->
-                    <!-- <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length">
-                        </seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
-                            v-if="seachArea.data.length"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
-                            v-if="allHireType.data.length"></seachInfo> -->
-                    <!-- </div> -->
-                    <!--  -->
-                    <!-- <div
-                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'" :count="counti">
-                        <selectTabBox></selectTabBox>
-                        {{ counti }}
-                    </div> -->
                 </div>
             </div>
         </div>
@@ -97,11 +142,7 @@
   
 <script setup>
 import { ref, watchEffect, reactive, defineProps } from 'vue';
-import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
-import selectTabBox from "../selectTabBox/selectTabBox.vue";
-import { useRoute } from 'vue-router';
 import store from '../../store/index';
-import api from "../../utils/api";
 
 const props = defineProps({
     count: {
@@ -109,7 +150,13 @@ const props = defineProps({
         default: 0
     }
 })
-let counti = ref(0)
+
+const emit = defineEmits(['close'])
+
+let state = ref('pack') // 筛选状态  unfold 展开  pack 收起
+
+let rent_min = ref(null) // 租金
+let rent_max = ref(null) // 租金
 
 //搜索框
 let seachValue = ref('')
@@ -117,49 +164,61 @@ let historyShow = ref(false);
 let setHistoryShow = () => {
     historyShow.value = !historyShow.value
 }
-let seachSchoolBtn = reactive({ data: [] });//学校地区
+let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
-let hireType = {};//整租
+let nearSchoolListValue = ref(0); //学校附近选中值
-let allHireType = {};//合租
+
-let seachArea = {};//区域找房
+let roomTypeList = reactive([]); // 房型
+let roomTypeValue = ref(0); //学校附近选中值
+
+let roomlistingsList = reactive([]);   // 楼型
+let roomlistingsValue = ref(0); //学校附近选中值
+
+let brandList = reactive([]);
+let brandValue = ref(0); //学校附近选中值
+
+
 let historyArr = reactive({ data: [] })//历史查找记录
 let hotArr = reactive({ data: [] })
 
-//获取区域下列数据
-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 = useRoute()
-let routePath = ref('')
-console.log("path", route.path);
-routePath.value = route.path
 
 watchEffect(() => {
-    seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
+    nearSchoolList = store.state.apartment.school || []
-    hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
+    roomTypeList = store.state.apartment.roomtype || []
-    allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
+    roomlistingsList = store.state.apartment.roomlistings || []
-    seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
+    brandList = store.state.apartment.brand || []
-    if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
+
     hotArr.data = store.state.indexData.hotSearcheWords
-    counti.value = props.count
 })
 
+
 //获取历史搜索记录
 historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
 
 //搜索数据
-let seachList = () => {
+let seachList = () => localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
+
+
+// 选择选项
+const selectOption = (type, value) => {
+    switch (type) {
+        case 'nearSchool':
+            nearSchoolListValue.value = value
+            break;
+        case 'roomType':
+            roomTypeValue.value = value
+            break;
+        case 'brand':
+            console.log("djkdkdk");
+            brandValue.value = value
+            break;
+        case 'roomlistings':
+            roomlistingsValue.value = value
+            break;
+        default:
+            break;
+    }
+
 
-    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
 }
 
 
@@ -218,7 +277,6 @@ defineExpose({
             padding: 20px;
             position: relative;
             justify-content: end;
-            border-bottom: 1px solid #ebebeb;
 
             .intermediary-btn {
                 background: rgba(241, 245, 247, 1);
@@ -391,6 +449,7 @@ defineExpose({
     height: 60px;
     font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
     background-color: rgba(246, 246, 246, 1);
+    cursor: pointer;
 
     b {
         color: #000000;
@@ -409,14 +468,29 @@ defineExpose({
 
 }
 
+.pack-up {
+    font-size: 14px;
+    color: #555555;
+    height: 40px;
+    background-color: rgba(246, 246, 246, 1);
+    border-bottom: 1px solid #ebebeb;
+    cursor: pointer;
+
+    .icon {
+        width: 13px;
+        height: 7px;
+        transform: rotate(180deg);
+        margin-left: 10px;
+    }
+}
+
 .screen-footer {
     justify-content: space-between;
+    padding: 0 16px;
 
     .quantity {
-
         color: #555555;
         font-size: 15px;
-        padding: 0 16px;
         height: 72px;
         font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
 
@@ -425,7 +499,94 @@ defineExpose({
             color: #000000;
             margin: 0 5px;
         }
+    }
 
+}
+
+.option-area {
+    flex-wrap: wrap;
+    border-top: 1px solid #ebebeb;
+
+    .option-left,
+    .option-right {
+        width: 600px;
+
+        &:not(:last-of-type) {
+            border-right: 1px #ebebeb dashed;
+        }
+
+        .option-item {
+            // width: 540px;
+            padding-top: 24px;
+            padding-bottom: 20px;
+            margin: 0 30px 0 20px;
+
+            &:not(:last-of-type) {
+                border-bottom: 1px #ebebeb dashed;
+            }
+
+            .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;
+                    }
+                }
+
+                &.option-input-box {
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #555555;
+                    line-height: 20px;
+
+                    .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;
+                        }
+
+
+                    }
+                }
+            }
+        }
     }
 
 }

src/main.js

@@ -28,10 +28,11 @@ import {
 
 import 'element-plus/theme-chalk/index.css'
 import 'element-plus/dist/index.css'
-import 'element-plus/lib/locale/lang/zh-cn'
 import 'element-plus/theme-chalk/index.css'
+import locale from 'element-plus/lib/locale/lang/zh-cn';
 
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import api from "./utils/api";
 
 //引入封装Axios请求
@@ -46,6 +47,7 @@ api.index().then(res => {
     store.state.user = res.data.user
     store.state.nav = res.data.nav
     store.state.wechat = res.data.wechat
+    store.state.apartment = res.data.config.apartment
   }
 })
 
@@ -64,7 +66,9 @@ app.use(ElCarouselItem)
 app.use(ElBadge)
 app.use(ElDropdown)
 app.use(ElPopover)
-app.use(ElDatePicker)
+app.use(ElDatePicker, {
+  locale: zhCn
+})
 app.use(ElMessage)
 app.use(ElSkeleton)
 app.use(ElSkeletonItem)

src/store/index.js

@@ -8,6 +8,7 @@ export default createStore({
     user: {},  // 我的信息数据
     wechat: {}, // 微信号 二维码等数据
     nav: [],  // 顶部的导航数据
+    apartment: {}, // 公寓筛选的字段
   },
   getters: {
 

src/views/edit.vue

@@ -662,6 +662,8 @@
     <how :howBoxState="howBoxState" @close="howBoxState = false"></how>
 </template>
 <script>
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
+
 import aboutPop from '@/components/edit/about-pop.vue'
 import mapComponent from '@/components/edit/map.vue'
 import pageFooter from '@/components/footer/footer.vue'

src/views/housingView/apartment.vue

@@ -17,7 +17,6 @@
 </template>
   
 <script setup>
-
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "@/components/apartment/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
@@ -103,6 +102,9 @@ const handleScroll = () => {
     }
 };
 
+// 筛选组件的参数的中转
+// const handletransfer
+
 </script>
 <style lang="less" scoped>
 .screen-box {

src/views/housingView/intermediary.vue

@@ -12,7 +12,6 @@
                 </div>
             </div>
         </div>
-
     </div>
 </template>