web-app-v1/pages/stock/components/count.vue

<template>
	<view class="countContainer">
		<view
			class="reduceBtn"
			:class="activeIndex === -1 ? 'active' : ''"
			@click="toReduce"
		/>
		<view
			class="countNum"
			:class="countNum ? 'active' : ''"
			@click="toInputNum"
		>
			{{ countNum }}
		</view>
		<view
			class="plusBtn"
			:class="activeIndex === 1 ? 'active' : ''"
			@click="toPlus"
		/>
	</view>
</template>

<script>
	export default {
		props: {
			countNum: {
				type: Number,
				default: 0
			},
			max: {
				type:Number,
				default: 99999
			},
			min: {
				type:Number,
				default: 0
			}
		},
		data(){
			return {
				activeIndex: 0
			}
		},
		methods: {
			toReduce() {
				this.activeIndex = -1
				let _v = this.countNum
				if(_v <= this.min) return false
				this.$emit('update:countNum', --_v)
			},
			toPlus() {
				this.activeIndex = 1
				let _v = this.countNum
				if(_v >= this.max) return false
				this.$emit('update:countNum', ++_v)
			},
			toInputNum() {
				this.$emit('update:inputCountNum')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countContainer {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.reduceBtn, .plusBtn {
			width: 52rpx;
			height: 52rpx;
			border: 1px solid #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			position: relative;
			background: #ffffff;
			&::after {
				content: "";
				display: block;
				width: 18rpx;
				height: 2rpx;
				background-color: #999999;
			}
			&.active {
				background: linear-gradient(to bottom, #F97C55, #F44545) !important;
				border: none !important;
				&::before, &::after {
					background: #ffffff !important;
				}
			}
		}
		.plusBtn {
			&::before {
				content: "";
				display: block;
				width: 2rpx;
				height: 18rpx;
				background-color: #999999;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.countNum {
			color: #999999;
			font-size: 32rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			flex: 1;
			min-width: 44rpx;
			height: 44rpx;
			text-align: center;
			font-weight: bolder;
			&.active {
				color: #EA4A41 !important;
			}
		}
	}
</style>