vue中的购物车

科科虽然是vue的项目但没有用elementui，我用了bootstrap和table差不多不过好看一些些哈哈哈哈哈ele的回头再写个~~

先上效果图
点击每行的"删除"按钮时，会弹出confirm框作询问
逻辑：
① “小计”直接用商品的单价*数量完成

②点击全选按钮，下面的单个商品的checkbox一起变
③点击单个商品的checkbox，只要有一个没选中，全选钮就不选中
④点击数量列的 + - 按钮可以操控“数量”，和后面一列的“小计”。
    注意点击 - 时，一般的设计为，“数量”不可小于1。
⑤“合计金额”使用computed，直接将每项的“小计”取出进行 += ，且只加进checkbox为选中状态的商品小计。

代码：

<template>
  <div>
    <h2 class="text-center">购物车</h2>
    //这些乱七八糟的类名都是bootstrap里的东西，没有也行，就是不好看哈哈哈
    <table class="table table-bordered table-hover table_width">
      <thead>
        <tr>
          <td>
            全选
            <input type="checkbox" v-model="allC" @click="allCheck" />
          </td>
          <td>商品</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(good, index) in cartData" :key="good.name">
          <td>
            <input
              type="checkbox"
              v-model="good.check"
              @click="smallCheck(index)"
            />
          </td>
          <td>{{ good.name }}</td>
          <td>{{ good.price }}</td>
          <td>
            <button class="btn" @click="subtract(index)">-</button>
            {{ good.num }}
            <button class="btn" @click="add(index)">+</button>
          </td>
          <td>{{ good.num * good.price }}</td>
          <td>
            <button class="btn btn-danger btn-sm" @click="del(index)">
              删除
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="6">合计金额：￥{{ allPrice }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        cartData: [
          {
            name: "手机1",
            price: 100,
            num: 1,
            check: true,
          },
          {
            name: "手机2",
            price: 2000,
            num: 2,
            check: true,
          },
          {
            name: "手机3",
            price: 3000,
            num: 1,
            check: true,
          },
          {
            name: "手机4",
            price: 1000,
            num: 1,
            check: true,
          },
        ],
        allC: true,
      };
    },
    computed: {
      allPrice() {
        let n = 0;

        this.cartData.map((item) => {
          if (item.check) {  //单个商品满足checkbox为选中状态才会加进去
            n += item.price * item.num;
          }
        });

        return n;
      },
    },
    methods: {
      allCheck() {
        this.cartData.map((item) => {
          item.check = !this.allC;
        });
      },
      smallCheck(i) {
        //在cartList中给每一项的check值只是初始值，但是当每项checkbox点击时，显示的v-model值都是相反的
        //所以我们先取反。。其实全选的checkbox也是这样，不过全选只有一个，脑子好翻我们代码就不翻了 
        //哈哈哈哈哈哈
        this.cartData[i].check = !this.cartData[i].check;
        //every是数组的遍历方法。每一项的值都是true时，return 出的结果才为true，否则即为false。
        this.allC = this.cartData.every((item) => {
          return item.check;
        });
      },
      subtract(i) {
        if (this.cartData[i].num > 1) {
          this.cartData[i].num--;
        }
      },
      add(i) {
        this.cartData[i].num++;
      },
      del(i) {
        this.$confirm("将该商品从购物车中移除？", "", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }).then(() => {
          //splice是一个数组的方法。参数 i 代表从 i 开始截，1 代表只截去一个。
          this.cartData.splice(i, 1);
        });
      },
    },
  };
</script>

tada~~~~ _{一个购物车就完成啦}