From a17df0ca8ab7cbacd83612d746215402dbb06e6e Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Wed, 19 Jul 2023 18:25:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=AF=93=E7=AD=9B=E9=80=89-=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apartment/seach.vue | 618 +++++++++++++++++++++++++++++
 1 file changed, 618 insertions(+)
 create mode 100644 src/components/apartment/seach.vue

diff --git a/src/components/apartment/seach.vue b/src/components/apartment/seach.vue
new file mode 100644
index 0000000..52fcaed
--- /dev/null
+++ b/src/components/apartment/seach.vue
@@ -0,0 +1,618 @@
+<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" v-if="props.seachPage">
+                        <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 == 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>
+                            </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="pitchValue['rent_min']" /> ~ <input
+                                        class="option-input" type="number" v-model="pitchValue['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 == 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>
+                            </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 == 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)">
+                                        {{ 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 == 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)">{{
+                                            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" v-if="props.seachPage">
+                        <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
+    },
+    seachPage: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const emit = defineEmits(['handleTransfer'])
+
+let state = ref('pack') // 筛选状态  unfold 展开  pack 收起
+
+//搜索框
+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 pitchValue = ref({
+    companyid: 0,
+    roomtype: 0,
+    rent_min: null,  // 租金
+    rent_max: null,  // 租金
+    school: 0,
+    roomlistings: 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':
+            pitchValue.value['school'] = value
+            break;
+        case 'roomType':
+            pitchValue.value['roomtype'] = value
+            break;
+        case 'brand':
+            pitchValue.value['companyid'] = value
+            break;
+        case 'roomlistings':
+            pitchValue.value['roomlistings'] = value
+            break;
+        default:
+            break;
+    }
+
+    console.log('pitchValue', pitchValue.value);
+    emit('handleTransfer', pitchValue)
+
+}
+//清除选项
+let cleanSelect = () => {
+    pitchValue.value = {
+        companyid: 0,
+        roomtype: 0,
+        rent_min: null,  // 租金
+        rent_max: null,  // 租金
+        school: 0,
+        roomlistings: 0,
+    }
+}
+
+defineExpose({
+    historyShow,
+    seachValue,
+    cleanSelect
+})
+</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>
+  
\ No newline at end of file