weapp-v3/components/custom-counter.vue

<template>
	<view class="custom-counter">
		<text class="reduce cuIcon-move" @tap="reduce"></text>
		<text class="num">{{ inputValue }}</text>
		<text class="add cuIcon-add" @tap="add"></text>
	</view>
</template>

<script>
	export default {
		props: {
			value: String
		},
		data() {
			return {
				inputValue: this.value
			}
		},
		methods: {
			add () {
				if (this.inputValue < 99) {
					this.inputValue ++
					this.$emit('input', this.inputValue)
				}
			},
			reduce () {
				if (+this.inputValue) {
					this.inputValue --
					this.$emit('input', this.inputValue)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-counter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 212rpx;
		height: 50rpx;
		border-radius:5rpx;
		font-size: 32rpx;
		color: rgba(42, 42, 42, 1);
		text {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90rpx;
			height: 100%;
			background: #EEEEEE;
			border-radius: 6rpx;
			&.num {
				background: #FFFFFF;
				border-radius: 0;
			}
		}
		.reduce, .add {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			box-sizing: border-box;
		}
		.add {
			background-color: #FA6342;
			color: #FFFFFF;
		}
		.reduce {
			border: 2rpx solid #B5B5B5;
			color: #B5B5B5;
			background-color: #FFFFFF;
		}
	}
</style>