xlcs/atguigu-tuan/components/AddToCart/AddToCart.vue

<template>
  <view>
    <!-- 如果商品没有加入购物车 -->
    <block v-if="getCheckProductExists">
      <u-button size="mini" type="warning" @click="addShopCart">加入购物车</u-button>
    </block>
    <block v-else>
      <u-number-box
          ref="uNumber"
          v-model="skuNumValue"
          :disabled-input="true"
          :input-height="40"
          :input-width="60"
          :max="getMax"
          :min="0"
          :size="20"
          @minus="changeSkuNumMinus"
          @plus="changeSkuNumPlus"
      ></u-number-box>
    </block>

    <u-modal ref="confirmModal" v-model="showConfirmModal" :async-close="true" :show-cancel-button="true"
             @cancel="modalCancel" @confirm="modalConfirm">
      <view class="u-flex u-row-center u-m-20">确认删除该商品？</view>
    </u-modal>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';

export default {
  name: 'AddToCart',
  data() {
    return {
      id: 0,
      isCart: false,
      showConfirmModal: false
    };
  },
  props: {
    shopDetail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 在购物车页面的时候，使用带活动的购物车将传递的不再是商品的id
    // 商品详情信息中没有id，而是skuId
    skuId: {
      type: Number,
      default: null
    }
  },
  computed: {
    ...mapGetters('cartModule', ['checkProductExists', 'getProductSkuNum']),
    // 检查是否存在商品于购物车
    getCheckProductExists() {
      return !this.checkProductExists(this.id);
    },
    // 商品加入购物车的数量
    skuNumValue: {
      get() {
        return this.getProductSkuNum(this.id);
      },
      set(value) {
      }
    },
    // 最大可加入购物车的数量
    getMax() {
      let perLimit = this.shopDetail.perLimit;
      // 秒杀商品与普通商品购买上限判断字段不同
      if (this.shopDetail.skuType === 1) {
        perLimit = this.shopDetail.seckillSkuVo && this.shopDetail.seckillSkuVo.seckillLimit
      }
      return perLimit;
    }
  },
  methods: {
    ...mapActions('cartModule', ['addShopAction', 'changeSkuNumAction']),
    // 添加到购物车
    addShopCart() {
      if (this.skuId) {
        this.shopDetail.id = this.skuId;
      }
      this.addShopAction(this.shopDetail);
    },
    // 购物车数量递减
    changeSkuNumMinus(e) {
      // 如果是购物车中进行递减操作，并且购物车数量为0，那么需要弹出确认框
      if (e.value < 1 && this.isCart) {
        this.showConfirmModal = true;
      } else {
        this.changeSkuNumAction({skuId: this.id, value: -1, currentBuyNum: e.value, isCart: this.isCart});
      }

    },
    // 购物车数量递增
    changeSkuNumPlus(e) {
      this.changeSkuNumAction({skuId: this.id, value: 1, currentBuyNum: e.value, isCart: this.isCart});
    },
    // 确认删除商品模态框
    modalConfirm() {
      this.showConfirmModal = false;
      this.changeSkuNumAction({skuId: this.id, value: -1, currentBuyNum: 0, isCart: this.isCart});
    },
    // 取消删除商品模态框，只需要将商品购买数修改回初始值
    modalCancel() {
      this.showConfirmModal = false;
      // 重新设置u-number-box的初始值
      this.$refs.uNumber.$data.inputVal = 1;
    },
  },
  watch: {
    // skuId是在购物车频道使用，如果是商品列表，是id
    skuId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.id = newVal;
          this.isCart = true;
        } else {
          this.id = this.shopDetail.id;
          this.isCart = false;
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="scss"></style>