football/pages/cart/components/app-add-subtract/app-add-subtract.vue

<template>
	<view class="app-add-subtract dir-left-nowrap">
		<view class="app-icon" @click.stop="_calcValue('minus')" :class="{'app-unreducible': inputValue == 1, 'app-can-be-reduced': inputValue > 1}"></view>
		<view class="app-value">
			<input v-model="inputValue" @blur.stop="_onBlur" type="number">
		</view>
		<view class="app-icon" @click.stop="_calcValue('plus')" :class="{'app-not-add': inputValue >= stock, 'app-can-add': inputValue < stock}"></view>
	</view>
</template>

<script>
    export default {
        name: 'app-add-subtract',
	    data() {
            return {
                inputValue: 0,
                step: 1,
                disabled: false,
            }
	    },
	    props: {
            value: {
                type: Number,
                default() {
                    return 1;
                }
            },
		    stock: {
                type: Number,
			    default() {
                    return 0;
                }
            },
            good_id: Number,
	    },
	    created() {
            this.inputValue = +this.value;
	    },
	    methods: {
            _calcValue(type) {
                if (this.disabled) {
                    return;
                }
                const scale = this._getDecimalScale();
                let value = this.inputValue * scale;
                let step = this.step * scale;
                if (type === "minus") {
                    value -= step;
                } else if (type === "plus") {
                    value += step;
                }
                if (value < 1 || value > this.stock) {
                    return;
                }
                this.inputValue = String(value / scale);
            },
		    
            _getDecimalScale() {
                
                let scale = 1;
                // 浮点型
                if (~~this.step !== this.step) {
                    scale = Math.pow(10, (this.step + "").split(".")[1].length);
                }
                return scale;
            },
		    
            _onBlur(event) {
                
                let value = event.detail.value;
                if (!value) {
                    // this.inputValue = 0;
                    return;
                }
                value = +value;
                if (value > this.stock) {
                    value = this.stock;
                } else if (value < 1) {
                    value = 1;
                }
                this.inputValue = value;
            }
	    },
	    watch: {
            value: {
                handler(val) {
                    this.inputValue = +val;
                }
            },
            inputValue(newVal, oldVal) {
                if (+newVal !== +oldVal) {
                    this.$emit("change", newVal, this.good_id);
                }
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-add-subtract {
		height: #{60rpx};
		.app-icon {
			height: #{60rpx};
			width: #{60rpx};
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-color: #f7f7f7;
		}
		.app-unreducible {
			background-image: url("../../../../static/image/cart/unreducible.png");
		}
		.app-not-add {
			background-image: url("../../../../static/image/cart/cant-add.png");
		}
		.app-can-add {
			background-image: url("../../../../static/image/cart/can-be-added.png");
		}
		.app-can-be-reduced {
			background-image: url("../../../../static/image/cart/can-be-reduced.png");
		}
		.app-value {
			height: #{60rpx};
			width: #{88rpx};
			input {
				height: #{60rpx};
				width: #{88rpx};
				font-size: #{21rpx};
				color: #353535;
				background-color: #f7f7f7;
				text-align: center;
			}
		}
	}
</style>