使用Vue.js实现简单购物车、实现删除商品，添加数据改变结算价格HTML+CSS+JS

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量1.4k 收藏 11
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dycoolya/article/details/128392972
版权

1、目录结构：

 2、Index

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telephone=no"/>
  <title>商城购物车</title>
  <link rel="stylesheet" type="text/css" href="css/shopcar.css">
  <script type="text/javascript" src="js/auto-size.js"></script>
</head>
<body>
<div id="app">
  <div class="fix_head">
    <a href="javascript:history.go(-1);" class="back">
      <img src="images/back.jpg">
    </a>
    <p>购物车</p>
    <a href="home.html" class="home">
      <img src="images/home.jpg">
    </a>
  </div>
  <div class="sc_h"></div>
  <div class="lb"
       v-for="(lb,index) in waresList"
       :key="index"
  >
    <div class="check" @click="checkWare(index)">
      <div class="xz":class="[lb.isChecked?'checkOn':' ']"></div>
      <!-- 给上方div加上checkOn class则可以变成选中效果 -->
      <!-- <div class="xz checkOn"></div> -->
    </div>
    <img :src="lb.wareImg" class="spt">
    <div class="mid">
      <p class="name">{{lb.wareName}}</p>
      <p class="color">{{lb.wareNums}}</p>
      <div class="jj">
        <span @click="btn(false,index)" class="jia">-</span>
        <input class="num" v-model="lb.wareNums">
        <span @click="btn(true,index)" class="jian">+</span>
      </div>
    </div>
    <div class="jgq">
      <div class="price"><p>￥<span class="pri">{{lb.warePrice | saveTwoZero}}</span></p></div>
      <div class="price_de">
        <p>
          <del>{{lb.warePrimeCost | saveTwoZero}}</del>
        </p>
      </div>
      <img @click="del(index)" src="images/del.jpg" class="del">
    </div>
  </div>
  <div class="fix_bottom ">
    <div class="qx" id="qx" data="0" :class="[isAllChecked ?'checkOn' : '']"@click="allCheckBtn"></div>
    <span style="float:left;line-height:0.8rem;">全选</span>
    <div class="zjq">
      <p class="p1">合计:￥
        <span id="zj">{{totalPrice}}</span>
      </p>
      <p>含运费</p>
    </div>
    <a id="js">结算(<span id="zsl">{{totalPrice}}</span>)</a>
  </div>
</div>
</body>
</html>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        filters:{
            saveTwoZero(value){
                return value.toFixed(2)
            }
        },
        data: {
            totalPrice: 0,
            waresList: [
                {
                    wareImg: "./images/ware1.jpg",  // 商品图片
                    wareName: "【直营】华硕猛禽RTX3060/3070Ti台式机电脑游戏吃鸡独立显卡2060", // 商品名称
                    wareNorms: "显示内存:12GB", // 商品规格
                    wareNums: 1, // 商品数量
                    warePrimeCost: 7999, // 商品原价
                    warePrice: 2799 ,// 商品现价
                },
                {
                    wareImg: "./images/ware2.jpg",
                    wareName: "【天猫V榜推荐】Dell/戴尔4K台式机电脑显示器27英寸U2720QM台式电脑护眼液晶显示屏HDR设计高清IPS电竞游戏", // 商品名称
                    wareNorms: "屏幕材质:IPS",
                    wareNums: 1,
                    warePrimeCost: 4299,
                    warePrice: 3899,
                },
                {
                    wareImg: "./images/ware3.jpg",
                    wareName: "【24期免息】ALIENWARE外星人AW510K游戏机械键盘全键无冲Cherry红轴单键RGB炫彩灯光男士办公游戏礼物送礼", // 商品名称
                    wareNorms: "键盘类型：青轴",
                    wareNums: 1,
                    warePrimeCost: 1999,
                    warePrice: 1479,
                },
                {
                    wareImg: "./images/ware4.jpg",
                    wareName: "【官方旗舰店】罗技G PRO X SUPERLIGHT无线鼠标GPW二代双模电竞游戏可充电脑笔记本专吃鸡魔兽世界狗屁王", // 商品名称
                    wareNorms: "赠品：胖虎帆布包",
                    wareNums: 1,
                    warePrimeCost: 999,
                    warePrice: 899,
                },
                {
                    wareImg: "./images/ware5.jpg",
                    wareName: "【直营】SONY/索尼WF-1000XM4 降噪耳机入耳式通话真无线蓝牙耳机", // 商品名称
                    wareNorms: "类型：蓝牙连接",
                    wareNums: 1,
                    warePrimeCost: 1699,
                    warePrice: 1499,
                }

            ]
        },
        computed:{
            //这个商品属性是否为ture，由所有的商品的ischecked属性控制
            isAllChecked(){
                for(let i=0;i<this.waresList.length;i++){
                    if (!this.waresList[i].isChecked){
                        return false
                    }
                }
                return true

            }

        },
        methods: {
            allCheckBtn(){
                let status=this.isAllChecked?false:true
                this.waresList.forEach(n=>{
                    this.$set(
                        n,"isChecked",status
                    )
                })
                this.getTotalPrice()
            },
            getTotalPrice() {
                //		总计
                let price = 0;
                this.waresList.forEach((lb, index) => {
                    if (lb.isChecked){
                        price += lb.wareNums * lb.warePrice
                    }
                })
                console.log(price)
                this.totalPrice = price
            },
            btn(bool, index) {
                //按钮
				let shopIndex=this.waresList[index]
                if (bool) {
                    //加
					shopIndex.wareNums++;
                } else {
                    //减
					if (shopIndex.wareNums<=1){
						return;
					}
					shopIndex.wareNums--;
                }
				this.getTotalPrice();
            },
			del(index){		//删除
				if (confirm("请问是否要删除"+this.waresList[index].wareName+"吗？"))
                    this.waresList.splice(index,1);
                this.getTotalPrice()
			},
            checkWare(index){
                //$set方法用于修改对象或者数组的值，这个方法可以实现视图的实时更新
                //this.waresList[index],"isChecked", !this.waresList[index].isChecked
                this.$set(
                    this.waresList[index],
                    "isChecked",
                    !this.waresList[index].isChecked
                )
                this.getTotalPrice()
            }
        },
        mounted() {
            this.getTotalPrice()
        },


    })
</script>

3、CSS代码：

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) { select:focus, textarea:focus, input:focus { font-size: 16px !important; } }

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { 
margin: 0; 
padding: 0;
font-family: '微软雅黑';
} 

a{
	text-decoration: none;
    color: #a3a3a3;
}

ul{
    list-style: none;
}

input{
display:block;
-webkit-user-modify: read-write-plaintext-only;
cursor:pointer;
-webkit-appearance:none;
border: 0;
outline: none;
}
body{
	background: #f2f2f2;
}

.fix_head{
	position: fixed;
	width: 100%;
	height: 0.9rem;
	border-bottom: 1px solid #ccc;
	background: #fafafa;
}

.fix_head .back{
	display: block;
	width: 0.65rem;
	height: 0.9rem;
	float: left;

}

.fix_head .back img{
	display: block;
	width: 0.65rem;
	height: 0.9rem; 
}

.fix_head p{
	float: left;
	margin-left: 2.12rem;
	font-size: 0.28rem;
	color: #1a1a1a;
	line-height: 0.9rem;
}

.fix_head .home{
	display: block;
	width: 0.65rem;
	height: 0.9rem;
	float: right;
}

.fix_head .home img{
	display: block;
	width: 0.65rem;
	height: 0.9rem; 
}

.sc_h{
	width: 100%;
	height: 0.9rem;
}

.lb{
	display: block;
	width: 100%;
	height: 2rem;
	margin-top: 0.1rem;
	border-bottom: 1px solid #ccc;
	background: #fafafa;
}

.lb .check{
	width: 0.7rem;
	height: 2rem;
	float: left;
}

.lb .check .xz{
	width: 0.4rem;
	height: 0.4rem;
	margin-top: 0.8rem;
	margin-left: 0.2rem;
	display: block;
	background-image: url(../images/check.jpg);
	background-size: 0.4rem 0.4rem;
}

.lb .spt{
	display: block;
	width: 1.36rem;
	height: 1.4rem;
	float: left;
	margin-top: 0.26rem;
}

.lb .mid{
	width: 2.52rem;
	height: 1.7rem;
	float: left;
	margin-left: 0.18rem;
	margin-top: 0.16rem;
}

.lb .mid .name{
	font-size: 0.22rem;
	color: #333;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	padding-top: 0.1rem;
}

.lb .mid .color{
	font-size: 0.22rem;
	color: #8a8a8a;
	display: block;
	margin-top: 0.16rem;
}

.lb .mid .jj{
	width: 1.5rem;
	height: 0.4rem;
	border: 1px solid #dcdcdc;
	border-radius: 2px;
	margin-top: 0.1rem;
}

.lb .mid .jj .jia{
	display: block;
	font-size: 0.4rem;
	text-align: center;
	line-height: 0.4rem;
	width: 0.49rem;
	height: 0.4rem;
	float: left;
}

.lb .mid .jj .num{
	display: block;
	float: left;
	text-align: center;
	line-height: 0.4rem;
	width: 0.48rem;
	height: 0.4rem;
	font-size: 0.24rem;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
}

.lb .mid .jj .jian{
	display: block;
	font-size: 0.28rem;
	text-align: center;
	line-height: 0.4rem;
	width: 0.49rem;
	height: 0.4rem;
	float: right;
}

.lb .jgq{
	float: right;
	margin-right: 0.18rem;
	width: 1.34rem;
	height: 2rem;
	position: relative;
}

.lb .jgq .price{
	width: 100%;
	height: 0.34rem;
	font-size: 0.24rem;
	font-weight: bold;
	color: #e90327;
	display: block;
	float: right;
	margin-top: 0.26rem;
}
.lb .jgq .price p{
	float: right;
}
.lb .jgq .price_de p{
	float: right;
}
.lb .jgq .price_de{
	width: 100%;
	height: 0.24rem;
	font-size: 0.2rem;
	font-weight: bold;
	color: #999;
	display: block;
	float: right;
	margin-top: 0.1rem;
}

.lb .jgq .del{
	display: block;
	width: 0.45rem;
	height: 0.46rem;
	float: right;
	margin-bottom: 0.4rem;
	position: absolute;
	    bottom: -0.2rem;
    /* left: 0.8rem; */
    right: 0;
}

#qx{
	width: 0.4rem;
	height: 0.4rem;
	margin-top: 0.8rem;
	margin-left: 0.2rem;
	display: block;
	background-image: url(../images/check.jpg);
	background-size: 0.4rem 0.4rem;
	float: left;
	margin-left: 0.2rem;
	margin-top: 0.2rem;
		line-height: 0.8rem;
}

.fix_bottom{
	position: fixed;
	width: 100%;
	height: 0.8rem;
	background: #fafafa;
	bottom: 0;
	font-size: 0.24rem;
	color: #333;

	
}



.fix_bottom .zjq{
	float: left;
	width: 1.96rem;
	height: 0.8rem;
	margin-left: 0.7rem;
}

#zj{
	color: #e90327;


}

.fix_bottom .zjq .p1{
	font-size: 0.26rem;
	line-height: 0.4rem;
	font-weight: bold;
}

#js{
	display: block;
	width: 2.5rem;
	height:0.8rem;
	background: #e90327;
	color: #fff;
	font-size: 0.28rem;
	font-weight: bold;
	text-align: center;
	line-height: 0.8rem;
	float: right;
}

.checkOn{
	background-image: url("../images/check_on.jpg") !important;
}

4、auto-size

/**
 * Created by lovo_bdk on 15-12-17.
 */
!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
        doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;

    }

    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

    var timer = null;

    win.addEventListener(evt, function () {
        clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }
    }, false);

    //初始化
    setFontSize();

}(window, document));

5、效果：

 

 

 

 

 6、图片素材可以私信我获取

Dycoolya
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中简单的实现购物车结算功能
qq_44242030的博客
03-18 407
样式没有写 <template> <div class="about container"> <button class="btn btn-default"> <router-link to="/customers">返回主页</router-link> </button> <button...
Vue购物车结算
weixin_44955647的博客
10-11 413
实现以下功能： Html： <div id="app"> <table> <tr> <th>序号</th> <th>商品名称</th> <th>商品价格</th> <th>购买数量</th> <th>操作</th> </tr.
Vue实现购物车结算功能
Lw107163的博客
07-24 1289
效果显示： 功能代码： 　　index.js: var app = new Vue({ el:'#app', data:{ list:[ { id:1, name:'redmi k20', price:2000, count:1 }, ...
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 422
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
js购物车 实现全选 反选 删除...(附图片代码)
qq_45310795的博客
09-08 2009
js购物车 实现全选 反选 删除...(附图片代码)
（六）Vue项目——微商城：实现购物车结算信息、商品数量加减
m0_71824048的博客
05-31 2899
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
vue.js制作购物车结算功能表单代码
11-02
在本文中，我们将深入探讨如何使用Vue.js框架来构建一个购物车结算功能的表单代码。Vue.js是一款轻量级的前端JavaScript框架，以其简洁的API和强大的响应式能力受到开发者喜爱。在创建购物车结算功能时，Vue.js能够...
Vue实现购物车功能
08-30
Vue实现购物车功能 摘要：本篇文章主要分享了Vue实现购物车功能的实例代码，具有很好的参考价值。 知识点一：Vue实现购物车功能的基本结构 在本篇文章中，我们可以看到作者使用了Vue框架来实现购物车功能的实例...
Vue.js购物车商品结算表单页面代码
06-11
Vue.js购物车商品结算表单页面是Web应用中常见的功能模块，它允许用户选择并管理他们想要购买的商品。在这个场景中，Vue.js被用来构建一个交互性强、用户体验良好的页面。以下将详细介绍Vue.js在实现这一功能时涉及...
【JavaScript源代码】Vue模拟实现购物车结算功能.docx
12-29
在本示例中，我们将探讨如何使用Vue.js框架模拟实现购物车结算功能。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的功能，使得开发复杂的Web应用变得更加简单。以下是对代码实现的详细解析： ...
三个vue项目源码-九宫格抽奖-音乐播放器-购物车结算.zip
05-27
在这个压缩包中，包含了三个基于Vue.js的项目源码，分别是九宫格抽奖应用、音乐播放器以及购物车结算功能。这三个项目展示了Vue.js在实际开发中的广泛应用和灵活性。 首先，我们来看"九宫格抽奖代码.zip"。九宫格...
js对购物车内的商品的更删改查操作
10-22
js 对购物车内的商品的更删改查操作。 更新购物车中某一商品的数据,如果购物车中不存在则添加新值。 内部方法，必须在购物车操作中执行
Vue框架购物车结算页面
m0_65748966的博客
03-17 412
注意引入 vue.global.js。
H5+CSS+JS实现购物车添加，操作，删除数据功能
weixin_58164147的博客
08-24 700
购物车功能实现
vue小实验——小米商城购物车，合计、结算、数量加减
yoghurt&girl的博客
10-18 1715
采用vue实现购物车的功能，主要是对购物车内的数量、价格、合计等，话不多说直接放图。
vue商品添加和删除
qq_52474756的博客
03-22 919
vue实现商品的添加和删除
使用vue制作简单购物车实现添加修改删除
xybhua的博客
10-15 1533
根据增加商品数量、减少商品数量、移除商品动态更新总数以及总价格。不过首先要引入vue，不想用本地这个可以直接复制粘贴。可以对购物车进行编辑、添加、删除等功能。vue实现简单购物车功能。
js 使用localStorage进行批量删除（以购物车为例）
前端小菜鸡的博客
09-17 3077
本文针对未登录时对购物车的本地存储进行批量删除操作来阐述的，单个删除比较简单，这里就不做介绍了，下面开始正文。 首先，先取出localStorage中存取的购物车列表 var list = JSON.parse(localStorage.getItem('unlogin_cart_list')) 其次，判断用户是否勾选底部全选，如果勾选就直接把整个列表从localStorage删除 if($('.cart_checked_all').attr('src') == './images/goods/check
使用 （Vue.js）实现 购物车功能（包含全选、分类、删除）
weixin_43748615的博客
02-14 1823
在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价 同时提供一个全选的按钮。 思路： 添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断. 通过判断checked属性的值，确定是否添加计算到总价. 全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。 全选思考：首先是点击全选本身...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值