<template>
|
|
<view :class="['cu-page cu-bill-detail', needPayAmount > 0 ? 'cu-page--with-footer' : '']" v-if="bill">
|
|
<view :class="['cu-bill-detail-hero', heroClass]">
|
|
<view class="cu-bill-detail-hero__bg" />
|
|
<view class="cu-bill-detail-hero__content">
|
|
<view class="cu-bill-detail-hero__top">
|
|
<view>
|
|
<text class="cu-bill-detail-hero__type">{{ costTypeText(bill.costType) }}</text>
|
|
<view class="cu-bill-detail-hero__code">{{ bill.code }}</view>
|
|
</view>
|
|
<text class="cu-bill-detail-hero__status">{{ payText(bill.payStatus) }}</text>
|
|
</view>
|
|
|
|
<view class="cu-bill-detail-hero__amount-wrap">
|
|
<text class="cu-bill-detail-hero__amount-label">{{ needPayAmount > 0 ? '需付金额' : '应付金额' }}</text>
|
|
<text class="cu-bill-detail-hero__amount">
|
|
¥{{ formatMoney(needPayAmount > 0 ? needPayAmount : bill.receivableFee) }}
|
|
</text>
|
|
<text v-if="bill.planPayDate" class="cu-bill-detail-hero__due">应付日期 {{ bill.planPayDate }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-bill-stat-row">
|
|
<view class="cu-bill-stat">
|
|
<text class="cu-bill-stat__label">应付金额</text>
|
|
<text class="cu-bill-stat__value cu-bill-stat__value--danger">¥{{ formatMoney(bill.receivableFee) }}</text>
|
|
</view>
|
|
<view class="cu-bill-stat">
|
|
<text class="cu-bill-stat__label">实付金额</text>
|
|
<text class="cu-bill-stat__value">¥{{ formatMoney(paidAmount) }}</text>
|
|
</view>
|
|
<view class="cu-bill-stat">
|
|
<text class="cu-bill-stat__label">需付金额</text>
|
|
<text :class="['cu-bill-stat__value', needPayAmount > 0 ? 'cu-bill-stat__value--danger' : '']">
|
|
¥{{ formatMoney(needPayAmount) }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-panel cu-bill-panel">
|
|
<view class="cu-panel__title">关联合同</view>
|
|
<view class="cu-bill-info-grid">
|
|
<view class="cu-bill-info-item">
|
|
<text class="cu-bill-info-item__label">合同编号</text>
|
|
<text class="cu-bill-info-item__value">{{ bill.contractCode || '-' }}</text>
|
|
</view>
|
|
<view class="cu-bill-info-item cu-bill-info-item--full">
|
|
<text class="cu-bill-info-item__label">合同有效期</text>
|
|
<text class="cu-bill-info-item__value">{{ contractPeriod(bill) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-panel cu-bill-panel">
|
<view class="cu-panel__title">房源信息</view>
|
<view v-if="bill.roomList && bill.roomList.length" class="cu-room-list">
|
<view v-for="(room, idx) in bill.roomList" :key="idx" class="cu-room-item">
|
<text class="cu-room-item__name">{{ formatRoomLine(room) }}</text>
|
<text class="cu-room-item__area">{{ formatArea(room.rentArea) }}</text>
|
</view>
|
</view>
|
<view v-else class="cu-bill-info-grid">
|
<view class="cu-bill-info-item cu-bill-info-item--full">
|
<text class="cu-bill-info-item__value cu-kv__value--muted">{{ bill.roomInfo || '暂无房源信息' }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-panel cu-bill-panel">
|
<view class="cu-panel__title">账单信息</view>
|
|
<view class="cu-bill-info-grid">
|
|
<view class="cu-bill-info-item">
|
|
<text class="cu-bill-info-item__label">费用类型</text>
|
|
<text class="cu-bill-info-item__value">{{ costTypeText(bill.costType) }}</text>
|
|
</view>
|
|
<view class="cu-bill-info-item">
|
|
<text class="cu-bill-info-item__label">支付状态</text>
|
|
<text class="cu-bill-info-item__value">{{ payText(bill.payStatus) }}</text>
|
|
</view>
|
|
<view class="cu-bill-info-item cu-bill-info-item--full">
|
|
<text class="cu-bill-info-item__label">计费周期</text>
|
|
<text class="cu-bill-info-item__value">{{ bill.startDate }} ~ {{ bill.endDate }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-panel cu-bill-panel">
|
<view class="cu-panel__title">收支流水</view>
|
<view v-if="revenues.length" class="cu-revenue-list">
|
<view v-for="r in revenues" :key="r.id" class="cu-revenue-card">
|
<view class="cu-revenue-card__head">
|
<text :class="['cu-revenue-card__type', r.revenueType === 0 ? 'cu-revenue-card__type--out' : '']">
|
{{ revenueTypeText(r.revenueType) }}
|
</text>
|
<text class="cu-revenue-card__amount">¥{{ formatMoney(r.actReceivableFee) }}</text>
|
</view>
|
<view class="cu-revenue-card__row">
|
<text class="cu-revenue-card__label">付款方</text>
|
<text class="cu-revenue-card__value">{{ r.customerName || '-' }}</text>
|
</view>
|
<view class="cu-revenue-card__row">
|
<text class="cu-revenue-card__label">收款方式</text>
|
<text class="cu-revenue-card__value">{{ payTypeText(r.payType) }}</text>
|
</view>
|
<view class="cu-revenue-card__row">
|
<text class="cu-revenue-card__label">入账日期</text>
|
<text class="cu-revenue-card__value">{{ formatDate(r.actPayDate) || '-' }}</text>
|
</view>
|
<view class="cu-revenue-card__row">
|
<text class="cu-revenue-card__label">创建时间</text>
|
<text class="cu-revenue-card__value">{{ formatTime(r.createDate) }}</text>
|
</view>
|
<view v-if="r.remark" class="cu-revenue-card__row">
|
<text class="cu-revenue-card__label">备注</text>
|
<text class="cu-revenue-card__value">{{ r.remark }}</text>
|
</view>
|
</view>
|
</view>
|
<view v-else class="cu-bill-empty-record cu-bill-empty-record--inset">
|
<text class="cu-bill-empty-record__icon">📋</text>
|
<text class="cu-bill-empty-record__text">暂无收支流水</text>
|
</view>
|
</view>
|
|
|
|
<view v-if="needPayAmount > 0" class="cu-page-footer cu-bill-detail-footer">
|
|
<view class="cu-bill-detail-footer__info">
|
|
<text class="cu-bill-detail-footer__label">待支付</text>
|
|
<text class="cu-bill-detail-footer__amount">¥{{ formatMoney(needPayAmount) }}</text>
|
|
</view>
|
|
<view class="cu-btn cu-btn--primary cu-bill-detail-footer__btn" @click="goPay">立即缴费</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { customerBillDetail } from '@/api'
|
|
|
|
const COST_TYPE_MAP = {
|
|
0: '租赁费',
|
|
1: '物业费',
|
|
2: '租赁押金',
|
|
3: '物业押金',
|
|
4: '水电费',
|
|
5: '杂项费',
|
|
6: '其他',
|
|
7: '保证金'
|
|
}
|
|
|
|
export default {
|
|
data () { return { id: null, bill: null, revenues: [], paidAmount: 0, needPayAmount: 0 } },
|
|
computed: {
|
|
heroClass () {
|
|
if (!this.bill) return ''
|
|
if (this.bill.payStatus === 1) return 'cu-bill-detail-hero--ok'
|
|
if (this.needPayAmount > 0) return 'cu-bill-detail-hero--warn'
|
|
return ''
|
|
}
|
|
},
|
|
onLoad (q) { this.id = q.id; this.load() },
|
|
methods: {
|
|
load () {
|
|
customerBillDetail(this.id).then(res => {
|
this.bill = res.data.bill
|
this.revenues = res.data.revenues || (res.data.bill && res.data.bill.ywContractRevenueList) || []
|
this.paidAmount = res.data.paidAmount != null ? res.data.paidAmount : (res.data.bill && res.data.bill.actReceivableFee)
|
this.needPayAmount = res.data.needPayAmount != null ? res.data.needPayAmount : (res.data.bill && res.data.bill.needReceivableFee)
|
})
|
|
},
|
|
costTypeText (type) { return COST_TYPE_MAP[type] || '账单' },
|
|
formatMoney (val) {
|
|
if (val === null || val === undefined || val === '') return '0.00'
|
|
return Number(val).toFixed(2)
|
|
},
|
|
formatTime (t) { return t ? String(t).replace('T', ' ').substring(0, 19) : '-' },
|
|
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)
|
},
|
formatArea (area) {
|
if (area === null || area === undefined || area === '') return '-'
|
return `${area}㎡`
|
},
|
formatRoomLine (room) {
|
if (!room) return '-'
|
const parts = [room.projectName, room.buildingName, room.floorName, room.roomNum].filter(Boolean)
|
return parts.length ? parts.join('/') : '-'
|
},
|
revenueTypeText (type) {
|
if (type === 1) return '收款'
|
return '付款'
|
},
|
payTypeText (type) {
|
const map = { 0: '现金', 1: '网银转账', 2: 'POS机', 3: '支付宝', 4: '微信', 5: '转账支票', 6: '其他' }
|
return map[type] || '-'
|
},
|
payText (s) { return { 0: '待支付', 1: '已支付', 2: '部分支付' }[s] || '-' },
|
|
goPay () { uni.navigateTo({ url: `/pages/customer/bill/pay?id=${this.id}&amount=${this.needPayAmount}` }) }
|
|
}
|
|
}
|
|
</script>
|
