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

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

		<view class="flex"
		style="padding: 20rpx;">
			<uv-search
			bgColor="#fff"
			@search="getData"
			@custom="getData"
			searchIconSize="30rpx"
			placeholder="请输入搜索关键字..." 
			v-model="queryParams.title"></uv-search>
		</view>
		
		<view class="">
			<screenRen
			@clickItem="clickItem"/>
		</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="(item, index) in list" 
			:key="index"
			@click="clickDetail(item)">
				<view>
					<image class="imx" 
					
					@click.stop="previewImage([item.image &&
					item.image.split(',')[0]])"
					
					:src="item.image &&
					item.image.split(',')[0]" />
				</view>
				<view style="width: calc(100% - 330rpx);">
					<view class="t1">{{ item.title }}</view>
					<view class="t2">{{ item.home }} ｜ {{ item.crm }}m2 | {{ item.face }}</view>
					<view class="flex">
						<view class="t3" v-if="item.isGood">{{ item.isGood }}</view>
						<view class="t3" v-if="item.isMinPrice">{{ item.isMinPrice }}</view>
						<!-- <view class="t3">低价</view> -->
					</view>
					<view class="t4">{{ item.money }}元/月</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import screenRen from '../components/screen/screenRen.vue'
	export default {
		mixins: [mixinsList],
		components : {
			screenRen,
		},
		data() {
			return {
				mixinsListApi : 'getRentPage',
			}
		},
		methods: {
			clickDetail(item){
				uni.navigateTo({
					url: '/pages_order/renting/rentingDetail?id=' + item.id
				})
			},
			clickItem(result){
				console.log(result);
				this.queryParams = {
					pageNo: 1,
					pageSize: 10,
				}
				result.forEach(n => {
					this.queryParams[n.name] = n.value
				})
				this.getData()
			},
		}
	}
</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;
		overflow: hidden;
	}

	.imx {
		width: 300rpx;
		height: 96%;
		margin: 2% 0;
	}

	.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>