universal-wechat-uniapp-241007/pages_order/renting/rentingList.vue

<template>
	<view>
		<navbar title="租房列表" leftClick @leftClick="$utils.navigateBack" />

		<view class="flex"
		style="padding: 30rpx;">
			<!-- <view class="flex area">
				<view>永州</view>
				<uv-icon name="down" color="#333" size="30rpx" />
			</view>
			<view class="s-div b-relative">
				
			</view> -->
			<uv-search
			bgColor="#fff"
			@search="getData"
			@custom="getData"
			searchIconSize="30rpx"
			placeholder="请输入搜索关键字..." 
			v-model="queryParams.title"></uv-search>
		</view>

		<view class="flex-wrap rx">
			<view class="sb-w3">
				<image src="/static/image/home/1.png" />
				<view>居住</view>
			</view>
			<view class="sb-w3">
				<image src="/static/2.png" />
				<view>办公</view>
			</view>
			<view class="sb-w3">
				<image src="/static/3.png" />
				<view>做生意</view>
			</view>
		</view>

		<view class="container">
			<view class="re-empty font-c" style="display: none;">暂无数据</view>

			<view class="card-item flex-sb" v-for="i in 10" @click="clickDetail()">
				<view>
					<image class="imx" src="/static/R01.png" />
				</view>
				<view style="width: calc(100% - 330rpx);">
					<view class="t1">整租·康卓新城</view>
					<view class="t2">1室1卫 ｜ 60m2 | 南</view>
					<view class="flex">
						<view class="t3">优选</view>
						<view class="t3">低价</view>
					</view>
					<view class="t4">2400元/月</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				keyword : '',
				queryParams : {
					pageNo : 1,
					pageSize : 10,
				}
			}
		},
		onShow() {
			this.getRentPage()
		},
		methods: {
			clickDetail(){
				uni.navigateTo({
					url: '/pages_order/renting/rentingDetail'
				})
			},
			//根据分类获取租房信息列表
			getRentPage(){
				this.$api('getRentPage', this.queryParams,res =>{
					// console.log(res);
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 30rpx;
	}
	.area {
		width: 154rpx;
		line-height: 78rpx;
		margin: 0 20rpx;
	}

	.s-div {
		margin: 0 10rpx;
	}

	.seacher {
		width: 486rpx;
		height: 78rpx;
		background: #F3F3F3;
		border-radius: 44rpx 44rpx 44rpx 44rpx;

		font-weight: 400;
		font-size: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

		padding: 0 0 0 80rpx;
	}

	.seacher-placeholder {
		color: #BFBFBF;
	}

	.icon {
		position: absolute;
		left: 30rpx;
		top: 18rpx;
	}

	.rx {
		height: 214rpx;
		width: 100%;
		padding: 40rpx 0 0;
	}

	.sb-w3 image {
		width: 100rpx;
		height: 100rpx;
	}

	.sb-w3 view {
		line-height: 52rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
	}


	.card-item {
		width: 690rpx;
		height: 250rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 36rpx;
	}

	.imx {
		width: 300rpx;
		height: 250rpx;
	}

	.t1 {
		font-weight: 400;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 80rpx;
		text-align: left;
	}

	.t2 {
		font-weight: 400;
		font-size: 20rpx;
		color: #656565;
		line-height: 20rpx;
		text-align: left;
	}

	.t3 {
		font-weight: 400;
		font-size: 20rpx;
		line-height: 32rpx;
		color: #00B90C;
		text-align: center;

		height: 32rpx;
		width: 60rpx;
		margin: 15rpx 10rpx 0 0;
		background: rgba(121, 255, 179, 0.21);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.t4 {
		font-weight: 400;
		font-size: 32rpx;
		color: #FF0000;
		line-height: 100rpx;
		text-align: left;
	}
</style>