<template>
|
|
<view class="cu-page cu-page--with-fab cu-bill-page">
|
|
<view class="cu-bill-page__header">
|
|
<view class="cu-bill-page__toolbar">
|
|
<view class="cu-tabs cu-bill-tabs cu-bill-tabs--toolbar">
|
|
<view
|
|
v-for="(t, i) in tabs"
|
|
:key="i"
|
|
:class="['cu-tab', tabIdx === i ? 'cu-tab--active' : '']"
|
|
@click="switchPayTab(i)"
|
|
>{{ t }}</view>
|
|
</view>
|
|
|
|
<picker :range="costTypeFilters" range-key="label" @change="onCostTypeChange">
|
|
<view :class="['cu-bill-cost-picker', costTypeIdx > 0 ? 'cu-bill-cost-picker--active' : '', costTypePickerClass]">
|
|
<text class="cu-bill-cost-picker__label">{{ costTypeLabel }}</text>
|
|
<text class="cu-bill-cost-picker__arrow">▾</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="cu-bill-summary">
|
|
<view class="cu-bill-summary__main">
|
|
<text class="cu-bill-summary__count">{{ list.length }}</text>
|
|
<text class="cu-bill-summary__label">笔账单</text>
|
|
</view>
|
|
|
|
<view v-if="overdueCount > 0" class="cu-bill-summary__overdue-group">
|
|
<text class="cu-bill-summary__chip cu-bill-summary__chip--stat">{{ overdueCount }}笔逾期</text>
|
|
<view
|
|
:class="['cu-bill-summary__chip', 'cu-bill-summary__chip--filter', onlyOverdue ? 'cu-bill-summary__chip--filter-on' : '']"
|
|
@click="toggleOnlyOverdue"
|
|
>
|
|
<view :class="['cu-bill-summary__check', onlyOverdue ? 'cu-bill-summary__check--on' : '']">
|
|
<text v-if="onlyOverdue" class="cu-bill-summary__check-icon">✓</text>
|
|
</view>
|
|
<text class="cu-bill-summary__chip-text">仅看逾期</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-list-wrap">
|
|
<view
|
|
v-for="item in displayList"
|
|
:key="item.id"
|
|
class="cu-bill-card"
|
|
@click="goDetail(item.id)"
|
|
>
|
|
<view class="cu-bill-card__accent" :class="accentClass(item)" />
|
|
|
|
<view class="cu-bill-card__body">
|
|
<view class="cu-bill-card__type-row">
|
|
<view :class="['cu-bill-type-tag', costTypeBadgeClass(item.costType)]">
|
|
<text class="cu-bill-type-tag__text">{{ costTypeText(item.costType) }}</text>
|
|
</view>
|
|
<text :class="['cu-status', payStatusClass(item.payStatus)]">{{ payText(item.payStatus) }}</text>
|
|
</view>
|
|
|
|
<view class="cu-bill-card__code">{{ item.code }}</view>
|
|
|
|
<view class="cu-bill-card__amount-box">
|
|
<view class="cu-bill-card__amount-main">
|
|
<text class="cu-bill-card__amount-label">应付金额</text>
|
|
<text class="cu-bill-card__amount-value">¥{{ formatMoney(item.receivableFee) }}</text>
|
|
</view>
|
|
<view class="cu-bill-card__amount-side">
|
|
<text class="cu-bill-card__amount-side-label">实付</text>
|
|
<text class="cu-bill-card__amount-side-value">¥{{ formatMoney(item.actReceivableFee) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isOverdue(item)" class="cu-bill-card__overdue">已逾期，请尽快缴费</view>
|
|
|
|
<view class="cu-bill-card__contract">
|
|
<view class="cu-bill-card__contract-row">
|
|
<text class="cu-bill-card__contract-label">合同编号</text>
|
|
<text class="cu-bill-card__contract-value">{{ item.contractCode || '-' }}</text>
|
|
</view>
|
|
<view class="cu-bill-card__contract-row">
|
|
<text class="cu-bill-card__contract-label">合同有效期</text>
|
|
<text class="cu-bill-card__contract-value">{{ contractPeriod(item) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-bill-card__meta">
|
|
<view class="cu-bill-card__meta-item cu-bill-card__meta-item--full">
|
|
<text class="cu-bill-card__meta-label">计费周期</text>
|
|
<text class="cu-bill-card__meta-value">{{ item.startDate }} ~ {{ item.endDate }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-bill-card__foot">
|
|
<text class="cu-bill-card__foot-hint">查看账单明细与支付记录</text>
|
|
<text class="cu-bill-card__foot-link">详情 →</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-if="!displayList.length" :text="onlyOverdue ? '暂无逾期账单' : '暂无账单'" margin-top="80" />
|
|
</view>
|
|
<cu-workbench-fab />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { customerBillPage } from '@/api'
|
|
|
|
const COST_TYPE_MAP = {
|
|
0: '租赁费',
|
|
1: '物业费',
|
|
2: '租赁押金',
|
|
3: '物业押金',
|
|
4: '水电费',
|
|
5: '杂项费',
|
|
6: '其他',
|
|
7: '保证金'
|
|
}
|
|
|
|
const COST_TYPE_FILTERS = [
|
|
{ label: '费用类型', value: null },
|
|
{ label: '租赁费', value: 0 },
|
|
{ label: '物业费', value: 1 },
|
|
{ label: '租赁押金', value: 2 },
|
|
{ label: '物业押金', value: 3 },
|
|
{ label: '水电费', value: 4 },
|
|
{ label: '杂项费', value: 5 },
|
|
{ label: '其他', value: 6 },
|
|
{ label: '保证金', value: 7 }
|
|
]
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
list: [],
|
|
tabIdx: 0,
|
|
costTypeIdx: 0,
|
|
tabs: ['全部', '待支付', '已支付'],
|
|
costTypeFilters: COST_TYPE_FILTERS,
|
|
onlyOverdue: false
|
|
}
|
|
},
|
|
computed: {
|
|
costTypeLabel () {
|
|
return this.costTypeFilters[this.costTypeIdx].label
|
|
},
|
|
costTypePickerClass () {
|
|
const value = this.costTypeFilters[this.costTypeIdx].value
|
|
if (value == null) return ''
|
|
const map = {
|
|
0: 'cu-bill-cost-picker--rent',
|
|
1: 'cu-bill-cost-picker--property',
|
|
2: 'cu-bill-cost-picker--deposit',
|
|
3: 'cu-bill-cost-picker--deposit',
|
|
4: 'cu-bill-cost-picker--utility',
|
|
5: 'cu-bill-cost-picker--misc',
|
|
6: 'cu-bill-cost-picker--misc',
|
|
7: 'cu-bill-cost-picker--deposit'
|
|
}
|
|
return map[value] || ''
|
|
},
|
|
overdueCount () {
|
|
return this.list.filter(item => this.isOverdue(item)).length
|
|
},
|
|
displayList () {
|
|
if (!this.onlyOverdue) return this.list
|
|
return this.list.filter(item => this.isOverdue(item))
|
|
}
|
|
},
|
|
onShow () { this.load() },
|
|
methods: {
|
|
load () {
|
|
const payTab = this.tabIdx === 0 ? null : (this.tabIdx === 1 ? 0 : 1)
|
|
const costType = this.costTypeFilters[this.costTypeIdx].value
|
|
const model = { payTab }
|
|
if (costType != null) model.costType = costType
|
|
customerBillPage({ page: 1, capacity: 50, model })
|
|
.then(res => {
|
|
this.list = (res.data && res.data.records) || []
|
|
if (!this.list.some(item => this.isOverdue(item))) this.onlyOverdue = false
|
|
})
|
|
},
|
|
toggleOnlyOverdue () {
|
|
this.onlyOverdue = !this.onlyOverdue
|
|
},
|
|
switchPayTab (i) {
|
|
if (this.tabIdx === i) return
|
|
this.tabIdx = i
|
|
this.load()
|
|
},
|
|
onCostTypeChange (e) {
|
|
const idx = Number(e.detail.value)
|
|
if (this.costTypeIdx === idx) return
|
|
this.costTypeIdx = idx
|
|
this.load()
|
|
},
|
|
costTypeText (type) { return COST_TYPE_MAP[type] || '账单' },
|
|
costTypeBadgeClass (type) {
|
|
const map = {
|
|
0: 'cu-bill-type-tag--rent',
|
|
1: 'cu-bill-type-tag--property',
|
|
2: 'cu-bill-type-tag--deposit',
|
|
3: 'cu-bill-type-tag--deposit',
|
|
4: 'cu-bill-type-tag--utility',
|
|
5: 'cu-bill-type-tag--misc',
|
|
6: 'cu-bill-type-tag--misc',
|
|
7: 'cu-bill-type-tag--deposit'
|
|
}
|
|
return map[type] || 'cu-bill-type-tag--default'
|
|
},
|
|
formatMoney (val) {
|
|
if (val === null || val === undefined || val === '') return '0.00'
|
|
return Number(val).toFixed(2)
|
|
},
|
|
payText (s) { return { 0: '待支付', 1: '已支付', 2: '部分支付' }[s] || '-' },
|
|
payStatusClass (s) {
|
|
if (s === 1) return 'cu-status--ok'
|
|
if (s === 0) return 'cu-status--warn'
|
|
return 'cu-status--muted'
|
|
},
|
|
accentClass (item) {
|
|
if (item.payStatus === 1) return 'cu-bill-card__accent--ok'
|
|
if (this.isOverdue(item)) return 'cu-bill-card__accent--danger'
|
|
if (item.payStatus === 0) return 'cu-bill-card__accent--warn'
|
|
return ''
|
|
},
|
|
isOverdue (item) {
|
|
if (!item || item.payStatus === 1 || !item.planPayDate) return false
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
const due = new Date(String(item.planPayDate).replace(/-/g, '/'))
|
|
return due < today
|
|
},
|
|
contractPeriod (item) {
|
|
if (!item) return '-'
|
|
const start = this.formatDate(item.contractStartDate)
|
|
const end = this.formatDate(item.contractEndDate)
|
|
if (!start && !end) return '-'
|
|
return `${start || '-'} ~ ${end || '-'}`
|
|
},
|
|
formatDate (val) {
|
|
if (!val) return ''
|
|
return String(val).replace('T', ' ').substring(0, 10)
|
|
},
|
|
goDetail (id) { uni.navigateTo({ url: `/pages/customer/bill/detail?id=${id}` }) }
|
|
}
|
|
}
|
|
</script>
|
