retail-app/components/set-count/set-count.vue

<template>
	<view class="set-count flex aic" :class="{'mini': size === 'mini'}">
		<view class="box box-left" :class="{'mini': size === 'mini'}"
			:style="{color:count <= countMin || disabled?'#BDC1C4':'#000', background:count <= countMin || disabled?'#F2F3F5':''}"
			@click.stop="cut(count)">-
		</view>
		<view class="one" :style="{width: size === 'max' ? '156rpx' : '100rpx'}">
			<u--input :customStyle="{width: '100%', height: '100%'}" v-model="count" :disabled="disabled" value="count"
				border="none" @focus="focus" @blur="blur" inputAlign="center" @input="inputVal"></u--input>
		</view>
		<view class="box box-right" :class="{'mini': size === 'mini'}"
			:style="{color:count >= countStock || count >= countmax || disabled?'#BDC1C4':'#000', background:count >= countStock || count >= countmax || disabled?'#F2F3F5':''}"
			@click.stop="add(count)">+
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			disabled: Boolean,
			size: {
				type: String,
				default: 'max'
			},
			countStock: { // 库存值
				type: Number,
				default: 99999,
			},
			countmax: { //最大值
				type: Number,
				default: 99999,
			},
			countMin: { // 最小值
				type: Number,
				default: 1,
			},
			value: { // 绑定值
				type: [Number, String],
				default: 1
			},
			step: { // 每次加减数
				type: [Number, String],
				default: 1
			}
		},
		data() {
			return {
				isCtrl: false,
				count: 0,
				isInit: true // 是否首次进入
			}
		},
		mounted() {
			this.count = this.countMin > this.value ? +this.countMin : +this.value
		},
		watch: {
			value(v) {
				this.count = this.countMin > this.value ? +this.countMin : +this.value
			}
		},
		methods: {
			setCount(count) {
				this.count = count
				this.$showToast({
					title: `最大设置${count}`,
					mask: false
				})
			},
			focus() {
				this.isCtrl = false
			},
			blur() {
				this.$nextTick(() => {
					if (this.count > this.countStock || this.count > this.countmax) {
						this.setCount(this.countStock <= this.countmax ? this.countStock : this.countmax)
						this.$emit('input', this.count)
						this.$emit('change', this.count)
					} else {
						if (this.count < this.countMin) {
							this.count = this.countMin
						}
						this.$emit('input', this.count)
						this.$emit('change', this.count)
					}
				})
			},
			inputVal() {
				this.$nextTick(() => {
					const inputType = /^0|[^\d]+/g
					this.count = String(this.count).replace(inputType, '')
				})
			},
			// 增加数量
			add() {
				if (this.disabled) {
					return
				}
				this.count = +this.count
				if (this.count < this.countmax && this.count < this.countStock) {
					this.count += Number(this.step)
					this.$emit('input', this.count)
					this.$emit('change', this.count)
				}
			},
			// 减少数量
			cut() {
				if (this.disabled) {
					return
				}
				this.isCtrl = true
				this.count = +this.count
				if (this.count > this.countMin) {
					this.count -= Number(this.step)
					this.$emit('input', this.count)
					this.$emit('change', this.count)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.set-count {
		height: 72rpx;
		color: $color-text-m;
		border-radius: 4rpx;
		border: 2rpx solid #DCDFE6;

		&.mini {
			height: 58rpx;
		}

		.box {
			display: flex;
			width: 70rpx;
			height: 70rpx;
			justify-content: center;
			align-items: center;

			&.mini {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.box-left {
			border-right: 2rpx solid #DCDFE6;
		}

		.box-right {
			border-left: 2rpx solid #DCDFE6;
		}

		.one {
			width: 156rpx;
			height: 100%;
		}
	}
</style>