vue + element 收银台逻辑_vue 收银界面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40095911/article/details/120821024

这篇博客介绍了如何使用Vue.js和Element UI组件库来实现购物车功能。通过遍历API接口获取的数据，对商品列表进行操作，设置初始数量为0，并在input-number中实现双向数据绑定和@change事件监听，以处理商品的增减和删除。同时，通过computed属性计算总价，并将数据存储在cart数组中，方便后续使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收银最麻烦的就是它的字段设置了，数量，总数，价格，总价，显示在右侧统计区等等吧，今天正好用到就把他做一下简单的整理方便以后不用写轮子了

我的列表呢是一个这样的二维数组第一层是分类，分类下面带着各类的食品名称。

所以首先得思路是把在api接口获取到的数据进行foreach 循环一下，之后再进行 num字段的添加，最后向data里面记性赋值。

    async getlist() {
      let arr = {
        food_time_type: 1,
        restaurant_id: this.$store.getters['user/restaurant_id'],
      }
      const {
        data: { list },
      } = await lists(arr)
      list.forEach((item) => {
        item.food_list.forEach((tem) => {
          tem.num = '0'
        })
      })
      this.list = list
    },

还有一个就是 element ui 里面的 input-number v-model 和 @Change 方法

v-model 跟item.num 进行绑定这样数据就可以双向改变了，后面在 @Change里面传入item 后进行增加或减少以及删除。

   handleChange(value) {
      if (value.num != 0) {
        if (this.cart.includes(value)) {
          for (let i in this.cart.value) {
            this.cart[i].num++
          }
        } else {
          this.cart.push(value)
          console.log(this.cart)
        }
      } else {
        let index = this.cart.indexOf(value)
        this.cart.splice(index, 1)
      }
    },

返回总价的话就在computed 里面直接返回 this.cart 里面的num总价即可，this.cart 就是用来存储信息使用的。

   toprice() {
      var price_total = 0
      this.cart.forEach((item) => {
        price_total += item.num * item.price
      })
      return price_total.toFixed(2)
    },