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" v-if="type == 1">{{'第' + detail.phase + '期'}}</view>
					<view class="title" v-else>{{ detail.name}}</view>
					<view class="date" v-if="type == 1">{{detail.startDate}}至{{detail.endDate}}</view>
					<view class="date" v-else>{{detail.reminderDate}}</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="!detail.status">待付款</view>
						<view class="status-tag warning" v-else-if="detail.status === 1">付款中</view>
						<view class="status-tag success" v-else-if="detail.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 class="hui-button-box" v-if="operationBtn.length>0">
			<view class="hui-button" v-for="(item,index) in operationBtn" :key="index"
				@click="$navigateTo(item.type+'?billId='+billId+'&type='+type)">
				{{item.name}}
			</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: '',
				type: '',
				detail: {},
				operationBtn: []
			}
		},
		onLoad(body) {
			this.billId = body.billId;
			this.type = body.type;
			this.init();
			uni.$on('reloadBill', () => {
				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;
					if (!this.detail.status && (this.$store.getters.identity.id === 1 || this.$store.getters.identity
							.id === 4)) {
						this.operationBtn.push({
							id: 1,
							name: '账单付款',
							type: '/pages/billRecord/billRecord'
						})
					}
					if (this.detail.status === 1 && this.detail.organizationId === this.$store.getters.organization.id) {
						this.operationBtn.push({
							id: 2,
							name: '账单发票',
							type: '/pages/billInvoice/billInvoice'
						})
					}
				}
			}
		},
		components: {
			upload
		}
	}
</script>

<style>

</style>