jiuyiUniapp/shop/components/rf-number-box/index.vue

<template>
	<view class="uni-numbox">
		<view class="uni-numbox-minus" @tap.stop="_calcValue('subtract')">
			<text
				class="iconfont yticon icon-jianhao"
				:class="minDisabled ? 'uni-numbox-disabled' : ''"
			></text>
		</view>
		<input
			class="uni-numbox-value"
			type="number"
			:disabled="disabled"
			v-model="inputValue"
			@input.stop="_onBlur"
		/>
		<view class="uni-numbox-plus" @tap.stop="_calcValue('add')">
			<text
				class="iconfont yticon iconjia2"
				:class="maxDisabled ? 'uni-numbox-disabled' : ''"
			></text>
		</view>
	</view>
</template>
<script>
export default {
	name: 'rf-number-box',
	props: {
		isMax: {
			type: Boolean,
			default: false
		},
		isMin: {
			type: Boolean,
			default: false
		},
		index: {
			type: Number,
			default: 0
		},
		skuId: {
			type: Number,
			default: 0
		},
		value: {
			type: Number,
			default: 0
		},
		min: {
			type: Number,
			default: -Infinity
		},
		max: {
			type: Number,
			default: Infinity
		},
		step: {
			type: Number,
			default: 1
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			inputValue: parseInt(this.value, 10),
			minDisabled: false,
			maxDisabled: false
		};
	},
	created() {
		this.maxDisabled = this.isMax;
		this.minDisabled = this.isMin;
	},
	computed: {},
	watch: {
		inputValue(number) {
			const data = {
				number: number,
				index: this.index,
				skuId: this.skuId
			};
			this.$emit('eventChange', data);
		}
	},
	methods: {
		_calcValue(type) {
			const scale = this._getDecimalScale();
			let value = this.inputValue * scale;
			let newValue = 0;
			let step = this.step * scale;

			if (type === 'subtract') {
				newValue = value - step;
				if (newValue <= this.min) {
					this.minDisabled = true;
				}
				if (newValue < this.min) {
					newValue = this.min;
				}
				if (newValue < this.max && this.maxDisabled === true) {
					this.maxDisabled = false;
				}
			} else if (type === 'add') {
				newValue = value + step;
				if (newValue >= this.max) {
					this.maxDisabled = true;
				}
				if (newValue > this.max) {
					newValue = this.max;
				}
				if (newValue > this.min && this.minDisabled === true) {
					this.minDisabled = false;
				}
			}
			if (newValue === value) {
				return;
			}
			this.inputValue = parseInt(newValue / scale, 10);
		},
		_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 = 1;
				return;
			}
			value = +value;
			if (value > this.max) {
				value = this.max;
			} else if (value < this.min) {
				value = this.min;
			}
			this.inputValue = parseInt(value, 10);
			this.$emit('eventChange', this.inputValue);
		}
	}
};
</script>
<style>
.uni-numbox {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 230upx;
	height: 70upx;
	background: #f5f5f5;
}

.uni-numbox-minus,
.uni-numbox-plus {
	margin: 0;
	background-color: #f5f5f5;
	width: 70upx;
	height: 100%;
	line-height: 70upx;
	text-align: center;
	position: relative;
}
.uni-numbox-minus .yticon,
.uni-numbox-plus .yticon {
	font-size: 36upx;
	color: #555;
}

.uni-numbox-minus {
	border-right: none;
	border-top-left-radius: 6upx;
	border-bottom-left-radius: 6upx;
}

.uni-numbox-plus {
	border-left: none;
	border-top-right-radius: 6upx;
	border-bottom-right-radius: 6upx;
}

.uni-numbox-value {
	position: relative;
	background-color: #f5f5f5;
	width: 90upx;
	height: 50upx;
	text-align: center;
	padding: 0;
	font-size: 30upx;
}

.uni-numbox-disabled.yticon {
	color: #d6d6d6;
}
</style>