vue实战之购物车基本功能的搭建

各位客官，请先看效果大屏幕！⬇️⬇️⬇️

购物车基本交互功能

一、渲染数据来源于本地存储

// 添加商品到购物车的函数
const add = function () {
  // 构造新的购物车项目对象
  const newItem = {
    name: name.value,
    tem: temSelected.value,
    sugar: sugarSelected.value,
    img: image.value,
    milk:milkSelected.value,
    des: des.value,
    signal: price.value,
    num: parseInt(number.value),
    cream:creamSelected.value
  };
  console.log(milkSelected.value)
  console.log(creamSelected.value);
  // 获取当前的购物车数据，如果本地存储中没有，则创建一个空数组
  let cartData = JSON.parse(localStorage.getItem('CartData')) || [];

  // 查找购物车中是否已存在相同商品
  let existItemIndex = cartData.findIndex(item =>
    item.tem === newItem.tem &&
    item.sugar === newItem.sugar &&
    item.img === newItem.img && item.name === newItem.name
    &&item.cream===newItem.cream&&item.milk===newItem.milk
  );

  if (existItemIndex !== -1) {
    // 如果存在相同商品，则更新商品数量
    cartData[existItemIndex].num += newItem.num
  } else {
    // 如果不存在相同商品，则将新商品添加到购物车中
    cartData.push(newItem);
  }

  // 将更新后的购物车数据存储回本地存储
  localStorage.setItem('CartData', JSON.stringify(cartData));
  list.value = JSON.parse(localStorage.getItem('CartData')) || [];
  len.value = list.value.length
};

二、定义响应式变量

import { ref, onMounted, computed, watchEffect } from 'vue'; // 导入 Vue 相关函数
import { Toast } from 'vant';
// 定义响应式变量
const list = ref([]); // 商品列表
const checked = ref({}); // 商品选中状态
const show = ref(false); // 控制编辑状态的显示与隐藏
const allChecked = ref(false); // 控制全选按钮状态

三、onMounted函数

onMounted(() => {
  // 从本地存储中获取购物车数据，如果没有则为空数组
  list.value = JSON.parse(localStorage.getItem('CartData')) || [];
  // 初始化商品选中状态，默认全部未选中
  checked.value = Array(list.value.length).fill(false);
  // 如果购物车为空，则将全选按钮置为未选中状态
  if (list.value.length === 0) {
    allChecked.value = false;
  } else {
    return;
  }
})

四、全选功能实现

const checkAll = () => {
  let allSelected = true;
  // 检查是否所有商品都被选中
  for (const key in checked.value) {
    if (!checked.value[key]) {
      allSelected = false;
      break;
    }
  }
  // 根据情况更新全选按钮状态，并将所有商品的选中状态设置为全选状态
  allChecked.value = !allSelected;
  for (let i = 0; i < list.value.length; i++) {
    checked.value[i] = allChecked.value;
  }
}
// 监听选中状态变化，更新全选按钮状态
watchEffect(() => {
  let selectedCount = Object.values(checked.value).filter(value => value).length;
  if (selectedCount === list.value.length) {
    allChecked.value = true;
  } else {
    allChecked.value = false;
  }
})

五、总价的计算属性

const total = computed(() => {
  let sum = 0.00;
  for (const [index, item] of list.value.entries()) {
    if (checked.value[index]) {
      sum += (item.signal * item.num) * 100; // 计算总金额
    }
  }
  return sum;
})

六、返回、编辑函数

const back = () => {
  if (show.value == false) {
    return;
  } else {
    show.value = !show.value;
  }
}
const edit = () => {
  show.value = !show.value;
  if (list.value.length == 0) {
    Toast('暂无商品');
  }
}

七、滑动删除函数

const deleteItem = (index) => {
  list.value.splice(index, 1);
  localStorage.setItem('CartData', JSON.stringify(list.value));
};

八、删除选中函数

const deleteSelectedItems = () => {
  const newList = [];
  const newChecked = {};
  list.value.forEach((item, index) => {
    if (!checked.value[index]) {
      newList.push(item);
      newChecked[index] = checked.value[index];
    }
  });
  // 更新商品列表和选中状态，并将更新后的数据存储到本地
  list.value = newList;
  checked.value = newChecked;
  localStorage.setItem('CartData', JSON.stringify(newList));
  // 如果所有商品都被删除，则将全选按钮置为未选中状态
  const allItemsSelected = list.value.length === Object.keys(newChecked).length;
  allChecked.value = allItemsSelected;
};

九、删除全选函数        

const deleteAll = () => {
  if (allChecked.value || Object.values(checked.value).some(value => value)) {
    // 如果有商品被选中，则执行删除选中商品的函数
    deleteSelectedItems();
    allChecked.value = false;
  } else {
    // 如果没有商品被选中，则提示用户选择商品
    Toast('未选中商品');
  }
}

十、判断是否为最后一个商品的计算属性

const isLastItem = computed(() => index => index === list.value.length - 1);

 不足之处，麻烦大家多多支持！🤜🤛