RentWeAppFront/pages-biz/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" @click="location()">{{ city ||'宜昌市'}} <text class="icon-down"></text>
					</view>
					<view class="search-input" @click="search">
						<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.assetsNo)" mode="aspectFill"></u-lazy-load>
						<view class="item-title">{{ item.assetsName }}</view>
						<view class="item-desc">{{ item.assetsType }} {{ 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.assetsNo)" mode="aspectFill"></u-lazy-load>
						<view class="item-title">{{ item.assetsName }}</view>
						<view class="item-desc">{{ item.assetsType}} {{ 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="loadMore"
				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 {
				city: null,
				selectedBizZone: null,
				selectedLayout: null,
				selectedDecorationStatus: null,
				selectedFeatures:[],
				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
			let lifeData = uni.getStorageSync('lifeData');
			let vuex_city = lifeData.vuex_city
			this.city = vuex_city
			this.searchData = {}
			if (type) {
				this.searchData.type = type
			}
			if (villageName) {
				this.searchData.villageName = villageName
			}
			// 获取街道数据
			this.findFilterTabData()
			this.findHouseList(null,option.keyword)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.resetAndLoad();
			// 关闭刷新
			uni.stopPullDownRefresh();
		},
		computed: {
			staticHost() {
				return this.$config.staticUrl
			}
		},
		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);
				this.resetAndLoad()
			},
			location() {
				this.$u.route({
					url: '/pages-biz/location/location',
				})
			},
			search() {
				this.$u.route('/pages-biz/search/search');
			},
			resetAndLoad() {
				this.pageNo = 1;
				this.flowList = [];
				this.loadStatus = 'loadmore';
				this.$nextTick(() => {
					this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
					this.findHouseList();
				});
			},
			findHouseList(type = null,keyWord = null) {
				if (this.loadStatus !== 'loadmore') return;

				this.loadStatus = 'loading';

				this.$u.post('/assets/queryPage', {
					assetsStatus:'闲置中',
					assetsType: type,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					keyWord: this.keyWord,
					bizZone: this.searchData.bizZone
				}).then(result => {
					const rows = result.data.result || [];
					// 第一页无数据
					if (this.pageNo === 1 && rows.length === 0) {
						this.flowList = [];
						this.loadStatus = 'nomore';
						return;
					}
					rows.forEach(row => {
						if (row.coverImgUrl) {
							row.coverImgUrl = this.$config.staticUrl + row.coverImgUrl
						} else {
							row.coverImgUrl = this.$config.staticUrl + this.defaultImgUrl
						}
					})
					// 追加数据
					this.flowList = this.flowList.concat(rows);
					// 判断是否还有下一页（核心）
					if (rows.length < this.pageSize) {
						this.loadStatus = 'nomore';
					} else {
						this.pageNo++; // ✅ 只有这里能 +1
						this.loadStatus = 'loadmore';
					}
					this.keyWord = null

				}).catch(err => {
					console.log("获取资产信息失败：", err);
					this.loadStatus = 'loadmore';
				}).finally(() => {
					uni.stopPullDownRefresh();
				});
			},
			loadMore() {
				// 只有在 loadStatus 为 'loadmore' 时才触发
				if (this.loadStatus !== 'loadmore') return;
				// 调用接口获取下一页
				this.findHouseList();
			},
			async findFilterTabData() {
				// 填充商圈数据到筛选菜单
				const bizZones  = await this.getBizZone();
				const features  = await this.getFeatures();
				let featureSubMenu = [];
				for (let i = 0; i < bizZones.length; i++) {
					searchData[0].submenu.push({
						name: bizZones[i],
						value: bizZones[i]
					});
					
				}
				for (let i = 0; i < features.length; i++) {
					featureSubMenu.push({
						name: features[i],
						value: features[i]
					})
				}
				searchData[2].submenu.push({
					name:"基础配套",
					type:"radio-multi",
					submenu: featureSubMenu
				})
				this.filterData = searchData;
			},
			async getFeatures(){
			  const res = await this.$u.get('/assets/getFeatures');
			  if (res.flag) {
			    return res.data;
			  }
			  return [];
			},
			async getBizZone(){
			  const res = await this.$u.get('/assets/getBizZones');
			  if (res.flag) {
			    return res.data;
			  }
			  return [];
			},
			clickImage(houseId) {
				this.$u.route({
					url: '/pages-assets/assets/assetsDetail',
					params: {
						assetsNo: houseId
					}
				})
			},
			//接收菜单结果
			confirm(e) {
				let bizZone = e.value[0][0]
				let price = e.value[1][0]
				let combo = e.value[2]
				let layout = combo[0]
				let decoration = combo[1]
				let feature = combo[2]
				this.searchData = {}
				if (bizZone) {
					this.searchData.bizZone = bizZone
				}
				if (price) {
					this.searchData.price = price
				}
				if (layout && layout.length > 0) {
					this.searchData.layout =  layout.toString()
				}
				if (decoration && decoration.length > 0) {
					this.searchData.decoration = decoration.toString()
				}
				if (feature && feature.length > 0) {
					this.searchData.feature = feature.toString()
				}
				this.resetAndLoad()
			},
			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>