首页/资产列表/资产详情页面样式修改

pages/search/searchList.vue

@@ -1,159 +1,306 @@
 <template>
-    <view class="search-list-page">
+	<view class="search-list-page">
 		<!-- 顶部导航栏 -->
-		<customNavbar title="资产列表" />
-        <u-sticky offset-top="0">
-            <view class="sticky">
-                <filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>
-            </view>
-        </u-sticky>
-       <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="12" :image="item.coverImgUrl" :index="index"
-		                       @click="clickImage(item.id)"></u-lazy-load>
-		          <view class="item-title">{{item.name}}</view>
-		  		     <view class="item-desc">{{ item.footPrint}}㎡</view>
-		  		<view class="item-price">¥{{item.rentFee}}</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="10" :image="item.coverImgUrl" :index="index"
-		                       @click="clickImage(item.id)"></u-lazy-load>
-		            <view class="item-title">{{item.name}}</view>
-		  		     <view class="item-desc">{{ item.footPrint}}㎡</view>
-		  		<view class="item-price">¥{{item.rentFee}}</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>
+		<!-- <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 {
+	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:{},
+				defaultSelected: [],
+				filterData: [],
+				searchData: {},
 				pageNum: 1,
 				pageSize: 20,
 				scrollTop: 0,
 				houseList: [],
-                loadStatus: 'loadmore',
-                flowList: [],
-            }
-        },
-        onLoad(option) {
+				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){
+			if (type) {
 				this.searchData.type = type
 			}
-			if(villageName){
+			if (villageName) {
 				this.searchData.villageName = villageName
 			}
-            // 获取房源数据
-            this.findHouseList();
+			// 获取房源数据
+			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: {
-           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;
-           		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]
-           			// if(!item.faceUrl.includes(config.staticUrl)){
-           			// 	item.image = config.staticUrl+item.faceUrl
-           			// }else{
-           			// 	item.image = item.faceUrl
-           			// }
-           		    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
-						})
+		},
+		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: ['全套家具', '全套家电']
 					}
-					this.filterData = searchData;
-				});
+				];
+				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
-			    	}
-			    })
+				this.$u.route({
+					url: '/pages/detail/detail',
+					params: {
+						houseId: houseId
+					}
+				})
 			},
 			//接收菜单结果
 			confirm(e) {
@@ -165,22 +312,22 @@
 				let decoration = combo[1]
 				let feature = combo[2]
 				this.searchData = {}
-				if(type){
+				if (type) {
 					this.searchData.type = type
 				}
-				if(villageName){
+				if (villageName) {
 					this.searchData.villageName = villageName
 				}
-				if(price){
+				if (price) {
 					this.searchData.price = price
 				}
-				if(houseNum && houseNum.length>0){
+				if (houseNum && houseNum.length > 0) {
 					this.searchData.houseNum = houseNum.toString()
 				}
-				if(decoration && decoration.length>0){
+				if (decoration && decoration.length > 0) {
 					this.searchData.decoration = decoration.toString()
 				}
-				if(feature && feature.length>0){
+				if (feature && feature.length > 0) {
 					this.searchData.feature = feature.toString()
 				}
 				this.pageNum = 1
@@ -189,93 +336,215 @@
 				this.$refs.uWaterfall.clear();
 				this.findHouseList()
 			},
-			code(){
+			code() {
 				this.$mytip.toast('请咨询技术支持')
 			}
-        }
-    }
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-	.search-list-page{
-		padding-top: 175rpx;
+	.search-list-page {
+		background-color: #f5f5f5;
 	}
-	.waterfall{
-		// padding-top: 85rpx;
+
+	.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{
+
+	.search {
 		width: 54px;
 		height: 44px;
-		
-		&:active{
+
+		&:active {
 			background-color: $u-bg-color;
 		}
 	}
-	
-	.rowClass{
+
+	.rowClass {
 		border-radius: 8px;
 		background-color: rgb(255, 255, 255);
 		margin-top: 10rpx;
 	}
-	
-	.hoverClass{
+
+	.hoverClass {
 		background-color: #E4E7ED;
 	}
-	
-	.tabName{
+
+	.tabName {
 		font-size: 28rpx;
 		color: $u-main-color;
 	}
-	
+
 	.demo-warter {
-	    border-radius: 8px;
-	    margin-top: 3px;
-	    background-color: #ffffff;
-	    padding: 3px;
-	    position: relative;
+		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;
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
 	}
-	
+
+	// 图片样式
+	.u-lazy-load {
+		width: 100%;
+		height: 300rpx;
+	}
+
 	.item-cover {
-	    font-size: 55rpx;
-	    color: $u-type-warning;
+		font-size: 55rpx;
+		color: $u-type-warning;
 	}
-	
+
 	.item-title {
-	    font-size: 28rpx;
-	    color: $u-main-color;
-	    font-weight: bold;
-		padding-top: 5rpx;
-		padding-left: 10rpx;
+		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-weight: normal;
-	    font-size: 32rpx;
-	    color: $u-type-warning;
+		font-size: 32rpx;
+		color: #FF2F31;
+		padding: 0 15rpx 15rpx 15rpx;
 	}
-	
+
+	.item-price text {
+		font-size: 24rpx;
+	}
+
 	.item-desc {
-	    font-weight: normal;
-	    font-size: 26rpx;
-	    color: $u-tips-color;
-		padding-bottom: 5rpx;
-		padding-left: 10rpx;
+		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;
+		font-size: 24rpx;
+		color: $u-tips-color;
+		margin-top: 3px;
 	}
-</style>
+</style>