<template>
|
<view class="cu-page cu-page--with-fab">
|
<scroll-view scroll-x class="cu-tabs cu-tabs--scroll">
|
<view
|
v-for="(t, i) in tabs"
|
:key="t.value"
|
:class="['cu-tab', tabIdx === i ? 'cu-tab--active' : '']"
|
@click="tabIdx = i; load()"
|
>{{ t.label }}</view>
|
</scroll-view>
|
|
<view class="cu-list-header">
|
<text class="cu-list-header__count">共 {{ list.length }} 份合同</text>
|
</view>
|
|
<view class="cu-list-wrap">
|
<view v-for="item in list" :key="item.id" class="cu-list-card cu-list-card--clickable" @click="goDetail(item.id)">
|
<view class="cu-list-card__head">
|
<view class="cu-list-card__icon cu-list-card__icon--contract">
|
|
<u-icon name="file-text-fill" color="#40a9ff" size="22" />
|
|
</view>
|
<view class="cu-list-card__main">
|
<view class="cu-list-card__title-row">
|
<text class="cu-list-card__title">{{ item.code }}</text>
|
<text :class="['cu-status', contractStatusClass(item.status)]">{{ statusText(item.status) }}</text>
|
</view>
|
<text class="cu-list-card__sub">{{ item.roomInfo || '暂无房间信息' }}</text>
|
<view class="cu-period-chip">{{ item.startDate }} ~ {{ item.endDate }}</view>
|
</view>
|
</view>
|
|
<view class="cu-info-grid">
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">租赁面积</text>
|
<text class="cu-info-cell__value cu-info-cell__value--primary">{{ formatArea(item.totalArea) }}</text>
|
</view>
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">付款方式</text>
|
<text class="cu-info-cell__value">{{ item.payTypeText || '-' }}</text>
|
</view>
|
</view>
|
|
<view v-if="item.billStatusTip" :class="['cu-bill-tip', billTipClass(item.billStatusType)]">
|
|
<text class="cu-bill-tip__text">{{ item.billStatusTip }}</text>
|
|
</view>
|
|
<view class="cu-list-card__foot">
|
<text class="cu-time">点击查看完整合同信息</text>
|
<text class="cu-list-card__arrow">详情 →</text>
|
</view>
|
</view>
|
<u-empty v-if="!list.length" text="暂无合同" margin-top="80" />
|
</view>
|
<cu-workbench-fab />
|
</view>
|
</template>
|
|
<script>
|
import { customerContractPage } from '@/api'
|
export default {
|
data () {
|
return {
|
list: [],
|
tabIdx: 0,
|
tabs: [
|
{ label: '全部', value: null }, { label: '待执行', value: 0 }, { label: '执行中', value: 1 },
|
{ label: '已到期', value: 2 }, { label: '退租中', value: 3 }, { label: '已退租', value: 4 }
|
]
|
}
|
},
|
onShow () { this.load() },
|
methods: {
|
load () {
|
customerContractPage({ page: 1, capacity: 50, model: { status: this.tabs[this.tabIdx].value } })
|
.then(res => { this.list = (res.data && res.data.records) || [] })
|
},
|
formatArea (area) {
|
if (area === null || area === undefined || area === '') return '-'
|
return `${area}㎡`
|
},
|
statusText (s) {
|
const map = { 0: '待执行', 1: '执行中', 2: '已到期', 3: '退租中', 4: '已退租' }
|
return map[s] || '-'
|
},
|
contractStatusClass (s) {
|
if (s === 1) return 'cu-status--ok'
|
if (s === 2 || s === 4) return 'cu-status--muted'
|
if (s === 3) return 'cu-status--warn'
|
return 'cu-status--muted'
|
},
|
billTipClass (type) {
|
if (type === 'danger') return 'cu-bill-tip--danger'
|
if (type === 'warn') return 'cu-bill-tip--warn'
|
return 'cu-bill-tip--ok'
|
},
|
goDetail (id) { uni.navigateTo({ url: `/pages/customer/contract/detail?id=${id}` }) }
|
}
|
}
|
</script>
|
