vue.js实现购物车加减数量，计算金额数量,选中/未选中
程序员文章站
2022-05-22 23:31:40
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>老五购物车</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <link rel="stylesheet" type="text/css" href="css/mui.css" />-->
</head>
<style>
/*清除一下margin-padding*/
body {
margin: 0 auto;
padding: 0;
background-color: #f5f5f5;
}
/*购物车列表样式*/
#list {
position: relative;
top: 10px;
width: 100%;
height: 120px;
background-color: #fff;
margin-bottom: 10px;
}
/*选中未选中ICON*/
.list_icon {
position: absolute;
width: 35px;
height: 35px;
top: 35px;
left: 20px;
}
/*列表图*/
.list_img {
position: absolute;
width: 80px;
height: 80px;
left: 80px;
top: 20px;
}
/*列表名称*/
.list_name {
position: absolute;
top: 30px;
left: 180px;
}
/*列表标题*/
.list_title {
position: absolute;
top: 55px;
left: 180px;
font-size: 15px;
color: #CCCCCC;
}
/*money*/
.money {
position: absolute;
top: 78px;
left: 180px;
font-size: 15px;
color: #EC971F;
}
/* 总数量*/
.sum_cont {
position: absolute;
right: 0;
bottom: 10px;
width: 130px;
height: 30px;
line-height: 30px;
}
/*减号*/
.minute {
position: absolute;
width: 25px;
text-align: center;
height: 30px;
line-height: 30px;
left: 10px;
font-size: 18px;
border: 1px solid #DD524D;
}
/*加号*/
.add {
width: 25px;
border: 1px solid #DD524D;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
right: 10px;
font-size: 18px;
}
/*文本框*/
.input {
width: 40px;
height: 26px;
display: inline-block;
line-height: 30px;
text-align: center;
position: absolute;
right: 45px;
}
/*底部固定样式*/
.bottom {
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
bottom: 0px;
background-color: #323232
}
/*总价*/
.bott_money {
padding-left: 20px;
color: #fff;
}
/*总数量*/
.bott_num {
padding-left: 50px;
color: #fff;
}
/*点赞*/
.btn_sub {
position: absolute;
right: 0;
width: 100px;
height: 60px;
line-height: 60px;
background-color: #CF2D28;
color: #fff;
text-align: center;
}
/*弹窗*/
.dislog {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
display: none;
text-align: center;
background-color: #000;
opacity: 0.8;
}
.dis_cont {
position: relative;
border-radius: 10px;
top: 25%;
width: 80%;
display: inline-block;
height: 160px;
background-color: #2AC845;
}
/*确认取消*/
.dis_bott {
position: absolute;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 1px solid #ddd;
width: 100%;
height: 70px;
background-color: #f5f5f5;
bottom: 0px;
}
/*取消按钮*/
.left_name {
position: absolute;
border-bottom-left-radius: 10px;
text-align: center;
left: 0px;
width: 50%;
height: 70px;
line-height: 70px;
background-color: #fff;
}
/*确认*/
.right_name {
position: absolute;
text-align: center;
border-bottom-right-radius: 10px;
right: 0px;
width: 49%;
height: 70px;
line-height: 70px;
background-color: #fff;
}
/* 提示*/
.cont_dis {
position: relative;
border-radius: 10px;
text-align: center;
width: 100%;
height: 90px;
font-size: 20px;
display: flex;
align-items: center;
color: #fff;
box-sizing: border-box;
padding: 20px 20px;
}
</style>
<!--html主体内容-->
<body>
<!--<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>-->
<!--最外层div 透明遮罩-->
<div id="cont">
<!--居中显示视图-->
<div class="dislog" style="display: {{nones}};">
<!--内容-->
<div class="dis_cont">
<div class="cont_dis">
朋友，给老五点个赞好吗？
</div>
<div class="dis_bott">
<label class="left_name" onclick="cances()">取消</label>
<label class="right_name" onclick="submits()">确认</label>
</div>
</div>
</div>
<!--列表-->
<div id="list" v-for="(item,index) in list">
<!--icon选中/未选中ICON-->
<img v-if="item.selected" class="list_icon" @click="radios(index)" src="img/radio_show.png" />
<img v-else="!item.selected" class="list_icon" @click="radios(index)" src="img/radio_none.png" />
<!--列表图片-->
<img class="list_img" src="img/list_img.png" @click="delerte(index)" />
<!--列表名称-->
<label class="list_name">{{item.name}}</label>
<!--列表标题-->
<label class="list_title">{{item.title}}</label>
<!--列表价格-->
<label class="money">{{item.money}}</label>
<!--加减功能 文本框数量-->
<div class="sum_cont">
<label class="minute" @click="btn_minute(index)">-</label>
<input class="input" v-model="item.num" />
<label class="add" @click="btn_add(index)">+</label>
</div>
</div>
<!--底部固定样式-->
<div class="bottom">
<!--已获得数量-->
<label class="bott_num">已获得：{{num}}</label>
<!--总价-->
<label class="bott_money">总和：{{money}}</label>
<!--点赞-->
<label class="btn_sub" onclick="btn_sub()">点赞</label>
</div>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>-->
<script>
var vue = new Vue({
//作用域#cont
el: "#cont",
data: {
//默认总价
money: 0,
//默认总数量
num: 0,
// 购物车假数据
list: [{
name: "养护液",
num: 1,
money: 10,
src: "img/list_img.png",
title: "养护液",
selected: true
}, {
name: "养护液",
num: 1,
money: 10,
src: "img/list_img.png",
title: "养护液",
selected: false
}, {
name: "养护液",
num: 1,
money: 10,
src: "img/list_img.png",
title: "养护液",
selected: true
}]
},
//初始化加载 显示总价总数量
created: function() {
var price = 0;
var numb = 0;
var list = this.list;
for(var i = 0; i < list.length; i++) {
if(list[i].selected) {
price += list[i].num * list[i].money;
numb += list[i].num;
}
}
this.money = price;
this.num = numb;
console.log(numb);
console.log(price);
},
methods: {
//总价总数量方法 方便调用 再次多写了一次[可以跟初始化封装为一个方法]
hh: function() {
var price = 0;
var numb = 0;
var list = this.list;
for(var i = 0; i < list.length; i++) {
if(list[i].selected) {
price += list[i].num * list[i].money;
numb += list[i].num;
}
}
this.money = price;
this.num = numb;
console.log(numb);
},
//删除购物车列表
delerte: function(index) {
this.list.splice(index, 1);
},
//选中未选中
radios: function(index) {
var list = this.list;
list[index].selected = !list[index].selected;
this.hh();
console.log(list[index].selected)
},
//添加
btn_add: function(index) {
var list = this.list;
var num = list[index].num;
num = num + 1;
list[index].num = num;
this.hh();
},
//减去
btn_minute: function(index) {
var list = this.list;
var num = list[index].num;
if(num > 1) {
num = num - 1;
list[index].num = num;
}
this.hh();
},
}
})
</script>
<script type="text/javascript" src="js/jquery-1.8.3.js" >
</script>
<script>
//点赞
function btn_sub() {
$(".dislog").css("display","block");
}
function submits(){
window.location="https://blog.csdn.net/qq_35695041";
}
//取消
function cances(){
$(".dislog").css("display","none");
}
</script>
</body>
</html>