青橙优购——收货地址

1 创建收货地址组件

1. 在 components 目录上鼠标右键，选择 新建组件，并填写组件相关的信息：（在cart.vue中使用）

   

2. 渲染收货地址组件的基本结构：

   

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

1. 在 data 中定义收货地址的信息对象：

   

2. 使用 v-if 和 v-else 实现按需展示：

   <!-- 选择收货地址的盒子 -->
   <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
     <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
   </view>
   
   <!-- 渲染收货信息的盒子 -->
   <view class="address-info-box" v-else>
     <!-- 省略其它代码 -->
   </view>
   

3 实现选择收货地址的功能

1. 为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：

   

2. 定义 chooseAddress 事件处理函数，调用小程序提供的 chooseAddress() API 实现选择收货地址的功能：

   

3. 定义收货详细地址的计算属性：

   

4. 渲染收货地址区域的数据：

   

4 将 address 信息存储到 vuex 中

1. 在 store 目录中，创建用户相关的 vuex 模块，命名为 user.js：

   

2. 在 store/store.js 模块中，导入并挂载 user.js 模块：

   

3. 改造 address.vue 组件中的代码，使用 vuex 提供的 address 计算属性 替代 data 中定义的本地 address 对象：

5 将 Store 中的 address 持久化存储到本地

1. 修改 store/user.js 模块中的代码如下：

   

6 将 addstr 抽离为 getters

目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。

1. 剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点：（实际就是this换成state）

   

2. 改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：

   

7 重新选择收货地址

1. 为 class 类名为 address-info-box 的盒子绑定 click 事件处理函数如下：

   <!-- 渲染收货信息的盒子 -->
   <view class="address-info-box" v-else @click="chooseAddress">
     <!-- 省略其它代码 -->
   </view>
   

   • 收货地址点击不显示，配置manifest.json

8 解决 iPhone 真机上无法重新授权的问题

问题说明：在 iPhone 设备上，当用户取消授权之后，再次点击选择收货地址按钮的时候，无法弹出授权的提示框！

1. 导致问题的原因 - 用户取消授权后，再次点击 “选择收货地址” 按钮的时候：

   • 在模拟器和安卓真机上，错误消息 err.errMsg 的值为 chooseAddress:fail auth deny
   • 在 iPhone 真机上，错误消息 err.errMsg 的值为 chooseAddress:fail authorize no response

2. 解决问题的方案 - 修改 chooseAddress 方法中的代码，进一步完善用户没有授权时的 if 判断条件即可：

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21天，点击查看活动详情