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

打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：

勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：

商品列表区域

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

定义如下的 UI 结构：

购物车

美化样式：

.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;}
}

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

通过 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 {}},
}

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

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

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

给类名为 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;}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

在 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')}
}

在 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)},},
}

为 my-goods 组件封装 NumberBox 

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

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

￥{{goods.goods_price | tofixed}}

美化页面的结构： 

.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 {font-size: 16px;color: #c00000;}
}

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

￥{{goods.goods_price | tofixed}}

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

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

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

￥{{goods.goods_price | tofixed}}

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

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

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

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

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

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

￥{{goods.goods_price | tofixed}}

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

methods: {// NumberBox 组件的 change 事件处理函数numChangeHandler(val) {// 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件this.$emit('num-change', {// 商品的 Idgoods_id: this.goods.goods_id,// 商品的最新数量goods_count: +val})}
}

 组件传递回来的值e就是我们传进的参数goods_id和goods_count 

解决 NumberBox 数据不合法的问题 

最新的组件已经修复了 输入非数字已经不会影响了

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

打开项目根目录中 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，则给定默认值为 1this.inputValue = 1;return;}// 省略其它代码...
}

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

完善 NumberBox 的 inputValue 侦听器

这个bug也修改了

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

打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 watch 节点中的 inputValue 侦听器如下：

inputValue(newVal, oldVal) {// 官方提供的 if 判断条件，在用户每次输入内容时，都会调用 this.$emit("change", newVal)// if (+newVal !== +oldVal) {// 新旧内容不同 && 新值内容合法 && 新值中不包含小数点if (+newVal !== +oldVal && Number(newVal) && String(newVal).indexOf('.') === -1) {this.$emit("change", newVal);}
}

 修改完毕之后，NumberBox 组件只会把合法的、且不包含小数点的新值传递出去

 修改购物车中商品的数量

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

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

在 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', 'updateGoodsCount']),// 商品的勾选状态发生了变化radioChangeHandler(e) {this.updateGoodsState(e)},// 商品的数量发生了变化numberChangeHandler(e) {this.updateGoodsCount(e)},},
}

 渲染滑动删除的 UI 效果

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

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

现在有一个很重要的点就是指明滑块的方向，否则会报错::right-options="options"

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

data() {return {options: [{text: '删除', // 显示的文本内容style: {backgroundColor: '#C00000' // 按钮的背景颜色}}]}
}

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

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

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

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

 实现滑动删除的功能 

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

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

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

methods: {...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),// 商品的勾选状态发生了变化radioChangeHandler(e) {this.updateGoodsState(e)},// 商品的数量发生了变化numberChangeHandler(e) {this.updateGoodsCount(e)},// 点击了滑动操作按钮swipeActionClickHandler(goods) {this.removeGoodsById(goods.goods_id)}
}

动态跟新购物车的数量以及tabbar的动态显示微标

就在点击滑动操作按钮时执行this.setBadge()即可