<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="900px"
|
:withFooter="false"
|
>
|
<div class="detail-container">
|
<!-- 基础信息 -->
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">基础信息</span>
|
<el-tag :type="getStatusType(detailInfo.status)" style="margin-left: 10px;">
|
{{ getStatusText(detailInfo.status) }}
|
</el-tag>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">订单编号：</span>
|
<span class="value">{{ detailInfo.orderNo || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">申请时间：</span>
|
<span class="value">{{ detailInfo.createTime || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">发票类型：</span>
|
<span class="value">{{ detailInfo.invoiceType === 1 ? '增值税普通发票' : '增值税专用发票' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">开票金额：</span>
|
<span class="value amount">¥{{ detailInfo.amount ? detailInfo.amount.toFixed(2) : '0.00' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">开票邮箱：</span>
|
<span class="value">{{ detailInfo.email || '' }}</span>
|
</div>
|
|
<!-- 已开票状态额外信息 -->
|
<div class="info-item" v-if="detailInfo.status === 1">
|
<span class="label">开票时间：</span>
|
<span class="value">{{ detailInfo.invoiceTime || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.status === 1">
|
<span class="label">发票号码：</span>
|
<span class="value">{{ detailInfo.invoiceNo || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.status === 1 && detailInfo.invoiceUrl">
|
<span class="label">发票附件：</span>
|
<a :href="detailInfo.invoiceUrl" target="_blank" class="value link">点击下载</a>
|
</div>
|
|
<!-- 开票失败状态额外信息 -->
|
<div class="info-item full-width" v-if="detailInfo.status === 2">
|
<span class="label">失败理由：</span>
|
<span class="value danger">{{ detailInfo.failReason || '' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 抬头信息 -->
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">抬头信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">抬头类型：</span>
|
<span class="value">{{ detailInfo.titleType === 1 ? '个人' : '企业' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">发票抬头：</span>
|
<span class="value">{{ detailInfo.invoiceTitle || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.titleType === 2">
|
<span class="label">税号：</span>
|
<span class="value">{{ detailInfo.taxNo || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.titleType === 2">
|
<span class="label">开户银行：</span>
|
<span class="value">{{ detailInfo.bankName || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.titleType === 2">
|
<span class="label">银行账号：</span>
|
<span class="value">{{ detailInfo.bankAccount || '' }}</span>
|
</div>
|
<div class="info-item" v-if="detailInfo.titleType === 2">
|
<span class="label">企业电话：</span>
|
<span class="value">{{ detailInfo.companyPhone || '' }}</span>
|
</div>
|
<div class="info-item full-width" v-if="detailInfo.titleType === 2">
|
<span class="label">企业地址：</span>
|
<span class="value">{{ detailInfo.companyAddress || '' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById } from '@/api/business/invoiceRecord'
|
import BaseOpera from '@/components/base/BaseOpera'
|
|
export default {
|
name: 'OperaInvoiceDetail',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
detailInfo: { }
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.visible = true
|
this.getDetail(row.id)
|
},
|
// 获取开票详情
|
async getDetail(id) {
|
try {
|
const res = await getById(id)
|
this.detailInfo = res
|
} catch (e) {
|
this.$tip.apiFailed(e.message)
|
}
|
},
|
// 获取开票状态文本
|
getStatusText(status) {
|
switch(status) {
|
case 0:
|
return '申请中'
|
case 1:
|
return '开票成功'
|
case 2:
|
return '失败'
|
default:
|
return '未知'
|
}
|
},
|
// 获取开票状态标签类型
|
getStatusType(status) {
|
switch(status) {
|
case 0:
|
return 'warning'
|
case 1:
|
return 'success'
|
case 2:
|
return 'danger'
|
default:
|
return 'info'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.section {
|
margin-bottom: 30px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
margin-bottom: 15px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
font-size: 14px;
|
}
|
.info-item.full-width {
|
grid-column: span 3;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 90px;
|
display: inline-block;
|
}
|
.info-item .value {
|
color: #606266;
|
}
|
.info-item .value.amount {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
.info-item .value.danger {
|
color: #f56c6c;
|
}
|
.info-item .value.link {
|
color: #2E68EC;
|
text-decoration: underline;
|
}
|
</style>
|
