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

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	src/router/index.js
This commit is contained in:
A1300399510
2023-07-14 17:28:38 +08:00
parent 89d8462f7b adfa0156e0
commit bfac0867b5
12 changed files with 403 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -12,14 +12,14 @@
<img class="apartment-img" :src="itemData.imageLocal || itemData.image"
v-if="itemData.type === 'housing' || itemData.type === 'apartment'" />
<div class="authentication-box"
v-if="(itemData.type === 'housing' && itemData.verified) || (itemData.type === 'apartment' && itemData.isintermediary)">
v-if="(itemData&&itemData.type === 'housing' && itemData&&itemData.verified) || (itemData&&itemData.type === 'apartment' &&itemData&& itemData.isintermediary)">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
</div>
</div>
<div class="long-title">
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData&&itemData.title }}
</div>
<div class="type-tab">
<span v-if="itemData.type === 'housing'">
@@ -49,22 +49,22 @@
<div class="suite-box" v-if="itemData.type === 'apartment'">
<div class="dis-f al-item jus-bet">
<div class="suite-type">
{{ itemData.specifications && itemData.specifications[0].title }}
{{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].value }}</span>
<span class="date">/月</span>
</div>
</div>
<div class="line"></div>
<div class="dis-f al-item jus-bet">
<div class="suite-type">
{{ itemData.specifications && itemData.specifications[1].title }}
{{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].value }}</span>
<span class="date">/月</span>
</div>
</div>

57
src/components/pageTopBar/pageTopBar.vue
View File

@@ -9,7 +9,15 @@
:class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
{{
item.name }}</div>
<img src="" class="user-img" alt="">
<div class="user-box">
<img src="" class="user-img" alt="">
<div class="user-out-box">
<div class="box-bg dis-f jus-x">
<div class="top-box"></div>
退出
</div>
</div>
</div>
</div>
</div>
<div class="dis-f jus-x al-item">
@@ -68,7 +76,7 @@ watchEffect(() => {
}
else if (res.name === '求房源') {
res.path = '/needHousing'
}
else if (res.name === '我的') {
@@ -86,7 +94,7 @@ let topTabSelect = (type, item) => {
}
//页面跳转
const router=useRouter()
const router = useRouter()
let tabBtnType = ref('/')
let changeTabBtnType = (item) => {
tabBtnType.value = item.path
@@ -248,6 +256,45 @@ tabBtnType.value = route.path
height: 280px;
}
.user-box:hover .user-out-box {
display: block;
}
.user-out-box {
color: #fff;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10px;
position: absolute;
bottom: -35px;
display: none;
}
.user-box {
position: relative;
.top-box {
border-radius: 2px;
width: 8px;
height: 8px;
background: #000;
position: absolute;
top: -4px;
transform: rotate(45deg)
}
.box-bg {
width: 32px;
height: 28px;
line-height: 28px;
border-radius: 5px;
background: #000;
text-align: center;
position: relative;
}
}
/deep/.el-carousel__arrow {
border: 2px solid #545454;
width: 50px;
@@ -287,5 +334,9 @@ tabBtnType.value = route.path
color: #7F7F7F;
text-align: left;
}
.dropdown {
background: #000;
}
</style>

71
src/components/seachModule/seachModule.vue
View File

@@ -12,8 +12,8 @@
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' @blur="setHistoryShow"
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<el-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="">
搜索
@@ -51,23 +51,29 @@
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源
</div>
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath==='/personHousing'">
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/personAuthentication.svg" class="btn-qrcode" alt="">
</div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath==='/intermediaryHousing'">
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
v-if="routePath === '/intermediaryHousing'">
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/intermediaryAuthentication.svg" class="btn-qrcode" alt="">
</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>
<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>
<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'">
<div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
<selectTabBox></selectTabBox>
</div>
</div>
@@ -77,7 +83,7 @@
</template>
<script setup>
import { ref, watchEffect,reactive,watch } from 'vue';
import { ref, watchEffect, reactive, watch } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRoute } from 'vue-router';
@@ -90,31 +96,31 @@ 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 seachSchoolBtn = reactive({ data: [] });//学校地区
let hireType = {};//整租
let allHireType = {};//合租
let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
//监听路由
const route = useRoute()
let routePath=ref('')
routePath.value=route.path
let routePath = ref('')
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 : []
hotArr.data=store.state.indexData.hotSearcheWords
hotArr.data = store.state.indexData.hotSearcheWords
})
//获取历史搜索记录
historyArr.data=JSON.parse(localStorage.getItem('historyArr'))||[]
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据
let seachList=()=>{
let seachList = () => {
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
@@ -154,6 +160,20 @@ defineExpose({
justify-content: space-between;
}
.authentication-btn:hover .btn-qrcode {
display: block;
}
.btn-qrcode {
width: 390px;
height: 612px;
position: absolute;
right: -14px;
top: 45px;
z-index: 333;
display: none;
}
.seach-box-bg {
background: #d7d7d7 !important;
background: inherit;
@@ -175,9 +195,11 @@ defineExpose({
position: relative;
justify-content: end;
border-bottom: 1px solid #ebebeb;
.intermediary-btn{
background:rgba(241, 245, 247, 1);
.intermediary-btn {
background: rgba(241, 245, 247, 1);
}
.authentication-btn {
width: 160px;
height: 48px;
@@ -190,6 +212,7 @@ defineExpose({
box-shadow: none;
margin-left: 20px;
cursor: pointer;
position: relative;
.text-img {
width: 100px;
@@ -199,7 +222,7 @@ defineExpose({
.code-img {
width: 20px;
height: 20px;
margin-left:8px;
margin-left: 8px;
}
}

180
src/components/selectTabBox/selectTabBox.vue
View File

@@ -1,9 +1,10 @@
<template>
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
<div class="select-box s-w-50 bor-r">
<div class="dis-f bor-b-das">
<div class="tab-title">地理位置</div>
<div class="tab-text">
<div class="dis-f bor-b-das" :class="{'al-item housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div>
<!-- 非求房源页面 -->
<div class="tab-text" v-if="routePath!=='/needHousing'">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div>
@@ -61,9 +62,38 @@
</div>
</div>
</div>
<!-- 求房源 -->
<div class="need-housing-box dis-f al-item" v-if="routePath==='/needHousing'">
<div class="select-tab-info" style="margin-top:0;">
<div class="housing-info-box info-box" v-show="selectPosition === 'region'" style="position: relative;padding: 0;height:30px;width: 420px;">
<div class="check-none dis-f al-item btn"
:class="[{'btn-check':selectTabCheck.id === item.id}]"
style="margin-right:10px;"
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
<div>
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
}}
</div>
</div>
</div>
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt="" v-show="i!==0">
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
</checkBoxGroup>
</div>
</div>
</div>
</div>
</div>
<div class="dis-f pad-t-b-15 bor-b-das">
<div class="tab-title">出租方式</div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</div>
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
<div v-if="item.title !== '不限'">
@@ -97,12 +127,20 @@
</div>
</div>
<div class="dis-f al-item" style="padding:25px 0;">
<div class="tab-title">租金</div>
<div class="dis-f al-item rent-box">
<input type="text" class="input" v-model="rentObj.min">
<span class="tab-icon">~</span>
<input type="text" class="input" v-model="rentObj.max">
<span class="unit-box">HK$/月</span>
<div class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div>
<div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item">
<input type="text" class="input" v-model="rentObj.min">
<span class="tab-icon">~</span>
<input type="text" class="input" v-model="rentObj.max">
<span class="unit-box">HK$/月</span>
</div>
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max">
<div class="img-box dis-f jus-x al-item">
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
</div>
清除金额
</div>
</div>
</div>
</div>
@@ -119,7 +157,7 @@
</div>
</div>
<div class="dis-f bor-b-das pd-t-20">
<div class="tab-title">性别</div>
<div class="tab-title">{{routePath==='/needHousing'?'求租者性别':'性别'}}</div>
<div class="select-btn-box">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
@@ -155,9 +193,9 @@
</div>
<div class="btm-list">
<div class="dis-f al-item">
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title"> &nbsp | &nbsp</span>
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
<div class="dis-f al-item">
<div v-show="selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-show="selectTabCheck.id&&selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
{{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
@@ -173,6 +211,7 @@
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
const { proxy } = getCurrentInstance()
@@ -199,15 +238,15 @@ let list = [{
}, {
title: '九龙',
id: 2,
data:[{
title:'1',
id:'1'
},{
title:'2',
id:'2'
},{
title:'3',
id:'3'
data: [{
title: '1',
id: '1'
}, {
title: '2',
id: '2'
}, {
title: '3',
id: '3'
}]
}]
//按区域/学校选择的地区
@@ -266,7 +305,7 @@ let setSelectData = (id, data = [], title) => {
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data=[]
selectData.data = []
showSelect.value = true
}
//取消按钮
@@ -293,10 +332,17 @@ let watchData = (data) => {
// selectData.data = data
// console.log(selectData)
}
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
console.log(123,routePath.value)
//底部删除按钮
let deleteSelect = (id)=>{
let deleteSelect = (id) => {
console.log(id)
selectData.data.splice(id,1)
selectData.data.splice(id, 1)
}
@@ -310,8 +356,8 @@ let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方
let setHireId = (title) => {
hireTypeObj.hireId = title
hireTypeObj.id=''
hireTypeObj.title=''
hireTypeObj.id = ''
hireTypeObj.title = ''
}
let dropdownCommand = (obj) => {
@@ -385,6 +431,16 @@ img {
.bor-b-das {
border-bottom: 1px dashed #ebebeb;
}
.housing-pd{
padding:5px 0 25px 0;
}
.housing-pd-25{
padding:0 25px;
}
.jus-bet {
justify-content: space-between;
}
.dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -434,6 +490,10 @@ img {
.select-box {
padding: 20px 24px 0px 25px;
.needHousing-box{
height:50px;
}
.select-tab-info {
position: relative;
margin-top: 5px;
@@ -526,6 +586,14 @@ img {
}
}
.housing-info-box{
display: flex;
align-items: center;
height:30px;
position: relative;
top:0 !important;
}
.info-box {
position: absolute;
top: 5px;
@@ -608,12 +676,21 @@ img {
height: 30px;
line-height: 30px;
margin-right: 35px;
width: 60px;
width: 70px;
}
.info-bor-b {
border-bottom: 1px dashed #ebebeb;
}
.need-housing-box{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
height:50px;
}
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -686,7 +763,7 @@ img {
}
.btn-check {
color: #50E3C2;
color: #50E3C2 !important;
border: 1px solid #50E3C2;
background: #eefcf9;
}
@@ -698,6 +775,37 @@ img {
font-style: normal;
font-size: 14px;
color: #555555;
width: 455px;
.clean-btn {
width: 96px;
height: 30px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 50px;
font-family: 'ArialMT', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
letter-spacing: normal;
color: #333333;
.img-box {
width: 14px;
height: 14px;
border: 1px solid #333;
margin-right: 5px;
border-radius: 50%;
position: relative;
.img {
position: absolute;
width: 5px;
height: 5px;
}
}
}
.tab-icon {
margin: 0 10px;
@@ -717,6 +825,7 @@ img {
border-style: solid;
border-color: rgba(179, 179, 179, 1);
border-radius: 10px;
padding:0 10px;
}
}
@@ -735,11 +844,12 @@ img {
font-style: normal;
font-size: 14px;
color: #50e3c2;
margin-left:10px;
.img{
width:8px;
height:8px;
margin-left:8px;
margin-left: 10px;
.img {
width: 8px;
height: 8px;
margin-left: 8px;
}
}