UniApp开发H5——购物车

小鱼说：决定你穿什么的不是你的钱包，而是你的身体。决定你脾气的不是你的性格，而是你的位置。决定你品味的不是你的学历，而是你的经历。

今天，我想和大家分享一下uni app开发的H5中的购物车功能，以及如何实现。跟我来看看~

首先，让我们看看详细信息页面的效果。这可能有点不完美。您可以主要查看功能点：

教具详情.png

这是一个简单的项目详细信息页面。单击“添加到购物车”以弹出选择规范框：

Pop-Frame.png规格

选择规格和数量后，单击“添加到购物车”。此时，详细信息页面底部购物车图标上的数字将增加！

接下来，让我们看看购物车页面：

右上角--Manage.png

右上角--complete.png

点击上面页面上的标题栏按钮的改变是通过uni app中的自定义标题栏uni nav bar插件实现的

（uni app定制导航栏插件下载地址）

Uni-app（自定义导航栏）插件下载.png

具体操作需要更新！

那么，我们如何在点击“添加到购物车”后获取数据？我想我们一定想到了。首先缓存数据，然后从缓存中获取所需的数据。让我们看看具体的想法：

（请参阅缓存的官方文件）

首先：通过uni将我们添加的数据添加到购物车中。setStorage（）在本地缓存。此时，我们还需要考虑：如果再次添加到购物车中的物品的规格与购物车中某个物品的规格相同，那么购物车中该物品的编号只能更改，并且不能出现两个规格相同的物品！

最重要的一点是，不同的用户每次登录不同的购物车数据页面，因此还需要根据当前用户的ID来判断和获取当前购物车数据

第二：当我们在购物车页面上传递uni时，当getStorageInfoSync（）在缓存中获取数据时，它需要通过商品ID（唯一ID）来判断商品规格是否相同。如果规格相同，物品数量将增加！

好的，现在让我们看看具体的代码操作

1、 通过uni本地缓存数据。设置存储（）

//单击添加到购物车按钮

环线（）{

让它=这个

让stuid=“”

//获取缓存中当前登录的用户ID，并确保不同用户登录后购物车中的数据是当前用户对应的数据

uni.get存储({

key:'用户信息'，

成功：函数（res）{

stuid=res.data.uid

}

})

//缓存中当前登录的用户id

那个stuId=stuId

//因为单击“添加到购物车”并单击“立即购买”将弹出规格弹出框，您需要在此处进行判断

如果（that.btnName==“添加到购物车”）{

//单击添加到购物车时检查库存

那个.kucunNum（）

//maxNumber--总库存，number--当前输入的数量

//当库存充足时，您可以“添加到购物车”

如果（that.maxNumber>=that.number）{

//首先，获取已添加到购物车的缓存中的数据

常量res=uni.getStorageInfoSync（）；

//Keys--缓存中的所有键值

那个keys=res.keys

让数据=[]

//过滤器包含“goods”_ key的键值“（）

那个。钥匙。每个（项目=>{

if（item.indexOf（'goods_key'）！=-1&；item.indexOf（that.stuId）！=-1) {

//将购物车列表中的现有数据推送到数据

data.push（项目）

}

})

//获取当前时间戳（用于区分相同的项目规格）

让newData=日期。解析（new Date（））；

//如果购物车中有数据

如果（数据长度>0）{

数据每个（项目=>{

//循环购物车中的现有数据，并判断其是否与要添加到购物车的项目ID相同

//如果它们相同，可以通过拼接新的和时间戳来区分它们

if（item.indexOf（that.guige_skuId）！=-1) {

//弹出确认和取消弹出窗口

uni.show吐司({

标题：“已成功添加到购物车”，

持续时间：2000，

image:'../../../static/images/duigou.png'，

成功：函数（res）{