caimei-applets-mcare/pages/user/order/components/details/invoiceTent.vue

<template name="invoice">
	<view class="invoice-template">
		<!-- 发票信息 -->
		<view class="invoice-content">
			<view class="invoice-title">发票信息</view>
			<view class="invoice-empty">
				<text>{{ invoiceText }}</text>
			</view>
			<view class="invoice-text" v-if="orderInvoice.type > 0">
				<view class="table">
					<text class="label-name">发票抬头：</text>
					<text class="label-text">{{ orderInvoice.invoiceTitle ? orderInvoice.invoiceTitle : '无' }}</text>
				</view>
				<template v-if="orderInvoice.type === 2 || orderInvoice.headingType === 1">
					<view class="table">
						<text class="label-name">单位税号：</text>
						<text class="label-text">{{
							orderInvoice.corporationTaxNum ? orderInvoice.corporationTaxNum : '无'
						}}</text>
					</view>
					<view class="table">
						<text class="label-name">注册地址：</text>
						<text class="label-text">{{
							orderInvoice.registeredAddress ? orderInvoice.registeredAddress : '无'
						}}</text>
					</view>
					<view class="table">
						<text class="label-name">注册电话：</text>
						<text class="label-text">{{
							orderInvoice.registeredPhone ? orderInvoice.registeredPhone : '无'
						}}</text>
					</view>
					<view class="table">
						<text class="label-name">开户银行：</text>
						<text class="label-text">{{ orderInvoice.openBank ? orderInvoice.openBank : '无' }}</text>
					</view>
					<view class="table">
						<text class="label-name">银行账号：</text>
						<text class="label-text">{{ bankAccountNo ? bankAccountNo : '无' }}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'invoice',
	props: {
		orderInvoice: {
			type: Object
		}
	},
	filters: {},
	data() {
		return {
			invoiceText: '不开发票',
			title: '发票信息',
			isOpen: false,
			bankAccountNo: ''
		}
	},
	created() {
		this.initData(this.orderInvoice)
	},
	computed: {},
	methods: {
		initData(data) {
			if (data) {
				this.bankAccountNo = this.$reg.bankRegex(data.bankAccountNo)
				this.invoiceText = this.setInvoiceText(data)
			}
		},
		// 设置发票文案
		setInvoiceText(data) {
			const map = {
				0: '个人',
				1: '单位'
			}
			switch (data.type) {
				case 0:
					return `不开发票`
					break
				case 1:
					return `普票-${map[data.headingType]}`
					break
				case 2:
					return `专票`
					break
			}
		},
		onMessage(pros) {},
		showInvoice() {
			this.isOpen = !this.isOpen
		}
	}
}
</script>

<style lang="scss">
.invoice-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.invoice-content {
		width: 702rpx;
		padding: 20rpx 24rpx;
	}
	.invoice-title {
		font-size: $font-size-28;
		color: $text-color;
		text-align: left;
		line-height: 40rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.invoice-empty {
		font-size: $font-size-28;
		color: $text-color;
		text-align: left;
		line-height: 64rpx;
		.txt {
			font-size: $font-size-24;
			color: #999999;
		}
	}
	.invoice-text {
		width: 100%;
		height: auto;
		.table {
			height: auto;
			line-height: 64rpx;
			font-size: $font-size-26;
			color: $text-color;
			text-align: left;
			position: relative;
			.label-name {
				display: inline-block;
				line-height: 64rpx;
				color: #999999;
			}
			.label-text {
				color: #333333;
			}
		}
	}
}
</style>