vue3前端开发-小兔鲜-购物车的列表渲染和删除及统计计算！这一次，完成列表的渲染和统计计算的内容，比如，统计购物车内有多少货物的数量，及商品的总价格。

---

<script setup>
import { useCartStore } from '@/stores/cart'
const cartStore = useCartStore()

</script>

<template>
    <div class="cart">
      <a class="curr" href="javascript:;">
        <i class="iconfont icon-cart"></i><em>{{cartStore.cartList.length}}</em>
      </a>
      <div class="layer">
        <div class="list">
          
          <div class="item" v-for="i in cartStore.cartList" :key="i">
            <RouterLink to="">
              <img :src="i.picture" alt="" />
              <div class="center">
                <p class="name ellipsis-2">
                  {{ i.name }}
                </p>
                <p class="attr ellipsis">{{ i.attrsText }}</p>
              </div>
              <div class="right">
                <p class="price">&yen;{{ i.price }}</p>
                <p class="count">x{{ i.count }}</p>
              </div>
            </RouterLink>
            <i class="iconfont icon-close-new" @click="cartStore.delCart(i.skuId)"></i>
          </div>
         
        </div>
        <div class="foot">
          <div class="total">
            <p>共 {{ cartStore.allCount }} 件商品</p>
            <p>&yen; {{cartStore.allPrice.toFixed(2)}} </p>
          </div>
          <el-button size="large" type="primary" >去购物车结算</el-button>
        </div>
      </div>
  </div>
  </template>



<style scoped lang="scss">
.cart {
  width: 50px;
  position: relative;
  z-index: 600;

  .curr {
    height: 32px;
    line-height: 32px;
    text-align: center;
    position: relative;
    display: block;

    .icon-cart {
      font-size: 22px;
    }

    em {
      font-style: normal;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1px 6px;
      line-height: 1;
      background: $helpColor;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      font-family: Arial;
    }
  }

  &:hover {
    .layer {
      opacity: 1;
      transform: none;
    }
  }

  .layer {
    opacity: 0;
    transition: all 0.4s 0.2s;
    transform: translateY(-200px) scale(1, 0);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50px;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 4px;
    padding-top: 10px;

    &::before {
      content: "";
      position: absolute;
      right: 14px;
      top: -10px;
      width: 20px;
      height: 20px;
      background: #fff;
      transform: scale(0.6, 1) rotate(45deg);
      box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
    }

    .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70px;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      align-items: center;

      .total {
        padding-left: 10px;
        color: #999;

        p {
          &:last-child {
            font-size: 18px;
            color: $priceColor;
          }
        }
      }
    }
  }

  .list {
    height: 310px;
    overflow: auto;
    padding: 0 10px;

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-track {
      background: #f8f8f8;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #eee;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #ccc;
    }

    .item {
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;
      position: relative;

      i {
        position: absolute;
        bottom: 38px;
        right: 0;
        opacity: 0;
        color: #666;
        transition: all 0.5s;
      }

      &:hover {
        i {
          opacity: 1;
          cursor: pointer;
        }
      }

      a {
        display: flex;
        align-items: center;

        img {
          height: 80px;
          width: 80px;
        }

        .center {
          padding: 0 10px;
          width: 200px;

          .name {
            font-size: 16px;
          }

          .attr {
            color: #999;
            padding-top: 5px;
          }
        }

        .right {
          width: 100px;
          padding-right: 20px;
          text-align: center;

          .price {
            font-size: 16px;
            color: $priceColor;
          }

          .count {
            color: #999;
            margin-top: 5px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>

首先，需要新增一个组件，叫HeaderCart.vue。这是一个独立的组件，它就是顶部那个缩略图调用的商品购物车的组件。在这里面会显示目前用户勾选添加进来的一些商品信息。

---

如图所示，这个就是那个顶部购物车的组件代码显示的图标。

当鼠标滑动停止在该图片上面，就会显示当前购物车内的情况。

---

它的调用位置在LayoutHeader.vue里面。有一个调用入口

如图所示。这个位置就是我们刚刚新增的头部购物车组件的调用入口位置。

---

import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
export const useCartStore =defineStore('cart',()=>{
    const cartList = ref([])
    const addCart = (goods)=>{
        //添加购物车操作
        //如果已经添加过了，count++
        //没有添加过，直接push
        //s思路：通过匹配传递过来的商品对象的中的skuId能不能在cartList中找到，
        const item = cartList.value.find((item)=>goods.skuId === item.skuId)
        if(item){
            //找到了
            item.count++
        }else{
            cartList.value.push(goods)
        }
    }
     // 删除购物车
    const delCart = async (skuId) => {
    // 思路：
    // 1. 找到要删除项的下标值 - splice
    // 2. 使用数组的过滤方法 - filter
    const idx = cartList.value.findIndex((item) => skuId === item.skuId)
    cartList.value.splice(idx, 1)
    }
    //计算属性的使用
    const allCount =computed(()=>cartList.value.reduce((a,c)=>a+c.count,0))
    const allPrice =computed(()=>cartList.value.reduce((a,c)=>a+c.count*c.price,0))
    return{
        cartList,
        addCart,
        delCart,
        allCount,
        allPrice
    }
},{
    //同步存储到缓存中，刷新浏览器就不会丢失数据了
    persist: true,
})

这个就是cartStore.js的所有内容了。里面写好了增，删，统计价格，统计数字。

用到了计算属性。

---