小鱼儿心语：决定你穿什么衣裳的，不是你的钱包，而是你的身材。决定你的脾气的，不是你的性格，而是你的位置。决定你的品位的，不是你的学历，而是你的阅历。
今天给大家分享uni-app开发H5中的购物车功能，具体是怎样实现的呢，跟着我一起来看看吧~
首先来看下详情页面的效果，可能有点不完善，大家主要看功能点就好：
教具详情.png
这是一个简单的物品详情页面，点击 “加入购物车” 弹出选择规格弹框：
规格弹框.png
选择完规格以及数量之后点击 “加入购物车”，此时，详情页下方购物车图标上的数字就会 增加！
接下来我们来看下购物车页面：
右上角--管理.png
右上角--完成.png
- 以上页面中标题栏按钮的点击变化是通过uni-app中的自定义标题栏
uni-nav-bar插件实现的- https://ext.dcloud.net.cn/plugin?id=52 (uni-app自定义导航栏插件下载地址)
uni-app（自定义导航栏）插件下载.png
具体操作有待更新！
那么，点击 “加入购物车” 之后我们是怎么获取到数据的呢，我想大家一定想到了，先把数据缓存，再从缓存中拿到想要的数据，我们来看下具体的思路：
https://uniapp.dcloud.io/api/storage/storage?id=setstorage（缓存的官方文档请作参考）
- 首先：把我们加入购物车的数据通过
uni.setStorage()缓存到本地，此时还需要考虑：如果再次加入购物车的物品的规格与购物车中的某一条物品规格相同，那么购物车中的那个物品只能数量发生变化，而不能出现两件规格完全相同的物品！
还有一个最重要的，每次登录的用户不同购物车数据一定页不同，所以还需要通过当前用户的id来判断获取当前购物车数据- 其次：当我们在购物车页面通过
uni.getStorageInfoSync()获取缓存中的数据时，需要通过物品id（唯一标识）来判断物品规格是否相同，如果相同就让该物品的数量增加！
好了，现在我们来看下具体的代码操作
一、通过uni.setStorage()将数据缓存到本地
//点击加入购物车按钮
torouter() {
let that = this
let stuid = ''
// 获取缓存中的当前登录的用户id，确保不同用户登录后购物车中的数据都是对应当前用户的数据
uni.getStorage({
key: 'userInfo',
success: function(res) {
stuid = res.data.uid
}
})
// 缓存中的当前登录的用户id
that.stuId = stuid
// 因为点击加入购物车和点击立即购买都要弹出规格弹框，所以这里需要判断一下
if (that.btnName == '加入购物车') {
// 点击加入购物车时校验库存
that.kucunNum()
// maxNumber--总库存、number--当前输入的数量
// 当库存充足就可以进行“加入购物车”操作
if(that.maxNumber>=that.number){
// 首先获取缓存中的已经加入购物车的数据
const res = uni.getStorageInfoSync();
// keys--缓存中所有的key值
that.keys = res.keys
let data = []
// 过滤包含‘goods_key’的key值（）
that.keys.forEach(item => {
if (item.indexOf('goods_key') != -1 && item.indexOf(that.stuId) != -1) {
// 将购物车列表中已有的数据push到data中
data.push(item)
}
})
// 获取当前时间戳（用来区别相同的物品规格）
let newData = Date.parse(new Date());
// 如果购物车中已有数据
if (data.length > 0) {
data.forEach(item => {
// 循环购物车中已有数据，判断是否与当前要加入购物车的物品id相同
// 如果相同就通过拼接new和时间戳来区分
if (item.indexOf(that.guige_skuId) != -1) {
// 弹出确定、取消弹框
uni.showToast({
title: '已成功添加到购物车',
duration: 2000,
image: '../../../static/images/duigou.png',
success: function(res) {
// 用户点击确定
// 通过uni.setStorage将当前数据缓存到本地
uni.setStorage({
// 如果同样规格的物品多次加入购物车，加一个new标识
key: 'goods_key' + that.guige_skuId + that.stuId + 'new' + newData,
data: that.data,
success: function() {
// console.log('success');
}
});
}
})
// 加入购物车完成后将选择规格弹框隐藏掉
this.hides()
} else {
// 如果购物车已有数据与当前要加入购物车的物品id不相同，就直接将当前物品缓存到本地
uni.showToast({
title: '已成功添加到购物车',
duration: 2000,
image: '../../../static/images/duigou.png',
success: function(res) {
console.log('用户点击确定');
uni.setStorage({
// 此时就不需要通过new和时间戳来区分，因为此规格只有一个，独一无二
key: 'goods_key' + that.guige_skuId + that.stuId,
data: that.data,
success: function() {
// console.log('success');
}
});
}
})
this.hides()
}
})
} else {
uni.showToast({
title: '已成功添加到购物车',
duration: 2000,
image: '../../../static/images/duigou.png',
success: function(res) {
console.log('用户点击确定');
uni.setStorage({
key: 'goods_key' + that.guige_skuId + that.stuId,
data: that.data,
success: function() {
console.log('success');
}
});
}
})
this.hides()
}
}
// 因为点击加入购物车和点击立即购买都要弹出规格弹框，所以这里需要判断一下
} else {
// 点击立即购买，校验库存
that.kucunNum()
// maxNumber--总库存、number--当前输入的数量
// 当库存充足就可以进行“加入购物车”操作
if(that.maxNumber>=that.number){
uni.navigateTo({
url: '../shopmall/infoconf?sku_id=' + that.goodDetail.id + '&level=' + that.data.level +
'&coach=' + that.data.coach + '&material=' + that.data.material + '&number=' + that.data.number +
'&sellPrice=' + that.GoodsPrice
})
}
}
}
二、通过uni.getStorage()获取缓存中购物车数据
如下就是缓存中的数据：
缓存数据.png
其中一个key值：goods_key809352new1592216294000
goods_key：代表购物车中所有的缓存数据；
809：当前要加入缓存数据的规格id
352：当前登录的用户id
new1592216294000（当前时间戳）：用来区分当前要加入购物车的数据与购物车已有数据规格相同时的字符串
// 因为是列表数据，所以运用了分页处理，
getUpData(mescroll) {
this.mescroll = mescroll
let that = this
that.loading = true
let data = []
uni.removeStorageSync('goods_key');
// 当前学员的id（当前登录用户的id）
let stuid = ''
uni.getStorage({
key: 'userInfo',
success: function(res) {
stuid = res.data.uid
}
})
// 获取缓存中的当前登录用户的id
that.stuId = stuid
// 获取缓存中所有的key值
const res = uni.getStorageInfoSync();
console.log("所有多少个key", res.keys);
// 获取缓存中所有的key值
that.keys = res.keys
// 缓存中物品规格完全相同的key值
let newData = []
// 过滤包含‘goods_key’的key
that.keys.forEach(item => {
// 购物车中所有缓存数据的key值
if (item.indexOf('goods_key') != -1 && item.indexOf(that.stuId) != -1 && item.indexOf('new') == -1) {
data.push(item)
}
// 获取缓存中key值中包含‘new’的key值（物品规格相同的数据）
if (item.indexOf('new') != -1) {
newData.push(item)
}
})
// -----------------获取新添加的new的data数据---------------------
// 物品规格相同的数据的key值对应的每一个data数据
let newDetail = {}
// 物品规格相同的数据的key值对应的data数据，每一个循环push进newdata数组里
let newdata = []
// 循环缓存中物品规格完全相同的key值
newData.forEach(item => {
uni.getStorage({
key: item,
success: function(res) {
// 深拷贝（物品规格相同的数据的key值对应的每一个data数据）
newDetail = JSON.parse(JSON.stringify(res.data))
// 物品规格相同的数据的key值对应的data数据，每一个循环push进newdata数组里
newdata.push(newDetail)
that.loading = false
},
});
})
// 购物车中所有缓存数据的key值
that.goodKey = data
// 清空当前购物车列表中的数据
that.goodsData = []
// 循环购物车中所有缓存数据的key值
that.goodKey.forEach(item => {
uni.getStorage({
key: item, //每一个key值
success: function(res) {
// 每一个key值对应的data数据
that.goods = JSON.parse(JSON.stringify(res.data))
that.$set(that.goods, 'checkedGoods', false)
// 每一个key值对应的data数据push到购物车列表goodsData数组中
that.goodsData.push(that.goods)
that.loading = false
},
});
})
// 判断new中数据的skuid与显示的是否相同。相同，显示的数量就是new相加的数量
// 循环包含new的key值对应的data数据（物品规格相同的值）
newdata.forEach(item => {
// 循环购物车列表中的数据
that.goodsData.forEach(v => {
// 强制转化成数字类型
v.number = Number(v.number)
// 判断new中数据的skuid（规格id）与列表数据中的skuid（规格id）是否相同。相同，当前列表中显示的数量就是new中skuid（规格id）相同的数据中的number相加的数量
if (item.goodDetail.sku_id == v.goodDetail.sku_id) {
// v.number--列表中的显示某条数据的number
// item.number--new中数据的所有skuid（规格id）与列表数据中的某条skuid（规格id）相同的data数据中的number相加
v.number += Number(item.number)
// 最大购买数量不超过100件
if (v.number > 100) {
v.number = 100
}
}
})
})
if (that.goodsData.length == 10) {
mescroll.endSuccess(that.goodsData.length);
that.loading = false
that.current_page = 1
that.current_page = that.current_page + 1
} else {
that.loading = false
that.current_page = 1
mescroll.endSuccess(0)
}
if (that.goodsData.length == 0) {
this.isEmpty = true
this.bgcolor = '#fff'
}
},
网友评论