football/pages/quick-shop/components/app-add-subtract/app-add-subtract.vue

<template>
	<view class="app-add-subtract dir-left-nowrap main-right cross-center">
		<view class="app-icon app-subtract" v-if="total_num > 0 "  @click="subtract"></view>
		<input class="app-input" v-if="total_num >= 0 " :value="total_num === 0 ? '' : total_num" @input="changeNum"  type="number">
		<view class="app-icon app-add" @click="add"></view>
	</view>
</template>

<script>
    export default {
        name: 'app-add-subtract',
	    props: {
            total_num: {
                type: Number,
	            default: function() {
	                return 0;
	            }
            },
            item: {
                type: Object,
	            default: function() {
	                return {}
	            }
            }
	    },
	    methods: {
            add() {
                this.$emit('add', this.item);
            },
            subtract() {
                this.$emit('subtract', this.item);
            },
            changeNum(e) {
                this.$emit('changeNum', this.item, Number(e.detail.value));
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-add-subtract {
		width: #{152rpx};
		height: #{44rpx};
		.app-icon {
			width: #{44rpx};
			height: #{44rpx};
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.app-subtract {
			background-image: url("./image/subtract.png");
		}
		.app-add {
			background-image: url("./image/add.png");
		}
		.app-input {
			width: #{64rpx};
			height: #{44rpx};
			font-size: #{28rpx};
			color: #353535;
			text-align: center;
			background-color: #ffffff;
		}
	}
</style>