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

提交

Browse Source
This commit is contained in:
A1300399510
2023-07-20 19:27:46 +08:00
parent 8cc4549dca
commit d5c86e2038
12 changed files with 274 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,22 +44,38 @@
</div>
</div>
</el-popover>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<div class="seach-btn dis-f al-item jus-x" @click="handleKeyword">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
</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>
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300"
trigger="click" :show-arrow="false"
popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
<template #reference>
<div class="tool-btn consult-btn flexcenter">
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
咨询小助手
</div>
</template>
<div class="consult-pop flexacenter">
<div class="consult-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
<div class="consult-QRcode flexcenter">
<img class="consult-QRcode-img" :src="wechat['wechatqrcode']" />
</div>
<div class="consult-hint">微信扫码添加好友</div>
<div class="consult-remark flexacenter">备注：<b>寄托租房</b></div>
</div>
<!-- <img class="QR-code" :src="wechat['wechatqrcode']" alt=""> -->
</el-popover>
</div>
<!-- 展示的 展开和隐藏按钮 -->
@@ -151,7 +167,6 @@
<div class="quantity flexacenter">
共 <b class="b">{{ count }}</b> 个品牌公寓
</div>
</div>
</div>
</div>
@@ -160,8 +175,14 @@
</template>
<script setup>
import { ref, watchEffect, reactive, defineProps, nextTick } from 'vue';
import { ref, toRefs, watchEffect, reactive, defineProps, nextTick } from 'vue';
import { useStore } from 'vuex';
import store from '../../store/index';
import { useRouter } from 'vue-router';
const usestore = useStore();
const { wechat } = toRefs(usestore.state);
const router = useRouter()
const props = defineProps({
count: {
@@ -234,13 +255,17 @@ const rentInput = () => clearingAmountState = false
// 点击历史搜索和热门推荐
const handleKeyword = value => {
pitchValue.value['keyword'] = value
seachList()
// pitchValue.value['keyword'] = value
if (!value) value = pitchValue.value['keyword']
router.push(`/seachPage?keyword=${value}`)
// seachList()
}
//搜索数据
let seachList = () => {
if (historyArr.value.indexOf(pitchValue.value['keyword']) == -1) {
if (historyArr.value.indexOf(pitchValue.value['keyword'] && pitchValue.value['keyword']) == -1) {
historyArr.value.unshift(pitchValue.value['keyword'])
storingHistory()
}
@@ -661,5 +686,66 @@ const selectOption = (type, value) => {
}
}
.el-popover.el-popper.consult-popover {
.consult-pop {
width: 300px;
height: 300px;
border-radius: 10px;
padding-top: 45px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
background-color: #fff;
flex-direction: column;
.consult-title {
font-size: 15px;
color: #555555;
margin-bottom: 24px;
b {
color: #000;
font-weight: 650;
margin: 0 5px;
}
}
.consult-QRcode {
width: 120px;
height: 120px;
border-radius: 20px;
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
margin-bottom: 20px;
background: #fff;
.consult-QRcode-img {
width: 100px;
height: 100px;
}
}
.consult-hint {
margin-bottom: 6px;
}
.consult-hint,
.consult-remark {
font-size: 13px;
color: #555555;
line-height: 18px;
}
.consult-remark {
b {
font-weight: 650;
color: #000000;
}
}
}
}
</style>