vue 实现药品费用

Vue 实现药品费用计算功能

在Vue中实现药品费用计算功能，可以通过数据绑定、计算属性和表单交互来完成。以下是具体实现方法：

数据模型设计

在Vue组件的data中定义药品列表和相关信息：

data() {
  return {
    medicines: [
      { name: '阿莫西林', price: 25.5, quantity: 0 },
      { name: '布洛芬', price: 18.0, quantity: 0 },
      { name: '维生素C', price: 12.8, quantity: 0 }
    ],
    discount: 0
  }
}

计算总价

使用Vue的计算属性自动计算总费用：

computed: {
  subtotal() {
    return this.medicines.reduce((sum, item) => {
      return sum + (item.price * item.quantity)
    }, 0)
  },
  total() {
    return this.subtotal * (1 - this.discount/100)
  }
}

模板渲染

在模板中显示药品列表和计算结果：

<div v-for="(medicine, index) in medicines" :key="index">
  <span>{{ medicine.name }}</span>
  <span>单价: {{ medicine.price }}元</span>
  <input 
    type="number" 
    v-model.number="medicine.quantity" 
    min="0"
  >
</div>

<div>
  <label>折扣(%)</label>
  <input type="number" v-model.number="discount" min="0" max="100">
</div>

<div>
  <h3>小计: {{ subtotal.toFixed(2) }}元</h3>
  <h3>总计: {{ total.toFixed(2) }}元</h3>
</div>

表单验证

添加基本的输入验证确保数据有效性：

watch: {
  discount(newVal) {
    if (newVal < 0) this.discount = 0
    if (newVal > 100) this.discount = 100
  }
}

保存数据

可以添加方法将数据保存到后端或本地存储：

methods: {
  savePrescription() {
    const prescription = {
      medicines: this.medicines,
      discount: this.discount,
      total: this.total
    }
    // 调用API保存数据
    console.log('处方数据:', prescription)
  }
}

响应式更新

Vue的响应式系统会自动在药品数量或折扣变化时更新总价显示，无需手动操作DOM。这种实现方式简洁高效，符合Vue的设计理念。