文章插图
要使用这个api之前还需要在manifest里面配置一下，需要声明
要用哪个位置的api就声明哪个
文章插图
由于它是promise，所以可以在后面catch一下错误
还有他返回的是一个数组，前面是错误的对象，后面是返回成功的对象，这里通过解构赋值都让他们得到值
文章插图
最后如果是错误对象为null而且成功返回里面的errMsg为ok就将当前adress对象改为你选择的对象
文章插图
有了信息就可以去渲染了
文章插图
收货地址这里需要一个计算节点算一下，因为返回的数据不是一个整的需要拼接一下
文章插图
2.7.3 持久存储adress为什么要持久化存储，因为我们一刷新选择的地址信息就不见了，又要重新去新增（真正项目应该是保存在后端）
首先创建adress的vuex文件
文章插图
然后我们要使用的adress就不是自己定义的了 ， 应该是vuex取来的
文章插图
同时获取到的数据不应该存进data里面而是vuex里面
文章插图
注意，commit是this里面的，而且前面要带命名
文章插图
2.7.4 addstr将其放到vuex里面并非计算节点里面
文章插图
文章插图
2.7.5 重新选择地址就是将地址来一个点击事件，重新用到chooseAddress这个api
文章插图
文章插图
2.8 结算2.8.1 封装组件定义好组件的位置
文章插图
文章插图
然后里面的逻辑分为全选、合计和结算
文章插图
注意一下，当宽度不确定的时候，这个时候想让两边有一定的留白感觉设置了宽度一样 ， 可以直接设置padding不设置宽度
文章插图
文章插图
2.8.2 已选商品数量和状态首先已选商品数量是在vuex里面完成，通过getters筛选出来
思路是这样的先filter筛选出state为true的 ， 然后通过reduce计算出所有的count的值
文章插图
直接使用即可
文章插图
关于状态
就是全选按钮的状态
也是通过getters来做，这里可以不用检查每一个的goods_state，我们的getters里面有两个计算属性
文章插图
一个是总共的count数量给tabbar的购物车用的，一个是勾选的count数量给结算那里用的，我如果比较当总共的count等于勾选的count是不是就相当于全选了
文章插图
文章插图
2.8.3 全选全不选在vuex完成，创建一个mutations，foreach完成循环修改记得重新保存进storage
文章插图
拿到组件里面注册，给全选按钮绑定点击事件
文章插图
这里主要就是我们的全选状态怎么拿，前面做过一个计算属性，可以直接通过这个拿
文章插图
2.8.4 所选商品总价也用vuex来完成 ， 先筛选state为true ， 在这里面接着reduce，加上每一个单价乘以数量的值，然后fixed保留两位小数
推荐阅读
- 关于.Net和Java的看法-一个小实习生经历
- 金铲铲之战小小阿卡丽多少钱
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 微信小程序canvas 证件照制作
- 小米盒子4s pro评测_小米盒子4s pro怎么样
- 小米11ultra和小米11pro参数_参数配置详情对比
- 小度智能屏x10不插电源可以用吗?
- 小米11ultra怎么读取u盘_读取u盘方法教程
- iqoo8pro和小米11ultra区别对比_哪款更值得入手
- 北京市小客车指标中签查询 北京市小客车指标查询