Vue2+HTML5+CSS购物车实例：超实用购物车功能实现，附完整源代码和优惠券弹框」「新手必看！手把手教你用Vue2构建实用购物车——带有优惠券弹框的完整项目」「从零开始：Vue2 实现购物车功能

于 2024-10-01 11:44:53 发布
阅读量170 收藏 3
点赞数 5
文章标签： vue.js html5 大学生期末大作业 前端 购物车 优惠券 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/142669455
版权

b站视频演示效果：

效果图：

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue2 购物车界面</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    .cart-container {
      width: 375px;
      margin: 20px auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 10px;
    }
    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
    .cart-header h2 {
      font-size: 18px;
      font-weight: bold;
    }
    .cart-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .cart-item img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      object-fit: cover;
    }
    .item-info {
      flex-grow: 1;
      margin-left: 10px;
    }
    .item-info h4 {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .item-info p {
      color: #888;
      font-size: 14px;
    }
    .quantity-control {
      display: flex;
      align-items: center;
    }
    .quantity-control button {
      width: 25px;
      height: 25px;
      background-color: #ddd;
      border: none;
      cursor: pointer;
    }
    .quantity-control input {
      width: 40px;
      text-align: center;
      border: 1px solid #ddd;
      margin: 0 5px;
    }
    .recommend-section {
      background-color: #f5f5f5;
      padding: 10px;
    }
    .recommend-section h3 {
      margin-bottom: 10px;
    }
    .recommend-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
    }
    .recommend-item img {
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
    .checkout-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px;
      border-top: 1px solid #eee;
      background-color: #fff;
      margin-top: 10px;
    }
    .checkout-section button {
      background-color: #ff6700;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }

    /* 弹框样式 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .coupon-modal {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      max-width: 300px;
      width: 100%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    .coupon-modal h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .coupon-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .coupon-item {
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      cursor: pointer;
    }
    .coupon-item:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="cart-container">
      <div class="cart-header">
        <h2>购物车</h2>
        <span @click="showCouponModal = true">优惠券({{ availableCoupons.length }})</span>
      </div>

      <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
        <img :src="item.image" alt="商品图片">
        <div class="item-info">
          <h4>{{ item.name }}</h4>
          <p>¥ {{ item.price.toFixed(2) }}</p>
        </div>
        <div class="quantity-control">
          <button @click="decreaseQuantity(index)">-</button>
          <input type="text" v-model="item.quantity" readonly>
          <button @click="increaseQuantity(index)">+</button>
        </div>
      </div>

      <div class="recommend-section">
        <h3>您可能想买</h3>
        <div v-for="(recommend, index) in recommendedItems" :key="index" class="recommend-item">
          <img :src="recommend.image" alt="推荐商品">
          <div class="item-info">
            <h4>{{ recommend.name }}</h4>
            <p>¥ {{ recommend.price.toFixed(2) }}</p>
          </div>
          <button @click="addToCart(recommend)">+</button>
        </div>
      </div>

      <div class="checkout-section">
        <div>
          <p>券后合计: ¥ {{ finalPrice.toFixed(2) }}</p>
          <p>已减: ¥ {{ selectedDiscount.toFixed(2) }}</p>
        </div>
        <button @click="checkout">结算 ({{ totalItems }})</button>
      </div>
    </div>

    <!-- 优惠券弹框 -->
    <div v-if="showCouponModal" class="overlay" @click.self="showCouponModal = false">
      <div class="coupon-modal">
        <h3>选择优惠券</h3>
        <ul class="coupon-list">
          <li v-for="(coupon, index) in availableCoupons" :key="index" class="coupon-item" @click="selectCoupon(coupon)">
            {{ coupon.name }} - 减 ¥{{ coupon.discount }}
          </li>
        </ul>
        <button @click="showCouponModal = false">关闭</button>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        cartItems: [
          { name: '进口香蕉 600g', price: 7.60, quantity: 1, image: 'https://via.placeholder.com/60' },
          { name: '象牌 苏打水 325ml', price: 2.95, quantity: 2, image: 'https://via.placeholder.com/60' },
          { name: '洁柔抽纸 100张', price: 5.90, quantity: 1, image: 'https://via.placeholder.com/60' },
          { name: '乐事薯片 60g', price: 7.90, quantity: 3, image: 'https://via.placeholder.com/60' }
        ],
        recommendedItems: [
          { name: '进口香蕉 600g', price: 7.50, image: 'https://via.placeholder.com/50' },
          { name: '腰果 120g', price: 15.90, image: 'https://via.placeholder.com/50' },
          { name: '圣女果 500g', price: 9.80, image: 'https://via.placeholder.com/50' }
        ],
        availableCoupons: [
          { name: '满50减5', discount: 5 },
          { name: '满100减10', discount: 10 }
        ],
        selectedDiscount: 0,
        showCouponModal: false
      },
      computed: {
        totalPrice() {
          return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
        },
        finalPrice() {
          return this.totalPrice - this.selectedDiscount;
        },
        totalItems() {
          return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
        }
      },
      methods: {
        increaseQuantity(index) {
          this.cartItems[index].quantity++;
        },
        decreaseQuantity(index) {
          if (this.cartItems[index].quantity > 1) {
            this.cartItems[index].quantity--;
          }
        },
        addToCart(item) {
          const found = this.cartItems.find(cartItem => cartItem.name === item.name);
          if (found) {
            found.quantity++;
          } else {
            this.cartItems.push({ ...item, quantity: 1 });
          }
        },
        selectCoupon(coupon) {
          this.selectedDiscount = coupon.discount;
          this.showCouponModal = false;
        },
        checkout() {
          alert('结算功能还在开发中……');
        }
      }
    });
  </script>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！

本人承接网网站开发，如有需要，欢迎私信咨询！

如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~

给新手学习前端开发的建议：

  1. 了解基础知识：

    • 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
    • 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。

  2. 实践项目：

    • 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
    • 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
    • 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。

  3. 学习工具和框架：

    • 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
    • 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。

  4. 关注前端趋势：

    • 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
    • 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。

  5. 培养解决问题的能力：

    • 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
    • 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
    • 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。

  6. 不断学习和提升：

    • 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
    • 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
    • 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。

  7. 注重代码质量和可维护性：

    • 编写高质量的代码是前端开发的基本要求之一。
    • 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
    • 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
    • 考虑代码的可维护性，尽量编写可复用和可扩展的代码。

  8. 参与社区和交流：

    • 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
    • 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。

总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。

加油吧！

南北极之间
关注
HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript实现一个静态页面（含源码）
11-27 1315
HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript实现一个静态页面（含源码） 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源
CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】
蒙奇不想敲代码的博客
01-30 1万+
集合了前端大部分基础知识以及常见面试题，看完过初试完全没问题
基于Springboot框架后台+微信小程序网上书城图书商城系统毕业设计源代码成品和开题报告
最新发布
杭州.黄老师
09-30 920
黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSDN网站查询黄菊华老师。
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)
专注于dreamweaver网页设计制作
12-25 840
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
2021年最值得看的书！快来领当当大额优惠券！1024囤书囤书！
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
10-21 565
认真一年一度的程序员节又要到来啦（撒花）~为了庆祝这个Special Day当当网科技图书五折封顶（2021.10.20-2021.10.24）不仅如此我们联合当当网特别送出一批优惠码可...
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 15万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
1900套计算机毕业设计源码整合大全，ASP(499套），C++（24套），Java（100套），JSP（300套），PHP（76套），VB（350套）Andorid168套，swing11套...
CSDN专栏--北京中关村
06-03 1万+
1900套计算机毕业设计源码整合大全
【vue】openshopping-vue
weixin_30340617的博客
07-05 635
这是一个基于Vue实现开箱即用H5移动端商城的单页应用 作者的开源地址是：https://github.com/yrinleung/openshopping-vue 我们一起来欣赏页面吧 看看代码有什么乾坤 看了下package.json发现有axios和vue-lazyload 先看代码一层一层进去里面 //app.vue <template> <div id="app...
基于springboot面包店临期食品销售系统-附源码56855
weixin_MZ_ZXD001的博客
08-19 876
本系统在设计上，考虑到系统内容以及系统的受众群体，在设计中采用了三层架构（表现层、业务逻辑层和数据层），利用Spring Boot框架和相关技术实现了用户注册、登录、商品管理、订单处理等核心功能。通过系统测试和优化，确保系统的功能完整、性能稳定，并考虑安全性和可扩展性。经过准备工作和团队合作，该系统成功地完成了预期目标，并为面包店提供了一种方便、高效的临期食品销售解决方案。
谷粒商城基础篇
hzc246的博客
04-27 1660
第一章 项目简介 1.1 架构图 1.2 微服务划分图 1.3 表设计 1.3.1 商品库 pms_category类别表，如上图，用来展示首页三级分类。 pms_brand品牌表，每个商品都属于某个品牌，用来存品牌的名字和logo等。 pms_category_brand_relation类别和品牌关联表，某个品牌可以属于多个类别。 pms_attr_group属性分组表，如上图，主体为一个属性分组。 pms_product_attr_value，商品属性值表，记录...
谷粒商城 --＞「P01-P44」
Darling_qi的博客
04-28 4960
微服务+分布式+全栈+集群+部署+自动化运维+可视化CICD，对标阿里P6/P7
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 565
Vue 2 中使用 Vue I18n 插件实现中英文切换
18 vue3之自动引入ref插件&深入使用v-model
qq_37550440的博客
09-25 551
TIps 在Vue3 v-model 是破坏性更新的 v-model在组件里面也是很重要的 v-model 其实是一个语法糖 通过props 和 emit组合而成的 默认值的改变 prop：value -> modelValue； 事件：input -> update:modelValue； v-bind 的 .sync 修饰符和组件的 model 选项已移除 新增 支持多个v-model 新增 支持自定义 修饰符 Modifiers
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 699
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 865
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
Vue3.0面试题汇总
qq_25741071的博客
09-29 752
实现 DOM 的方式进行 WebGL 编程。
前端框架对比与选择：Vue.js、React、Angular及其他
liao3399084的博客
09-28 1369
Vue.js是一个渐进式JavaScript框架，由尤雨溪开发。它以其简洁和灵活的特性受到广泛欢迎，特别适合快速原型设计和迭代。Vue.js的核心库只关注视图层，易于与其他库或现有项目集成。Angular是由Google开发的前端框架，采用TypeScript语言，适合构建复杂的单页应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值