pos结账系统

来源于技术胖的视屏总结
实现如下的效果：点击右侧常用商品，判断左边的表格里面有没有这个商品，如果有就只增加该商品的数量，如果没有，就在表格中插入一条与之对应的数据

<div class="title">常用商品div>
          <div class="often-goods-list">
            <ul>
              <li v-for="(goods,index) in oftenGoods" :key="index" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}span>
                <span class="o-price">{{goods.price}}span>
              li>
            ul>
          div>
        div>

 addOrderList(goods){
      this.count=0;
      this.money=0;
      let isHave = false;
      // //判断是否这个商品已经存在于订单列表
      for(var i=0;i<this.tableData.length;i++){
        if(goods.goodsId==this.tableData[i].goodsId){
          isHave = true
        }
      };
      // 根据isHave的值判断订单列表中是否已经有此商品
      if(isHave==true){
        // 存在就进行数量添加
        let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId)
        arr[0].count++
      }else{
        //进行数量和价格的汇总计算
        let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
        this.tableData.push(newGoods)
      };
       //进行数量和价格的汇总计算
      this.tableData.forEach(element => {
        this.count+=element.count;
        this.money+=element.price*element.count
      });
    }

删除单个商品同时计算总数量和总金额

<el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除el-button>

    // 删除单个商品
    delSingleGoods(goods) {
      this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId);
      this.getAllMoney()
    },
      //进行数量和价格的汇总计算
    getAllMoney() {
      this.count = 0;
      this.money = 0;
      if (this.tableData) {
        this.tableData.forEach(element => {
          this.count += element.count;
          this.money += element.price * element.count;
        });
      }
    }

删除所有商品

<el-button type="danger" @click="dealAll()">删除el-button>

    // 删除所有商品
    dealAll(){
      this.tableData=[]
      this.count=0
      this.money=0
    }

全代码

<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
          <el-tab-pane label="点餐" name="first">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="goodsName" label="商品名称">el-table-column>
              <el-table-column prop="count" label="数量" width="50">el-table-column>
              <el-table-column prop="price" label="金额" width="70">el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加el-button>
                template>
              el-table-column>
            el-table>
            <div class="total">
              <p>
                <span>数量： {{count}}span>     
                <span>金额： {{money}} 元span>
              p>
            div>
            <div class="div-btn">
              <el-button type="warning">挂单el-button>
              <el-button type="danger" @click="dealAll()">删除el-button>
              <el-button type="success">结账el-button>
            div>
          el-tab-pane>
          <el-tab-pane label="挂单" name="second">挂单el-tab-pane>
          <el-tab-pane label="外卖" name="third">外卖el-tab-pane>
        el-tabs>
      el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品div>
          <div class="often-goods-list">
            <ul>
              <li v-for="(goods,index) in oftenGoods" :key="index" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}span>
                <span class="o-price">{{goods.price}}span>
              li>
            ul>
          div>
        div>
        <div class="goods-type">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="汉堡" name="hanbao">
              <ul class="cookList">
                <li v-for="(goods,index) in type0Goods" :key="index" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img :src="goods.goodsImg" width="100%" />
                  span>
                  <span class="foodName">{{goods.goodsName}}span>
                  <span class="foodPrice">￥{{goods.price}}元span>
                li>
              ul>
            el-tab-pane>
            <el-tab-pane label="小食" name="xiaoshi">
              <ul class="cookList">
                <li v-for="(goods,index) in type1Goods" :key="index" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img :src="goods.goodsImg" width="100%" />
                  span>
                  <span class="foodName">{{goods.goodsName}}span>
                  <span class="foodPrice">￥{{goods.price}}元span>
                li>
              ul>
            el-tab-pane>
            <el-tab-pane label="饮料" name="yinliao">
              <ul class="cookList">
                <li v-for="(goods,index) in type2Goods" :key="index" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img :src="goods.goodsImg" width="100%" />
                  span>
                  <span class="foodName">{{goods.goodsName}}span>
                  <span class="foodPrice">￥{{goods.price}}元span>
                li>
              ul>
            el-tab-pane>
            <el-tab-pane label="套餐" name="fourth">
              <ul class="cookList">
                <li v-for="(goods,index) in type3Goods" :key="index" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img :src="goods.goodsImg" width="100%" />
                  span>
                  <span class="foodName">{{goods.goodsName}}span>
                  <span class="foodPrice">￥{{goods.price}}元span>
                li>
              ul>
            el-tab-pane>
          el-tabs>
        div>
      el-col>
    el-row>
  div>
template>

<script>
import axios from "axios";
export default {
  name: "Pos",
  mounted() {
    var orderHeight = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeight + "px";
  },
  data() {
    return {
      count: 0,
      money: 0,
      activeName2: "first",
      activeName: "hanbao",
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: []
    };
  },
  methods: {
    handleClick() {},
    addOrderList(goods) {
      this.count = 0;
      this.money = 0;
      let isHave = false;
      // //判断是否这个商品已经存在于订单列表
      for (var i = 0; i < this.tableData.length; i++) {
        if (goods.goodsId == this.tableData[i].goodsId) {
          isHave = true;
        }
      }
      // 根据isHave的值判断订单列表中是否已经有此商品
      if (isHave == true) {
        // 存在就进行数量添加
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else {
        //进行数量和价格的汇总计算
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      this.getAllMoney()
    },
    // 删除单个商品
    delSingleGoods(goods) {
      this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId);
      this.getAllMoney()
    },
      //进行数量和价格的汇总计算
    getAllMoney() {
      this.count = 0;
      this.money = 0;
      if (this.tableData) {
        this.tableData.forEach(element => {
          this.count += element.count;
          this.money += element.price * element.count;
        });
      }
    },
    // 删除所有商品
    dealAll(){
      this.tableData=[]
      this.count=0
      this.money=0
    }
  },
  created() {
    axios
      .get(
        "https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods"
      )
      .then(res => {
        this.oftenGoods = res.data;
      })
      .catch(error => {
        alert("网络错误");
      });
    axios
      .get(
        "https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods"
      )
      .then(response => {
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        alert("网络错误，不能访问");
      });
  }
};
script>

<style scoped>
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0ccda;
}
.div-btn {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
}
.often-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #f9fafc;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  background-color: #fff;
}
.o-price {
  color: #58b7ff;
}
.goods-type {
  clear: both;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.total {
  text-align: center;
  border-bottom: 1px solid#eee;
  padding: 5px;
}
style>