13、实现加入购物车数据

1、配置vuex

2、创建购物的store模块

3、实现加入购物车功能

测试vuex功能是否可用

实现加入购物车功能

4、动态统计购物车中商品的总数量

total(newVal)是普通函数

5、持久化保存购物车数据

6、全局展示购物车数量

1、购物车商品数量传递到购物车页面

2、tabBar的购物车数量设置mixins

解决total变化时，同时更新tabBar展示的购物车总数量

14、购物车页面开发

1、购物车商品列表标题区域

2、购物车列表区域

这里的my-goods是用自定义的商品列表组件，在列表页面开发中的封装商品列表组件中说明了

3、购物车列表商品添加勾选标识

4、通过点击动态修改勾选状态（组件方法传递）

更新勾选状态

5、商品列表添加可增加数量NumberBox

false

• 保存更新的NumberBox的值到购物车

• 将修改的值保存

6、解决NumberBox可输入非法字符问题

以下问题我试了官方已经实现，不需要修改了，如需要参考如下

7、实现滑动删除

下图中的官方组件中已经更新为 :right-options="options"，使用:options 本人测试无效

• 实现滑动删除数据的方法

8、购物车为空时设置整个空页面

15、购物车的收获地址区域的开发

1、设置收获地址UI

2、实现收获地址区域的按需展示

3、实现选择收获地址的功能

这个收获地址可以直接使用微信的功能，需要到微信开发网站上申请下，几秒钟就通过了特别快

然后进行如下配置

渲染收获人信息

使用计算属性拼接收获地址

为达到可重新选择收获信息的功能，为渲染收获信息的盒子也绑定上事件即可。

4、保存选择的收获地址

将收获地址保存到vuex中，（详细的vuex的使用看实现加入购物车数据）

注册到vuex中

将Vuex中的数据保存到Storage中

将收获的详细地址抽离为getters

5、解决收获地址授权失败的问题（弹窗提示）

以下清除授权数据，笔者实验一直清除不了授权数据，所以以下代码没有添加到自己的工程里

16、购物车的结算功能开发

1、新建使用结算组件

2、设置结算UI

3、动态设置勾选的结算商品的总数量

4、动态设置全选状态

点击全选，所有商品被选中

5、动态设置已勾选商品的总额

17、我的页面用户信息及登录功能

1、点击结算时增加校验

2、登录和用户信息页面开发

1、登录组件和用户信息的按需展示

2 登录页面开发

1、登录组件UI

2、登录组件调微信登录接口

登录接口

3、保存登录的用户信息

4、根据登录信息获取token字符串

换取token的返回参数参考（换取token----因为域名是我们自己的，所以需要自己后端开发这个接口）

将token保存到vuex

5、用户信息页面开发

1、用户头像信息UI

2、动态设置微信用户信息功能

3、我的收藏关注UI

4、我的订单UI

5、收获地址联系客服UI

6、退出登录功能实现

6、判断用户未登录后3s跳转到登录页

增加判断秒数小于0的情况

7、实现登录成功后返回之前浏览的页面