<template>
|
|
<view class="cu-page cu-bill-page">
|
|
<view class="cu-bill-page__header">
|
|
<view class="cu-tabs cu-bill-tabs">
|
|
<view
|
|
v-for="(t, i) in tabs"
|
|
:key="i"
|
|
:class="['cu-tab', tabIdx === i ? 'cu-tab--active' : '']"
|
|
@click="tabIdx = i; load()"
|
|
>{{ t }}</view>
|
|
</view>
|
|
<view class="cu-bill-summary">
|
|
<text class="cu-bill-summary__count">{{ list.length }}</text>
|
|
<text class="cu-bill-summary__label">笔账单</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-list-wrap">
|
|
<view
|
|
v-for="item in list"
|
|
: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__head">
|
|
<view class="cu-bill-card__head-main">
|
|
<text class="cu-bill-card__type">{{ costTypeText(item.costType) }}</text>
|
|
<text class="cu-bill-card__code">{{ item.code }}</text>
|
|
</view>
|
|
<text :class="['cu-status', payStatusClass(item.payStatus)]">{{ payText(item.payStatus) }}</text>
|
|
</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="!list.length" text="暂无账单" margin-top="80" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { customerBillPage } from '@/api'
|
|
|
|
const COST_TYPE_MAP = {
|
|
0: '租赁费',
|
|
1: '物业费',
|
|
2: '租赁押金',
|
|
3: '物业押金',
|
|
4: '水电费',
|
|
5: '杂项费',
|
|
6: '其他',
|
|
7: '保证金'
|
|
}
|
|
|
|
export default {
|
|
data () { return { list: [], tabIdx: 0, tabs: ['全部', '待支付', '已支付'] } },
|
|
onShow () { this.load() },
|
|
methods: {
|
|
load () {
|
|
const payTab = this.tabIdx === 0 ? null : (this.tabIdx === 1 ? 0 : 1)
|
|
customerBillPage({ page: 1, capacity: 50, model: { payTab } })
|
|
.then(res => { this.list = (res.data && res.data.records) || [] })
|
|
},
|
|
costTypeText (type) { return COST_TYPE_MAP[type] || '账单' },
|
|
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>
|
