145 lines
3.9 KiB
Vue
145 lines
3.9 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="navBar">
|
|
<van-nav-bar
|
|
title="查看发票"
|
|
left-arrow
|
|
left-arrow-color="#FFFFFF"
|
|
:border="false"
|
|
:fixed="true"
|
|
:safe-area-inset-top="true"
|
|
@click-left="h5GoBack"
|
|
/>
|
|
</div>
|
|
<div class="contentWrap">
|
|
<div class="content_tab">
|
|
<div class="tab_content">
|
|
<div class="item_wrap">
|
|
<div class="item_label">付款方</div>
|
|
<div class="item_content">中道汽车救援股份有限公司</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">收款方</div>
|
|
<div class="item_content">{{invoiceInfo.accountName}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">发票号码</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.invoiceNumber}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">发票金额</div>
|
|
<div class="item_content">￥{{invoiceInfo.invoiceMoney}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">税率</div>
|
|
<div class="item_content">{{invoiceInfo.taxRate}}%</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">税额</div>
|
|
<div class="item_content">{{invoiceInfo.taxAmount}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">未税金额</div>
|
|
<div class="item_content">{{invoiceInfo.afterTaxAmount}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">发票类型</div>
|
|
<div class="item_content">{{invoiceInfo.invoiceTypeCodeString}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">开票日期</div>
|
|
<div class="item_content">{{invoiceInfo.invoiceDate}}</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">发票影像</div>
|
|
<div class="item_content">
|
|
<div class="invoice_btn" @click="showInvoiceHandler(invoiceInfo.path)">查看发票</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/utils/myMixins"
|
|
export default {
|
|
name: "showInvoice",
|
|
mixins:[ myMixins ],
|
|
data() {
|
|
return {
|
|
invoiceInfo: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
let invoiceDetail = localStorage.getItem('invoiceDetail')
|
|
this.invoiceInfo = invoiceDetail ? JSON.parse(invoiceDetail) : {};
|
|
console.log('this.invoiceInfo', this.invoiceInfo)
|
|
},
|
|
methods: {
|
|
showInvoiceHandler(path) {
|
|
window.open(path)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/common.scss";
|
|
.wrap{
|
|
@include wh(100%,100%);
|
|
background-color: #F4F5F7;
|
|
}
|
|
.navBar{
|
|
height: 46px;
|
|
}
|
|
.contentWrap{
|
|
.mt_cls {
|
|
margin-top: 10px;
|
|
}
|
|
.content_tab {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 15px 15px;
|
|
.tab_title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.tab_content {
|
|
.item_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
.item_label {
|
|
color: rgba(0,0,0,0.5);
|
|
margin-right: 5px;
|
|
width: 60px;
|
|
}
|
|
.item_content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.copyIcon {
|
|
width: 35px;
|
|
height: 15px;
|
|
margin-left: 10px
|
|
}
|
|
.invoice_btn {
|
|
padding: 0 15px;
|
|
background-color: #354D93;
|
|
border-radius: 4px;
|
|
height: 28px;
|
|
color: #fff;
|
|
}
|
|
</style>
|