购物车页面

商品列表区域

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

定义如下的 UI 结构：

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

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

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

<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods"></my-goods>
</block>

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

打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：
给对应 view 组件添加样式，实现 radio 组件和 image 组件的左右布局：
封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：
使用 v-if 指令控制 radio 组件的按需展示：（其它界面不需要有勾选状态）
在 cart.vue 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组件：
修改 my-goods.vue 组件，动态为 radio 绑定选中状态：（这样不能动态修改选中状态）

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

在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：
在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：

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

<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <!-- 在 radioChangeHandler 事件处理函数中，通过事件对象 e，得到商品的 goods_id 和 goods_state -->
  <my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>

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

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

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

在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：
在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用：

6 为 my-goods 组件封装 NumberBox

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

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

<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price+'.00'}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1"></uni-number-box>
</view>

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

<uni-number-box :min="1" :value="goods.goods_count"></uni-number-box>
通radio勾选。在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：
在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：

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

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

青橙优购——购物车界面