|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<view class="Locations"> |
|
|
|
|
|
|
|
<map style="width: 100%;height: 60vh" |
|
|
|
<map style="width: 100%;height: 60vh;pointer-events: auto;" |
|
|
|
:layer-style='5' |
|
|
|
:show-location='true' |
|
|
|
:latitude="position.latitude" |
|
|
|
@ -24,7 +24,7 @@ |
|
|
|
<!-- 搜索功能 --> |
|
|
|
<view class="search-container"> |
|
|
|
<view class="se-bgc-white se-pb-20 se-pt-30 se-px-40"> |
|
|
|
<uv-search @search="onSearch()" placeholder="搜索租房信息" :showAction="false" v-model="keyword"></uv-search> |
|
|
|
<uv-search @search="onSearch" placeholder="搜索租房信息" :showAction="false" v-model="keyword" :disabled="false"></uv-search> |
|
|
|
</view> |
|
|
|
<view class="se-pb-10 se-px-40 se-bgc-white"> |
|
|
|
<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#1EC77A" |
|
|
|
@ -46,55 +46,10 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-tabs :list="houseTypeList" :activeStyle="{ color: '#1EC77A', fontWeight: 600 }" lineColor="#1EC77A" |
|
|
|
lineHeight="8rpx" lineWidth="50rpx" keyName="title" :current="currentHouseType" |
|
|
|
@click="onClickHouseType"></uv-tabs> |
|
|
|
|
|
|
|
|
|
|
|
<view class="Locations-list"> |
|
|
|
<!-- 房源列表 --> |
|
|
|
<view v-if="list.length > 0"> |
|
|
|
<view @click="onDetail(item)" class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex" |
|
|
|
v-for="(item, index) in list" :key="index"> |
|
|
|
<view class="se-pos se-w-260 se-h-180"> |
|
|
|
<image v-if="item.iconImage" class="se-a-80 se-pos-lt" :src="item.iconImage" mode=""></image> |
|
|
|
<image class="se-w-260 se-h-180 se-br-10" :src="item.images[0]" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="se-pl-10 se-w-p-100"> |
|
|
|
<view class="se-c-black se-fs-28"> |
|
|
|
{{ item.title }} |
|
|
|
</view> |
|
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66"> |
|
|
|
<text>{{ item.homeType }}</text> |
|
|
|
<text>{{ item.timeGo }}年</text> |
|
|
|
</view> |
|
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10"> |
|
|
|
<template v-if="item.iconTitles.length > 0"> |
|
|
|
<view class="se-flex"> |
|
|
|
<view |
|
|
|
class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5 se-mr-10" |
|
|
|
v-for="(items, indexs) in item.iconTitles" :key="indexs"> |
|
|
|
{{ items }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<view></view> |
|
|
|
</template> |
|
|
|
<view class="se-c-66 se-flex se-flex-ai-c"> |
|
|
|
<uv-icon name="eye"></uv-icon> |
|
|
|
<text class="se-ml-5 se-fs-18">{{ item.num }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10"> |
|
|
|
<text class="se-c-red se-fs-24 se-fw-6 se-toe-1">￥{{ item.price }}元/{{ item.unit }}</text> |
|
|
|
<text class="se-c-66 se-fs-22 se-toe-1">{{ item.address }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-empty v-else text="没有哦" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty> |
|
|
|
<homeList :list="list"></homeList> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
@ -104,7 +59,11 @@ |
|
|
|
<script> |
|
|
|
import { housePageList, houseType, houseArea, houseIconClass, housePrice, houseYear } from "@/common/api.js" |
|
|
|
import { getInfo } from "@/common/api.js" |
|
|
|
import homeList from "@/components/home/homeList.vue" |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
homeList |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
scale: 12, //缩放级别 |
|
|
|
@ -166,7 +125,7 @@ export default { |
|
|
|
activeName: 'region', |
|
|
|
// 筛选条件 |
|
|
|
priceId: null, |
|
|
|
typeId: null, |
|
|
|
classId: null, |
|
|
|
yearId: null |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -447,7 +406,7 @@ export default { |
|
|
|
title: that.keyword, // 关键词搜索 |
|
|
|
areaId: that.areaId, // 区域筛选 |
|
|
|
priceId: that.priceId, // 租金筛选 |
|
|
|
typeId: that.typeId, // 类型筛选 |
|
|
|
classId: that.classId, // 类型筛选 |
|
|
|
yearId: that.yearId // 年限筛选 |
|
|
|
} |
|
|
|
|
|
|
|
@ -531,7 +490,11 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理搜索 |
|
|
|
onSearch() { |
|
|
|
onSearch(value) { |
|
|
|
// 如果传入了搜索值，使用传入的值，否则使用当前keyword |
|
|
|
if (value !== undefined) { |
|
|
|
this.keyword = value; |
|
|
|
} |
|
|
|
console.info('搜索关键词:', this.keyword) |
|
|
|
this.pageNo = 1 |
|
|
|
this.list = [] |
|
|
|
@ -539,19 +502,59 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
// 选择筛选菜单 |
|
|
|
selectMenu(name) { |
|
|
|
selectMenu(e) { |
|
|
|
const { name, active, type } = e; |
|
|
|
this.activeName = name; |
|
|
|
// type 等于1 的需要特殊处理：type不等于1可以忽略 |
|
|
|
if (type == 1) { |
|
|
|
this.clickItem({ |
|
|
|
name: 'vip_type', |
|
|
|
label: 'VIP文档', |
|
|
|
value: e.active ? 1 : 0 |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const find = this.result.find(item => item.name == this.activeName); |
|
|
|
if (find) { |
|
|
|
const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value); |
|
|
|
this[this.activeName].activeIndex = findIndex; |
|
|
|
} else { |
|
|
|
this[this.activeName].activeIndex = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 点击筛选项 |
|
|
|
clickItem(item) { |
|
|
|
console.log('选择筛选项：', item); |
|
|
|
// 更新对应的筛选值 |
|
|
|
this[this.activeName].label = item.label; |
|
|
|
this[this.activeName].value = item.value; |
|
|
|
clickItem(e) { |
|
|
|
let { label, value } = e; |
|
|
|
|
|
|
|
// 处理筛选结果数组 |
|
|
|
const findIndex = this.result.findIndex(item => item.name == this.activeName); |
|
|
|
if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) { |
|
|
|
label = this[this.activeName].label; |
|
|
|
} |
|
|
|
|
|
|
|
// 已经存在筛选项 |
|
|
|
if (findIndex > -1) { |
|
|
|
this.$set(this.result, findIndex, { |
|
|
|
name: this.activeName, |
|
|
|
label, |
|
|
|
value |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.result.push({ |
|
|
|
name: this.activeName, |
|
|
|
label, |
|
|
|
value |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 过滤掉默认值 |
|
|
|
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1); |
|
|
|
|
|
|
|
console.log('筛选结果：', this.result); |
|
|
|
|
|
|
|
// 处理筛选逻辑 |
|
|
|
this.handleFilter(item); |
|
|
|
this.handleFilter({ label, value }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理筛选 |
|
|
|
@ -565,7 +568,7 @@ export default { |
|
|
|
} else if (this.activeName === 'rent') { |
|
|
|
this.priceId = item.value === 'all' ? null : item.value |
|
|
|
} else if (this.activeName === 'type') { |
|
|
|
this.typeId = item.value === 'all' ? null : item.value |
|
|
|
this.classId = item.value === 'all' ? null : item.value |
|
|
|
} else if (this.activeName === 'duration') { |
|
|
|
this.yearId = item.value === 'all' ? null : item.value |
|
|
|
} |
|
|
|
@ -585,7 +588,7 @@ export default { |
|
|
|
houseArea({}).then(response => { |
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
label: '全部区域', |
|
|
|
label: '全部', |
|
|
|
value: 'all' |
|
|
|
} |
|
|
|
] |
|
|
|
@ -609,7 +612,7 @@ export default { |
|
|
|
console.info('类型数据', response.result) |
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
label: '全部类型', |
|
|
|
label: '全部', |
|
|
|
value: 'all' |
|
|
|
} |
|
|
|
] |
|
|
|
@ -631,7 +634,7 @@ export default { |
|
|
|
housePrice({}).then(response => { |
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
label: '全部价格', |
|
|
|
label: '全部', |
|
|
|
value: 'all' |
|
|
|
} |
|
|
|
] |
|
|
|
@ -654,7 +657,7 @@ export default { |
|
|
|
console.info('年限数据', response.result) |
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
label: '全部年限', |
|
|
|
label: '全部', |
|
|
|
value: 'all' |
|
|
|
} |
|
|
|
] |
|
|
|
@ -697,7 +700,25 @@ export default { |
|
|
|
.Locations { |
|
|
|
|
|
|
|
.search-container { |
|
|
|
position: relative; |
|
|
|
background-color: #fff; |
|
|
|
z-index: 100; |
|
|
|
|
|
|
|
// 确保搜索框可以正常点击 |
|
|
|
.se-bgc-white { |
|
|
|
position: relative; |
|
|
|
z-index: 101; |
|
|
|
} |
|
|
|
|
|
|
|
// 确保下拉菜单可以正常显示和点击 |
|
|
|
/deep/ .uv-drop-down { |
|
|
|
position: relative; |
|
|
|
z-index: 102; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-drop-down-popup { |
|
|
|
z-index: 103 !important; |
|
|
|
} |
|
|
|
border-bottom: 1rpx solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
|
