vue 实现药品费用

实现药品费用计算的 Vue 组件

以下是一个基于 Vue 的药品费用计算实现方案，包含核心功能和代码示例。

数据模型设计

药品费用通常涉及药品单价、数量和折扣等因素，数据模型可以这样设计：

data() {
  return {
    medicines: [
      { id: 1, name: '药品A', price: 50, quantity: 1, discount: 0 },
      { id: 2, name: '药品B', price: 80, quantity: 1, discount: 10 }
    ],
    newMedicine: { name: '', price: 0, quantity: 1, discount: 0 }
  }
}

费用计算方法

计算单项药品费用和总费用的计算属性：

computed: {
  totalCost() {
    return this.medicines.reduce((sum, med) => {
      return sum + (med.price * med.quantity * (100 - med.discount) / 100)
    }, 0)
  },
  itemCosts() {
    return this.medicines.map(med => ({
      ...med,
      cost: med.price * med.quantity * (100 - med.discount) / 100
    }))
  }
}

用户交互界面

药品列表和费用显示的模板示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>药品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>折扣(%)</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="med in itemCosts" :key="med.id">
          <td>{{ med.name }}</td>
          <td>{{ med.price }}</td>
          <td><input type="number" v-model.number="med.quantity" min="1"></td>
          <td><input type="number" v-model.number="med.discount" min="0" max="100"></td>
          <td>{{ med.cost.toFixed(2) }}</td>
        </tr>
      </tbody>
    </table>

    <div class="total">
      <h3>总费用: {{ totalCost.toFixed(2) }}</h3>
    </div>

    <div class="add-medicine">
      <input v-model="newMedicine.name" placeholder="药品名称">
      <input type="number" v-model.number="newMedicine.price" placeholder="单价" min="0">
      <button @click="addMedicine">添加药品</button>
    </div>
  </div>
</template>

添加药品功能

实现添加新药品到列表的方法：

methods: {
  addMedicine() {
    if (this.newMedicine.name && this.newMedicine.price > 0) {
      this.medicines.push({
        id: Date.now(),
        ...this.newMedicine
      })
      this.newMedicine = { name: '', price: 0, quantity: 1, discount: 0 }
    }
  }
}

样式优化

添加基本样式提升用户体验：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

input[type="number"] {
  width: 60px;
}

.total {
  text-align: right;
  font-size: 1.2em;
  margin: 20px 0;
}

.add-medicine {
  margin-top: 20px;
}

扩展功能建议

1. 药品分类管理
2. 医保报销比例计算
3. 处方有效期验证
4. 药品库存检查
5. 历史记录保存

这个实现提供了药品费用计算的核心功能，可以根据实际需求进一步扩展和完善。