购物车

购物车

增删改查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let goodsTools = {};
//初始化存储商品的对象
// let prods = {88:1};
let prods = JSON.parse(window.localStorage.getItem('prods'))||{};
goodsTools.addOrUpdate = function(goods){ // -> {id:88,num:1 }
//判断当前id是否存在
if(prods[goods.id]){ //goods.id -> 88 /89
prods[goods.id] += goods.num;
}else{
//当前id不再对象的key中,也就是没有存储过
prods[goods.id] = goods.num;
}
//要让内存的对象与本地存储保持同步
this.save(prods);
}
//删除 {88:1,89:2}
goodsTools.deleteProd = function(prodId){
delete prods[prodId];
//要让内存的对象与本地存储保持同步
this.save(prods);
}
//获取数据
goodsTools.getProds = function(id){
let prods = JSON.parse(window.localStorage.getItem('prods'))||{};
if(id){
return prods[id]; //传id返回数量
}else{
return prods;
}
}
// 本地存储prods
goodsTools.save = function(prods){
window.localStorage.setItem('prods',JSON.stringify(prods)); // [Object:object]
}
// 返回商品总数
goodsTools.getProdCount = function(){
let sum = 0;
let prods = this.getProds();
for(let id in prods){
sum += prods[id];
}
return sum;
}
export default goodsTools; // import xxx from './xxx.js'

页面操作

1-点击加入购物车 调用增加的函数 以对象的方式传入商品的id和数量

2-点击购物车 调用获取本地的数据的函数 获取数据 再用Object.keys(obj)拿到id(数组的形式)

3-拼接想要的参数 与url拼接 然后发送请求显示购物车页面

4-获取用户购物车的信息,给用户添加选中的标记(isChecked = true)添加到请求到的数据

5-通过商品id拿到本地商品的数量添加到 添加到请求到的数据

1
2
3
4
5
6
7
8
9
10
11
12
vue:
let obj = buycar.getProds();
let goodId = Object.keys(obj).join(",");
this.$ajax.get("/goods/getshopcarlist/"+goodId)
.then(res=>{
this.dataLists = res.data.message;
this.dataLists.forEach(element=> {
this.$set(element,"isChecked",true)
this.$set(element,"num",obj[element.id])
});
console.log(this.dataLists)
})

6-商品的总数量以及总价钱用监听时时刻刻监听相关的数量

1
2
3
4
5
6
7
vue----computed:{
pathname(){ // 不要使用箭头函数
return obj
}
}
{{pathname}} ====》模板中使用