实现购物车功能

最新推荐文章于 2024-04-12 19:02:55 发布
最新推荐文章于 2024-04-12 19:02:55 发布
阅读量278 收藏
点赞数
分类专栏： Vue Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/107182177
版权
本文详细介绍了如何在电商网站中实现购物车功能，包括添加商品、修改数量、删除商品以及计算总价等核心操作，同时探讨了购物车数据的持久化存储策略和用户体验优化方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
.fl{
  float: left;
}
.fr{
  float: right;
}
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}
.clearfix{
  zoom: 1;
}
.clearfix:after {
  clear: both;
}
.clearfix:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
a{
  text-decoration: none;
  color: #333;
}
img{vertical-align: middle;}
.page-shopping-cart{
  width: 1200px;
  margin:50px auto;
  font-size: 14px;
  border:1px solid #e3e3e3;
  border-top:2px solid #317ee7;
}
.page-shopping-cart .cart-title{
  color:#317ee7;
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  line-height: 68px;
}
.page-shopping-cart .red-text {
  color: #e94826;
}
.page-shopping-cart .check-span{
  display: block;
  width: 24px;
  height: 20px;
  margin-top: 9px;
  background:green;
  /*background: url("cartBg.png") no-repeat 0 0;*/
}

/* 点击时改变勾选 */
.page-shopping-cart .check-span.check-true{
  /*background: url('cartBg.png') no-repeat 0 -22px;*/
  background:red;
}
.page-shopping-cart .td-check{
  width:70px;
}
.page-shopping-cart .td-product{
  width:460px;
}
.page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total{
  width:160px;
}
.page-shopping-cart .td-do{
  width:150px;
}
.cart-product-title{
  text-align: center;
  height: 38px;
  line-height: 38px;
  padding: 0 20px;
  background-color: #f7f7f7;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.cart-product-title .td-product{
  text-align: center;
  font-size: 14px;
}
.cart-product-title .td-check{
  text-align: left;
}
.cart-product-title .td-check .check-span .check-span{
  margin:9px 6px 0 0;
}

/* 内容开始 */
.cart-product{
  padding: 0 20px;
  text-align: center;
}
.cart-product table{
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.cart-product table td{
  padding: 20px 0;
}
.cart-product table tr{
  border-bottom:1px dashed #e3e3e3;
}
.cart-product table tr:last-child{
  border-bottom:none;
}
.cart-product table .product-num{
  border: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
}
.cart-product table .product-num .num-do{
  width: 24px;
  height: 28px;
  background: #f7f7f7;
  display: block;
}
.cart-product table .product-num .num-reduce span{
  display: block;
  width: 6px;
  height: 2px;
  margin:13px auto 0 auto;
  /*background: url("cartBg.png") no-repeat -40px -22px;*/
}
.cart-product table .product-num .num-add span{
  display: block;
  width: 8px;
  height: 8px;
  margin:10px auto 0 auto;
  /*background: url("cartBg.png") no-repeat -60px -22px;*/
}
.cart-product table .product-num .num-input{
  width: 42px;
  height: 28px;
  line-height:28px;
  border:none;
  text-align: center;
}
.cart-product table .td-product{
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}
.cart-product table .td-product img{
  border:1px solid #e3e3e3;
  margin-right: 10px;
}
.cart-product table .td-product .product-info{
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
.cart-product table .td-do{
  font-size: 12px;
}

/* 最后一行统计 */

.cart-product-info{
  height:50px;
  line-height: 50px;
  background: #f7f7f7;
  padding-left: 20px;
}
.cart-product-info .delete-product{
  color:#666;
}
.cart-product-info .delete-product span{
  display: inline-block;
  vertical-align: top;
  margin:18px 8px 0 0;
  width:13px;
  height: 15px;
  background:gray;
  /*background: url("cartBg.png") no-repeat -60px 0;*/
}
.cart-product-info .product-total{
  font-size: 14px;
  color:#e94826;
}
.cart-product-info .product-total span{
  font-size: 20px;
}
.cart-product-info .check-num{
  color:#333;
}
.cart-product-info .check-num span{
  color: #e94826;
}
.cart-product-info .keep-shopping{
  color: #666;
  margin-left: 40px;
}
.cart-product-info .keep-shopping span{
  display: inline-block;
  vertical-align: top;
  margin:18px 8px 0 0;
  width: 15px;
  height: 15px;
  background:orange;
  /*background: url("cartBg.png") no-repeat -40px 0;*/
}
.cart-product-info .btn-buy{
  height: 50px;
  color: #fff;
  font-size: 20px;
  display: block;
  width: 110px;
  background: #ff7700;
  text-align: center;
  margin-left: 30px;
}



/* cart-worder */

.page-shopping-cart .cart-worder {
    padding: 20px; }
.page-shopping-cart .cart-worder .choose-worder {
    color: #fff;
    display: block;
    background: #39e;
    width: 140px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    margin-right: 20px; }
.page-shopping-cart .cart-worder .choose-worder span {
    display: inline-block;
    vertical-align: top;
    margin: 9px 10px 0 0;
    width: 22px;
    height: 22px;
    /*background: url("cartBg.png") no-repeat -92px 0; */
}
.page-shopping-cart .cart-worder .worker-info {
    color: #666; }
.page-shopping-cart .cart-worder .worker-info img {
    border-radius: 100%;
    margin-right: 10px; }
.page-shopping-cart .cart-worder .worker-info span {
    color: #000; }

.choose-worker-box {
    width: 620px;
    background: #fff; }
.choose-worker-box .box-title {
    height: 40px;
    line-height: 40px;
    background: #F7F7F7;
    text-align: center;
    position: relative;
    font-size: 14px; }
.choose-worker-box .box-title a {
    display: block;
    position: absolute;
    top: 15px;
    right: 16px;
    width: 10px;
    height: 10px;
    background:blue;
    /*background: url("shopping_cart.png") no-repeat -80px 0; */
}
.choose-worker-box .box-title a:hover {
    background:yellow;
    /*background: url("shopping_cart.png") no-repeat -80px -22px; */
}
.choose-worker-box .worker-list {
    padding-top: 30px;
    height: 134px;
    overflow-y: auto; }
.choose-worker-box .worker-list li {
    float: left;
    width: 25%;
    text-align: center;
    margin-bottom: 30px; }
.choose-worker-box .worker-list li p {
    margin-top: 8px; }
.choose-worker-box .worker-list li.cur a {
    color: #f70; }
.choose-worker-box .worker-list li.cur a img {
    border: 1px solid #f70; }
.choose-worker-box .worker-list li a:hover {
    color: #f70; }
.choose-worker-box .worker-list li a:hover img {
    border: 1px solid #f70; }
.choose-worker-box .worker-list li img {
    border: 1px solid #fff;
    border-radius: 100%; }
</style>
</head>
<body>
  <div id="shopping-cart" class="page-shopping-cart">
    <h4 class="cart-title">购物清单</h4>
    <!-- 标题 -->
    <div class="cart-product-title clearfix">
        <div class="td-check fl">
            <!-- 当切换到check-true类名时就调用全选函数 -->
            <span class="check-span fl check-all" :class="{'check-true':isSelectAll}"
              @click="selectProduct(isSelectAll)"></span>  <!-- 选择框 -->
            全选
        </div>
        <div class="td-product fl">商品</div>
        <div class="td-num fl">数量</div>
        <div class="td-price fl">单价(元)</div>
        <div class="td-total fl">金额(元)</div>
        <div class="td-do fl">操作</div>
    </div>

    <!-- 内容 -->
    <div class="cart-product clearfix">
      <table>
        <tbody>
          <tr v-for='(item,index) in productList'>
            <td class="td-check">
              <span class="check-span" @click='item.select=!item.select' :class="{'check-true':item.select}"></span>
            </td>
            <td class="td-product">
                <img :src="item.pro_img" width="98" height="98" alt="">
                <div class="product-info">
                  <h6>{{item.pro_name}}</h6>
                  <p>品牌：{{item.pro_brand}}&nbsp;&nbsp;{{item.pro_place}}</p>
                  <p>规格/纯度:{{item.pro_purity}}&nbsp;&nbsp;起定量：{{item.pro_min}}</p>
                  <p>配送仓储：{{item.pro_depot}}</p>
                </div>
                <div class="clearfix"></div>
            </td>
            <td class="td-num">
                <div class="product-num">
                  <a href="javascript:;" class="num-reduce num-do fl" @click='item.pro_num--'><span></span></a>
                  <input type="text" class="num-input" v-model='item.pro_num'>
                  <a href="javascript:;" class="num-add num-do fr" @click='item.pro_num++'><span></span></a>
                </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span>.00</p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="price-text">{{item.pro_price*item.pro_num}}</span>.00</p>
            </td>
            <td class="td-do">
              <a href="javascript:;" class="product-delete" @click='deleteOneProduct(index)'>删除</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

    <!-- 最后一行统计 -->
    <div class="cart-product-info">
        <a href="javascript:;" class="delete-product" @click='deleteProduct'><span></span>删除所选商品</a>
        <a href="#" class="keep-shopping"><span></span>继续购物</a>
        <a href="javascript:;" class="fr btn-buy">去结算</a>
        <a href="javascript:;" class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></a>
        <a href="javascript:;" class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）:</a>
    </div>

    <div class="cart-worder clearfix">
       <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>
       <div class="worker-info fl">
       </div>
    </div>
  </div>

  <script src="https://unpkg.com/vue"></script>


<script type="text/javascript">
  new Vue({
    el:'#shopping-cart',
    data:{
      productList:[
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':3,
          'pro_img':'',
          'pro_price': 800
        },
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':1,
          'pro_img':'',
          'pro_price': 700
        },
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':1,
          'pro_img':'',
          'pro_price': 600
        }
      ]
    },
    computed:{
      // 检测是否全选
      isSelectAll:function(){
          //如果productList中每一条数据的select都为true,就返回true,否则返回false
        return this.productList.every(function(val){return  val.select})
      },

    // 获取总价和产品总数
      getTotal:function(){
        // 获取list中select为true的数据
        var _proList = this.productList.filter(function(val){return val.select}),
        totalPrice = 0;
        for (var i = 0; i < _proList.length; i++) {
          // 总价累加
          totalPrice += _proList[i].pro_num * _proList[i].pro_price;
        }
        // 选择产品的件数就是_proList.lenth，总价就是totalPrice
        return{totalNum:_proList.length,totalPrice:totalPrice}
      }

    },
    methods:{
      // 全选与取消全选
      selectProduct:function(_isSelect){
        //遍历productList,全部取反
        for (var i = 0; i < this.productList.length; i++) {
          this.productList[i].select = !_isSelect
        }
      },

      //删除选中的产品
      deleteProduct:function(){
        this.productList =this.productList.filter(function(item){return !item.select})
      },

      //删除单条产品
      deleteOneProduct:function(index){
        //根据索引删除productList的记录
        this.productList.splice(index,1);
      },
    },
    mounted:function(){
      //为productList添加select（是否选中字段，初始值为true）
      var _this=this;
      this.productList.map(function(item){    //map:'键值对'
        _this.$set(item,'select',true)      //往item添加select属性，默认为true
      })
    }
  })
</script>
</body>
</html>

 

简易购物车的实现
Wendy
09-09 7713
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。   第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中设计到都是网上随
购物车的实现
m0_65545927的博客
03-10 2180
用户添加购物车，只需要将要加入购物车的商品存入到Redis中即可。一个用户可以将多件商品加入购物车，存储到Redis中的数据可以采用Hash类型。我们发现个问题，就是用户将商品加入购物车，无论数量是正负，都会执行添加购物车，如果数量
实现购物车
daqi1983的博客
09-14 1775
一、购物车的实现流程 二、创建Book类，封装图书信息 public class Book implements Serializable { private static final long serialVersionUID = 1L; private String id; //书的编号 private String name; //书名 public Book() { } public Book(String id, String name) { this.id =
购物车实现
最新发布
记录学习，共同进步
04-12 1568
使用redis的hash结构实现购物车
layui使用数据表格实现购物车功能
10-16
总结起来，layui使用数据表格实现购物车功能的关键在于利用layui.js的事件监听和数据操作API。开发者需要理解表格的事件模型，如`on('click')`、`on('edit')`等，以及如何通过表格的API如`layui.table.data()`获取和...
Vuejs实现购物车功能
10-19
### Vue.js实现购物车功能知识点总结 Vue.js是一种构建用户界面的渐进式框架，专注于视图层。它易于上手，并且提供了丰富的功能以满足更复杂的应用场景。购物车功能是电商网站中必不可少的一部分，实现购物车功能...
vuex实现购物车功能
10-15
在介绍如何使用Vuex实现购物车功能的过程中，首先需要掌握几个关键的技术要点。Vuex是一个专门为Vue.js应用程序开发的集中式状态管理库，它可以让我们在多个组件之间共享状态。在购物车这种具有全局状态变化的场景中...
Vue实现购物车功能
08-30
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： <template> <div class=shopcar id=demo04> <div class=header-title> <h3>购物车</h3> </div> <div class=car-list> <ul> <li class=car-item v-for=(item,index)> <div class=input-block>
vue实现淘宝购物车功能
10-15
主要为大家详细介绍了vue实现淘宝购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车功能（商品分类）
10-15
主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车功能
EvaY_Yang的博客
08-22 7947
vue实现购物车功能。我们利用了过滤器来实现“价格”和‘总价’的拼接，通过toFixed()方法实现保留两位小数，通过disabled属性来实现当数量小于等于1时，不再进行数量减法，通过计算属性computed来实现总价的计算，通过splice()方法来实现移除功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值