<template>
|
<view class="">
|
<view class="header bgc-ff">
|
<view class="filter-box">
|
<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
|
@onSelected='handleSelect'></chenchuang-CCDropDownFilter>
|
</view>
|
<view class="search-box">
|
<u-search placeholder="请输入租户名" v-model="keyword" :clearabled="true" :showAction="true" :animation="true"
|
@search="search" @clear="clear"></u-search>
|
</view>
|
</view>
|
|
<view class="content">
|
<view class="row flex j-c-s-b a-i-c" v-if="tenantList.length">
|
<!-- <view class="row-item bgc-ff flex a-i-c">
|
<view class="dot bgc-green"></view>
|
<text class="f-24">长期3户 (3)人</text>
|
</view>
|
<view class="row-item bgc-ff flex a-i-c">
|
<view class="dot bgc-main"></view>
|
<text class="f-24">中期3户 (3)人</text>
|
</view>
|
<view class="row-item bgc-ff flex a-i-c">
|
<view class="dot bgc-orange"></view>
|
<text class="f-24">短期3户 (3)人</text>
|
</view> -->
|
<view v-for="(item,index) in statistics" :key="index" class="row-item bgc-ff flex a-i-c" >
|
<view v-if="item.term =='shortTerm' " class="dot bgc-orange"></view>
|
<view v-if="item.term =='middleTerm' " class="dot bgc-main"></view>
|
<view v-if="item.term =='longTerm' " class="dot bgc-green"></view>
|
<text class="f-24">{{formatTerm(item.term)}}{{item.total}}户 ({{item.personNum}})人</text>
|
</view>
|
</view>
|
|
<view class="list bgc-ff" v-for="(records,index) in tenantList" :key="index">
|
<view class="flex j-c-s-b a-i-c">
|
<view class="flex a-i-c">
|
<text class="f-32 mr-50">{{ records.tenantName }}</text>
|
<view class="flex a-i-c">
|
<u-icon name="phone-fill" color="#017BFC"></u-icon>
|
<text class="f-28 ml-10">{{ records.phone || '未填写' }}</text>
|
</view>
|
</view>
|
<u-tag text="未到期" type="success" plain plainFill></u-tag>
|
</view>
|
<view class="list-address f-28 c-99">
|
{{ records.houseName }}
|
</view>
|
<view class="list-action flex ">
|
<view class="action-item" @click="tenantManage(records)">
|
<u-icon name="/static/icon/list-02.png" width="40rpx" height="40rpx"></u-icon>
|
<text class="f-28 c-main ml-10">租客管理</text>
|
</view>
|
<view class="action-item">
|
<u-icon name="/static/icon/list-01.png" width="40rpx" height="40rpx"></u-icon>
|
<text class="f-28 c-main ml-10">走访日志</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-toast ref="uToast"></u-toast>
|
<u-loadmore :status="loadingStatus" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="已经到底了" line />
|
</view>
|
</template>
|
|
<script>
|
import {
|
getRentalHouseContent,
|
getStatistics
|
} from '@/api/houseRental/houseRental.js'
|
export default {
|
data() {
|
return {
|
filterData: [
|
[{
|
name: '全部',
|
value: ''
|
},
|
{
|
name: '待确认',
|
value: '0'
|
},
|
{
|
name: '已确认',
|
value: '1'
|
},
|
// {
|
// name: '审核不通过',
|
// value: '2'
|
// },
|
{
|
name: '未到期',
|
value: '10'
|
},
|
{
|
name: '即将到期',
|
value: '20'
|
},
|
{
|
name: '已到期',
|
value: '30'
|
}
|
],
|
[{
|
name: '楼层',
|
value: ''
|
},
|
{
|
name: '1楼',
|
value: '1'
|
},
|
{
|
name: '2楼',
|
value: '2'
|
},
|
{
|
name: '3楼',
|
value: '3'
|
}
|
]
|
],
|
defaultIndex: [0, 0],
|
keyword: "",
|
statistics: [],
|
tenantList: [],
|
loadingStatus: 'nomore',
|
pagingParams: {
|
current: 1,
|
size: 10
|
},
|
selectParams: {},
|
tenantStatus: [{
|
name: '未到期',
|
value: 0
|
},
|
{
|
name: '已到期',
|
value: 1
|
},
|
{
|
name: '已终止',
|
value: 2
|
},
|
],
|
}
|
},
|
computed: {
|
formatTerm() {
|
return (term => {
|
if (term == 'longTerm') {
|
return "长期"
|
} else if (term == 'middleTerm') {
|
return "中期"
|
} else if (term == 'shortTerm') {
|
return "短期"
|
}
|
})
|
}
|
},
|
onLoad() {
|
this.currentRole = uni.getStorageSync('activeRole')
|
this.getStatistics()
|
},
|
onShow() {
|
this.tenantList = []
|
this.getRentalHouseInfo()
|
},
|
onReachBottom() {
|
this.pagingParams.current++
|
this.getRentalHouseInfo()
|
},
|
methods: {
|
handleSelect(res) {
|
const [auditStatus, floor] = res
|
this.resetParams()
|
let params = {}
|
if (auditStatus[0].value !== '') {
|
params = {
|
auditStatus: auditStatus[0].value
|
}
|
}
|
if (floor[0].value !== '') {
|
params = {
|
...params,
|
floor: floor[0].value
|
}
|
}
|
this.selectParams = params
|
this.getRentalHouseInfo()
|
this.getStatistics(auditStatus[0].value)
|
// 回到顶部，避免触发触底加载
|
uni.pageScrollTo({
|
scrollTop: 0, // 滚动到页面的目标位置（单位px）
|
});
|
},
|
getStatistics(auditStatus = '') {
|
const {
|
roleName
|
} = this.currentRole
|
let params = {
|
roleName
|
}
|
if (auditStatus) {
|
params = {
|
auditStatus,
|
roleName
|
}
|
}
|
getStatistics(params).then(res => {
|
this.statistics = res.data
|
})
|
},
|
findObjValue(value, obj) {
|
const res = obj.find(item => {
|
return item.value == value
|
})
|
return res.name
|
},
|
async getRentalHouseInfo(params = {}) {
|
this.$nextTick(() => {
|
this.loadingStatus = 'loadmore'
|
this.$refs.uToast.show({
|
type: 'loading',
|
message: '正在加载',
|
duration: 9999999
|
})
|
})
|
const {
|
roleName
|
} = this.currentRole
|
const {
|
code,
|
data: {
|
records
|
}
|
} = await getRentalHouseContent({
|
tenantName: this.keyword,
|
...this.pagingParams,
|
roleName,
|
...this.selectParams
|
})
|
if (code !== 200) {
|
uni.showToast({
|
title: "数据请求错误",
|
icon: "error"
|
})
|
return
|
}
|
this.tenantList = [...this.tenantList, ...records]
|
this.$nextTick(() => {
|
this.$refs.uToast.isShow = false
|
})
|
this.loadingStatus = 'nomore'
|
},
|
search() {
|
this.resetParams()
|
this.getRentalHouseInfo()
|
},
|
clear() {
|
this.keyword = ''
|
this.resetParams()
|
this.search()
|
},
|
tenantManage({
|
houseCode,
|
id
|
}) {
|
this.$u.func.globalNavigator(`/subPackage/bs/views/rentDetail?houseCode=${houseCode}&id=${id}`)
|
},
|
resetParams() {
|
this.tenantList = []
|
this.pagingParams = {
|
current: 1,
|
size: 10
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.header {
|
width: 100%;
|
position: fixed;
|
/*#ifdef H5*/
|
top: 88rpx;
|
/*#endif*/
|
/*#ifdef MP-WEIXIN*/
|
top: 0;
|
/*#endif*/
|
left: 0;
|
z-index: 10;
|
}
|
|
.filter-box {
|
width: 100%;
|
height: 100rpx;
|
|
}
|
|
.search-box {
|
padding: 20rpx 24rpx 30rpx;
|
}
|
|
.content {
|
width: 100%;
|
margin-top: 220rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
|
.row {
|
width: 100%;
|
padding: 20rpx 0;
|
}
|
|
.row-item {
|
width: calc(100% / 3 - 10rpx);
|
height: 46rpx;
|
border-radius: 30rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
}
|
|
.dot {
|
width: 10rpx;
|
height: 10rpx;
|
border-radius: 50%;
|
margin-right: 18rpx;
|
}
|
|
.bgc-green {
|
background-color: #30D17C;
|
}
|
|
.bgc-orange {
|
background-color: #FFAC3D;
|
}
|
|
.list {
|
width: 100%;
|
padding: 30rpx 30rpx 0;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
border-radius: 8rpx;
|
|
.list-address {
|
padding: 30rpx 0;
|
}
|
|
.list-action {
|
padding: 22rpx 0 30rpx;
|
border-top: 1px solid #F5F5F5;
|
}
|
|
.action-item {
|
display: flex;
|
flex: 1;
|
justify-content: center;
|
}
|
|
.action-item:first-child {
|
border-right: 1px solid #DBDBDB;
|
}
|
|
.mr-50 {
|
margin-right: 50rpx;
|
}
|
}
|
}
|
</style>
|
