realty/virgo.wzfrontend/yui_wx/pages/billDetail/billDetail.vue

<template>
	<view class="bill-detail" v-if="detail.id">
		<view class="detail">
			<view class="detail-box">
				<view class="title-box">
					<view class="title">{{'第' + detail.phase + '期'}}</view>
					<view class="date">{{detail.startDate}}至{{detail.endDate}}</view>
					<view class="title-icon">
						<uni-icons type="icon-hetongwendang" custom-prefix="iconfont" color="#fff" size="18">
						</uni-icons>
					</view>
				</view>
				<view class="other">
					<view class="item">
						<view class="label">金额</view>
						<view class="value">{{detail.amount + '元'}}</view>
					</view>
					<view class="item">
						<view class="label">收款方</view>
						<view class="value"> {{detail.organizationName}}</view>
					</view>
					<view class="item">
						<view class="label">付款方</view>
						<view class="value">{{detail.payMerchantName || detail.payClientName}}</view>
					</view>
				</view>
				<view class="state">
					<view></view>
					<view class="tag">
						<view class="status-tag info" v-if="!item.status">待付款</view>
						<view class="status-tag warning" v-else-if="item.status === 1">付款中</view>
						<view class="status-tag success" v-else-if="item.status === 2">已付款</view>
					</view>
				</view>
			</view>
			<view class="detail-box" v-for="(item,index) in detail.paymentRecordList" :key="item">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">付款记录</text>
				</view>
				<view class="other">
					<view class="item">
						<view class="label">付款名称</view>
						<view class="value">{{item.name}}</view>
					</view>
					<view class="item">
						<view class="label" style="margin-bottom: 10rpx;">回执单</view>
						<upload accept="all" :list="item.attachment ? JSON.parse(item.attachment) : []"></upload>
					</view>
				</view>
			</view>
			<view class="detail-box" v-for="(item,index) in detail.paymentInvoiceList" :key="item">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">发票记录</text>
				</view>
				<view class="other">
					<view class="item">
						<view class="label">发票名称</view>
						<view class="value">{{item.name}}</view>
					</view>
					<view class="item">
						<view class="label">发票类型</view>
						<view class="value">{{$field.findTypeName('invoiceType',item.type)}}</view>
					</view>
					<view class="item">
						<view class="label">发票代码</view>
						<view class="value">{{item.code || '-'}}</view>
					</view>
					<view class="item">
						<view class="label">发票号码</view>
						<view class="value">{{item.number || '-'}}</view>
					</view>
					<view class="item">
						<view class="label">货物名称</view>
						<view class="value">{{item.cargoName || '-'}}</view>
					</view>
					<view class="item">
						<view class="label" style="margin-bottom: 10rpx;">发票附件</view>
						<upload accept="all" :list="item.attachment ? JSON.parse(item.attachment) : []"></upload>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPaymentDetailById,
		getCommonPaymentDetailById
	} from '@/request/api/bill.js'
	import upload from '@/components/common/upload.vue'
	export default {
		data() {
			return {
				billId: '1',
				type: '1',
				detail: {}
			}
		},
		onLoad(body) {
			// this.billId = body.billId;
			// this.type = body.type;
			this.init();
		},
		methods: {
			init() {
				if (!this.billId) return;
				if (this.type == 1) {
					getPaymentDetailById(this.billId).then(this.billSuccess);
				} else {
					getCommonPaymentDetailById(this.billId).then(this.billSuccess);
				}
			},
			billSuccess(res) {
				if (res.code === 200) {
					this.detail = res.data;
				}
			}
		},
		components: {
			upload
		}
	}
</script>

<style>

</style>