热门

最新

红包

立Flag

投票

同城

发布
weixin_53051713
油麦菜你好
4 年前
trueweixin_53051713

小程序P161 16.购物车-收货地址-重新选择收获地址-取消授权时的问题
1、重新选择收货地址
①为 class 类名为 address-info-box 的盒子绑定 click 事件处理函数如下：
<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else @click="chooseAddress">
<!-- 省略其它代码 -->
</view>


2、解决收货地址授权失败的问题
如果在选择收货地址的时候，用户点击了取消授权，则需要进行特殊的处理，否则用户将无法再次选择收货地址！
①改造 chooseAddress 方法如下：
// 选择收货地址
async chooseAddress() {
const [err, succ] = await uni.chooseAddress().catch(err => err)
if (succ && succ.errMsg === 'chooseAddress:ok') {
// 更新 vuex 中的收货地址
this.updateAddress(succ)
}

//用户没有授权
if (err && err.errMsg === 'chooseAddress:fail auth deny') {
this.reAuth() // 调用 this.reAuth() 方法，向用户重新发起授权申请
}
}
评论
1
打赏
  • 复制链接
  • 举报
下一条：
小程序P160 15.购物车-收货地址-将addstr抽离为getters目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。 ！！！重新编译可以正常显示①剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点： ！！！把原来的this改成state// 数据包装器getters: { // 收货详细地址的计算属性 addstr(state) { if (!state.address.provinceName) return '' // 拼接 省，市，区，详细地址 的字符串并返回给用户 return state.address.provinceName + state.address.cityName + state.address.countyName + state.address.detailInfo }}②改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：// 按需导入 mapGetters 辅助函数import { mapState, mapMutations, mapGetters } from 'vuex'export default { // 省略其它代码 computed: { ...mapState('m_user', ['address']), // 将 m_user 模块中的 addstr 映射到当前组件中使用 ...mapGetters('m_user', ['addstr']), },}