创天下项目总结

路由模块

1， router这块只是单纯使用了的框架推荐的异步加载组件，并没有深入研究webpack的懒加载原理。
2，在 /my 组件的设计上存在瑕疵，之前总是怀疑自己的用法错误，直到接触了React之后，才明白嵌套路由中的子路由是和父路由一起展示的。那说明用法是没有错。只是设计上有待商榷，像在做/my 和其他嵌套路由这种模块的时候，因为有时候父路由的高度会比子路由高，这就导致无法对父路由进行很好的覆盖。所以在知道父路由超过一屏的时候，应该设置一个空白页面做父路由，之前的父路由通过现在的空白页redirect来抵达。这样就避免了父子路由的高度差问题。

Tab组件

这个组件体现了自己的学习历程，之前对代码的实现上纯属想到哪写到哪，缺乏了思考，这样即使10000个小时也无济于事。

https://github.com/jiamianmao/fresh_mall/commit/3ff31570a46d028bd4aa718f8b09f78f3cd4293d#diff-725c8f1457f8dd62867a0bdb83d35454

这个是之前的代码设计，把 /home ， /category ， /shopcart ， /my 耦合在一起了，既不利于维护，结构也不清晰。应该是做个枚举或者字典。

收藏商品，关注品牌，浏览记录

这三个模块因为功能逻辑类似，所以写在同一个vue文件中。每个模块都有单个删除和批量删除的功能，如果把每个模块的删除功能单独来写，就要写6个删除的方法，造成代码冗余。
后来想到之前在慕课上学的TP5课程，利用AOP思想把删除逻辑抽离出来，在删除方法中来判断是哪个模块调用的删除方法，并做相应处理。

delAll (text) {
    if (text === '编辑') {
      this.text = '删除'
      this.del = true
    } else if (text === '删除') {
      this.del = false
      if (!this.activeArr.length) {
        this.text = '编辑'
        return
      }
      this._del()
      // 清空active列表
      this.activeArr = []
      this.text = '编辑'
    }
  },
  delOne (id) {
    // 因为单个删除和批量删除实现功能一致了，之前是只能单个删除，后来升级为支持批量删除，造成代码冗余
    // 这里把单个删除的id添加到数组中，然后删除操作调用同一个方法即可。
    // 这里本来有两种方案： 1， 删除方法做三个，然后先判断再选择不同的调用   2，就是不判断，删除操作的时候去判断
    // 第2个方法比较优雅，也就是现在这种，大概就是AOP思想咯？
    this.activeArr.push(id)
    this._del()
  }

购物车模块

这个模块和淘宝不一样的地方是，多商家多商品多地址的产品设计
这里写图片描述

1，首先是利用Vuex维护一个购物车的商品数量，当商品数量发生改变的时候，底部tab栏的购物车icon右上角的数字会发生改变。
2，因为可以勾选购物车中的商品来进行结算，所以还需要维护一个activeArr来保存选中的品牌和商品列表。
3，当删除商品的时候，需要判断activeArr中的品牌下边是否已经没有商品了，如果没有，需要删除该品牌。
4，勾选品牌的时候，需要先判断activeArr是否已经有了该品牌，如果没有就把该品牌下的所有商品加上，如果有的话，需要判断当前勾选的商品是否等于购物车中该品牌下边的所有商品，等于的话就做全空操作，不等于的话就做全对操作。
这里写图片描述
5，勾选商品的时候，需要先判断activeArr是否已经有了该品牌，如果没有的话，添加品牌和商品，如果有该品牌的话（这里增加了一层判断该品牌下是否有商品，其实不用），再判断是否选中了该商品，如果没有的话，就push进去，如果有的话，就splice掉。
6，因为需要维护一个当前选中商品的总价和商品数量，所以watch一个activeArr，每当activeArr发生改变的时候来重新计算总价和数量，并计算是否是全选。
7，订单确认页，使用vuex来维护一个address和address_type。用户身份分两种：企业用户和个人用户，收货方式有三种：普通，自提，商家代收。另外对于收货地址也有一个限制，不同商品的配送范围是不同的。

支付模块

支持四种支付方式：支付宝，微信，银联和公司转账。
1，支付宝支付按照官方示例，因为不能直接在微信中打开，所以在项目根目录增加一个官方提供的js文件来判断如果是微信打开，就会提示用浏览器打开，从而拉起支付宝。
2，微信支付也需要判断是否在微信中打开，从而使用微信公众号支付还是H5支付。
3，银联是需要前端配置一个跳转路由，路由里把一些配置做成表单发送给相关接口

定位模块

采用的是腾讯定位，在刚进入项目中就会获取用户当前地址
这里写图片描述
因为项目中多个地方需要定位，所以利用$emit 发射到App.vue中进行请求和维护位置信息和localStorage保存信息，从而实现保存分发位置信息。

评价模块

因为需要双向绑定多个商品的评星和评价内容。

这里写图片描述

微信分享

另外在微信分享中遇到了一个问题，即ios中分享商品详情页的时候，分享出去的却是项目首页，该问题由同事解决并输出了一篇博文。
https://segmentfault.com/a/1190000013220261