lilei 8 ヶ月 前
コミット
05a66b17db

+ 55 - 14
pagesB/cart/index.vue

@@ -79,23 +79,21 @@
 				</view>
 		</view>
 		<!-- 修改数量弹框 -->
-		<page-container
-		:show="showPopu" 
-		:round="true"
-		:z-index="100"
-		position="center" 
-		customStyle="right: 0; left: 0; top: 0; bottom: 0; margin: auto 10%;width: fit-content;height: fit-content;border-radius:15px;"
-		@afterleave="closePopu">
+		<uni-popup ref="showPopu" type="center" :maskClick="false">
 			<view class="popu-content">
 				<view class="popu-close" @click="closePopu">
 					<uni-icons size="26" type="closeempty"></uni-icons>
 				</view>
-				<view class="popu-content-num flex align_center justify_between">
-					<text>数量</text>
-					<u-number-box v-model="qty" :input-width="100" :input-height="60" :min="1" :max="999"></u-number-box>
+				<view class="popu-content-title flex align_center justify_center"><text>修改商品数量</text></view>
+				<view class="popu-content-num flex align_center justify_center">
+					<uni-number-box v-model="curEditRow.qty" :size="28" :input-width="280" :input-height="70" :min="1" :max="999"></uni-number-box>
+				</view>
+				<view class="popu-content-btn">
+					<view class="popu-content-btn-item cancelBtn" @click="closePopu">取消</view>
+					<view class="popu-content-btn-item okbtn" @click="changeSingQty">确定</view>
 				</view>
 			</view>
-		</page-container>
+		</uni-popup>
 	</view>
 </template>
 
@@ -125,7 +123,6 @@
 		data() {
 			return {
 				loading: false,
-				showPopu: false,
 				status: 'loading',
 				noDataText: '暂无产品',
 				empty: {
@@ -148,6 +145,7 @@
 				screenHeight: 0, // 屏幕高度
 				statusBarHeight: 44, // 状态栏高度
 				safeAreaBottom: 0, // 底部安全区域高度
+				curEditRow: null
 			}
 		},
 		computed: {
@@ -176,11 +174,17 @@
 			},
 			// 关闭弹框
 			closePopu(){
-				this.showPopu = false
+				this.$refs.showPopu.close()
+				this.curEditRow = null
 			},
 			// 打开编辑数量弹框
 			editQty(item){
-				this.showPopu = true
+				this.curEditRow = JSON.parse(JSON.stringify(item))
+				this.$refs.showPopu.open()
+			},
+			// 确定修改
+			changeSingQty(){
+				this.changeQty(this.curEditRow.qty,this.curEditRow.cartSn)
 			},
 			// 查询列表
 			getRow (pageNo) {
@@ -308,6 +312,12 @@
 							this.getChooseHeji()
 							uni.$emit('refashCart')
 						}
+						this.closePopu()
+					}else{
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
 					}
 					uni.hideLoading()
 				})
@@ -605,6 +615,9 @@
 	display: flex;
 	flex-direction: column;
 	.popu-content{
+		background-color: #FFFFFF;
+		border-radius: 10px;
+		width: 300px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -615,6 +628,10 @@
 			right: 0;
 			top: 0;
 		}
+		.popu-content-title{
+			padding: 10px;
+			font-size: 16px;
+		}
 		.popu-content-num{
 			font-size: 14px;
 			color: #999999;
@@ -624,6 +641,30 @@
 				font-size: 10px;
 			}
 		}
+		.popu-content-btn{
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			margin: 20px 0 10px;
+			.popu-content-btn-item{
+				width: 40%;
+				height: 36px;
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 100px;
+			}
+			.cancelBtn{
+				background-color: #f8f8f8;
+				color: #666;
+			}
+			.okbtn{
+				background-color: #f70000;
+				color: #FFFFFF;
+			}
+		}
 	}
 	.cart-body{
 		position: relative;

+ 1 - 1
pagesB/promoProduct.vue

@@ -27,7 +27,7 @@
 			@detail="toDetail"
 			></productItem>
 			<!-- loading -->
-			<view class="loading-bar" v-if="list.length && (loading||loadEnd)">{{loadText}}</view>
+			<view class="loading-bar" v-if="total>0 && (loading||loadEnd)">{{loadText}}</view>
 			<view class="empty-bar" v-if="total==0&&!loading">
 				<image mode="aspectFit" :src="empty.imgUrl"></image>
 				<view>{{empty.tip}}</view>

+ 1 - 1
pagesB/shopiing/productDetail.vue

@@ -128,7 +128,7 @@
 						</view>
 						<view class="popu-content-num flex align_center justify_between">
 							<text>数量</text>
-							<u-number-box v-model="qty" :input-width="100" :input-height="60" :min="1" :max="999"></u-number-box>
+							<uni-number-box v-model="qty" :input-width="150" :input-height="60" :min="1" :max="999"></uni-number-box>
 						</view>
 					</view>
 				</view>

+ 288 - 158
uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue

@@ -1,229 +1,359 @@
 <template>
-	<view class="uni-numbox">
-		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">
-			<text class="uni-numbox--text">-</text>
+	<view class="u-numberbox">
+		<view class="u-icon-minus" @touchstart.stop.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer"
+		    :style="{
+				height: inputHeight + 'rpx',
+				color: color
+			}">
+			<uni-icons type="minus-filled" :color="disabled || inputVal <= min?'#c1c1c1':'#066cff'" :size="size"></uni-icons>
 		</view>
-		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
-			:type="step<1?'digit':'number'" v-model="inputValue" :style="{background, color, width:widthWithPx,height:heightPx}" />
-		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">
-			<text class="uni-numbox--text">+</text>
+		<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
+		    v-model="inputVal" class="u-number-input" @blur="onBlur" @focus="onFocus"
+		    type="digit" :style="{
+				color: color,
+				fontSize: size + 'rpx',
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				width: inputWidth + 'rpx'
+			}" />
+		<view class="u-icon-plus" @touchstart.stop.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer"
+		    :style="{
+				height: inputHeight + 'rpx',
+				color: color
+			}">
+			<uni-icons type="plus-filled" :color="disabled || inputVal >= max?'#c1c1c1':'#066cff'" :size="size"></uni-icons>
 		</view>
 	</view>
 </template>
+
 <script>
 	/**
-	 * NumberBox 数字输入框
-	 * @description 带加减按钮的数字输入框
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
-	 * @property {Number} value 输入框当前值
-	 * @property {Number} min 最小值
-	 * @property {Number} max 最大值
-	 * @property {Number} step 每次点击改变的间隔大小
-	 * @property {String} background 背景色
-	 * @property {String} color 字体颜色(前景色)
-	 * @property {Number} width 输入框宽度(单位:px)
-	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
-	 * @event {Function} change 输入框值改变时触发的事件,参数为输入框当前的 value
-	 * @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象
-	 * @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象
+	 * numberBox 步进器
+	 * @description 该组件一般用于商城购物选择物品数量的场景。注意:该输入框只能输入大于或等于0的整数,不支持小数输入
+	 * @tutorial https://www.uviewui.com/components/numberBox.html
+	 * @property {Number} value 输入框初始值(默认1)
+	 * @property {String} bg-color 输入框和按钮的背景颜色(默认#F2F3F5)
+	 * @property {Number} min 用户可输入的最小值(默认0)
+	 * @property {Number} max 用户可输入的最大值(默认99999)
+	 * @property {Number} step 步长,每次加或减的值(默认1)
+	 * @property {Boolean} disabled 是否禁用操作,禁用后无法加减或手动修改输入框的值(默认false)
+	 * @property {Boolean} disabled-input 是否禁止输入框手动输入值(默认false)
+	 * @property {Boolean} positive-integer 是否只能输入正整数(默认true)
+	 * @property {String | Number} size 输入框文字和按钮字体大小,单位rpx(默认26)
+	 * @property {String} color 输入框文字和加减按钮图标的颜色(默认#323233)
+	 * @property {String | Number} input-width 输入框宽度,单位rpx(默认80)
+	 * @property {String | Number} input-height 输入框和按钮的高度,单位rpx(默认50)
+	 * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
+	 * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
+	 * @property {String | Number} press-time 开启长按触发后,每触发一次需要多久,单位ms(默认250)
+	 * @property {String | Number} cursor-spacing 指定光标于键盘的距离,避免键盘遮挡输入框,单位rpx(默认200)
+	 * @event {Function} change 输入框内容发生变化时触发,对象形式
+	 * @event {Function} blur 输入框失去焦点时触发,对象形式
+	 * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下),对象形式
+	 * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下),对象形式
+	 * @example <uni-number-box :min="1" :max="100"></uni-number-box>
 	 */
-
 	export default {
-		name: "UniNumberBox",
-		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		name: "uni-number-box",
 		props: {
+			// 预显示的数字
 			value: {
-				type: [Number, String],
+				type: Number,
 				default: 1
 			},
-			modelValue: {
-				type: [Number, String],
-				default: 1
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#F2F3F5'
 			},
+			// 最小值
 			min: {
 				type: Number,
 				default: 0
 			},
+			// 最大值
 			max: {
 				type: Number,
-				default: 100
+				default: 99999
 			},
+			// 步进值,每次加或减的值
 			step: {
 				type: Number,
 				default: 1
 			},
-			background: {
-				type: String,
-				default: '#f5f5f5'
+			// 是否禁用加减操作
+			disabled: {
+				type: Boolean,
+				default: false
 			},
+			// input的字体大小,单位rpx
+			size: {
+				type: [Number, String],
+				default: 26
+			},
+			// 加减图标的颜色
 			color: {
 				type: String,
-				default: '#333'
+				default: '#323233'
 			},
-			disabled: {
+			// input宽度,单位rpx
+			inputWidth: {
+				type: [Number, String],
+				default: 80
+			},
+			// input高度,单位rpx
+			inputHeight: {
+				type: [Number, String],
+				default: 50
+			},
+			// index索引,用于列表中使用,让用户知道是哪个numberbox发生了变化,一般使用for循环出来的index值即可
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 是否禁用输入框,与disabled作用于输入框时,为OR的关系,即想要禁用输入框,又可以加减的话
+			// 设置disabled为false,disabledInput为true即可
+			disabledInput: {
 				type: Boolean,
 				default: false
 			},
-			width: {
-				type: Number,
-				default: 40,
+			// 输入框于键盘之间的距离
+			cursorSpacing: {
+				type: [Number, String],
+				default: 100
 			},
-			height: {
-				type: Number,
-				default: 22
+			// 是否开启长按连续递增或递减
+			longPress: {
+				type: Boolean,
+				default: true
+			},
+			// 开启长按触发后,每触发一次需要多久
+			pressTime: {
+				type: [Number, String],
+				default: 250
+			},
+			// 是否只能输入大于或等于0的整数(正整数)
+			positiveInteger: {
+				type: Boolean,
+				default: true
 			}
 		},
-		data() {
-			return {
-				inputValue: 0
-			};
-		},
 		watch: {
-			value(val) {
-				this.inputValue = +val;
+			value(v1, v2) {
+				// 只有value的改变是来自外部的时候,才去同步inputVal的值,否则会造成循环错误
+				if(!this.changeFromInner) {
+					this.inputVal = v1;
+					// 因为inputVal变化后,会触发this.handleChange(),在其中changeFromInner会再次被设置为true,
+					// 造成外面修改值,也导致被认为是内部修改的混乱,这里进行this.$nextTick延时,保证在运行周期的最后处
+					// 将changeFromInner设置为false
+					this.$nextTick(function(){
+						this.changeFromInner = false;
+					})
+				}
 			},
-			modelValue(val) {
-				this.inputValue = +val;
+			inputVal(v1, v2) {
+				// 为了让用户能够删除所有输入值,重新输入内容,删除所有值后,内容为空字符串
+				if (v1 == '') return;
+				let value = 0;
+				// 首先判断是否数值,并且在min和max之间,如果不是,使用原来值
+				let tmp = this.$u.test.number(v1);
+				if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
+				else value = v2;
+				// 判断是否只能输入大于等于0的整数
+				if(this.positiveInteger) {
+					// 小于0,或者带有小数点,
+					if(v1 < 0 || String(v1).indexOf('.') !== -1) {
+						value = v2;
+						// 双向绑定input的值,必须要使用$nextTick修改显示的值
+						this.$nextTick(() => {
+							this.inputVal = v2;
+						})
+					}
+				}
+				// 发出change事件
+				this.handleChange(value, 'change');
 			}
 		},
-		computed: {
-			widthWithPx() {
-				return this.width + 'px';
-			},
-			heightPx(){
-				return this.height + 'px'
-			}
+		data() {
+			return {
+				inputVal: 1, // 输入框中的值,不能直接使用props中的value,因为应该改变props的状态
+				timer: null, // 用作长按的定时器
+				changeFromInner: false, // 值发生变化,是来自内部还是外部
+				innerChangeTimer: null, // 内部定时器
+			};
 		},
 		created() {
-			if (this.value === 1) {
-				this.inputValue = +this.modelValue;
-			}
-			if (this.modelValue === 1) {
-				this.inputValue = +this.value;
+			this.inputVal = Number(this.value);
+		},
+		computed: {
+			getCursorSpacing() {
+				// 先将值转为px单位,再转为数值
+				return Number(uni.upx2px(this.cursorSpacing));
 			}
 		},
 		methods: {
-			_calcValue(type) {
-				if (this.disabled) {
-					return;
+			// 点击退格键
+			btnTouchStart(callback) {
+				// 先执行一遍方法,否则会造成松开手时,就执行了clearTimer,导致无法实现功能
+				this[callback]();
+				// 如果没开启长按功能,直接返回
+				if (!this.longPress) return;
+				clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					// 执行加或减函数
+					this[callback]();
+				}, this.pressTime);
+			},
+			clearTimer() {
+				this.$nextTick(() => {
+					clearInterval(this.timer);
+					this.timer = null;
+				})
+			},
+			minus() {
+				this.computeVal('minus');
+			},
+			plus() {
+				this.computeVal('plus');
+			},
+			// 为了保证小数相加减出现精度溢出的问题
+			calcPlus(num1, num2) {
+				let baseNum, baseNum1, baseNum2;
+				try {
+					baseNum1 = num1.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum1 = 0;
 				}
-				const scale = this._getDecimalScale();
-				let value = this.inputValue * scale;
-				let step = this.step * scale;
-				if (type === "minus") {
-					value -= step;
-					if (value < (this.min * scale)) {
-						return;
-					}
-					if (value > (this.max * scale)) {
-						value = this.max * scale
-					}
+				try {
+					baseNum2 = num2.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum2 = 0;
 				}
-
-				if (type === "plus") {
-					value += step;
-					if (value > (this.max * scale)) {
-						return;
-					}
-					if (value < (this.min * scale)) {
-						value = this.min * scale
-					}
+				baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+				let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
+				return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
+			},
+			// 为了保证小数相加减出现精度溢出的问题
+			calcMinus(num1, num2) {
+				let baseNum, baseNum1, baseNum2;
+				try {
+					baseNum1 = num1.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum1 = 0;
 				}
-
-				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
-				// TODO vue2 兼容
-				this.$emit("input", +this.inputValue);
-				// TODO vue3 兼容
-				this.$emit("update:modelValue", +this.inputValue);
-				this.$emit("change", +this.inputValue);
-			},
-			_getDecimalScale() {
-				let scale = 1;
-				// 浮点型
-				if (~~this.step !== this.step) {
-					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				try {
+					baseNum2 = num2.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum2 = 0;
 				}
-				return scale;
+				baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+				let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
+				return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
 			},
-			_onBlur(event) {
-				this.$emit('blur', event)
-				let value = event.detail.value;
-				if (isNaN(value)) {
-					this.inputValue = this.value;
+			computeVal(type) {
+				uni.hideKeyboard();
+				if (this.disabled) return;
+				let value = 0;
+				// 减
+				if (type === 'minus') {
+					value = this.calcMinus(this.inputVal, this.step);
+				} else if (type === 'plus') {
+					value = this.calcPlus(this.inputVal, this.step);
+				}
+				// 判断是否小于最小值和大于最大值
+				if (value < this.min || value > this.max) {
 					return;
 				}
-				value = +value;
-				if (value > this.max) {
-					value = this.max;
-				} else if (value < this.min) {
-					value = this.min;
+				this.inputVal = value;
+				this.handleChange(value, type);
+			},
+			// 处理用户手动输入的情况
+			onBlur(event) {
+				let val = 0;
+				let value = event.detail.value;
+				// 如果为非0-9数字组成,或者其第一位数值为0,直接让其等于min值
+				// 这里不直接判断是否正整数,是因为用户传递的props min值可能为0
+				if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
+				val = +value;
+				if (val > this.max) {
+					val = this.max;
+				} else if (val < this.min) {
+					val = this.min;
 				}
-				const scale = this._getDecimalScale();
-				this.inputValue = value.toFixed(String(scale).length - 1);
-				this.$emit("input", +this.inputValue);
-				this.$emit("update:modelValue", +this.inputValue);
-				this.$emit("change", +this.inputValue);
-			},
-			_onFocus(event) {
-				this.$emit('focus', event)
+				this.$nextTick(() => {
+					this.inputVal = val;
+				})
+				this.handleChange(val, 'blur');
+			},
+			// 输入框获得焦点事件
+			onFocus() {
+				this.$emit('focus');
+			},
+			handleChange(value, type) {
+				if (this.disabled) return;
+				// 清除定时器,避免造成混乱
+				if(this.innerChangeTimer) {
+					clearTimeout(this.innerChangeTimer);
+					this.innerChangeTimer = null;
+				}
+				// 发出input事件,修改通过v-model绑定的值,达到双向绑定的效果
+				this.changeFromInner = true;
+				// 一定时间内,清除changeFromInner标记,否则内部值改变后
+				// 外部通过程序修改value值,将会无效
+				this.innerChangeTimer = setTimeout(() => {
+					this.changeFromInner = false;
+				}, 150);
+				this.$emit('input', Number(value));
+				this.$emit(type, {
+					// 转为Number类型
+					value: Number(value),
+					index: this.index
+				})
 			}
 		}
 	};
 </script>
-<style lang="scss">
-	$box-height: 22px;
-	$bg: #066cff;
-	$br: 2px;
-	$color: #333;
 
-	.uni-numbox {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
+<style lang="scss" scoped>
+	.u-numberbox {
+		display: inline-flex;
 		align-items: center;
 	}
 
-	.uni-numbox-btns {
-		/* #ifndef APP-NVUE */
+	.u-number-input {
+		position: relative;
+		text-align: center;
+		padding: 0;
+		margin: 0 6rpx;
 		display: flex;
-		/* #endif */
-		width: $box-height;
-		height: $box-height;
-		flex-direction: row;
 		align-items: center;
 		justify-content: center;
-		background-color: $bg;
-		border-radius: 50px;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
 	}
 
-	.uni-numbox__value {
-		margin: 0 5px;
-		background-color: $bg;
-		width: 30px;
-		height: $box-height;
-		text-align: center;
-		font-size: 14px;
-		border-width: 0;
-		color: $color;
+	.u-icon-plus,
+	.u-icon-minus {
+		width: 60rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-icon-plus {
+		border-radius: 0 8rpx 8rpx 0;
+	}
+
+	.u-icon-minus {
+		border-radius: 8rpx 0 0 8rpx;
 	}
 
-	.uni-numbox--text {
-		// fix nvue
-		line-height: 20px;
-		margin-bottom: 2px;
-		font-size: 20px;
-		font-weight: 300;
-		color: #fff;
+	.u-icon-disabled {
+		color: #c8c9cc !important;
+		background: #f7f8fa !important;
 	}
 
-	.uni-numbox .uni-numbox--disabled {
-		background-color: #c0c0c0 !important;
-		/* #ifdef H5 */
-		cursor: not-allowed;
-		/* #endif */
+	.u-input-disabled {
+		color: #c8c9cc !important;
+		background-color: #f2f3f5 !important;
 	}
 </style>