公寓筛选

src/assets/img/publicImage/triangle-black.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="6px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1124 -412 )">
+    <path d="M 9.814453125 0.197916666666667  C 9.93815104166667 0.32986111111111  10 0.48611111111111  10 0.666666666666667  C 10 0.847222222222222  9.93815104166667 1.00347222222222  9.814453125 1.13541666666667  L 5.439453125 5.80208333333333  C 5.31575520833333 5.93402777777778  5.16927083333333 6  5 6  C 4.83072916666667 6  4.68424479166667 5.93402777777778  4.560546875 5.80208333333333  L 0.185546875 1.13541666666667  C 0.0618489583333333 1.00347222222222  0 0.847222222222222  0 0.666666666666667  C 0 0.48611111111111  0.0618489583333333 0.32986111111111  0.185546875 0.197916666666667  C 0.309244791666667 0.0659722222222214  0.455729166666667 0  0.625 0  L 9.375 0  C 9.54427083333333 0  9.69075520833333 0.0659722222222214  9.814453125 0.197916666666667  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1124 412 )" />
+  </g>
+</svg>

src/components/apartment/seachModule.vue

@@ -0,0 +1,594 @@
+<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">
+                            <el-input class="search-input" v-model="seachValue" placeholder="搜索房源或输入房源ID"
+                                @keyup.enter='seachList' @blur="setHistoryShow" @focus="setHistoryShow"
+                                style="height:48px;width:460px;"></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 }">
+                                <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">
+                                                {{ item }}
+                                            </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">
+                                                {{ item }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tool-btn dis-f jus-x al-item add-btn">
+                            <img src="../../assets/homeImage/addBtn.png" class="img" alt="">
+                            发布房源
+                        </div>
+
+                        <div class="tool-btn consult-btn flexcenter">
+                            <img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
+                            咨询小助手
+                        </div>
+                    </div>
+
+                    <!-- 展示的 展开和隐藏按钮 -->
+                    <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
+                            class="screen-btn-text">楼型</div>
+                        <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>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+  
+<script setup>
+import { ref, watchEffect, reactive, defineProps } from 'vue';
+import store from '../../store/index';
+
+const props = defineProps({
+    count: {
+        type: Number,
+        default: 0
+    }
+})
+
+const emit = defineEmits(['close'])
+
+let state = ref('pack') // 筛选状态  unfold 展开  pack 收起
+
+let rent_min = ref(null) // 租金
+let rent_max = ref(null) // 租金
+
+//搜索框
+let seachValue = ref('')
+let historyShow = ref(false);
+let setHistoryShow = () => {
+    historyShow.value = !historyShow.value
+}
+let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
+let nearSchoolListValue = ref(0); //学校附近选中值
+
+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: [] })
+
+
+watchEffect(() => {
+    nearSchoolList = store.state.apartment.school || []
+    roomTypeList = store.state.apartment.roomtype || []
+    roomlistingsList = store.state.apartment.roomlistings || []
+    brandList = store.state.apartment.brand || []
+
+    hotArr.data = store.state.indexData.hotSearcheWords
+})
+
+
+//获取历史搜索记录
+historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
+
+//搜索数据
+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;
+    }
+
+
+}
+
+
+defineExpose({
+    historyShow,
+    seachValue
+})
+</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;
+}
+
+.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;
+
+    .seach-box {
+        background: #FFFFFF;
+        transform: translate(0, 3px);
+        border-radius: 16px;
+
+        .top-seach {
+            padding: 20px;
+            position: relative;
+            justify-content: end;
+
+            .intermediary-btn {
+                background: rgba(241, 245, 247, 1);
+            }
+
+            .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;
+
+                .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 {
+                    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;
+
+                    .btn {
+                        margin: 20px 30px 0 0;
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .location-box {
+                width: 80px;
+                height: 40px;
+                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: -47px;
+                left: -7px;
+            }
+
+            .seach-btn {
+                width: 100px;
+                height: 48px;
+                background-color: rgba(98, 177, 255, 1);
+                border-radius: 0 8px 8px 0;
+                line-height: 48px;
+                cursor: pointer;
+                color: #000;
+                font-size: 16px;
+                font-weight: 400;
+                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            }
+
+            .img {
+                width: 20px;
+                height: 20px;
+                object-fit: contain;
+                margin-right: 5px;
+            }
+
+
+
+            .tool-btn {
+                width: 160px;
+                height: 48px;
+                border-radius: 8px;
+                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                font-size: 16px;
+                color: #000000;
+                line-height: 48px;
+                cursor: pointer;
+
+                &.add-btn {
+                    background: rgba(253, 218, 85, 1);
+                    margin-left: 20px;
+                }
+
+                &.consult-btn {
+                    background: rgba(144, 216, 72, 1);
+                    margin-left: 20px;
+
+                    .consult-icon {
+                        width: 22px;
+                        height: 22px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+
+        .seach-info-box {
+            padding: 20px 10px;
+            justify-content: space-around;
+            flex-wrap: wrap;
+        }
+    }
+}
+
+.search-input {
+    /deep/ .el-input__wrapper {
+        border-radius: 8px 0 0 8px;
+        box-shadow: none;
+        background-color: rgba(246, 246, 246, 1);
+        border: 1px solid rgba(235, 235, 235, 1);
+        border-right: none;
+
+        .el-input__inner {
+            &::placeholder {
+                color: #7f7f7f;
+            }
+        }
+    }
+}
+
+.screen-btn {
+    font-size: 15px;
+    color: #d7d7d7;
+    line-height: 21px;
+    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;
+    }
+
+    .screen-btn-text {
+        color: #555555;
+        margin: 0 10px;
+    }
+
+    .triangle {
+        width: 10px;
+        height: 6px;
+        margin-left: 10px;
+    }
+
+}
+
+.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;
+        height: 72px;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+
+        .b {
+            font-weight: 700;
+            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;
+                        }
+
+
+                    }
+                }
+            }
+        }
+    }
+
+}
+</style>
+  

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

@@ -1,7 +1,11 @@
 <template>
     <div>
         <pageTopBar></pageTopBar>
-        <!-- <seachModule></seachModule> -->
+        <!-- 筛选 -->
+        <div class="screen-box wid1200">
+            <seach-module></seach-module>
+        </div>
+
         <div class="list wid1200 flexflex" ref="gridContainer">
             <apartment-item v-for="item in list" :item="item"></apartment-item>
         </div>
@@ -13,9 +17,8 @@
 </template>
   
 <script setup>
-
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
-import seachModule from "../../components/seachModule/seachModule.vue";
+import seachModule from "@/components/apartment/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import apartmentItem from '@/components/public/apartment-item.vue';
 import haveQuestions from '@/components/public/have-questions.vue'
@@ -41,7 +44,7 @@ let masonryInstance = null
 onMounted(() => {
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: '.item',
-        gutter: 10
+        gutter: 20
     });
 
     getData()
@@ -57,8 +60,8 @@ let page = 1
 const getData = () => {
 
     if (page == 0) return
-    
-    
+
+
     loading = ElLoading.service({
         lock: true,
         text: 'Loading',
@@ -74,11 +77,11 @@ const getData = () => {
         page = data.page * data.limit >= data.count ? 0 : page + 1,
 
 
-        nextTick(() => {
-            masonryInstance.reloadItems();
-            masonryInstance.layout();
-            loading.close()
-        })
+            nextTick(() => {
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+                loading.close()
+            })
     }).catch(err => {
         loading.close()
     })
@@ -99,8 +102,15 @@ const handleScroll = () => {
     }
 };
 
+// 筛选组件的参数的中转
+// const handletransfer
+
 </script>
 <style lang="less" scoped>
+.screen-box {
+    margin: 0 auto 20px;
+}
+
 .list {
     margin: 0 auto;
     flex-wrap: wrap;

src/views/housingView/intermediary.vue

@@ -12,10 +12,9 @@
                 </div>
             </div>
         </div>
-
     </div>
 </template>
-  
+
 <script setup>
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";