405 lines
9.0 KiB
Vue
405 lines
9.0 KiB
Vue
|
<template>
|
||
|
|
<view class="tenants-page">
|
||
|
|
<view class="custom-nav safe-area-top">
|
||
|
|
<view class="nav-content">
|
||
|
|
<text class="nav-title">租客管理</text>
|
||
|
|
<view class="nav-actions">
|
||
|
|
<view class="nav-btn" @click="showSearch">
|
||
|
|
<uni-icons type="search" size="22" color="#1E293B"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="nav-btn" @click="addTenant">
|
||
|
|
<uni-icons type="plus" size="22" color="#2563EB"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="search-section" v-if="showSearchBar">
|
||
|
|
<view class="search-bar">
|
||
|
|
<uni-icons type="search" size="18" color="#94A3B8"></uni-icons>
|
||
|
|
<input
|
||
|
|
class="search-input"
|
||
|
|
type="text"
|
||
|
|
placeholder="搜索租客姓名或电话"
|
||
|
|
v-model="searchKeyword"
|
||
|
|
@confirm="handleSearch"
|
||
|
|
/>
|
||
|
|
<uni-icons v-if="searchKeyword" type="clear" size="18" color="#94A3B8" @click="clearSearch"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="stats-bar">
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-num">{{totalCount}}</text>
|
||
|
|
<text class="stat-label">全部租客</text>
|
||
|
|
</view>
|
||
|
|
<view class="stat-divider"></view>
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-num success">{{activeCount}}</text>
|
||
|
|
<text class="stat-label">在租中</text>
|
||
|
|
</view>
|
||
|
|
<view class="stat-divider"></view>
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-num">{{inactiveCount}}</text>
|
||
|
|
<text class="stat-label">已退租</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<scroll-view scroll-y class="tenant-list" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
|
||
|
|
<view v-if="tenants.length === 0 && !isLoading" class="empty-state">
|
||
|
|
<view class="empty-icon">
|
||
|
|
<uni-icons type="personadd-filled" size="80" color="#CBD5E1"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<text class="empty-title">暂无租客</text>
|
||
|
|
<text class="empty-desc">点击右上角添加您的第一个租客</text>
|
||
|
|
<button class="empty-btn" @click="addTenant">添加租客</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-else class="tenant-list-content">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in tenants"
|
||
|
|
:key="index"
|
||
|
|
class="tenant-card"
|
||
|
|
@click="viewTenantDetail(item)"
|
||
|
|
>
|
||
|
|
<view class="tenant-avatar">
|
||
|
|
<text>{{item.name.charAt(0)}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="tenant-info">
|
||
|
|
<view class="info-header">
|
||
|
|
<text class="tenant-name">{{item.name}}</text>
|
||
|
|
<view class="status-badge" :class="item.status">{{item.statusText}}</view>
|
||
|
|
</view>
|
||
|
|
<text class="tenant-phone">{{item.phone}}</text>
|
||
|
|
<view class="tenant-stats">
|
||
|
|
<text>在租 {{item.activeRentals}} 间</text>
|
||
|
|
<text class="divider">|</text>
|
||
|
|
<text>历史 {{item.totalRentals}} 次</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tenant-actions">
|
||
|
|
<view class="action-btn call" @click.stop="callTenant(item)">
|
||
|
|
<uni-icons type="phone-filled" size="18" color="#FFFFFF"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<uni-load-more v-if="tenants.length > 0" :status="loadStatus"></uni-load-more>
|
||
|
|
<view class="safe-area-bottom" style="height: 40rpx;"></view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import renterApi from '@/api/renter.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showSearchBar: false,
|
||
|
|
searchKeyword: '',
|
||
|
|
isLoading: false,
|
||
|
|
isRefreshing: false,
|
||
|
|
tenants: [],
|
||
|
|
loadStatus: 'more',
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
totalCount() {
|
||
|
|
return this.total
|
||
|
|
},
|
||
|
|
activeCount() {
|
||
|
|
return this.tenants.filter(t => t.status === 'active').length
|
||
|
|
},
|
||
|
|
inactiveCount() {
|
||
|
|
return this.tenants.filter(t => t.status !== 'active').length
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.loadTenants()
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.loadTenants()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async loadTenants() {
|
||
|
|
this.isLoading = true
|
||
|
|
try {
|
||
|
|
const params = {
|
||
|
|
page: this.page,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
keyword: this.searchKeyword
|
||
|
|
}
|
||
|
|
const res = await renterApi.getList(params)
|
||
|
|
if (res.data) {
|
||
|
|
const list = res.data.map(item => ({
|
||
|
|
id: item.id,
|
||
|
|
name: item.name,
|
||
|
|
phone: item.phone,
|
||
|
|
idCard: item.idCard,
|
||
|
|
status: item.status || 'active',
|
||
|
|
statusText: item.status === 'active' ? '在租中' : '已退租',
|
||
|
|
activeRentals: item.activeRentals || 0,
|
||
|
|
totalRentals: item.totalRentals || 0
|
||
|
|
}))
|
||
|
|
if (this.page === 1) {
|
||
|
|
this.tenants = list
|
||
|
|
} else {
|
||
|
|
this.tenants = [...this.tenants, ...list]
|
||
|
|
}
|
||
|
|
this.total = res.total || 0
|
||
|
|
this.loadStatus = this.tenants.length < this.total ? 'more' : 'noMore'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('加载租客列表失败:', error)
|
||
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
|
|
} finally {
|
||
|
|
this.isLoading = false
|
||
|
|
this.isRefreshing = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onRefresh() {
|
||
|
|
this.isRefreshing = true
|
||
|
|
this.page = 1
|
||
|
|
this.loadTenants()
|
||
|
|
},
|
||
|
|
showSearch() {
|
||
|
|
this.showSearchBar = !this.showSearchBar
|
||
|
|
},
|
||
|
|
handleSearch() {
|
||
|
|
this.page = 1
|
||
|
|
this.loadTenants()
|
||
|
|
},
|
||
|
|
clearSearch() {
|
||
|
|
this.searchKeyword = ''
|
||
|
|
this.page = 1
|
||
|
|
this.loadTenants()
|
||
|
|
},
|
||
|
|
addTenant() {
|
||
|
|
uni.navigateTo({ url: '/pages/tenant-add/tenant-add' })
|
||
|
|
},
|
||
|
|
viewTenantDetail(item) {
|
||
|
|
uni.navigateTo({ url: `/pages/tenant-detail/tenant-detail?id=${item.id}` })
|
||
|
|
},
|
||
|
|
callTenant(item) {
|
||
|
|
if (item.phone) {
|
||
|
|
uni.makePhoneCall({ phoneNumber: item.phone })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
loadMore() {
|
||
|
|
if (this.loadStatus === 'noMore') return
|
||
|
|
this.loadStatus = 'loading'
|
||
|
|
this.page++
|
||
|
|
this.loadTenants()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tenants-page {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: #F8FAFC;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.custom-nav {
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
||
|
|
}
|
||
|
|
.nav-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx 32rpx;
|
||
|
|
}
|
||
|
|
.nav-title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1E293B;
|
||
|
|
}
|
||
|
|
.nav-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 16rpx;
|
||
|
|
}
|
||
|
|
.nav-btn {
|
||
|
|
width: 72rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #F8FAFC;
|
||
|
|
}
|
||
|
|
.search-section {
|
||
|
|
padding: 24rpx 32rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: #F1F5F9;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
padding: 16rpx 24rpx;
|
||
|
|
gap: 16rpx;
|
||
|
|
}
|
||
|
|
.search-input {
|
||
|
|
flex: 1;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #1E293B;
|
||
|
|
}
|
||
|
|
.stats-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
padding: 24rpx 32rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
margin-bottom: 2rpx;
|
||
|
|
}
|
||
|
|
.stat-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.stat-num {
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #2563EB;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
.stat-num.success {
|
||
|
|
color: #10B981;
|
||
|
|
}
|
||
|
|
.stat-label {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #64748B;
|
||
|
|
}
|
||
|
|
.stat-divider {
|
||
|
|
width: 2rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background: #E2E8F0;
|
||
|
|
}
|
||
|
|
.tenant-list {
|
||
|
|
flex: 1;
|
||
|
|
padding: 24rpx 32rpx;
|
||
|
|
}
|
||
|
|
.empty-state {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 120rpx 60rpx;
|
||
|
|
}
|
||
|
|
.empty-icon {
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
}
|
||
|
|
.empty-title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1E293B;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
.empty-desc {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #94A3B8;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
.empty-btn {
|
||
|
|
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 24rpx 60rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.tenant-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 20rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 24rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
|
}
|
||
|
|
.tenant-avatar {
|
||
|
|
width: 88rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.tenant-avatar text {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.tenant-info {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
.info-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12rpx;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
.tenant-name {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1E293B;
|
||
|
|
}
|
||
|
|
.status-badge {
|
||
|
|
padding: 4rpx 12rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
.status-badge.active {
|
||
|
|
background: #D1FAE5;
|
||
|
|
color: #059669;
|
||
|
|
}
|
||
|
|
.status-badge.inactive {
|
||
|
|
background: #F3F4F6;
|
||
|
|
color: #6B7280;
|
||
|
|
}
|
||
|
|
.tenant-phone {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #64748B;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
.tenant-stats {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 16rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #94A3B8;
|
||
|
|
}
|
||
|
|
.tenant-stats .divider {
|
||
|
|
color: #E2E8F0;
|
||
|
|
}
|
||
|
|
.tenant-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 12rpx;
|
||
|
|
}
|
||
|
|
.action-btn {
|
||
|
|
width: 64rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.action-btn.call {
|
||
|
|
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
|
|
}
|
||
|
|
</style>
|