realty/virgo.wzfrontend/console/src/components/work/contract/common/bill.vue

<template>
	<div class="contract-bill">
		<el-collapse>
			<el-collapse-item v-for="(item,index) in list" :key="item.id">
				<template slot="title">
					<div class="collapse-title">
						<div class="label">{{'第' + item.phase + '期'}}</div>
						<div class="hui-tag hui-tag-info" v-if="!item.status">待付款</div>
						<div class="hui-tag hui-tag-warning" v-if="item.status === 1">付款中</div>
						<div class="hui-tag hui-tag-success" v-if="item.status === 2">已付款</div>
					</div>
				</template>
				<div class="contract-bill-box">
					<div class="contract-bill-item">
						<div class="name">账单期数</div>
						<div class="label">{{'第' + item.phase + '期'}}</div>
					</div>
					<div class="contract-bill-item">
						<div class="name">账单日期</div>
						<div class="label">{{item.startDate}}至{{item.endDate}}</div>
					</div>
					<div class="contract-bill-item">
						<div class="name">金额</div>
						<div class="label">{{item.amount}}元</div>
					</div>
					<div class="contract-bill-item">
						<div class="name">收款方</div>
						<div class="label">{{item.organizationName}}</div>
					</div>
					<div class="contract-bill-item">
						<div class="name">付款方</div>
						<div class="label">{{item.payMerchantName || item.payClientName}}</div>
					</div>
					<div class="contract-bill-item">
						<div class="name">账单组成</div>
						<div class="label">{{returnLabel(item.data)}}</div>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import {
		getPaymentListByPage
	} from '@/httpApi/contract'
	export default {
		props: ['detailId'],
		data() {
			return {
				list: []
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				getPaymentListByPage({
					currPage: 1,
					pageSize: 100,
					contractId: this.detailId
				}).then(res => {
					if (res.state) {
						this.list = res.data.dataList;
					}
				})
			},
			returnLabel(data) {
				let list = JSON.parse(data);
				let str = [];
				for (var i = 0; i < list.length; i++) {
					if (list[i].unitPrice) {
						str.push(list[i].payCycle + '个月租金' + list[i].unitPrice + '元')
					} else if (list[i].earnestMoney) {
						str.push(this.$field.findTypeName('earnestMoneyType', list[i].earnestMoneyType) + list[i]
							.earnestMoney + '元')
					}
				}
				return str.join('+')
			}
		},
	}
</script>

<style lang="scss">
	.contract-bill {
		width: 100%;
		height: 100%;

		.collapse-title {
			display: flex;
			align-items: center;

			.label {
				width: 60px;
			}
		}

		.el-collapse {
			border: none;
		}

		.contract-bill-box {
			display: flex;
			flex-wrap: wrap;

			.contract-bill-item {
				width: 20%;
				padding-right: 15px;
				margin-bottom: 15px;
			}

			.name {
				font-size: 12px;
				opacity: 0.8;
				margin-bottom: 5px;
			}
		}

		.el-collapse-item {
			margin-bottom: 10px;

			.el-collapse-item__header {
				background: $--box-background;
				color: $--color-common;
				border: none;
				padding-left: 20px;
			}

			.el-collapse-item__wrap {
				background: $--box-background;
				border-bottom: none;
				border-top: 1px solid $--color-border;
			}

			.el-collapse-item__content {
				color: $--color-common;
				padding: 15px 0 0 15px;
			}
		}
	}
</style>