133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
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>
|