SOURCE

var app = new Vue({
  el: '#app',
  data: {
    title: '价格计算',
    currentField: 'items',
    currentRate: 0.075,
    bocRate: 0,
    rateInfo: {rates: {}},
    usRateInfo: {rates: {}},
    hkdRateInfo: {rates: {}},
    audRateInfo: {rates: {}},
    fieldTypes: {
      items: [
      ]
    },
    otherPrice: 0
  },
  watch: {
    currentField(val) {
      this.init();
    }
  },
  computed: {
    goods() {
      return this.fieldTypes[this.currentField]
    },
    totalPrice() {
      let goodsPrice = this.goods.reduce((sum, current) => {
        return sum + this.calc(current, this.currentRate);
      }, 0);
      return goodsPrice + parseFloat(this.otherPrice)
    },
    totalOriginalPrice() {
      let rate = this.bocRate || (this.rateInfo.rates && this.rateInfo.rates.CNY);
      return this.goods.reduce((sum, current) => {
        return sum + this.calc(current, rate);
      }, 0);
    },
    totalAmount() {
      return this.goods.reduce((sum, current) => {
        return sum + ~~current.amount;
      }, 0);
    }
  },
  methods: {
    init() {
      for (let item of this.goods) {
        this.$set(item, 'amount', 0);
      }
    },
    action(base, item) {
      if (~~item.amount + base >= 0)
      	this.$set(item, 'amount', ~~item.amount + base);
    },
    all(base) {
      for (let item of this.goods) {
        this.action(base, item);
      }
    },
    calc(item, rate) {
      return item.unit*item.amount*(parseFloat(rate));
    },
    createRow() {
      this.goods.push({unit:0,amount:0});
    },
    deleteRow(index) {
      this.goods.splice(index, 1);
    }
  },
  mounted() {
    this.init();
    this.$nextTick(() => {
      fetch('https://frankfurter.app/latest?from=JPY&to=CNY').then(resp => resp.json()).then(data => {
        this.rateInfo = data;
      })
      fetch('https://frankfurter.app/latest?from=USD&to=CNY').then(resp => resp.json()).then(data => {
        this.usRateInfo = data;
      })
      fetch('https://frankfurter.app/latest?from=HKD&to=CNY').then(resp => resp.json()).then(data => {
        this.hkdRateInfo = data;
      })
      fetch('https://frankfurter.app/latest?from=AUD&to=CNY').then(resp => resp.json()).then(data => {
        this.audRateInfo = data;
      })
    })
  }
});

<div id="app">
  <h3>{{title}}</h3>
  <p>
    代购汇率：<input type="text" v-model="currentRate" />
  </p>
  <table>
    <thead>
      <tr>
        <td width="30%">名称</td>
        <td width="20%">备注</td>
        <td width="10%">原价(当地货币价格)</td>
        <td width="20%">代购价(RMB)</td>
        <td>数量</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in goods">
        <td class="flex name"><input type="text" v-model="item.name" /><button @click="deleteRow(index)">删除</button></td>
        <td><input type="text" class="long-ipt" v-model="item.note" /></td>
        <td><input type="text" v-model="item.unit" /></td>
        <td>{{calc(item, currentRate)}}</td>
        <td class="flex">
          <button @click="action(-1, item)"> - </button>
          <input type="number" v-model="item.amount">
          <button @click="action(1, item)"> + </button>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <button @click="createRow()">添加项目</button>
    <button @click="all(1)">ALL +1</button>
    <button @click="all(-1)">ALL -1</button>
    <button @click="init()">归零</button>
  </div>
  <br>
  <div>
    额外费用<input type="text" v-model="otherPrice" />（如快递等...）
  </div>
  <h3>代购总价(RMB): {{totalPrice}} </h3>
  <h3>总数量: {{totalAmount}} </h3>
  <hr />
  <div>
    实时汇率：<input type="text" class="long-ipt" v-model="bocRate" /><br>
    接口调用预估<br>
    日元汇率：{{this.rateInfo.rates && this.rateInfo.rates.CNY}}<br>
    美元汇率：{{this.usRateInfo.rates && this.usRateInfo.rates.CNY}}<br>
    港元汇率：{{this.hkdRateInfo.rates && this.hkdRateInfo.rates.CNY}}<br>
    澳元汇率：{{this.audRateInfo.rates && this.audRateInfo.rates.CNY}}
  </div>
  <div>
    总原价：{{totalOriginalPrice}}
    delta（差价）: {{totalPrice-totalOriginalPrice}}
  </div>
  <div> {{goods}} </div>
</div>

body,html {
  font-size: 12px;
}
input {
  width:50px;
}
.long-ipt {
  width: 100px;
}
button {
  background: none;
  outline: none;
  border: 1px solid #ddd;
}
table {
  width: 100%;
  border: 1px solid #333;
}
table thead td {
  background: #ddd;
}
table td {
  border: 1px solid #333;
}
.flex {
  display: flex;
}
.flex * {
  flex: 1;
}
td.flex input {
  width: 30px;
}
td.flex.name input {
  width: auto;
  flex: 2
}
td.flex.name button {
  flex: 1
}
.hide {
  display: none;
}