vue购物车

vue实现购物车全选反选，计算价格等

vue购物车

<template>
  <div class="home">
    <table cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <td>
            <label class="label">
              <input type="checkbox" v-model="checkAll" @change="allSelect" />
              <span>全选</span>
            </label>
          </td>
          <td>商品名称</td>
          <td>商品图片</td>
          <td>商品价格</td>
          <td>商品数量</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(item,index) in goodsList" :key="index">
          <td>
            <input
              type="checkbox"
              class="input"
              :value="item.id"
              :checked="item.is_check"
              @click="checkInput(index)"
            />
          </td>
          <td>{{item.goods_name}}</td>
          <td class="imgBox">
            <img :src="item.goods_img" alt="商品图片">
          </td>
          <td>{{item.goods_price}}</td>
          <td class="numBox">
            <span @click="delFn(index)">-</span>
            <input type="text" v-model="item.goods_num" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" @input="inputNumFn">
            <span @click="addFn(index)">+</span>
          </td>
        </tr>

        <tr class="lasttr">
          <td>总数量</td>
          <td class="color">{{totalNum}}</td>
          <td>总价格</td>
          <td class="color">{{totalPrice}}</td>
          <td class="jiesuanBox">
            <span>去结算</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList:[
        {id:1,goods_name:'娃娃菜',goods_img:'../../static/imgs/baby_cabbage.png',goods_price:5,goods_num:2,is_check:false},
        {id:2,goods_name:'大白菜',goods_img:'../../static/imgs/cabbage.png',goods_price:3,goods_num:1,is_check:false},
        {id:3,goods_name:'胡萝卜',goods_img:'../../static/imgs/carrot.png',goods_price:2,goods_num:4,is_check:false},
        {id:4,goods_name:'彩椒',goods_img:'../../static/imgs/Colored_pepper.png',goods_price:6,goods_num:6,is_check:false},
        {id:5,goods_name:'玉米',goods_img:'../../static/imgs/corn.png',goods_price:3,goods_num:2,is_check:false},
        {id:6,goods_name:'茄子',goods_img:'../../static/imgs/eggplant.png',goods_price:3,goods_num:3,is_check:false},
        {id:7,goods_name:'洋葱',goods_img:'../../static/imgs/onion.png',goods_price:3,goods_num:3,is_check:false},
        {id:8,goods_name:'南瓜',goods_img:'../../static/imgs/pumpkin.png',goods_price:7,goods_num:2,is_check:false},
        {id:9,goods_name:'紫薯',goods_img:'../../static/imgs/Purple_potato.png',goods_price:5,goods_num:8,is_check:false},
        {id:10,goods_name:'西红柿',goods_img:'../../static/imgs/tomato.png',goods_price:5,goods_num:4,is_check:false},
      ], 
      checkAll:false,
      totalNum:0,
      totalPrice:0.00,
    }
  },

  methods:{
    // 全选反选
    allSelect() {
      this.goodsList = [...this.goodsList].map(sel => {
        sel.is_check = this.checkAll
        return sel
      });
      this.getTotalNum()
      this.getTotalPrice()
    },

    // 不全选中--选中单个
    checkInput(e) {
      this.goodsList[e].is_check = !this.goodsList[e].is_check
      this.checkAll = !this.goodsList.some(sel => !sel.is_check)
      this.getTotalNum()
      this.getTotalPrice()
    },

    // 增加数量
    addFn(index){
      this.goodsList[index].goods_num += 1
      this.getTotalNum()
      this.getTotalPrice()
    },

    // 减少数量
    delFn(index){
      if (this.goodsList[index].goods_num<=1) {
        console.log('不能再减了')
        return
      } else {
        this.goodsList[index].goods_num -= 1
        this.getTotalNum()
        this.getTotalPrice()
      }
    },

    // 输入数量
    inputNumFn(){
      this.getTotalNum()
      this.getTotalPrice()
    },

    // 封装：计算总数量
    getTotalNum() {
      let zongnum = 0
      for (var i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].is_check) {
          zongnum += this.goodsList[i].goods_num
        }
      }
      this.totalNum = zongnum
    },

    // 封装：计算总价格
    getTotalPrice() {
      let zongjia = 0
      for (var i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].is_check) {
          zongjia +=this.goodsList[i].goods_price *this.goodsList[i].goods_num
        }
      }
      this.totalPrice = zongjia.toFixed(2);
    },
  },
  
};
</script>

<style scoped lang="less">
@import url('./home.less');
</style>

home.less

.home{
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    table{
        box-sizing: border-box;
        width: 60%;
        text-align: center;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        thead{
            background: #C7C763;
        }
        .lasttr{
            background: #C7C763;
        }
        td{
            height: 60px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            img{
                width: 58px;
                height: 58px;
            }
            .label{
                cursor: pointer;
                input{
                    cursor: pointer;
                }
            }
            .input{
                cursor: pointer;
            }
        }
        .imgBox{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .color{
            color: #ff3333;
        }
        .numBox{
            span{
                cursor: pointer;
                background: #C7C763;
                display: inline-block;
                width: 30px;
                height: 30px;
                line-height: 30px;
            }
            input{
                width: 100px;
                margin: 0 20px;
                height: 30px;
                text-align: center;
                outline: none;
            }
        }
        .jiesuanBox{
            span{
                background: #ff3333;
                display: inline-block;
                width: 100px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}