使用vue 写一个发票模板 并且有小计功能

好的，我可以为您提供一个基本的发票模板，并添加小计功能。在这里我假设您已经有了Vue的开发环境。

首先，我们需要创建一个Vue组件来表示发票模板，可以命名为`InvoiceTemplate`。在这个组件中，我们需要定义一些数据来保存发票的信息，如发票号码、日期、客户信息、商品列表等等。同时，我们还需要定义一些方法来实现小计功能。

下面是一个简单的发票模板示例代码：

<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`方法，并将计算结果显示在页面上。

请注意，这只是一个简单的示例，您可以根据自己的实际需求进行修改和扩展。