开发实战 - ego商城 - 7 地址管理模块

7 【我的】模块

7.1 【我的】页面布局

• 样式调整
• 实现：【我的】页面
• 效果
  

加了点样式

7.2 地址管理功能

7.2.1 页面布局

• 新增设置页>地址管理页>新增地址页

• 新增地址页引入第三方组件mpvue-citypicker，用于选择地址

  • mpvue-picker
  • mpvue-citypicker

• 实现：新增设置页>地址管理页>新增地址页

• 效果
  

7.2.2 新增地址

• 内容

  • 将收货地址使用vuex进行管理
  • 新增收货地址页，提交时更新vuex的地址列表
  • 返回地址管理页面，页面展示的地址列表使用vuex的地址列表

• 实现：新增收货地址

• 效果
  

7.2.3 修改地址

• 修改地址

  • 交互与教程略有不同
  • 地址管理页地址列表增加编辑按钮，点击跳转新增地址页
  • 新增地址页标题改为修改地址
    • uni.setNavigationBarTitle()，但效果一般
  • 跳转时携带地址信息，在新增地址页回显（地址可正常回显）
    • 参数为对象类型，先编码后转字符串
  • 保存时刷新vuex的地址列表
    • 根据id找到编辑的地址，覆盖

• 实现：修改收货地址

• 效果
  

7.2.4 默认地址功能

• 默认地址交互
  • 新增地址，如果新增地址勾选默认地址，则将已有地址列表的默认地址移除
  • 修改地址同理
  • 如果对默认地址进行编辑，取消勾选默认地址，保存后即此时没有默认地址，逻辑正确（参考淘宝app默认地址功能）

订单虽然在【我的】页面，但内容过多，与地址管理模块分开发啦

此外，地址管理虽然看着内容少，但是一个完整的功能点（狡辩ing）

（又水一篇~）

11月快乐~