青橙优购——购物车页面问题解决

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

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

   <!-- 商品列表区域 -->
   <block v-for="(goods, i) in cart" :key="i">
     <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
   </block>
   

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

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

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

<uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box>

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

   

8 解决 NumberBox 数据不合法的问题

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

1. 打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 methods 节点中的 _onBlur 函数如下：

   _onBlur(event) {
     // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符：
     // let value = event.detail.value;
   
     // 将用户输入的内容转化为整数
     let value = parseInt(event.detail.value);
   
     if (!value) {
       // 如果转化之后的结果为 NaN，则给定默认值为 1
       this.inputValue = 1;
       return;
     }
   
     // 省略其它代码...
   }
   

• 修改完毕之后，用户输入小数会被转化为整数，用户输入非法字符会被替换为默认值 1

9 修改购物车中商品的数量

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

   

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

   

10 渲染滑动删除的 UI 效果

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

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

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

   

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

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

11 实现滑动删除的功能

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

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

12 解决购物车界面添加商品下方tab栏数据改变

1. 首先找到添加徽标位置，mixins文件夹下tabbar-badge.js

   

2. 可以看到是setBadge控制total改变，那么就要监听数据改变，用watch检测total是否变化，变化就重新调用setBadge

   

13 购物车点击商品名称跳转到对应商品详情页

1. 在my-goods.vue中给商品名称的view加点击事件同时使用 $emit,让cart.vue监听到自定义事件(不传参数就不用第二个参数)

2. 子组件点击价格触发cart.vue的事件，从而在对应函数中进行跳转