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" v-if="type == 1">
						<div class="status-tag info" v-if="!detail.status">待付款</div>
						<div class="status-tag warning" v-else-if="detail.status === 1">付款中</div>
						<div class="status-tag success" v-else-if="detail.status === 2">已付款</div>
					</view>
					<view class="tag" v-else>
						<div class="status-tag info" v-if="!detail.status">待发送</div>
						<div class="status-tag warning" v-else-if="detail.status === 1">付款中</div>
						<div class="status-tag success" v-else-if="detail.status === 2">已付款</div>
						<div class="status-tag info" v-else-if="detail.status === 3">待付款</div>
					</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="operation(item)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPaymentDetailById,
		getCommonPaymentDetailById,
		updatePayment
	} 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;
				this.operationBtn = [];
				if (this.type == 1) {
					getPaymentDetailById(this.billId).then(this.billSuccess);
				} else {
					getCommonPaymentDetailById(this.billId).then(this.billSuccess);
				}
			},
			operation(item) {
				if (item.id == 3) {
					uni.showModal({
						title: '有极提示',
						content: '是否将账单发送给客户？',
						success: res => {
							if (res.confirm) {
								updatePayment({
									id: this.billId,
									status: 3
								}).then(res => {
									if (res.code === 200) {
										this.init();
										this.$toast('操作成功');
									}
								})
							}
						}
					});
				} else {
					this.$navigateTo(item.type + '?billId=' + this.billId + '&type=' + this.type);
				}
			},
			billSuccess(res) {
				if (res.code === 200) {
					this.detail = res.data;
					if ((!this.detail.status || this.detail.status == 3) && (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'
						})
					}
					if (this.type == 2 && !this.detail.status && this.detail.organizationId === this.$store.getters
						.organization.id) {
						this.operationBtn.push({
							id: 3,
							name: '发送账单给客户',
							type: '/pages/billInvoice/billInvoice'
						})
					}
				}
			}
		},
		components: {
			upload
		}
	}
</script>

<style>

</style>