236 lines
10 KiB
Vue
236 lines
10 KiB
Vue
|
<template>
|
||
|
|
<view class="bills-page">
|
||
|
|
<view class="custom-nav safe-area-top">
|
||
|
|
<view class="nav-content">
|
||
|
|
<view class="nav-back" @click="goBack">
|
||
|
|
<uni-icons type="left" size="20" color="#1E293B"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<text class="nav-title">账单管理</text>
|
||
|
|
<view class="nav-actions">
|
||
|
|
<view class="nav-btn" @click="addBill">
|
||
|
|
<uni-icons type="plus" size="20" color="#2563EB"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<scroll-view scroll-y class="page-content" @scrolltolower="loadMore">
|
||
|
|
<!-- 筛选栏 -->
|
||
|
|
<view class="filter-section">
|
||
|
|
<view class="filter-tabs">
|
||
|
|
<view v-for="(tab, index) in filterTabs" :key="index" class="filter-tab" :class="{ active: currentFilter === tab.value }" @click="switchFilter(tab.value)">
|
||
|
|
<text>{{tab.label}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 统计概览 -->
|
||
|
|
<view class="stats-section">
|
||
|
|
<view class="stats-card">
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-label">应收总额</text>
|
||
|
|
<text class="stat-value">¥{{stats.totalReceivable}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="stat-divider"></view>
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-label">实收总额</text>
|
||
|
|
<text class="stat-value received">¥{{stats.totalReceived}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="stat-divider"></view>
|
||
|
|
<view class="stat-item">
|
||
|
|
<text class="stat-label">待收金额</text>
|
||
|
|
<text class="stat-value pending">¥{{stats.totalPending}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 账单列表 -->
|
||
|
|
<view class="bill-list">
|
||
|
|
<view v-for="(item, index) in billList" :key="index" class="bill-card" @click="viewDetail(item)">
|
||
|
|
<view class="bill-header">
|
||
|
|
<view class="bill-info">
|
||
|
|
<text class="bill-no">{{item.billNo || '-'}}</text>
|
||
|
|
<text class="bill-date">{{item.billDate}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="bill-status" :class="item.status">
|
||
|
|
<text>{{getStatusText(item.status)}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bill-content">
|
||
|
|
<view class="bill-type">
|
||
|
|
<view class="type-icon" :class="item.type">
|
||
|
|
<uni-icons :type="item.type === 'income' ? 'wallet-filled' : 'cart-filled'" size="20" color="#FFFFFF"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="type-info">
|
||
|
|
<text class="type-name">{{getCategoryText(item.category)}}</text>
|
||
|
|
<text class="type-room">{{item.roomNumber || '-'}} · {{item.renterName || '-'}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bill-amount">
|
||
|
|
<text class="amount" :class="item.type">{{item.type === 'income' ? '+' : '-'}}¥{{item.receivableAmount}}</text>
|
||
|
|
<text class="received" v-if="item.receivedAmount > 0">实收: ¥{{item.receivedAmount}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="billList.length === 0 && !isLoading" class="empty-state">
|
||
|
|
<text class="empty-text">暂无账单数据</text>
|
||
|
|
<button class="add-btn" @click="addBill">记一笔</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="safe-area-bottom" style="height: 40rpx;"></view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { billApi } from '../../api/index.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentFilter: 'all',
|
||
|
|
filterTabs: [
|
||
|
|
{ label: '全部', value: 'all' },
|
||
|
|
{ label: '收入', value: 'income' },
|
||
|
|
{ label: '支出', value: 'expense' },
|
||
|
|
{ label: '未收', value: 'unpaid' }
|
||
|
|
],
|
||
|
|
billList: [],
|
||
|
|
isLoading: false,
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
hasMore: true,
|
||
|
|
stats: {
|
||
|
|
totalReceivable: '0.00',
|
||
|
|
totalReceived: '0.00',
|
||
|
|
totalPending: '0.00'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.loadData()
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.loadData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async loadData() {
|
||
|
|
if (this.isLoading) return
|
||
|
|
this.isLoading = true
|
||
|
|
try {
|
||
|
|
const params = { page: this.page, pageSize: this.pageSize }
|
||
|
|
if (this.currentFilter !== 'all') {
|
||
|
|
if (this.currentFilter === 'unpaid') {
|
||
|
|
params.status = 'unpaid'
|
||
|
|
} else {
|
||
|
|
params.type = this.currentFilter
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const res = await billApi.list(params)
|
||
|
|
const list = res.data || []
|
||
|
|
if (this.page === 1) {
|
||
|
|
this.billList = list
|
||
|
|
} else {
|
||
|
|
this.billList = [...this.billList, ...list]
|
||
|
|
}
|
||
|
|
this.hasMore = list.length >= this.pageSize
|
||
|
|
this.updateStats()
|
||
|
|
} catch (error) {
|
||
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
|
|
} finally {
|
||
|
|
this.isLoading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
updateStats() {
|
||
|
|
let totalReceivable = 0, totalReceived = 0, totalPending = 0
|
||
|
|
this.billList.forEach(item => {
|
||
|
|
if (item.type === 'income') {
|
||
|
|
totalReceivable += parseFloat(item.receivableAmount || 0)
|
||
|
|
totalReceived += parseFloat(item.receivedAmount || 0)
|
||
|
|
totalPending += parseFloat(item.receivableAmount || 0) - parseFloat(item.receivedAmount || 0)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.stats.totalReceivable = totalReceivable.toFixed(2)
|
||
|
|
this.stats.totalReceived = totalReceived.toFixed(2)
|
||
|
|
this.stats.totalPending = totalPending.toFixed(2)
|
||
|
|
},
|
||
|
|
loadMore() {
|
||
|
|
if (this.hasMore && !this.isLoading) {
|
||
|
|
this.page++
|
||
|
|
this.loadData()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
switchFilter(value) {
|
||
|
|
this.currentFilter = value
|
||
|
|
this.page = 1
|
||
|
|
this.loadData()
|
||
|
|
},
|
||
|
|
addBill() {
|
||
|
|
uni.navigateTo({ url: '/pages/bill-add/bill-add' })
|
||
|
|
},
|
||
|
|
viewDetail(item) {
|
||
|
|
uni.navigateTo({ url: `/pages/bill-detail/bill-detail?id=${item.id}` })
|
||
|
|
},
|
||
|
|
goBack() { uni.navigateBack() },
|
||
|
|
getStatusText(status) {
|
||
|
|
const texts = { 'paid': '已付清', 'partial': '部分付款', 'unpaid': '未付款' }
|
||
|
|
return texts[status] || status
|
||
|
|
},
|
||
|
|
getCategoryText(category) {
|
||
|
|
const texts = { 'rent': '租金', 'deposit': '押金', 'water': '水费', 'electricity': '电费', 'maintenance': '维修费', 'property': '物业费', 'other': '其他' }
|
||
|
|
return texts[category] || category || '其他'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.bills-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-back { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
|
||
|
|
.nav-title { font-size: 36rpx; font-weight: 700; color: #1E293B; }
|
||
|
|
.nav-actions { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
|
||
|
|
.page-content { flex: 1; padding: 24rpx 32rpx; }
|
||
|
|
.filter-section { margin-bottom: 24rpx; }
|
||
|
|
.filter-tabs { display: flex; gap: 16rpx; }
|
||
|
|
.filter-tab { padding: 16rpx 32rpx; background: #FFFFFF; border-radius: 12rpx; font-size: 28rpx; color: #64748B; }
|
||
|
|
.filter-tab.active { background: #2563EB; color: #FFFFFF; }
|
||
|
|
.stats-section { margin-bottom: 24rpx; }
|
||
|
|
.stats-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
|
||
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
|
||
|
|
.stat-label { font-size: 24rpx; color: #64748B; }
|
||
|
|
.stat-value { font-size: 32rpx; font-weight: 700; color: #1E293B; }
|
||
|
|
.stat-value.received { color: #10B981; }
|
||
|
|
.stat-value.pending { color: #EF4444; }
|
||
|
|
.stat-divider { width: 2rpx; height: 60rpx; background: #E2E8F0; }
|
||
|
|
.bill-list { display: flex; flex-direction: column; gap: 24rpx; }
|
||
|
|
.bill-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
|
||
|
|
.bill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; }
|
||
|
|
.bill-info { display: flex; flex-direction: column; gap: 8rpx; }
|
||
|
|
.bill-no { font-size: 28rpx; font-weight: 600; color: #1E293B; }
|
||
|
|
.bill-date { font-size: 24rpx; color: #94A3B8; }
|
||
|
|
.bill-status { padding: 6rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; }
|
||
|
|
.bill-status.paid { background: #DCFCE7; color: #16A34A; }
|
||
|
|
.bill-status.partial { background: #FEF3C7; color: #D97706; }
|
||
|
|
.bill-status.unpaid { background: #FEE2E2; color: #DC2626; }
|
||
|
|
.bill-content { display: flex; justify-content: space-between; align-items: center; }
|
||
|
|
.bill-type { display: flex; align-items: center; gap: 20rpx; }
|
||
|
|
.type-icon { width: 72rpx; height: 72rpx; border-radius: 18rpx; display: flex; align-items: center; justify-content: center; }
|
||
|
|
.type-icon.income { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||
|
|
.type-icon.expense { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
||
|
|
.type-info { display: flex; flex-direction: column; gap: 8rpx; }
|
||
|
|
.type-name { font-size: 30rpx; font-weight: 600; color: #1E293B; }
|
||
|
|
.type-room { font-size: 24rpx; color: #64748B; }
|
||
|
|
.bill-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 8rpx; }
|
||
|
|
.amount { font-size: 36rpx; font-weight: 700; }
|
||
|
|
.amount.income { color: #667eea; }
|
||
|
|
.amount.expense { color: #f5576c; }
|
||
|
|
.received { font-size: 24rpx; color: #94A3B8; }
|
||
|
|
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
|
||
|
|
.empty-text { font-size: 28rpx; color: #94A3B8; margin-bottom: 32rpx; }
|
||
|
|
.add-btn { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; font-size: 28rpx; padding: 24rpx 64rpx; border-radius: 16rpx; border: none; }
|
||
|
|
</style>
|