vue購物車

話不多說，直接上代碼，複製粘貼即可使用
UI 框架是bootstrap + iview 因爲BOSS說要適配ipad和手機

<template>
  <div class="ShoppingCart">
    <div class="container">
      <div class="row Title">
        <div class="col-sm-8">
          <h1>全部商品({{CountNum}}）</h1>
        </div>
        <div class="col-sm-4 address">收貨地址：</div>
      </div>
      <div class="row ShoppingCart-Title">
        <div class="col-sm-1">
          <div class="allchecked">
            <Checkbox label="twitter" :value="checkAll" @click.prevent.native="handleCheckAll">全選</Checkbox>
          </div>
        </div>

        <div class="col-sm-5 goodsinfo">商品信息</div>
        <div class="col-sm-2">單價</div>
        <div class="col-sm-2">數量</div>
        <div class="col-sm-1">金額</div>
        <div class="col-sm-1">操作</div>
      </div>
      <div class="row ShoppingCart-goods" v-for="(item,index) in data" :key="index">
        <div class="col-sm-1" style="justify-content: left;">
          <div class="Singlechecked" @click="checkAllGroupChange(item)">
            <Checkbox label v-model="item.IsChecked"></Checkbox>
          </div>
        </div>

        <div class="col-sm-5">
          <div class="row">
            <div class="col-sm-3">
              <img :src="item.img" alt>
            </div>
          </div>
        </div>
        <div class="col-sm-2">
          <b>
            <small>￥</small>
            {{item.price}}
          </b>
        </div>
        <div class="col-sm-2">
          <Button @click="NumReduce(item)">-</Button>
          <InputNumber :min="1" v-model="item.num"></InputNumber>
          <Button @click="NumAdd(item)">+</Button>
        </div>
        <div class="col-sm-1">
          <b>
            <small>￥</small>
            {{item.num*item.price |numFilter}}
          </b>
        </div>
        <div class="col-sm-1">
          <span @click="del(item)">刪除</span>
        </div>
      </div>

      <div class="row Total">
        <div class="col-sm-7">
          <Checkbox label :value="checkAll" @click.prevent.native="handleCheckAll">全選</Checkbox>
          <span>刪除</span>
        </div>
        <div class="col-sm-5">
          <span>已選商品（{{CountNum}}）件</span>
          <span>
            合計：
            <b>
              <small>￥：</small>
              {{totalprice |numFilter}}
            </b>
          </span>
          <Button type="warning">提交訂單</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShoppingCart",
  data() {
    return {
      checkAll: true,
      data: [
        {
          img: "../../common/images/LOGO.png",
          price: 199.89,
          num: 1,
          IsChecked: true
        },
        {
          img: "../../common/images/LOGO.png",
          price: 299.89,
          num: 1,
          IsChecked: true
        },
        {
          img: "../../common/images/LOGO.png",
          price: 399.89,
          num: 1,
          IsChecked: true
        }
      ]
    };
  },
  computed: {
    // 計算總價
    totalprice() {
      let total = 0;
      this.data.forEach(item => {
        if (item.IsChecked == true) {
          total += item.price * item.num;
        }
      });
      return total;
    },
    // 計算數量
    CountNum() {
      let count = 0;
      this.data.forEach(item => {
        if (item.IsChecked == true) {
          count += item.num;
        }
      });
      return count;
    }
  },
  methods: {
    // 加
    NumReduce(item) {
      return item.num <= 1 ? (item.num = 1) : item.num--;
    },
    // 減
    NumAdd(item) {
      return item.num++;
    },
    // 刪除
    del(item) {
     alert('請求接口刪除即可')
    },
    // 全選
    handleCheckAll() {
       this.checkAll = !this.checkAll;
      this.data.forEach(item => {
        let storage = this.checkAll
        item.IsChecked = storage
      });
    },
    // 單選
    checkAllGroupChange(item) {
      item.IsChecked = !item.IsChecked;
      this.IsCheckedAll();
    },
    //判斷是否全選
    IsCheckedAll() {
      let flag = true;
      console.log(flag)
      this.data.forEach(item => {
        if (!item.IsChecked) {
          flag = false;
        }
        this.checkAll = flag ? true : false;
      });
    }
  },
};
</script>

<style lang="stylus" scoped>

.ShoppingCart {
  .container {
    margin: 0.3rem auto;

    .Title {
      border-bottom: 1px solid #ccccc;
      padding: 0 0.3rem;
      line-height: 0.8rem;

      h1 {
        font-size: 0.36rem;
        color: $color-red;
      }

      .address {
        color: f2f2f2;
      }
    }

    .ShoppingCart-Title {
      padding: 0 0.3rem;
      text-align: center;
      line-height: 0.8rem;

      .allchecked {
        text-align: left;
      }
    }

    .ShoppingCart-goods {
      border: 1px solid #cccccc;
      padding: 0.3rem;
      margin-bottom: 0.3rem;

      /deep/.ivu-input-number-input {
        margin-top: -0.12rem;
      }

      img {
        width: 100%;
      }

      .col-sm-1, .col-sm-2 {
        display: flex;
        align-items: center;
        justify-content: center;

        /deep/.ivu-input-number-input {
          text-align: center;
        }
      }
    }

    .Total {
      background: #cccccc;
      line-height: 0.8rem;
      padding-left: 0.3rem;

      .col-sm-7 {
        line-height: 0.8rem;
      }

      .col-sm-5 {
        text-align: right;

        span {
          margin-right: 0.3rem;

          b {
            color: $color-red;
            font-weight: bold;

            small {
              font-weight: bold;
              font-size: 0.24rem;
            }
          }
        }

        button {
          height: 100%;
          margin-top: -0.08rem;
          border: none;
          border-radius: 0px;
        }
      }
    }
  }
}
</style>