实现电子发票预览
最近需要在react项目中实现预览发票的功能,要求发票和新版税务局样式保持一致,为方便查看使用styled
编写样式。其中项目明细
栏是固定高度,项目较多时通过上下滑动滚动条查看。
这是实现效果:
代码部分:
import React from 'react'
import styled from 'styled-components'
const testData = {
invoiceNumber: '491164463144661',
purchaserName: '唐僧',
purchaserCode: '8946461654647777',
sellerName: '佛祖',
sellerCode: '12313123141231231',
projectList: [
{
projectName: '大师兄',
models: 'GZ60F_100',
unitPrice: '100',
unit: '只',
quantity: '1',
amount: '100.00',
rate: '0.03',
Tax: '3.00',
},
{
projectName: '二师兄',
models: 'GZ60F_200',
unitPrice: '100',
unit: '只',
quantity: '1',
amount: '100.00',
rate: '0.03',
Tax: '3.00',
},
{
projectName: '三师弟',
models: 'GZ60F_300',
unitPrice: '100',
unit: '只',
quantity: '1',
amount: '100.00',
rate: '0.03',
Tax: '3.00',
},
],
totalPriceNumber: 999.99,
totalPriceString: '玖佰玖拾玖元玖角玖分',
remark: '我是备注!!!',
biller: '耶稣',
}
const InvoiceTmpDiv = styled.div`
font-size: 12px;
width: 1120px;
.title {
font-size: 26px;
color: #b16363;
text-align: center;
line-height: 56px;
padding-top: 0;
}
.extra {
color: #b15b16;
.content {
color: #181818;
}
}
.height84 {
height: 110px;
}
.row {
border: 2px solid #b16363;
border-bottom: none;
color: #b15b16;
.content {
color: #181818;
}
}
.last-row {
.content {
color: #181818;
}
color: #b15b16;
border-top: 2px solid #b16363;
}
.label {
width: 78px;
display: inline-block;
text-align-last: justify;
text-align: justify;
}
.longLabel {
width: 178px;
display: inline-block;
text-align-last: justify;
text-align: justify;
}
.title-label {
width: 52px;
}
`
const Row = styled.div`
.col_1 {
width: 2.65%;
borderleft: none;
}
.col_4 {
width: 3.75%;
}
.col_9 {
width: 7.4%;
}
.col_2 {
width: 8.33%;
}
.col_3 {
width: 12.5%;
}
.col_5 {
width: 20.83%;
}
.col_6 {
width: 42.5%;
}
.col_7 {
width: 29.16%;
}
.col_8 {
width: 33.33%;
}
.col_14 {
width: 58.33%;
}
.col_15 {
width: 42.5%;
}
.col_17 {
width: 70.83%;
}
.col_18 {
width: 100%;
}
.col_24 {
width: 100%;
}
`
const Col = styled.span`
display: inline-block;
padding: 8px;
box-sizing: border-box;
vertical-align: middle;
border-left: 2px solid #b16363;
height: 100%;
&.no-border {
border-left: none;
}
.text-center {
text-align: center;
border-left: none;
border-right: none;
}
&.transparent-border {
border-left: 2px solid rgba(0, 0, 0, 0);
}
&.invoice-number {
border-left: none;
color: #b16363;
padding: 0 0 0 800px;
font-size: 14px;
}
`
const UnderLine = styled.div`
border: 2px solid #b16363;
width: 325px;
height: 8px;
margin: -1% 0 2% 35%;
border-left: none;
border-right: none;
`
const InvoiceInfo = styled.span`
color: black;
`
const TitleDescription = styled.div`
margin-top: 4.2%;
`
const ProjectContainer = styled.div`
width: 100%;
height: 160px;
border-top: 2px solid #b16363;
border-right: 2px solid #b16363;
border-left: 2px solid #b16363;
overflow: auto;
.single-project {
width: 100%;
height: 30px;
}
`
export default function PreviewInvoices() {
return (
<div>
<InvoiceTmpDiv>
<Row>
<Col className="col_18 invoice-number">
发票号码:<InvoiceInfo>{testData.invoiceNumber}</InvoiceInfo>
</Col>
<Col className="title col_18 no-border">
电子发票(增值税专用发票)
</Col>
<UnderLine className="UnderLine">
<div></div>
</UnderLine>
</Row>
<Row className="row height84">
<Col className="col_1 no-border">购买方信息</Col>
<Col className="col_15">
<TitleDescription>
<span className="label">名称</span>:
<span className="content">{testData.purchaserName}</span>
</TitleDescription>
<TitleDescription>
<span className="longLabel">统一社会信用代码/纳税人识别号</span>:
<span className="content">{testData.purchaserCode}</span>
</TitleDescription>
</Col>
<Col className="col_1">销售方信息</Col>
<Col className="col_6">
<TitleDescription>
<span className="label">名称</span>:
<span className="content">{testData.sellerName}</span>
</TitleDescription>
<TitleDescription>
<span className="longLabel">统一社会信用代码/纳税人识别号</span>:
<span className="content">{testData.sellerCode}</span>
</TitleDescription>
</Col>
</Row>
<Row className="row">
<Col className="col_7 no-border">
<div className="text-center">项目名称</div>
</Col>
<Col className="col_5">
<div className="text-center">规格型号</div>
</Col>
<Col className="">
<div className="text-center">单位</div>
</Col>
<Col className="">
<div className="text-center">数量</div>
</Col>
<Col className="col_2">
<div className="text-center">单价</div>
</Col>
<Col className="col_3">
<div className="text-center">金额</div>
</Col>
<Col className="">
<div className="text-center">税率/征收率</div>
</Col>
<Col className="col_2">
<div className="text-center">税额</div>
</Col>
</Row>
<Row>
<ProjectContainer>
{testData &&
testData.projectList.map((item) => {
const {
Tax,
amount,
models,
projectName,
quantity,
unitPrice,
rate,
unit,
} = item
return (
<div className="single-project">
<Col className="col_7 transparent-border">
<div className="text-center">{projectName}</div>
</Col>
<Col className="col_5 transparent-border">
<div className="text-center">{models}</div>
</Col>
<Col className="col_4 transparent-border">
<div className="text-center">{unit}</div>
</Col>
<Col className="col_4 transparent-border">
<div className="text-center">{quantity}</div>
</Col>
<Col className="col_2 transparent-border">
<div className="text-center">{unitPrice}</div>
</Col>
<Col className="col_3 transparent-border">
<div className="text-center">{amount}</div>
</Col>
<Col className="col_9 transparent-border">
<div className="text-center">{rate}</div>
</Col>
<Col className="col_2 transparent-border">
<div className="text-center">{Tax}</div>
</Col>
</div>
)
})}
</ProjectContainer>
</Row>
<Row className="row">
<Col className="col_15 no-border">
价税合计(大写)
<InvoiceInfo>{testData.totalPriceString}</InvoiceInfo>
</Col>
<Col className="no-border">
(小写)<InvoiceInfo>¥{testData.totalPriceNumber}</InvoiceInfo>
</Col>
</Row>
<Row className="row height84">
<Col className="col_1 no-border">备注</Col>
<Col className="col_7">
<InvoiceInfo>{testData.remark}</InvoiceInfo>
</Col>
</Row>
<Row className="last-row">
<Col className="col_6 no-border">
开票人:<InvoiceInfo>{testData.biller}</InvoiceInfo>
</Col>
</Row>
</InvoiceTmpDiv>
</div>
)
}
原文地址:https://blog.csdn.net/qq_43834495/article/details/129821037
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_12117.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。