购物车页面

1.0 创建购物车页面的编译模式

1. 打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：
2. 勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：

1.1 商品列表区域

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

1. 定义如下的 UI 结构：

<!-- 购物车商品列表的标题区域 -->
<view class="cart-title">
  <!-- 左侧的图标 -->
  <uni-icons type="shop" size="18"></uni-icons>
  <!-- 描述文本 -->
  <text class="cart-title-text">购物车</text>
</view>

2. 美化样式：

.cart-title {
   
    
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
   
    
    margin-left: 10px;
  }
}

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

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

import badgeMix from '@/mixins/tabbar-badge.js'
// 按需导入 mapState 这个辅助函数
import {
   
     mapState } from 'vuex'

export default {
   
    
  mixins: [badgeMix],
  computed: {
   
    
    // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
    ...mapState('m_cart', ['cart']),
  },
  data() {
   
    
    return {
   
    }
  },
}

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

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

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

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

<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio checked color="#C00000"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

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

.goods-item-left {
   
    
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
   
    
    width: 100px;
    height: 100px;
    display: block;
  }
}

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

export default {
   
    
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
   
    
    // 商品的信息对象
    goods: {
   
    
      type: Object,
      default: {
   
    },
    },
    // 是否展示图片左侧的 radio
    showRadio: {
   
    
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
  },
}

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

<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
  <radio checked color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

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

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

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

<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

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

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

<!-- 商品列表区域 -->
<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>

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

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

<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

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

methods: {
   
    
  // radio 组件的点击事件处理函数
  radioClickHandler() {
   
    
    // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
    // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
    this.$emit('radio-change', {
   
    
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品最新的勾选状态
      goods_state: !this.goods.goods_state
    })
  }
}

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

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

// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
   
    
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  // 有对应的商品信息对象
  if (findResult) {
   
    
    // 更新对应商品的勾选状态
    findResult.goods_state = goods.goods_state
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}

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

import badgeMix from '@/mixins/tabbar-badge.js'
import {
   
     mapState, mapMutations } from 'vuex'

export default {
   
    
  mixins: [badgeMix],
  computed: {
   
    
    ...mapState('m_cart', ['cart']),
  },
  data() {
   
    
    return {
   
    }
  },
  methods: {
   
    
    ...mapMutations('m_cart', ['updateGoodsState']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
   
    
      this.updateGoodsState(e)
    },
  },
}

1.16 为 my-goods 组件封装 NumberBox

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

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

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

2. 美化页面的结构：

.goods-item-right {
   
    
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

  .goods-name {
   
    
    font-size: 13px;
  }

  .goods-info-box {
   
    
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-price