From 983571d5c52762ed994abc46b74847d058bccbfb Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Mon, 17 Jul 2023 15:02:20 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/publicImage/consult-icon.png   | Bin 0 -> 1230 bytes
 src/assets/img/publicImage/triangle-black.svg |   6 +
 src/components/apartment/seachModule.vue      | 433 ++++++++++++++++++
 src/views/housingView/apartment.vue           |  28 +-
 4 files changed, 457 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/img/publicImage/consult-icon.png
 create mode 100644 src/assets/img/publicImage/triangle-black.svg
 create mode 100644 src/components/apartment/seachModule.vue

diff --git a/src/assets/img/publicImage/consult-icon.png b/src/assets/img/publicImage/consult-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47637e4a9f4a23622001aafbc586c28867cc9f9c
GIT binary patch
literal 1230
zcmV;<1Tp)GP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91K%fHv1ONa40RR91KmY&$07g+lumAuAI7vi7RCodHTR&41K@@-Qpdg_T
zhjGTnAr^$Fg|P`}L;M8bCjdG-@e>%o0hU(6Copt&gvJ4?Sg0X1VYF~Yhk=4z#(}Kw
zog5_lC%F&^xy$YhbGvWfd;5OBeYcm}JpgR63|Iy%0|U$e2F0FEXUG1!?rgmd^JJ3{
zAhJPid!dJb1sbQ~IFSFgyS*NC%s>RBk~0egI0r%`f;zrYJ;VwTk}H+B*4o9<k^r9d
z+Ohkw-)6fVsPle=d@LScDi#Ze=Q62cB!I!Y$JGtePfIpoYZhap@#iKI91|Lz`3Qh#
zcxks<{b0g5r0Ymc&MZ>eFYEe3DofoNzqkMA;Ac^eUz-5}#T!{M>}?Y!g@6ai%zS88
z`%Y$so?sp}$wnbSfcKo2)S}VUVN(bI0f}h9)u7N|QwSiIW;Ldf5D~V=G7yCTSs`NW
zF&WRG5g_9SOMpVjfC+2{4A_J#aBT)Clnj`_X22Cp_z{A$M4Jw``Ok6iHTgVh<M-SK
zhn)KXZOA3Q8;0R0yL&t6AiMyCFKxzY+pX*fO-*L#7h~|k0e#*3-1MHEO3h@&X??@s
z<%mG1OQo$!V?V#C)dlb-jJ6=c+fsQaCwERIGevrTQGVjedVZV9^Xq)=?iN5?m%+1B
z0#~3>Ho2}AT$RDI&iC?8zSWHCz_T3+XN9kqEnN|SAev^rDF}o@Q~RueC=PXUmJw-s
zf3(YMvVkEm_Zf{YI=Ui20H!ZoNi_jkN#Zqyz%iYiWx|xot+wM&Az|_tMBWtv6!F}n
z$!7`)-Wp(htriQ^uLOOzTch~$L8OwIoL_Ie3aGzoY<F6xtZOcvE`nrzi0CYj#7Df-
z7}s?dpiYM<0LGbaw5io<V}ghbU_)lOG7Lj&yzV@lnw~rTKaP<!GEj=V2wnvN${_tL
zkO}DS7U*ZB0b{cS1SBf5YBmERJGB9U*$fCsRAkj`21Ish^}v*U3MB*Rr{SjFHvCe;
zR+LdF1kgKaMOKPTTZ2s@fLO{$2CxJ~hmB-vNhPN%^oBN}_Jmi0i2J4Tc0xv=WPqn2
zFefX9zHPvy%>V|Qn#>evcXT%Nz!?DTUGA2*=XF^089<sNqw)Dxo0K|deJP`@^H@B#
zXo}590Do9WUs+};MK(>weJ`h(XAGu~BsqTLEzk&#zZ<0e=UiA8MqcoM?)lQ*)@maT
zT|E#1z9Da1(z-yO(ec;f{k1-LnM%)jy5_wz20!RF*NzBi<4fD^eREu`7CJe-@g4Dz
zTaa1w^)GY1b^<u4%aG6u@EluD2=Ga$Ro!Bcb);9|drANg#)l{;a8jV^EpF=y9fGdW
zIpCtM?>b~X%K$(4RwVQqJjc{?0(ejz2{!?rW6}P<0C!wx`F-%?*WK}nPj#$6rEy|3
s5AW&3=H+#cX?<G;ECZGS%YcS~fA}3cP5T+lod5s;07*qoM6N<$f{}0(cmMzZ

literal 0
HcmV?d00001

diff --git a/src/assets/img/publicImage/triangle-black.svg b/src/assets/img/publicImage/triangle-black.svg
new file mode 100644
index 0000000..902b1aa
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/apartment/seachModule.vue b/src/components/apartment/seachModule.vue
new file mode 100644
index 0000000..eb857c2
--- /dev/null
+++ b/src/components/apartment/seachModule.vue
@@ -0,0 +1,433 @@
+<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">
+                        <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="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>
+    </div>
+</template>
+  
+<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: {
+        type: Number,
+        default: 0
+    }
+})
+let counti = ref(0)
+
+//搜索框
+let seachValue = ref('')
+let historyShow = ref(false);
+let setHistoryShow = () => {
+    historyShow.value = !historyShow.value
+}
+let seachSchoolBtn = reactive({ data: [] });//学校地区
+let hireType = {};//整租
+let allHireType = {};//合租
+let seachArea = {};//区域找房
+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 : []
+    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
+    counti.value = props.count
+})
+
+//获取历史搜索记录
+historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
+
+//搜索数据
+let seachList = () => {
+
+    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
+}
+
+
+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;
+            border-bottom: 1px solid #ebebeb;
+
+            .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);
+
+    b {
+        color: #000000;
+    }
+
+    .screen-btn-text {
+        color: #555555;
+        margin: 0 10px;
+    }
+
+    .triangle {
+        width: 10px;
+        height: 6px;
+        margin-left: 10px;
+    }
+
+}
+
+.screen-footer {
+    justify-content: space-between;
+
+    .quantity {
+
+        color: #555555;
+        font-size: 15px;
+        padding: 0 16px;
+        height: 72px;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+
+        .b {
+            font-weight: 700;
+            color: #000000;
+            margin: 0 5px;
+        }
+
+    }
+
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/housingView/apartment.vue b/src/views/housingView/apartment.vue
index dc49617..32c37b3 100644
--- a/src/views/housingView/apartment.vue
+++ b/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>
@@ -15,7 +19,7 @@
 <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 +45,7 @@ let masonryInstance = null
 onMounted(() => {
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: '.item',
-        gutter: 10
+        gutter: 20
     });
 
     getData()
@@ -57,8 +61,8 @@ let page = 1
 const getData = () => {
 
     if (page == 0) return
-    
-    
+
+
     loading = ElLoading.service({
         lock: true,
         text: 'Loading',
@@ -74,11 +78,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()
     })
@@ -101,6 +105,10 @@ const handleScroll = () => {
 
 </script>
 <style lang="less" scoped>
+.screen-box {
+    margin: 0 auto 20px;
+}
+
 .list {
     margin: 0 auto;
     flex-wrap: wrap;