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、实现登录成功后返回之前浏览的页面