• uniapp——项目day04

    购物车页面——商品列表区域

    渲染购物车商品列表的标题区域

    1. 定义如下的 UI 结构：

    2.美化样式

    渲染商品列表区域的基本结构

    1. 通过 mapState 辅助函数，将 Store 中的 cart 数组映射到当前页面中使用：

    1.   import badgeMix from '@/mixins/tabbar-badge.js'
    2.   // 按需导入 mapState 这个辅助函数
    3.   import {
    4.     mapState
    5.   } from 'vuex'
    6.   export default {
    7.     mixins: [badgeMix],
    8.     computed: {
    9.       // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
    10.       ...mapState('m_cart', ['cart']),
    11.     },
    12.     data() {
    13.       return {}
    14.     },
    15.   }

    2. 在 UI 结构中，通过 v-for 指令循环渲染自定义的 my-goods 组件：

    1.     
    2.     <block v-for="(goods, i) in cart" :key="i">
    3.       <my-goods :goods="goods">my-goods>
    4.     block>

    为 my-goods 组件封装 radio 勾选状态

    1. 打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：

    2. 给类名为 goods-item-left 的 view 组件添加样式，实现 radio 组件和 image 组件的左 右布局：

    1.   .goods-item-left {
    2.     margin-right: 5px;
    3.     display: flex;
    4.     justify-content: space-between;
    5.     align-items: center;
    6.  
    7.     .goods-pic {
    8.       width: 100px;
    9.       height: 100px;
    10.       display: block;
    11.     }
    12.   }

     3. 封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：

    1.     // 定义 props 属性，用来接收外界传递到当前组件的数据
    2.     props: {
    3.       // 商品的信息对象
    4.       goods: {
    5.         type: Object,
    6.         default: {},
    7.       },
    8.       // 是否展示图片左侧的 radio
    9.       showRadio: {
    10.         type: Boolean,
    11.         // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
    12.         default: false,
    13.       },
    14.     },

    4. 使用 v-if 指令控制 radio 组件的按需展示：

     5. 在 cart.vue 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组 件：

    6. 修改 my-goods.vue 组件，动态为 radio 绑定选中状态：

     为 my-goods 组件封装 radio-change 事件

    1. 当用户点击 radio 组件，希望修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的 goods_id 和 goods_state ：

    1.     
    2.     <block v-for="(goods, i) in cart" :key="i">
    3.       
    4.       <my-goods :goods="goods" :show-radio="true" @radiochange="radioChangeHandler">my-goods>
    5.     block>

    定义 radioChangeHandler 事件处理函数如下：

    1. methods: {
    2. // 商品的勾选状态发生了变化
    3. radioChangeHandler(e) {
    4. console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
    5. }
    6. }

     2. 在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：

    3. 在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：

    修改购物车中商品的勾选状态

    1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：

    1. // 更新购物车中商品的勾选状态
    2.     updateGoodsState(state, goods) {
    3.       // 根据 goods_id 查询购物车中对应商品的信息对象
    4.       const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
    5.       // 有对应的商品信息对象
    6.       if (findResult) {
    7.         // 更新对应商品的勾选状态
    8.         findResult.goods_state = goods.goods_state
    9.         // 持久化存储到本地
    10.         this.commit('m_cart/saveToStorage')
    11.       }
    12.     }

    2. 在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映 射到当前页面中使用：

    1.   import badgeMix from '@/mixins/tabbar-badge.js'
    2.   import {
    3.     mapState,
    4.     mapMutations
    5.   } from 'vuex'
    6.   export default {
    7.     mixins: [badgeMix],
    8.     computed: {
    9.       ...mapState('m_cart', ['cart']),
    10.     },
    11.     data() {
    12.       return {}
    13.     },
    14.     methods: {
    15.       ...mapMutations('m_cart', ['updateGoodsState']),
    16.       // 商品的勾选状态发生了变化
    17.       radioChangeHandler(e) {
    18.         this.updateGoodsState(e)
    19.       },
    20.     },
    21.   }

    为 my-goods 组件封装 NumberBox

    注意：NumberBox 组件是 uni-ui 提供的

    1. 修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构：

    2. 美化页面的结构：

    1.  .goods-item-right {
    2.       display: flex;
    3.       flex: 1;
    4.       flex-direction: column;
    5.       justify-content: space-between;
    6.  
    7.       .goods-name {
    8.         font-size: 13px;
    9.       }
    10.  
    11.       .goods-info-box {
    12.         display: flex;
    13.         align-items: center;
    14.         justify-content: space-between;
    15.       }
    16.  
    17.       .goods-price {
    18.         font-size: 16px;
    19.         color: #c00000;
    20.       }
    21.     }

    3. 在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：

    1.       <view class="goods-info-box">
    2.         
    3.         <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
    4.         
    5.         <uni-number-box :min="1" :value="goods.goods_count">uni-number-box>
    6.       view>

    4. 在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显 示 NumberBox 组件：

    1.  // 是否展示价格右侧的 NumberBox 组件
    2.       showNum: {
    3.         type: Boolean,
    4.         default: false,
    5.       },

     5. 在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：

    1.       <view class="goods-info-box">
    2.         
    3.         <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
    4.         
    5.         <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum">uni-number-box>
    6.       view>

    6. 在 cart.vue 页面中的商品列表区域，指定 :show-num="true" 属性，从而显示 NumberBox 组件：

    1.     
    2.     <block v-for="(goods, i) in cart" :key="i">
    3.       <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler">my-goods>
    4.     block>

    为 my-goods 组件封装 num-change 事件

    1. 当用户修改了 NumberBox 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change 事件，从而获取当前商品的 goods_id 和 goods_count：

    1.     
    2.     <block v-for="(goods, i) in cart" :key="i">
    3.       <my-goods :goods="goods" :show-radio="true" :show-num="true" @radiochange="radioChangeHandler"
    4.         @num-change="numberChangeHandler">my-goods>
    5.     block>

    定义 numberChangeHandler 事件处理函数如下：

    1. // 商品的数量发生了变化
    2. numberChangeHandler(e) {
    3. console.log(e)
    4. }

    2. 在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下：

    1.       <view class="goods-info-box">
    2.         
    3.         <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
    4.         
    5.         <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler">uni-number-box>
    6.       view>

    3. 在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数：

    1. // NumberBox 组件的 change 事件处理函数
    2.       numChangeHandler(val) {
    3.         // 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
    4.         this.$emit('num-change', {
    5.           // 商品的 Id
    6.           goods_id: this.goods.goods_id,
    7.           // 商品的最新数量
    8.           goods_count: +val
    9.         })
    10.       }

    解决 NumberBox 数据不合法的问题

    问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问 题

    现在那个组件已经修复了这个问题了，所以不需要再修改源代码。

    完善 NumberBox 的 inputValue 侦听器

    问题说明：在用户每次输入内容之后，都会触发 inputValue 侦听器，从而调用 this.$emit("change", newVal) 方法。这种做法可能会把不合法的内容传递出去！

    现在这个问题也修复了，输入带小数的数字也会四舍五入。

    修改购物车中商品的数量

    1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量：

    1.     // 更新购物车中商品的数量
    2.     updateGoodsCount(state, goods) {
    3.       // 根据 goods_id 查询购物车中对应商品的信息对象
    4.       const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
    5.       if (findResult) {
    6.         // 更新对应商品的数量
    7.         findResult.goods_count = goods.goods_count
    8.         // 持久化存储到本地
    9.         this.commit('m_cart/saveToStorage')
    10.       }
    11.     }

    2. 在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射 到当前页面中使用：

    1.   import badgeMix from '@/mixins/tabbar-badge.js'
    2.   import {
    3.     mapState,
    4.     mapMutations
    5.   } from 'vuex'
    6.   export default {
    7.     mixins: [badgeMix],
    8.     computed: {
    9.       ...mapState('m_cart', ['cart']),
    10.     },
    11.     data() {
    12.       return {}
    13.     },
    14.     methods: {
    15.       ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount']),
    16.       // 商品的勾选状态发生了变化
    17.       radioChangeHandler(e) {
    18.         this.updateGoodsState(e)
    19.       },
    20.       // 商品的数量发生了变化
    21.       numberChangeHandler(e) {
    22.         this.updateGoodsCount(e)
    23.  
    24.       },
    25.     },
    26.   }

    渲染滑动删除的 UI 效果

    滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的官方文档请参 考SwipeAction 滑动操作。

    1. 改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代 码块快速生成基本的 UI 结构）：

    1.     
    2.     
    3.     <uni-swipe-action>
    4.       <block v-for="(goods, i) in cart" :key="i">
    5.         
    6.         <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods)">
    7.           <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler"
    8.             @num-change="numberChangeHandler">my-goods>
    9.         uni-swipe-action-item>
    10.       block>
    11.     uni-swipe-action>

    2. 在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：

    1.         options: [{
    2.           text: '删除', // 显示的文本内容
    3.           style: {
    4.             backgroundColor: '#C00000' // 按钮的背景颜色
    5.           }
    6.         }]

    3. 在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：

    1. // 点击了滑动操作按钮
    2. swipeActionClickHandler(goods) {
    3. console.log(goods)
    4. }

    4. 美化 my-goods.vue 组件的样式： 

    1. .goods-item {
    2. // 让 goods-item 项占满整个屏幕的宽度
    3. width: 750rpx;
    4. // 设置盒模型为 border-box
    5. box-sizing: border-box;
    6. display: flex;
    7. padding: 10px 5px;
    8. border-bottom: 1px solid #f0f0f0;
    9. }

    实现滑动删除的功能

    1. 在 store/cart.js 模块的 mutations 节点中声明如下的方法，从而根据商品的 Id 从购物车 中移除对应的商品：

    1. // 根据 Id 从购物车中删除对应的商品信息
    2. removeGoodsById(state, goods_id) {
    3. // 调用数组的 filter 方法进行过滤
    4. state.cart = state.cart.filter(x => x.goods_id !== goods_id)
    5. // 持久化存储到本地
    6. this.commit('m_cart/saveToStorage')
    7. }

    2. 在 cart.vue 页面中，使用 mapMutations 辅助函数，把需要的方法映射到当前页面中使 用：

    购物车页面——收货地址区域

    创建收货地址组件

    1. 在 components 目录上鼠标右键，选择 新建组件 ，并填写组件相关的信息：

    然后要在购物车页面使用这个组件

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

    1.   <view>
    2.     
    3.     <view class="address-choose-box">
    4.       <button type="primary" size="mini" class="btnChooseAddress">请选择收货
    5.         地址+button>
    6.     view>
    7.     
    8.     <view class="address-info-box">
    9.       <view class="row1">
    10.         <view class="row1-left">
    11.           <view class="username">收货人：<text>escooktext>view>
    12.         view>
    13.         <view class="row1-right">
    14.           <view class="phone">电话：<text>138XXXX5555text>view>
    15.           <uni-icons type="arrowright" size="16">uni-icons>
    16.         view>
    17.       view>
    18.       <view class="row2">
    19.         <view class="row2-left">收货地址：view>
    20.         <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北
    21.           省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx view>
    22.       view>
    23.     view>
    24.     
    25.     <image src="/static/cart_border@2x.png" class="address-border">image>
    26.   view>

    3. 美化收货地址组件的样式：

    1.   // 底部边框线的样式
    2.   .address-border {
    3.     display: block;
    4.     width: 100%;
    5.     height: 5px;
    6.   }
    7.  
    8.   // 选择收货地址的盒子
    9.   .address-choose-box {
    10.     height: 90px;
    11.     display: flex;
    12.     align-items: center;
    13.     justify-content: center;
    14.   }
    15.  
    16.   // 渲染收货信息的盒子
    17.   .address-info-box {
    18.     font-size: 12px;
    19.     height: 90px;
    20.     display: flex;
    21.     flex-direction: column;
    22.     justify-content: center;
    23.     padding: 0 5px;
    24.  
    25.     // 第一行
    26.     .row1 {
    27.       display: flex;
    28.       justify-content: space-between;
    29.  
    30.       .row1-right {
    31.         display: flex;
    32.         align-items: center;
    33.  
    34.         .phone {
    35.           margin-right: 5px;
    36.         }
    37.       }
    38.     }
    39.  
    40.     // 第二行
    41.     .row2 {
    42.       display: flex;
    43.       align-items: center;
    44.       margin-top: 10px;
    45.  
    46.       .row2-left {
    47.         white-space: nowrap;
    48.       }
    49.     }
    50.   }

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

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

    1.         // 收货地址
    2.         address: {},

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

    2. <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
    3. <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+
    4. button>
    5. view>
    7. <view class="address-info-box" v-else>
    9. view>

    实现选择收货地址的功能

    避坑:

    小程序提供的chooseAddress()方法显示张三地址页面，在manifest.json文件中，找到mp-weixin节点，添加上：

     "requiredPrivateInfos": [

             "chooseLocation",

             "getLocation", 

             "chooseAddress"

             ]

    然后才能看见这个页面，不然会一直报错

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

    2. <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
    3. <button type="primary" size="mini" class="btnChooseAddress"
    4. @click="chooseAddress">请选择收货地址+button>
    5. view>

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

    1.  // 选择收货地址
    2.       async chooseAddress() {
    3.         // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    4.         // 返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
    5.         const [err, succ] = await uni.chooseAddress().catch(err => err)
    6.         // 2. 用户成功的选择了收货地址
    7.         if (err === null && succ.errMsg === 'chooseAddress:ok') {
    8.           // 为 data 里面的收货地址对象赋值
    9.           this.address = succ
    10.         }

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

    1. computed: {
    2.         // 收货详细地址的计算属性
    3.         addstr() {
    4.           if (!this.address.provinceName) return ''
    5.           // 拼接 省，市，区，详细地址 的字符串并返回给用户
    6.           return this.address.provinceName + this.address.cityName +
    7.             this.address.countyName + this.address.detailInfo
    8.         }
    9.       }

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

    1.     
    2.     <view class="address-info-box" v-else>
    3.       <view class="row1">
    4.         <view class="row1-left">
    5.           <view class="username">收货人：<text>{{address.userName}}text>
    6.           view>
    7.         view>
    8.         <view class="row1-right">
    9.           <view class="phone">电话：<text>{{address.telNumber}}text>view>
    10.           <uni-icons type="arrowright" size="16">uni-icons>
    11.         view>
    12.       view>
    13.       <view class="row2">
    14.         <view class="row2-left">收货地址：view>
    15.         <view class="row2-right">{{addstr}}view>
    16.       view>
    17.     view>

    将 address 信息存储到 vuex 中

    这里好像要真机调试才可以获取到地址。

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

    1. export default {
    2.   // 开启命名空间
    3.   namespaced: true,
    4.   // state 数据
    5.   state: () => ({
    6.     // 收货地址
    7.     address: {},
    8.   }),
    9.   // 方法
    10.   mutations: {
    11.     // 更新收货地址
    12.     updateAddress(state, address) {
    13.       state.address = address
    14.     },
    15.   },
    16.   // 数据包装器
    17.   getters: {},
    18. }

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

    这个是vue3的做法

    1. // 1. 导入 Vue 和 Vuex
    2. import {
    3.   createStore
    4. } from 'vuex'
    5. import moduleCart from './cart.js'
    6. // 导入用户的 vuex 模块
    7. import moduleUser from './user.js'
    8. // 2. 创建 Store 的实例对象
    9. const store = createStore({
    10.   modules: {
    11.     m_cart: moduleCart,
    12.     // 挂载用户的 vuex 模块，访问路径为 m_user
    13.     m_user: moduleUser,
    14.   },
    15. })
    16.  
    17. // 3. 向外共享 Store 的实例对象
    18. export default store

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

    1. // 1. 按需导入 mapState 和 mapMutations 这两个辅助函数
    2.   import {
    3.     mapState,
    4.     mapMutations
    5.   } from 'vuex'
    6.   export default {
    7.     data() {
    8.       return {
    9.         // 2.1 注释掉下面的 address 对象，使用 2.2 中的代码替代之
    10.         // address: {}
    11.       }
    12.     },
    13.     methods: {
    14.       // 3.1 把 m_user 模块中的 updateAddress 函数映射到当前组件
    15.       ...mapMutations('m_user', ['updateAddress']),
    16.       // 选择收货地址
    17.       async chooseAddress() {
    18.         const [err, succ] = await uni.chooseAddress().catch((err) => err)
    19.         // 用户成功的选择了收货地址
    20.         if (err === null && succ.errMsg === 'chooseAddress:ok') {
    21.           // 3.2 把下面这行代码注释掉，使用 3.3 中的代码替代之
    22.           // this.address = succ
    23.           // 3.3 调用 Store 中提供的 updateAddress 方法，将 address 保存到Store 里面
    24.           this.updateAddress(succ)
    25.         }
    26.       },
    27.     },
    28.     computed: {
    29.       // 2.2 把 m_user 模块中的 address 对象映射当前组件中使用，代替 data 中address 对象
    30.       ...mapState('m_user', ['address']),
    31.       // 收货详细地址的计算属性
    32.       addstr() {
    33.         if (!this.address.provinceName) return ''
    34.         // 拼接 省，市，区，详细地址 的字符串并返回给用户
    35.         return this.address.provinceName + this.address.cityName +
    36.           this.address.countyName + this.address.detailInfo
    37.       },
    38.     },
    39.   }

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

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

    1. export default {
    2.   // 开启命名空间
    3.   namespaced: true,
    4.   // state 数据
    5.   state: () => ({
    6.     // 3. 读取本地的收货地址数据，初始化 address 对象
    7.     address: JSON.parse(uni.getStorageSync('address') || '{}'),
    8.   }),
    9.   // 方法
    10.   mutations: {
    11.     // 更新收货地址
    12.     updateAddress(state, address) {
    13.       state.address = address
    14.       // 2. 通过 this.commit() 方法，调用 m_user 模块下的
    15.       saveAddressToStorage 方法将 address 对象持久化存储到本地
    16.       this.commit('m_user/saveAddressToStorage')
    17.     },
    18.     // 1. 定义将 address 持久化存储到本地 mutations 方法
    19.     saveAddressToStorage(state) {
    20.       uni.setStorageSync('address', JSON.stringify(state.address))
    21.     },
    22.   },
    23.   // 数据包装器
    24.   getters: {},
    25. }

    将 addstr 抽离为 getters

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

    1. 剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为 一个 getters 节点：

    1.     // 收货详细地址的计算属性
    2.     addstr(state) {
    3.       if (!state.address.provinceName) return ''
    4.       // 拼接 省，市，区，详细地址 的字符串并返回给用户
    5.       return state.address.provinceName + state.address.cityName +
    6.         state.address.countyName + state.address.detailInfo
    7.     }

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

    1. // 按需导入 mapGetters 辅助函数
    2. import { mapState, mapMutations, mapGetters } from 'vuex'
    3. export default {
    4. // 省略其它代码
    5. computed: {
    6. ...mapState('m_user', ['address']),
    7. // 将 m_user 模块中的 addstr 映射到当前组件中使用
    8. ...mapGetters('m_user', ['addstr']),
    9. },
    10. }

    重新选择收货地址

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

    2. <view class="address-info-box" v-else @click="chooseAddress">
    4. view>

    解决收货地址授权失败的问题

    如果在选择收货地址的时候，用户点击了取消授权，则需要进行特殊的处理，否则用户将无法再 次选择收货地址！

    1. 改造 chooseAddress 方法如下：

    1.       // 选择收货地址
    2.       async chooseAddress() {
    3.         // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    4.         // 返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
    5.         const [err, succ] = await uni.chooseAddress().catch(err => err)
    6.         // 2. 用户成功的选择了收货地址
    7.         if (succ && succ.errMsg === 'chooseAddress:ok') {
    8.           // 更新 vuex 中的收货地址
    9.           this.updateAddress(succ)
    10.         }
    11.         // 3. 用户没有授权
    12.         if (err && err.errMsg === 'chooseAddress:fail auth deny') {
    13.           this.reAuth() // 调用 this.reAuth() 方法，向用户重新发起授权申请
    14.         }
    15.       }

    2. 在 methods 节点中声明 reAuth 方法如下：

    1. // 调用此方法，重新发起收货地址的授权
    2.       async reAuth() {
    3.         // 3.1 提示用户对地址进行授权
    4.         const [err2, confirmResult] = await uni.showModal({
    5.           content: '检测到您没打开地址权限，是否去设置打开？',
    6.           confirmText: "确认",
    7.           cancelText: "取消",
    8.         })
    9.         // 3.2 如果弹框异常，则直接退出
    10.         if (err2) return
    11.         // 3.3 如果用户点击了 “取消” 按钮，则提示用户 “您取消了地址授权！”
    12.         if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')
    13.         // 3.4 如果用户点击了 “确认” 按钮，则调用 uni.openSetting() 方法进入授权页面，
    14.         让用户重新进行授权
    15.         if (confirmResult.confirm) return uni.openSetting({
    16.           // 3.4.1 授权结束，需要对授权的结果做进一步判断
    17.           success: (settingResult) => {
    18.             // 3.4.2 地址授权的值等于 true，提示用户 “授权成功”
    19.             if (settingResult.authSetting['scope.address']) return
    20.             uni.$showMsg('授权成功！请选择地址')
    21.             // 3.4.3 地址授权的值等于 false，提示用户 “您取消了地址授权”
    22.             if (!settingResult.authSetting['scope.address']) return
    23.             uni.$showMsg('您取消了地址授权！')
    24.           }
    25.         })
    26.       }

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

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

    1.       async chooseAddress() {
    2.         // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    3.         // 返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
    4.         const [err, succ] = await uni.chooseAddress().catch(err => err)
    5.         // 2. 用户成功的选择了收货地址
    6.         if (succ && succ.errMsg === 'chooseAddress:ok') {
    7.           this.updateAddress(succ)
    8.         }
    9.         // 3. 用户没有授权
    10.         if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg ===
    11.             'chooseAddress:fail authorize no response')) {
    12.           this.reAuth()
    13.         }
    14.       }

     BUG修改

    在选择收货地址方法里面

            const [err, succ] = await uni.chooseAddress().catch(err => err)
    这条语句会报错不能执行，需要改成如下语句

    1. // 选择收货地址
    2.       async chooseAddress() {
    3.         // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    4.         // 返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
    5.         let succ = null;
    6.         let err = null;
    7.         try {
    8.           const res = await uni.chooseAddress();
    9.            err = null;
    10.            succ = res;
    11.           console.log(res)
    12.         } catch (error) {
    13.            err = error;
    14.            succ = null;
    15.           // 处理错误的逻辑
    16.           console.error(error);
    17.         }
    18.         
    19.         // 2. 用户成功的选择了收货地址
    20.         if (succ && succ.errMsg === 'chooseAddress:ok') {
    21.           this.updateAddress(succ)
    22.         }
    23.         // 3. 用户没有授权
    24.         if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg ===
    25.             'chooseAddress:fail authorize no response')) {
    26.           this.reAuth()
    27.         }
    28.       }

  • 相关阅读:
    Harbor仓库概述
    个人NuGet服务搭建，BaGet保姆及部署教程
    Docker中将静态页面部署nginx
    用__LINE__和函数内无名enum推算常量，用于定义固定长度数组
    【融合ChatGPT等AI模型】Python-GEE遥感云大数据分析、管理与可视化及多领域案例实践应用
    5分钟学会Tomcat
    Redis——》数据类型：Hash（哈希）
    Spring之aop
    3、Shell变量
    小乌龟，git使用教程，gitLab打版教程
  • 原文地址：https://blog.csdn.net/m0_62327332/article/details/134377859