一.加入购物车1.1 购物车数量先创建购物车git
文章插图
这里的数据肯定要做全局数据，因为不能只在details这个页面去操作他，他到底有几个也是由购物车页面获取到的
文章插图
所以需要vuex
创建store文件夹
文章插图
往main注册之后 ， 创建自己的仓库
文章插图
文章插图
1.2 思路连同上面的一起 ， 加入购物车的整体思路应该是这样
store里面存的应该是整个购物车的数据，也就是每一条购物车的数据 ， 是个数组，为什么要这么做，因为我们这里购物车里面是没有接口的，所以我们需要点击的每一个加入购物车自己来保存 ， 我们的小购物车显示里面有多少数据，就可以直接用她的length来做了
当我们点击加入购物车 ， 就应该整理goods的数据 ， 然后当做参数传进来，通过一个 find函数，找到就会返回找到的第一项，没有到就返回undefined ， 找到就让返回的这一项里面的count++，表示数量+1，没找到就往购物车列表里面添加一条数据
文章插图
然后这里注意，由于我不需要actions做什么所以就直接提交到mutations了，放在methods ， 相当于把这个函数放进来了，整理参数后，还要去this来调用这个函数
文章插图
1.3 动态统计购物商品总数量通过getters统计所有的count的数量
文章插图
获取到getters
文章插图
最关键的需要监视他，当他一变化，就让我们的uni-goods-nav里面的info动态变化即可
这里照样用的find来找满足条件的第一项，最关键的一点这里直接修改找出来的值，data里面的数据也会变，为什么，因为这里没有浅拷贝，所以这个值就是data里面的值
文章插图
1.4 持久化存储购物车因为我们刚才是存在vuex里面，所以保留期限并不长久
我们就要对刚才的vuex做一下改造，我们每一次点击添加都应该往storage存一份，同时state里面的数据也需要重新定义一下，应该是拿storage里面的，没得就为空数组但是是字符串型
文章插图
1.5 tabBar购物车设置徽标在他的onShow钩子，页面展示触发，可触发多次
这里会用到一个api uni.setTabBarBadge专门设置tabBar右上角的一些文本
文章插图
但是这样有个问题，就是我只在购物车这个tabbar里面会显示，在其他tabbar就没有调用这个api
这里不需要每一个都去调用，直接用mixin
文章插图
哪里要用直接导入并注册
文章插图
二.购物车页面2.1 渲染列表区域创建好编译模式，首先是头部区域
用到了uniicon
文章插图
然后下面内容区域要渲染，首先要有数据，这里的数据存在vuex里面
文章插图
然后渲染上来，这里我们之前封装过一个组件 ， 可以直接把这个组件拿来用，遍历需要在外面遍历里面为每一个item的数据，所以外面用block包裹
文章插图
2.2 封装radio我们这个组件由一个选择框，所以要去改造原来的组件构造
文章插图
但是有个问题之前在商品列表用到了这个组件他不需要这个radio组件，所以我们需要vif来判断
推荐阅读
- 关于.Net和Java的看法-一个小实习生经历
- 金铲铲之战小小阿卡丽多少钱
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 微信小程序canvas 证件照制作
- 小米盒子4s pro评测_小米盒子4s pro怎么样
- 小米11ultra和小米11pro参数_参数配置详情对比
- 小度智能屏x10不插电源可以用吗?
- 小米11ultra怎么读取u盘_读取u盘方法教程
- iqoo8pro和小米11ultra区别对比_哪款更值得入手
- 北京市小客车指标中签查询 北京市小客车指标查询