购物车

介绍

网上购物已经成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？

本题需要在已提供的基础项目中，使用 Vue 2.x 的知识，解决购物车商品管理过程中遇到的问题。

准备

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
├── base.gif
├── css
│   └── index.css
├── effect.gif
├── images
│   ├── 1.png
│   └── 2.png
├── index.html
└── js
    ├── goods.js
    └── vue.js

其中：

  • base.gif 是初始效果图。
  • effect.gif 是最终实现的效果图。
  • js/goods.js 是数据文件。
  • js/vue.js 是 Vue 2.x 文件。
  • css/index.css 是样式文件。
  • images 是图片文件夹。
  • index.html 是页面布局及逻辑。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/08.zip && unzip 08.zip && rm 08.zip

在浏览器中预览 index.html 页面，具体显示【见项目文件夹中的 base.gif 】，请使用浏览器或者 VS Code 查看 gif 图。

当前出现的问题是：

  • 在“商品列表”中点击 N 次“加入购物车”按钮，会在购物车列表中出现 N 个该商品，且初始数量为 1。
  • 在“购物车”中点击商品数据后的加号（“+”）按钮，会在购物车列表中重复出现该商品，且初始数量为 1。
  • 在“购物车”中点击商品数据后的减号（“-”）按钮，并未将商品从购物车中移出。

目标

请在 index.html 文件中补全代码，最终实现购物车商品管理的功能。

注意：请勿修改 js/goods.js 文件中提供的数据！

具体需求如下：

（1）修改 addToCart 方法，实现将商品加入到购物车的功能。即：

  1. 点击“加入购物车”按钮后，如果购物车中不存在该商品，则将该商品添加到购物车末尾，并初始化数量为 1；
  2. 如果购物车中已存在该商品，则只在原数量上 +1 即可。

（2）完善 removeGoods 方法，实现移出购物车商品功能。即：

  1. 点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上 -1；
  2. 如果减后数量为 0，则将该商品从购物车中移除。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
  • 请勿修改 js/goods.js 文件中提供的数据。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 667 | 总提交次数: 674 | 通过率: 99%

难度: 中等 标签: 2022, 省赛, Web 前端, Vue.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
addToCart(goods) {
        // TODO：修改当前函数，实现购物车加入商品需求
        let arr = this.cartList.filter(item => { return item.id == goods.id })
        if (arr.length) {
          arr[0].num++
        } else {
          goods.num = 1;
          this.cartList.push(goods);
        }
        this.cartList = JSON.parse(JSON.stringify(this.cartList));
      },
      removeGoods(goods) {
        // TODO：补全代码实现需求
        goods.num--
        this.cartList = this.cartList.filter(item => item.num != 0)
      }
    }