重點(diǎn)難點(diǎn)：增減商品數(shù)量，商品勾選狀態(tài)，是否全選

一、增減商品數(shù)量

PC端：

1.在shopCart/index.vue中
<template>
<li class="cart-list-con5">
  <a class="mins" @click="minusSkuNum(cart)">-</a>
    <input
      autocomplete="off"
      type="text"
      :value="cart.skuNum"
      minnum="1"
      class="itxt"
      @input="changeSkuNum(cart, $event)"
       />
    <a @click="addSkuNum(cart)" class="plus">+</a>
</li> 
</template>

<script>
//按需引入lodash節(jié)流函數(shù)
import throttle from "lodash/throttle";
//按需引入lodash防抖函數(shù)
import debounce from "lodash/debounce";

export default {
  methods: {
    //獲取購物車的數(shù)據(jù)請求函數(shù)
    getData() {
      this.$store.dispatch("getShopCart");
    },
    //修改商品數(shù)據(jù)->加的操作
    async addSkuNum(cart) {
      //整理參數(shù)
      let params = { skuId: cart.skuId, skuNum: 1 };
      //發(fā)請求:通知服務(wù)器修改當(dāng)前商品的個數(shù)
      //再次獲取購物車的最新的數(shù)據(jù)：保證這次修改數(shù)據(jù)完畢【成功以后在獲取購物車數(shù)據(jù)】
      try {
        //修改商品個數(shù)成功
        await this.$store.dispatch("addOrUpdateCart", params);
        //再次獲取最新的購物車的數(shù)據(jù)
        this.getData();
      } catch (error) {
        alert("修改數(shù)量失敗");
      }
    },
    //修改商品數(shù)據(jù)-減的操作
    minusSkuNum: throttle(async function (cart) {
      if (cart.skuNum > 1) {
        //整理參數(shù):至少加入購物車的數(shù)量最低1個
        let params = { skuId: cart.skuId, skuNum: -1 };
        //修改商品的數(shù)據(jù)
        try {
          //修改商品的個數(shù)、成功以后再次獲取購物車的數(shù)據(jù)
          await this.$store.dispatch("addOrUpdateCart", params);
          this.getData();
        } catch (error) {
          alert("修改數(shù)量失敗");
        }
      }
    }, 2000),
    changeSkuNum: debounce(async function (cart, e) {
      //整理參數(shù)
      let params = { skuId: cart.skuId };
      //計(jì)算出SkuNum攜帶的數(shù)據(jù)
      let userResultValue = e.target.value * 1;
      //用戶輸入完畢，最終結(jié)果【非法條件】
      if (isNaN(userResultValue) || userResultValue < 1) {
        params.skuNum = 0;
      } else {
        //正常情況 (輸入數(shù)量 - 購物車本身數(shù)量)
        params.skuNum = parseInt(userResultValue) - cart.skuNum;
      }
      //發(fā)請求：修改商品的個數(shù)
      try {
        //修改商品的個數(shù)、成功以后再次獲取購物車的數(shù)據(jù)
        await this.$store.dispatch("addOrUpdateCart", params);
        this.getData();
      } catch (error) {
       alert("修改失敗");                   
      }
    }, 500)
}
</script>

效果實(shí)現(xiàn)：

小程序：
1.修改 my-goods.vue 組件的源代碼，在類名為 goods-info-box 的 view 組件內(nèi)部渲染 NumberBox 組件的基本結(jié)構(gòu)

<view class="goods-info-box">
  <!-- 商品價格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品數(shù)量 -->
  <uni-number-box :min="1"></uni-number-box>
</view>

2.美化頁面的結(jié)構(gòu)：

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

3.在 my-goods.vue 組件中，動態(tài)為 NumberBox 組件綁定商品的數(shù)量值：

<view class="goods-info-box">
  <!-- 商品價格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品數(shù)量 -->
  <uni-number-box :min="1" :value="goods.goods_count"></uni-number-box>
</view>

4.在 my-goods.vue 組件中，封裝名稱為 showNum 的 props 屬性，來控制當(dāng)前組件中是否顯示 NumberBox 組件：

 // 定義 props 屬性，用來接收外界傳遞到當(dāng)前組件的數(shù)據(jù)
  props: {
    // 是否展示價格右側(cè)的 NumberBox 組件
    showNum: {
      type: Boolean,
      default: false,
    },
   }

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

<view class="goods-info-box">
  <!-- 商品價格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品數(shù)量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum"></uni-number-box>
</view>

6.在 cart.vue 頁面中的商品列表區(qū)域，指定 :show-num="true" 屬性，從而顯示 NumberBox 組件

<!-- 商品列表區(qū)域 -->
<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>

7.將最新的商品數(shù)量更新到購物車中，此時用戶可以為 my-goods 組件綁定 @num-change 事件，從而獲取當(dāng)前商品的 goods_id 和 goods_count：

<!-- 商品列表區(qū)域 -->
<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>

8.在 my-goods.vue 組件中，為 uni-number-box 組件綁定 @change 事件處理函數(shù)如下

<view class="goods-info-box">
  <!-- 商品價格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品數(shù)量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box>
</view>

9.在 my-goods.vue 組件的 methods 節(jié)點(diǎn)中，定義 numChangeHandler 事件處理函數(shù)

methods: {
  // NumberBox 組件的 change 事件處理函數(shù)
  numChangeHandler(val) {
    // 通過 this.$emit() 觸發(fā)外界通過 @ 綁定的 num-change 事件
    this.$emit('num-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品的最新數(shù)量
      goods_count: +val
    })
  }
}

10. 修改購物車中商品的數(shù)量,在 store/cart.js 模塊中，聲明如下的 mutations 方法，用來修改對應(yīng)商品的數(shù)量

// 更新購物車中商品的數(shù)量
updateGoodsCount(state, goods) {
  // 根據(jù) goods_id 查詢購物車中對應(yīng)商品的信息對象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  if(findResult) {
    // 更新對應(yīng)商品的數(shù)量
    findResult.goods_count = goods.goods_count
    // 持久化存儲到本地
    this.commit('m_cart/saveToStorage')
  }
}

11.在 cart.vue 頁面中，通過 mapMutations 這個輔助函數(shù)，將需要的 mutations 方法映射到當(dāng)前頁面中使用

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

export default {
  methods: {
     numberChangeHandler(e) {
      this.updateGoodsCount(e)
    },
  }
}