vue+vant实现购物车全选、单个删除功能

vue+vant实现购物车全选、单个删除功能

---

效果展示

一、html代码

<div class="cart">
    <ul class="cart-list">
      <li
        class="goods"
        v-for="(item, index) in cartList"
        :key="item._id + index"
      >
        <!-- checked是自己添加 -->
        <van-checkbox v-model="item.checked"></van-checkbox>
        <div class="good_img">
          <img :src="item.product.coverImg" alt="" />
        </div>
        <div class="goods-r">
          <h4>{{ item.product.name }}</h4>
          <div class="goods-price-num">
            <span class="goods-price"
              >￥
              <b>{{ item.product.price }}</b>
            </span>
            <span class="goods-num">
              <span
                @click="item.quantity > 1 && updatePro(item.product._id, -1)"
                >-</span
              >
              <i> {{ item.quantity }} </i>
              <span @click="updatePro(item.product._id, 1)">+</span>
              <span v-if="item.checked" class="del" @click="del(item._id)">
                ×
              </span>
            </span>
          </div>
        </div>
      </li>
    </ul>
    <van-submit-bar
      :price="sumPrice * 100"
      button-text="立即结算"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <van-icon name="delete" v-show="checked" @click="dels" />
    </van-submit-bar>
  </div>

二、 标题js代码

import { reqCartAPI, addCartAPI, deleProAPI } from "../../api/cart"; // 引入购物车数据接口请求
import { orderAPI } from "../../api/order"; //引入提交订单接口请求

export default {
  components: {},
  data() {
    return {
      cartList: [],
    };
  },
  computed: {
    // 计算商品总价
    sumPrice() {
      // 先选中勾选中的，然后计算总价钱
      return this.cartList
        .filter((item) => item.checked)
        .reduce((pre, cur) => {
          return pre + cur.product.price * cur.quantity; // 商品价格*购物车次商品的数量
        }, 0);
    },
    selectedProduct() {
      let selectArr = [];
      this.cartList.forEach((item) => {
        if (item.checked) {
          selectArr.push({
            quantity: item.quantity,
            product: item._id,
            price: item.product.price,
          });
        }
      });
      return selectArr;
    },
    // 全选
    checked: {
      // 如果购物车全选按钮式true，就全选。如果是false，那么上面的不选中
      set(flag) {
        // return this.cartList.forEach((data) => (data.checked = flag));
        console.log(flag);
        // 动态添加属性
        this.cartList.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        // 如果购物车的总长度等于选中的总长度，n那么返回true
        return (
          this.cartList.length ==
          this.cartList.filter((data) => data.checked == true).length
        );
      },
    },
  },
  watch: {},

  methods: {
    // 获取购物车列表功能
    async getCartData() {
      const res = await reqCartAPI();
      if (res.status == 200) {
        this.cartList = res.data;
        console.log(this.cartList);
      }
    },
    // 点+或-商品数量
    async updatePro(id, num) {
      // 调用接口，添加购物车
      await addCartAPI(id, num);
      // 添加完购物车，可以重新调用一次接口，添加购物车之后，把cartList进行更新
      this.cartList.forEach((item) => {
        if (item.product._id == id) {
          item.quantity = item.quantity + num;
        }
      });
    },
    // 立即结算=>生成订单
    async onSubmit() {
      // 判断有没有收货人，没有添加收货人，有执行提交订单请求
      // 下面是写死的数据
      const res = await orderAPI({
        receiver: "xxx",
        regions: "xx省xx市xx县（区）",
        address: "xx街道xx号",
        orderDetails: this.selectedProduct,
      });
      console.log(res);
    },
    // 删除购物车单个商品
    async del(id) {
      const res = await deleProAPI(id);
      console.log(res);
      this.getCartData();
    },
    // 删除所有商品
    dels() {},
  },
  created() {
    this.getCartData();
  },
  mounted() {},
};

标题三、css样式

<style scoped>
.goods {
  height: 80px;
  display: flex;
  padding: 10px;
}
.goods .good_img {
  width: 80px;
  height: 80px;
  margin: 0 8px;
}
.goods .good_img img {
  width: 100%;
  height: 100%;
}
.goods-r {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.goods .goods-r h4 {
  font-weight: normal;
  margin: 0;
  line-height: 1;
}
.goods .goods-r .goods-price-num {
  display: flex;
  justify-content: space-between;
}
.goods .goods-r .goods-price-num .goods-price {
  color: red;
}

.goods .goods-r .goods-price-num .goods-num i {
  font-style: normal;
}
.goods .goods-r .goods-price-num .goods-num .del {
  color: red;
}
</style>