mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
550 lines
13 KiB
Vue
550 lines
13 KiB
Vue
<template>
|
||
<view class="search-list-page">
|
||
<!-- 顶部导航栏 -->
|
||
<!-- <customNavbar title="搜索资产" /> -->
|
||
<u-navbar title="搜索资产" :autoBack="true" :background="background" title-color="#2D2B2C" back-icon-color="#2D2B2C">
|
||
</u-navbar>
|
||
<view class="search-list-content">
|
||
<!-- 筛选标签栏 -->
|
||
<view class="filter-dropdown-wrapper">
|
||
<u-sticky offset-top="0">
|
||
<view class="sticky" style="width: 100vw;">
|
||
<filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
|
||
:updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>
|
||
</view>
|
||
</u-sticky>
|
||
</view>
|
||
<!-- 搜索栏 -->
|
||
<view class="search-bar-wrapper">
|
||
<view class="search-bar">
|
||
<view class="city-select">杭州 <text class="icon-down"></text></view>
|
||
<view class="search-input">
|
||
<text class="icon-search"></text>
|
||
<input type="text" placeholder="请输入小区名称" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 标签组 -->
|
||
<view class="tag-group">
|
||
<view class="tag-item" :class="{ active: selectedTags.includes(tag) }"
|
||
v-for="(tag, index) in tagGroupList" :key="index" @click="onTagClick(tag)">
|
||
{{ tag }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-p-l-10 u-p-r-10 waterfall">
|
||
<u-waterfall v-model="flowList" ref="uWaterfall">
|
||
<template v-slot:left="{ leftList }">
|
||
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
||
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
|
||
@click="clickImage(item.id)" mode="aspectFill"></u-lazy-load>
|
||
<view class="item-title">{{ item.name }}</view>
|
||
<view class="item-desc">{{ item.houseType }} {{ item.footPrint }}㎡ {{ item.orientation }}</view>
|
||
<view class="item-tags">
|
||
<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
|
||
</view>
|
||
<view class="item-price">¥{{ item.rentFee }}/<text>月</text></view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right="{ rightList }">
|
||
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
||
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
|
||
@click="clickImage(item.id)" mode="aspectFill"></u-lazy-load>
|
||
<view class="item-title">{{ item.name }}</view>
|
||
<view class="item-desc">{{ item.houseType }} {{ item.footPrint }}㎡ {{ item.orientation }}</view>
|
||
<view class="item-tags">
|
||
<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
|
||
</view>
|
||
<view class="item-price">¥{{ item.rentFee }}/<text>月</text></view>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList"
|
||
style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
|
||
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
|
||
<u-no-network></u-no-network>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "@/common/config.js" // 全局配置文件
|
||
import searchData from '@/common/utils/searchData.js'; //筛选菜单数据
|
||
import filterDropdown from '@/components/zy/filterDropdown.vue';
|
||
export default {
|
||
components: {
|
||
filterDropdown
|
||
},
|
||
data() {
|
||
return {
|
||
indexArr: [],
|
||
valueArr: [],
|
||
defaultSelected: [],
|
||
filterData: [],
|
||
searchData: {},
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
scrollTop: 0,
|
||
houseList: [],
|
||
loadStatus: 'loadmore',
|
||
flowList: [],
|
||
// 标签组数据和选中状态
|
||
tagGroupList: ['全套家具', '配套齐全', '优选好房', '生活便利'],
|
||
selectedTags: [],
|
||
background: {
|
||
// 渐变色
|
||
backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
|
||
},
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
let type = option.type
|
||
let villageName = option.villageName
|
||
this.searchData = {}
|
||
if (type) {
|
||
this.searchData.type = type
|
||
}
|
||
if (villageName) {
|
||
this.searchData.villageName = villageName
|
||
}
|
||
// 获取房源数据
|
||
this.findHouseList();
|
||
// 获取小区数据
|
||
this.findVillageList()
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
onReachBottom() {
|
||
this.loadStatus = 'loading';
|
||
// 获取数据
|
||
this.findHouseList()
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.pageNum = 1
|
||
this.flowList = []
|
||
this.$refs.uWaterfall.clear();
|
||
// 获取数据
|
||
this.findHouseList();
|
||
// 关闭刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
// 标签点击事件
|
||
onTagClick(tag) {
|
||
// 检查标签是否已选中
|
||
const isSelected = this.selectedTags.includes(tag);
|
||
if (isSelected) {
|
||
// 如果已选中，则移除
|
||
this.selectedTags = this.selectedTags.filter(item => item !== tag);
|
||
} else {
|
||
// 如果未选中，则添加
|
||
this.selectedTags.push(tag);
|
||
}
|
||
// 这里可以添加根据标签筛选数据的逻辑
|
||
console.log('标签点击:', tag);
|
||
console.log('当前选中的标签:', this.selectedTags);
|
||
// 可以调用findHouseList方法重新加载数据，根据选中的标签进行筛选
|
||
// this.pageNum = 1;
|
||
// this.flowList = [];
|
||
// this.findHouseList(1);
|
||
},
|
||
|
||
findHouseList(type = 0) {
|
||
if (type == 1) {
|
||
this.pageNum = 1
|
||
this.flowList = []
|
||
this.$refs.uWaterfall.clear();
|
||
}
|
||
// 隐藏接口请求，使用前端写死的测试数据
|
||
// let url = "/assets/findAssetList";
|
||
// this.$u.post(url, {
|
||
// state:1,
|
||
// villageCity:uni.getStorageSync('lifeData').vuex_city,
|
||
// pageNum: this.pageNum,
|
||
// pageSize: this.pageSize,
|
||
// orderByColumn: 'update_time,create_time',
|
||
// isAsc: 'desc'
|
||
// }).then(result => {
|
||
// const data = result.data.result;
|
||
|
||
// 前端写死的测试数据
|
||
const data = [{
|
||
id: 1,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '景秀天成保租房景秀天成保租房',
|
||
footPrint: 105,
|
||
rentFee: 1500,
|
||
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
|
||
houseType: '3室2厅',
|
||
orientation: '南',
|
||
tags: ['全套家具', '全套家电']
|
||
}
|
||
];
|
||
if (this.pageNum > 1 && data.length < this.pageSize) {
|
||
// return this.loadStatus = 'nomore';
|
||
}
|
||
this.houseList = data;
|
||
for (let i = 0; i < this.houseList.length; i++) {
|
||
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
||
let item = this.houseList[i]
|
||
this.flowList.push(item);
|
||
}
|
||
++this.pageNum
|
||
this.loadStatus = 'loadmore';
|
||
// }).catch(err => {
|
||
// console.log("失败：", err)
|
||
// })
|
||
},
|
||
findVillageList() {
|
||
// 隐藏接口请求，使用前端写死的测试数据
|
||
// let url = "/api/houseApi/findVillageList";
|
||
// this.$u.get(url,{
|
||
// city:uni.getStorageSync('lifeData').vuex_city,
|
||
// orderByColumn: 'name',
|
||
// isAsc: 'desc'
|
||
// }).then(result => {
|
||
// const data = result.rows
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
||
// let item = data[i]
|
||
// searchData[0].submenu.push({
|
||
// name: item.name,
|
||
// value: item.name
|
||
// })
|
||
// }
|
||
// this.filterData = searchData;
|
||
// });
|
||
|
||
// 前端写死的测试小区数据
|
||
const villageData = [{
|
||
name: '景秀天成'
|
||
},
|
||
{
|
||
name: '锦绣花园'
|
||
},
|
||
{
|
||
name: '阳光小区'
|
||
},
|
||
{
|
||
name: '幸福家园'
|
||
},
|
||
{
|
||
name: '碧水湾'
|
||
}
|
||
];
|
||
|
||
// 添加测试小区数据到筛选菜单
|
||
for (let i = 0; i < villageData.length; i++) {
|
||
searchData[0].submenu.push({
|
||
name: villageData[i].name,
|
||
value: villageData[i].name
|
||
});
|
||
}
|
||
this.filterData = searchData;
|
||
},
|
||
clickImage(houseId) {
|
||
this.$u.route({
|
||
url: '/pages/detail/detail',
|
||
params: {
|
||
houseId: houseId
|
||
}
|
||
})
|
||
},
|
||
//接收菜单结果
|
||
confirm(e) {
|
||
let type = e.value[1][0]
|
||
let villageName = e.value[0][0]
|
||
let price = e.value[2][0]
|
||
let combo = e.value[3]
|
||
let houseNum = combo[0]
|
||
let decoration = combo[1]
|
||
let feature = combo[2]
|
||
this.searchData = {}
|
||
if (type) {
|
||
this.searchData.type = type
|
||
}
|
||
if (villageName) {
|
||
this.searchData.villageName = villageName
|
||
}
|
||
if (price) {
|
||
this.searchData.price = price
|
||
}
|
||
if (houseNum && houseNum.length > 0) {
|
||
this.searchData.houseNum = houseNum.toString()
|
||
}
|
||
if (decoration && decoration.length > 0) {
|
||
this.searchData.decoration = decoration.toString()
|
||
}
|
||
if (feature && feature.length > 0) {
|
||
this.searchData.feature = feature.toString()
|
||
}
|
||
this.pageNum = 1
|
||
this.houseList = []
|
||
this.flowList = []
|
||
this.$refs.uWaterfall.clear();
|
||
this.findHouseList()
|
||
},
|
||
code() {
|
||
this.$mytip.toast('请咨询技术支持')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.search-list-page {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.search-list-content {
|
||
// padding-top: 20rpx;
|
||
background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
|
||
border-radius: 0rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
// 搜索栏样式
|
||
.search-bar-wrapper {
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
background-color: #fff;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.city-select {
|
||
margin-right: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.icon-down {
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
border-top: 8rpx solid #666;
|
||
margin-left: 5rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.icon-search {
|
||
margin-right: 10rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.search-input input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
border: none;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.filter-dropdown-wrapper {
|
||
// padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// 标签组样式
|
||
.tag-group {
|
||
padding: 15rpx 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.tag-item {
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #723324;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid #DBB39D;
|
||
}
|
||
|
||
.tag-item.active {
|
||
background-color: #FCF2F3;
|
||
border: 1px solid #ffffff;
|
||
}
|
||
|
||
.waterfall {
|
||
padding-top: 20rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.nomore {
|
||
background-color: $u-bg-color;
|
||
}
|
||
|
||
.search {
|
||
width: 54px;
|
||
height: 44px;
|
||
|
||
&:active {
|
||
background-color: $u-bg-color;
|
||
}
|
||
}
|
||
|
||
.rowClass {
|
||
border-radius: 8px;
|
||
background-color: rgb(255, 255, 255);
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.hoverClass {
|
||
background-color: #E4E7ED;
|
||
}
|
||
|
||
.tabName {
|
||
font-size: 28rpx;
|
||
color: $u-main-color;
|
||
}
|
||
|
||
.demo-warter {
|
||
border-radius: 8px;
|
||
margin-top: 15rpx;
|
||
margin-right: 10rpx;
|
||
margin-left: 10rpx;
|
||
background-color: #ffffff;
|
||
padding: 0rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.u-close {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
}
|
||
|
||
// 图片样式
|
||
.u-lazy-load {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.item-cover {
|
||
font-size: 55rpx;
|
||
color: $u-type-warning;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
padding: 12rpx 15rpx 8rpx 15rpx;
|
||
line-height: 40rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.item-price {
|
||
font-size: 32rpx;
|
||
color: #FF2F31;
|
||
padding: 0 15rpx 15rpx 15rpx;
|
||
}
|
||
|
||
.item-price text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.item-desc {
|
||
font-weight: normal;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding: 0 15rpx 8rpx 15rpx;
|
||
}
|
||
|
||
// 标签样式
|
||
.item-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 15rpx 12rpx 15rpx;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.tag {
|
||
padding: 4rpx 12rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.item-tag {
|
||
font-size: 24rpx;
|
||
color: $u-tips-color;
|
||
margin-top: 3px;
|
||
}
|
||
</style> |