好的，我可以为您提供
一个基本的
发票模板，并添加小计功能。在这里我假设您已经有了Vue的开发环境。
首先，我们需要创建
一个Vue组件来表示
发票模板，可以命名为`InvoiceTemplate`。在这个组件中，我们需要定义一些数据来保存
发票的信息，如
发票号码、日期、客户信息、商品列表等等。同时，我们还需要定义一些方法来实现小计功能。
下面是
一个简单的
发票模板示例代码：
```html
<template>
<div class="invoice-template">
<!--
发票头部 -->
<div class="header">
<div class="company-info">
<h2>ABC 公司</h2>
<p>地址：XXXXX</p>
<p>电话：XXXXX</p>
<p>邮箱：XXXXX</p>
</div>
<div class="invoice-info">
<h3>
发票号码：{{invoiceNumber}}</h3>
<p>日期：{{invoiceDate}}</p>
</div>
</div>
<!-- 客户信息 -->
<div class="customer-info">
<h4>客户信息：</h4>
<p>公司名称：{{customerName}}</p>
<p>地址：{{customerAddress}}</p>
<p>电话：{{customerPhone}}</p>
</div>
<!-- 商品列表 -->
<div class="product-list">
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in productList" :key="index">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>{{product.total}}</td>
</tr>
<tr>
<td colspan="3" class="subtotal">小计：</td>
<td>{{subtotal}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
invoiceNumber: '00001', //
发票号码
invoiceDate: '2021-08-01', //
发票日期
customerName: '张三', // 客户名称
customerAddress: 'XXXXX', // 客户地址
customerPhone: 'XXXXX', // 客户电话
productList: [ // 商品列表
{ name: '商品1', price: 10, quantity: 2, total: 20 },
{ name: '商品2', price: 20, quantity: 3, total: 60 },
{ name: '商品3', price: 30, quantity: 4, total: 120 }
]
}
},
methods: {
calculateSubtotal() {
let subtotal = 0
this.productList.forEach(product => {
subtotal += product.total
})
return subtotal
}
},
computed: {
subtotal() {
return this.calculateSubtotal()
}
}
}
</script>
<style scoped>
.invoice-template {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
padding: 20px;
border: 1px solid #ccc;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.company-info h2 {
font-size: 20px;
margin-bottom: 5px;
}
.customer-info {
margin-bottom: 20px;
}
.product-list table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.product-list th,
.product-list td {
border: 1px solid #ccc;
padding: 5px;
}
.product-list th {
background-color: #eee;
text-align: left;
}
.product-list .subtotal {
text-align: right;
}
.product-list tr:last-child {
font-weight: bold;
}
</style>
```
在这个代码中，我们首先定义了一些基本的数据，如
发票号码、日期、客户信息和商品列表等。接着，我们定义了
一个`calculateSubtotal`方法来计算商品列表的小计，这个方法
会遍历商品列表中的每
一个商品，累加每个商品的小计。最后，我们使用Vue的计算属性来调用`calculateSubtotal`方法，并将计算结果显示在页面上。
请注意，这只是
一个简单的示例，您可以根据自己的实际需求进行修改和扩展。
4196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
