文章插图
这边接受数据 ， 并传到vuex进行修改
文章插图
2.6 左滑删除用到uni的一个组件
uni-swipe-action
改造之前的代码
文章插图
记得options需要在data中来定义
文章插图
给她来一个点击事件
文章插图
点击删除就这一项筛选出去
文章插图
2.7 收货地址2.7.1 封装my-adress
文章插图
父组件展示出来
文章插图
定义好下面边界线 ， 和点击新增地址区域
文章插图
文章插图
然后是我们的地址区域
文章插图
他们两个应该来一个vif velse显示隐藏 ， 判断依据就是有无adress这个地址信息对象
文章插图
注意这里必须转为json再去对比是否是空对象 ， 因为原来也说过 ， 空的对象返回的值是true ， 所以这里要转换成字符串来比较
文章插图
2.7.2 选择收货地址会用到一个uni的api专门用来获取用户的收货地址
uni.chooseAddress(OBJECT)
点击新增就会进来
文章插图
要注意这个api返回的是一个promise所以用async、await来接受
文章插图
要使用这个api之前还需要在manifest里面配置一下 ， 需要声明
要用哪个位置的api就声明哪个
文章插图
由于它是promise ， 所以可以在后面catch一下错误
还有他返回的是一个数组 ， 前面是错误的对象 ， 后面是返回成功的对象 ， 这里通过解构赋值都让他们得到值
文章插图
最后如果是错误对象为null而且成功返回里面的errMsg为ok就将当前adress对象改为你选择的对象
文章插图
有了信息就可以去渲染了
文章插图
收货地址这里需要一个计算节点算一下 ， 因为返回的数据不是一个整的需要拼接一下
文章插图
2.7.3 持久存储adress为什么要持久化存储 ， 因为我们一刷新选择的地址信息就不见了 ， 又要重新去新增（真正项目应该是保存在后端）
首先创建adress的vuex文件
文章插图
然后我们要使用的adress就不是自己定义的了 ， 应该是vuex取来的
经验总结扩展阅读
- 支付宝蚂蚁庄园2022年8月14题目答案是什么
- 金铲铲之战小小阿卡丽多少钱
- 温柔高格调的签名短句 精致又很小众的签名
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 小朋友玩耍开心的朋友圈说说
- 祝愿小朋友的成长寄语 祝福女儿未来美好的句子
- 2023年11月22日农历十月初十小雪宜乔迁吗
- 微信小程序canvas 证件照制作
- 2022蚂蚁庄园8月16日答案最新
- 小米盒子4s pro评测_小米盒子4s pro怎么样