瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

208 lines
3.7 KiB

<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" :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: 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>