购物车案例（源码分享）

码喽小郑

于 2024-07-23 15:45:58 发布

阅读量572

点赞数 13

文章标签： vue

本文链接：https://blog.csdn.net/m0_74948742/article/details/140620988

版权

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

购物车效果图

需求说明：

渲染功能
删除功能
修改个数
全选反选
统计选中的总价和总数量

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能： v-on 绑定事件，获取当前行的id

根据id找到数组中对应项 ->find 然后在修改数目

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

4.全选反选

必须所有的小选框都选中，全选按钮才选中 → every
如果全选按钮选中，则所有小选框都选中
如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

5.统计选中的总价和总数量：通过计算属性来计算选中的总价和总数量

源码分享（需要自取）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>购物车</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0 ">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active: item.isChecked}">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="add(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num * item.price}}</div>
            <div class="td"><button @click="del(item.id)">删除</button></div>
          </div>


          <!-- 底部 -->
          <div class="bottom">
            <!-- 全选 -->
            <label class="check-all">
              <input type="checkbox" v-model="isAll" />
              全选
            </label>
            <div class="right-box">
              <!-- 所有商品总价 -->
              <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice
                  }}</span></span>
              <!-- 结算按钮 -->
              <button class="pay">结算({{ totalCount }})</button>
            </div>
          </div>
        </div>
        <!-- 空车 -->
        <div class="empty" v-else>🛒空空如也</div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            // 水果列表
            fruitList: [
              {
                id: 1,
                icon: './img/火龙果.png',
                isChecked: true,
                num: 2,
                price: 6,
              },
              {
                id: 2,
                icon: './img/荔枝.png',
                isChecked: false,
                num: 7,
                price: 20,
              },
              {
                id: 3,
                icon: './img/榴莲.png',
                isChecked: false,
                num: 3,
                price: 40,
              },
              {
                id: 4,
                icon: './img/鸭梨.png',
                isChecked: true,
                num: 10,
                price: 3,
              },
              {
                id: 5,
                icon: './img/樱桃.png',
                isChecked: false,
                num: 20,
                price: 34,
              },
            ],
          },
          computed: {
            //默认计算属性: 只能获取不能设置 要设置需要写完整写法
            isAll: {
              get() {
                return this.fruitList.every(item => item.isChecked)
              },
              set(value) {
                //基于拿到的布尔值 要让所有的小选框 同步状态
                this.fruitList.forEach(item => item.isChecked = value)
              }

            },
            totalCount() {
              return this.fruitList.reduce((sum, item) => {
                if (item.isChecked) {
                  return sum + item.num
                } else {
                  return sum
                }
              }, 0)
            },
            totalPrice() {
              return this.fruitList.reduce((sum, item) => {
                if (item.isChecked) {
                  return sum + item.num * item.price
                } else {
                  return sum
                }
              }, 0)

            }

          },


          methods: {
            del(id) {
              this.fruitList = this.fruitList.filter(item => item.id != id)
            },

            add(id) {
              const fruit = this.fruitList.find(item => item.id === id)
              fruit.num++
            },
            sub(id) {
              const fruit = this.fruitList.find(item => item.id === id)
              fruit.num--
            }
          },

        })
      </script>
</body>

</html>