vue 实现药品费用

Vue 实现药品费用计算功能

药品费用计算通常涉及药品单价、数量、折扣等要素。以下是在 Vue 中实现药品费用计算的几种方法：

数据绑定与计算属性

在 Vue 组件中定义药品数据模型，利用计算属性自动计算总费用：

data() {
  return {
    medicine: {
      price: 50,    // 单价
      quantity: 2,  // 数量
      discount: 0.9 // 折扣
    }
  }
},
computed: {
  totalCost() {
    return this.medicine.price * this.medicine.quantity * this.medicine.discount
  }
}

表单输入实时计算

结合 v-model 实现用户输入时的实时计算：

<template>
  <div>
    <input v-model.number="price" placeholder="单价">
    <input v-model.number="quantity" placeholder="数量">
    <input v-model.number="discount" placeholder="折扣">
    <p>总费用：{{ totalCost }}</p>
  </div>
</template>

多药品列表计算

处理多个药品的费用汇总：

data() {
  return {
    medicines: [
      { name: '药品A', price: 30, quantity: 1 },
      { name: '药品B', price: 45, quantity: 2 }
    ]
  }
},
computed: {
  grandTotal() {
    return this.medicines.reduce((sum, item) => {
      return sum + (item.price * item.quantity)
    }, 0)
  }
}

医保报销计算

加入医保报销比例计算：

computed: {
  reimbursement() {
    const baseCost = this.price * this.quantity
    return baseCost * this.insuranceRate  // insuranceRate为医保报销比例
  },
  actualPayment() {
    return this.totalCost - this.reimbursement
  }
}

验证与格式化

使用过滤器或方法对金额进行格式化显示：

filters: {
  currency(value) {
    return '¥' + value.toFixed(2)
  }
}

注意事项

• 数值输入建议使用 .number 修饰符自动转为数字类型
• 敏感计算应考虑在服务端进行二次验证
• 对于复杂业务逻辑，建议使用 Vuex 管理状态

以上方法可根据实际业务需求组合使用，构建完整的药品费用计算功能。