Table of contents
Shopping cart effect display:
The place where data is added, modified, and deleted in this project is written and the browser will store it
The next time you run the project, the browser data will be taken out and displayed on the page
Video_20230816145047
Cart code:
After copying the code, you need to change the address of the vue file introduced in the script; it can be used directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<form action="">
商品名称:<input type="text" v-model="productName" name="productName">
商品单价:<input type="text" v-model="productPrice" name="productPrice">
<input type="button" value="添加商品" @click="addProduct">
</form>
</div>
<ul>
<li v-for="(pro,index) in productList" :key="index">
商品名称：{
{pro.productName}}=========商品单价：{
{pro.productPrice}}
<button type="button" @click="addProToCart(index)">添加到购物车</button>
<button type="button" @click="deleteProToCart(index)">删除此商品</button>
</li>
</ul>
<cart :cartlist="cartList"></cart>
</div>
<template id="cartHtml">
<div>
<table border="1">
<tr>
<td>全选<input type="checkbox" @change="checkActive" id="isCheck"></td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品价格</td>
</tr>
<tr v-for="(pro,index) in cartlist" :key="index">
<td><input type="checkbox" v-model="pro.active" @change="ziCheck"></td>
<td>{
{pro.productName}}</td>
<td>{
{pro.productPrice}}</td>
<td>
<button type="button" @click="reduceProNum(index)">-</button>
{
{pro.productNum}}
<button type="button" @click="addProNum(index)">+</button>
</td>
<td>{
{pro.productPrice*pro.productNum}}</td>
</tr>
<tr>
<td colspan="3">选中的商品：{
{activeNum}}/{
{cartlist.length}}</td>
<td colspan="2">总价格：{
{totalPrice}}</td>
</tr>
</table>
</div>
</template>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址填写-->
<script>
//创建一个购物车子组件
var cart={
template:"#cartHtml",
props:["cartlist"],
methods:{
addProNum(index){
let product =this.cartlist[index];
product.productNum++
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
},
reduceProNum(index){
let product =this.cartlist[index];
//判断商品数量是否为一
if (product.productNum==1) {
this.cartlist.splice(index,1)//为一，在数组中删除掉
//删除完后把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
}else{
product.productNum--
//减完之后把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
}
},
checkActive(){
if(document.getElementById("isCheck").checked){
for(var i=0;i<this.cartlist.length;i++){
this.cartlist[i].active=true;
}
//全选为true后把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
}else{
for(var i=0;i<this.cartlist.length;i++){
this.cartlist[i].active=false;
}
//全选为false后把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
}
},
ziCheck(){
//当多选框变化时把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartlist));
},
},
computed:{
//计算购物车商品总和
activeNum(){
let activeProductList=this.cartlist.filter(item=>{
return item.active
})
return activeProductList.length;
},
//计算购物车商品的总价格
totalPrice(){
let result=0;
for(pro of this.cartlist){
if(pro.active){
result=result+pro.productPrice*pro.productNum
}
}
return result
}
},
updated() {
//当多选框都为true全选后的多选框为true
var isActive=this.cartlist.every(c => c.active)
if (isActive) {
document.getElementById("isCheck").checked=true
} else {
document.getElementById("isCheck").checked=false
}
},
}
let app=new Vue({
el:"#app",
data() {
return {
productName:'',
productPrice:'',
productList:[],
cartList:[]
}
},
methods: {
addProduct(){
let isnameOk=true;
let ispriceOk=true;
if (this.productName=="") {
isnameOk=false
}
if(isNaN(this.productPrice) || this.productPrice<=0){
ispriceOk=false;
}
if(isnameOk && ispriceOk){
//查找新增的商品是否存在商品列表中，如果不存在返回-1
let findindex=this.productList.findIndex(item=>{
return item.productName==this.productName
})
//判断商品列表中是否存在新增的商品
if(findindex==-1){
//把新商品添加到商品列表中
this.productList.push({productName:this.productName,productPrice:this.productPrice})
//把数据放在浏览器里面把key值设置为productList
localStorage.setItem('productList', JSON.stringify(this.productList));
//添加完表单中的输入框调为空
this.productName='';
this.productPrice='';
}else{
alert("此商品已经存在商品列表！")//商品已存在，给出提示
}
}else{
alert("请输入合适的商品名称及单价")
}
},
addProToCart(index){
let newproduct=this.productList[index];//根据下标从商品列表里面取出商品
//从购物车列表中查找，是否存在新的商品，如果找到返回购物车的商品
let product= this.cartList.find(item=>{
return item.productName==newproduct.productName
})
if (product) {
//如果有对应的商品则数量加一
product.productNum++
}else{
//没有对应的商品就添加商品到购物车
this.cartList.push({
productName:newproduct.productName,
productPrice:newproduct.productPrice,
productNum:1,
active:true
})
//把数据放在浏览器里面把key值设置为cartList
localStorage.setItem('cartList', JSON.stringify(this.cartList));
}
},
deleteProToCart(index){
let isOk=confirm("是否删除此商品！")
if(isOk){
this.productList.splice(index,1)
}
//把数据放在浏览器里面把key值设置为productList
localStorage.setItem('productList', JSON.stringify(this.productList));
}
},
//生命周期钩子，部署完后执行从浏览器中把数据拿出来
mounted(){
for(pro of JSON.parse(localStorage.getItem("productList"))){
this.productList.push({productName:pro.productName,productPrice:pro.productPrice});
}
for(pro of JSON.parse(localStorage.getItem("cartList"))){
this.cartList.push({productName:pro.productName,productPrice:pro.productPrice,productNum:pro.productNum,active:pro.active});
}
},
components:{
cart
},
})
</script>
</html>