RentWeAppFront/pages/search/searchList.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>