From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息

---
 uni_modules/uview-ui/components/u-number-box/u-number-box.vue |  416 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 416 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-number-box/u-number-box.vue b/uni_modules/uview-ui/components/u-number-box/u-number-box.vue
new file mode 100644
index 0000000..69211c5
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-number-box/u-number-box.vue
@@ -0,0 +1,416 @@
+<template>
+	<view class="u-number-box">
+		<view
+		    class="u-number-box__slot"
+		    @tap.stop="clickHandler('minus')"
+		    @touchstart="onTouchStart('minus')"
+		    @touchend.stop="clearTimeout"
+		    v-if="showMinus && $slots.minus"
+		>
+			<slot name="minus" />
+		</view>
+		<view
+		    v-else-if="showMinus"
+		    class="u-number-box__minus"
+		    @tap.stop="clickHandler('minus')"
+		    @touchstart="onTouchStart('minus')"
+		    @touchend.stop="clearTimeout"
+		    hover-class="u-number-box__minus--hover"
+		    hover-stay-time="150"
+		    :class="{ 'u-number-box__minus--disabled': isDisabled('minus') }"
+		    :style="[buttonStyle('minus')]"
+		>
+			<u-icon
+			    name="minus"
+			    :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
+			    size="15"
+			    bold
+				:customStyle="iconStyle"
+			></u-icon>
+		</view>
+
+		<slot name="input">
+			<input
+			    :disabled="disabledInput || disabled"
+			    :cursor-spacing="getCursorSpacing"
+			    :class="{ 'u-number-box__input--disabled': disabled || disabledInput }"
+			    v-model="currentValue"
+			    class="u-number-box__input"
+			    @blur="onBlur"
+			    @focus="onFocus"
+			    @input="onInput"
+			    type="number"
+			    :style="[inputStyle]"
+			/>
+		</slot>
+		<view
+		    class="u-number-box__slot"
+		    @tap.stop="clickHandler('plus')"
+		    @touchstart="onTouchStart('plus')"
+		    @touchend.stop="clearTimeout"
+		    v-if="showPlus && $slots.plus"
+		>
+			<slot name="plus" />
+		</view>
+		<view
+		    v-else-if="showPlus"
+		    class="u-number-box__plus"
+		    @tap.stop="clickHandler('plus')"
+		    @touchstart="onTouchStart('plus')"
+		    @touchend.stop="clearTimeout"
+		    hover-class="u-number-box__plus--hover"
+		    hover-stay-time="150"
+		    :class="{ 'u-number-box__minus--disabled': isDisabled('plus') }"
+		    :style="[buttonStyle('plus')]"
+		>
+			<u-icon
+			    name="plus"
+			    :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
+			    size="15"
+			    bold
+				:customStyle="iconStyle"
+			></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * numberBox ���������
+	 * @description ���������������������������������������������������������������
+	 * @tutorial https://uviewui.com/components/numberBox.html
+	 * @property {String | Number}	name			������������������������change������������
+	 * @property {String | Number}	value			���������������������������������������������������������min���(���������)  ��������� 0 ���
+	 * @property {String | Number}	min				��������� ��������� 1 ���
+	 * @property {String | Number}	max				��������� ��������� Number.MAX_SAFE_INTEGER ���
+	 * @property {String | Number}	step			������������������������������ ��������� 1 ���
+	 * @property {Boolean}			integer			��������������������������� ��������� false ���
+	 * @property {Boolean}			disabled		��������������������������������������������� ��������� false ���
+	 * @property {Boolean}			disabledInput	��������������������� ��������� false ���
+	 * @property {Boolean}			asyncChange		��������������������������������������������������������������� ��������� false ���
+	 * @property {String | Number}	inputWidth		���������������������������px ��������� 35 ���
+	 * @property {Boolean}			showMinus		������������������������ ��������� true ���
+	 * @property {Boolean}			showPlus		������������������������ ��������� true ���
+	 * @property {String | Number}	decimalLength	���������������������
+	 * @property {Boolean}			longPress		������������������������������ ��������� true ���
+	 * @property {String}			color			��������������������������������������������� ��������� '#323233' ���
+	 * @property {String | Number}	buttonSize		������������������������������������������px��������������������������������������� ��������� 30 ���
+	 * @property {String}			bgColor			��������������������������������� ��������� '#EBECEE' ���
+	 * @property {String | Number}	cursorSpacing	���������������������������������������������������������������������px ��������� 100 ���
+	 * @property {Boolean}			disablePlus		������������������������ ��������� false ���
+	 * @property {Boolean}			disableMinus	������������������������ ��������� false ���
+	 * @property {Object ��� String}	iconStyle		���������������������������
+	 *
+	 * @event {Function}	onFocus	���������������������
+	 * @event {Function}	onBlur	���������������������
+	 * @event {Function}	onInput	������������������������
+	 * @event {Function}	onChange
+	 * @example <u-number-box v-model="value" @change="valChange"></u-number-box>
+	 */
+	export default {
+		name: 'u-number-box',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				// ���������������������������
+				currentValue: '',
+				// ���������
+				longPressTimer: null
+			}
+		},
+		watch: {
+			// ������������������������������������������������������������������check()������
+			watchChange(n) {
+				this.check()
+			},
+			// ������v-mode���������������������������������������
+			value(n) {
+				if (n !== this.currentValue) {
+					this.currentValue = this.format(this.value)
+				}
+			}
+		},
+		computed: {
+			getCursorSpacing() {
+				// ���������������������������������px���������������������px
+				return uni.$u.getPx(this.cursorSpacing)
+			},
+			// ���������������
+			buttonStyle() {
+				return (type) => {
+					const style = {
+						backgroundColor: this.bgColor,
+						height: uni.$u.addUnit(this.buttonSize),
+						color: this.color
+					}
+					if (this.isDisabled(type)) {
+						style.backgroundColor = '#f7f8fa'
+					}
+					return style
+				}
+			},
+			// ������������������
+			inputStyle() {
+				const disabled = this.disabled || this.disabledInput
+				const style = {
+					color: this.color,
+					backgroundColor: this.bgColor,
+					height: uni.$u.addUnit(this.buttonSize),
+					width: uni.$u.addUnit(this.inputWidth)
+				}
+				return style
+			},
+			// ���������������������������������
+			watchChange() {
+				return [this.integer, this.decimalLength, this.min, this.max]
+			},
+			isDisabled() {
+				return (type) => {
+					if (type === 'plus') {
+						// ������������������������������������������������disabled���������������������������������������������������������������������������������
+						return (
+							this.disabled ||
+							this.disablePlus ||
+							this.currentValue >= this.max
+						)
+					}
+					// ������������������������
+					return (
+						this.disabled ||
+						this.disableMinus ||
+						this.currentValue <= this.min
+					)
+				}
+			},
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.currentValue = this.format(this.value)
+			},
+			// ������������������������������������
+			format(value) {
+				value = this.filter(value)
+				// ���������������������������������������0���������������������Number������
+				value = value === '' ? 0 : +value
+				// ������������������������������min���max������������
+				value = Math.max(Math.min(this.max, value), this.min)
+				// ���������������������������������������������toFixed������������������
+				if (this.decimalLength !== null) {
+					value = value.toFixed(this.decimalLength)
+				}
+				return value
+			},
+			// ���������������������
+			filter(value) {
+				// ���������0-9������������������"."���������������"-"���������������������
+				value = String(value).replace(/[^0-9.-]/g, '')
+				// ���������������������������������������������������������������
+				if (this.integer && value.indexOf('.') !== -1) {
+					value = value.split('.')[0]
+				}
+				return value;
+			},
+			check() {
+				// ������������������������������������������������������������������������������������
+				const val = this.format(this.currentValue);
+				if (val !== this.currentValue) {
+					this.currentValue = val
+				}
+			},
+			// ������������������������������������
+			// isDisabled(type) {
+			// 	if (type === 'plus') {
+			// 		// ������������������������������������������������disabled���������������������������������������������������������������������������������
+			// 		return (
+			// 			this.disabled ||
+			// 			this.disablePlus ||
+			// 			this.currentValue >= this.max
+			// 		)
+			// 	}
+			// 	// ������������������������
+			// 	return (
+			// 		this.disabled ||
+			// 		this.disableMinus ||
+			// 		this.currentValue <= this.min
+			// 	)
+			// },
+			// ���������������������
+			onFocus(event) {
+				this.$emit('focus', {
+					...event.detail,
+					name: this.name,
+				})
+			},
+			// ���������������������
+			onBlur(event) {
+				// ���������������������������
+				const value = this.format(event.detail.value)
+				// ������blur������
+				this.$emit(
+					'blur',{
+						...event.detail,
+						name: this.name,
+					}
+				)
+			},
+			// ������������������������
+			onInput(e) {
+				const {
+					value = ''
+				} = e.detail || {}
+				// ������������
+				if (value === '') return
+				let formatted = this.filter(value)
+				// ���������������������������
+				if (this.decimalLength !== null && formatted.indexOf('.') !== -1) {
+					const pair = formatted.split('.');
+					formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`
+				}
+				formatted = this.format(formatted)
+				this.emitChange(formatted);
+			},
+			// ������change������
+			emitChange(value) {
+				// ���������������������������������������������������������������������������������������������v-model������
+				if (!this.asyncChange) {
+					this.$nextTick(() => {
+						this.$emit('input', value)
+						this.currentValue = value
+						this.$forceUpdate()
+					})
+				}
+				this.$emit('change', {
+					value,
+					name: this.name,
+				});
+			},
+			onChange() {
+				const {
+					type
+				} = this
+				if (this.isDisabled(type)) {
+					return this.$emit('overlimit', type)
+				}
+				const diff = type === 'minus' ? -this.step : +this.step
+				const value = this.format(this.add(+this.currentValue, diff))
+				this.emitChange(value)
+				this.$emit(type)
+			},
+			// ������������������������������������������������������������������������������������������������������
+			add(num1, num2) {
+				const cardinal = Math.pow(10, 10);
+				return Math.round((num1 + num2) * cardinal) / cardinal
+			},
+			// ������������������
+			clickHandler(type) {
+				this.type = type
+				this.onChange()
+			},
+			longPressStep() {
+				// ���������������������������������longPressStep���������������������������
+				this.clearTimeout()
+				this.longPressTimer = setTimeout(() => {
+					this.onChange()
+					this.longPressStep()
+				}, 250);
+			},
+			onTouchStart(type) {
+				if (!this.longPress) return
+				this.clearTimeout()
+				this.type = type
+				// ������������������������������������������
+				this.longPressTimer = setTimeout(() => {
+					this.onChange()
+					this.longPressStep()
+				}, 600)
+			},
+			// ���������������������������������������������������
+			onTouchEnd() {
+				if (!this.longPress) return
+				this.clearTimeout()
+			},
+			// ���������������
+			clearTimeout() {
+				clearTimeout(this.longPressTimer)
+				this.longPressTimer = null
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	$u-numberBox-hover-bgColor: #E6E6E6 !default;
+	$u-numberBox-disabled-color: #c8c9cc !default;
+	$u-numberBox-disabled-bgColor: #f7f8fa !default;
+	$u-numberBox-plus-radius: 4px !default;
+	$u-numberBox-minus-radius: 4px !default;
+	$u-numberBox-input-text-align: center !default;
+	$u-numberBox-input-font-size: 15px !default;
+	$u-numberBox-input-padding: 0 !default;
+	$u-numberBox-input-margin: 0 2px !default;
+	$u-numberBox-input-disabled-color: #c8c9cc !default;
+	$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+
+	.u-number-box {
+		@include flex(row);
+		align-items: center;
+
+		&__slot {
+			/* #ifndef APP-NVUE */
+			touch-action: none;
+			/* #endif */
+		}
+
+		&__plus,
+		&__minus {
+			width: 35px;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			/* #ifndef APP-NVUE */
+			touch-action: none;
+			/* #endif */
+
+			&--hover {
+				background-color: $u-numberBox-hover-bgColor !important;
+			}
+
+			&--disabled {
+				color: $u-numberBox-disabled-color;
+				background-color: $u-numberBox-disabled-bgColor;
+			}
+		}
+
+		&__plus {
+			border-top-right-radius: $u-numberBox-plus-radius;
+			border-bottom-right-radius: $u-numberBox-plus-radius;
+		}
+
+		&__minus {
+			border-top-left-radius: $u-numberBox-minus-radius;
+			border-bottom-left-radius: $u-numberBox-minus-radius;
+		}
+
+		&__input {
+			position: relative;
+			text-align: $u-numberBox-input-text-align;
+			font-size: $u-numberBox-input-font-size;
+			padding: $u-numberBox-input-padding;
+			margin: $u-numberBox-input-margin;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+
+			&--disabled {
+				color: $u-numberBox-input-disabled-color;
+				background-color: $u-numberBox-input-disabled-bgColor;
+			}
+		}
+	}
+</style>

--
Gitblit v1.8.0