Browse Source

bug 修复

lilei 4 years ago
parent
commit
176e017415
2 changed files with 219 additions and 5 deletions
  1. 189 0
      components/uni-number-box/uni-number-box.vue
  2. 30 5
      pages/cart/cart.vue

+ 189 - 0
components/uni-number-box/uni-number-box.vue

@@ -0,0 +1,189 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
+		</view>
+		<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: "UniNumberBox",
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			inputValue(newVal, oldVal) {
+				if (+newVal !== +oldVal) {
+					this.$emit("change", newVal);
+				}
+			}
+		},
+		created() {
+			this.inputValue = +this.value;
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < this.min) {
+						return;
+					}
+					if(value > this.max){
+						value = this.max
+					}
+				} else if (type === "plus") {
+					value += step;
+					if (value > this.max) {
+						return;
+					}
+					if(value < this.min){
+						value = this.min
+					}
+				}
+
+				this.inputValue = String(value / scale);
+				this.$emit('input',this.inputValue)
+			},
+			_getDecimalScale() {
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + "").split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				let value = event.detail.value;
+				if (!value) {
+					// this.inputValue = 0;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				this.inputValue = value;
+				this.$emit('input',this.inputValue)
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 34px;
+	/* #ifdef APP-NVUE */
+	$box-line-height: 34px;
+	/* #endif */
+	$box-line-height: 26px;
+	$box-width: 35px;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		height: $box-height;
+		line-height: $box-height;
+		width: 120px;
+	}
+
+	.uni-numbox__value {
+		background-color: $uni-bg-color;
+		width: 40px;
+		height: 33px;
+		text-align: center;
+		font-size: $uni-font-size-lg;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-left-width: 0;
+		border-right-width: 0;
+	}
+
+	.uni-numbox__minus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		// line-height: $box-line-height;
+		// text-align: center;
+		font-size: 20px;
+		color: $uni-text-color;
+		background-color: $uni-bg-color-grey;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-top-left-radius: $uni-border-radius-base;
+		border-bottom-left-radius: $uni-border-radius-base;
+		border-right-width: 0;
+	}
+
+	.uni-numbox__plus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-top-right-radius: $uni-border-radius-base;
+		border-bottom-right-radius: $uni-border-radius-base;
+		background-color: $uni-bg-color-grey;
+		border-left-width: 0;
+	}
+
+	.uni-numbox--text {
+		font-size: 40rpx;
+		color: $uni-text-color;
+	}
+
+	.uni-numbox--disabled {
+		color: $uni-text-color-disable;
+	}
+</style>

+ 30 - 5
pages/cart/cart.vue

@@ -55,7 +55,8 @@
 										<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
 										<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
 									</view>
 									</view>
 									<view v-if="good.goods.inventoryQty>0">
 									<view v-if="good.goods.inventoryQty>0">
-										<u-number-box @change="goodsNumsChange(good)" :min="1" v-model="good.buyQty"></u-number-box>
+										<!-- <u-number-box @change="goodsNumsChange(good)" :min="1" v-model="good.buyQty"></u-number-box> -->
+										<uni-number-box @change="goodsNumsChange(good,cindex)" v-model="good.buyQty" :min="1"></uni-number-box>
 									</view>
 									</view>
 								</view>
 								</view>
 							</view>
 							</view>
@@ -98,7 +99,9 @@
 </template>
 </template>
 
 
 <script>
 <script>
+	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
 	export default {
 	export default {
+		components: {uniNumberBox},
 		data() {
 		data() {
 			return {
 			return {
 				toOrderButton: {
 				toOrderButton: {
@@ -204,6 +207,10 @@
 					// 判断是否全选
 					// 判断是否全选
 					this.hasCheckAll()
 					this.hasCheckAll()
 				}else{
 				}else{
+					setTimeout(()=>{
+						item.checked = false
+						this.cartList.splice()
+					},100)
 					uni.showToast({
 					uni.showToast({
 						icon: 'none',
 						icon: 'none',
 						title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
 						title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
@@ -215,14 +222,19 @@
 				console.log(e)
 				console.log(e)
 				let a = e.name.split('-')
 				let a = e.name.split('-')
 				let row = this.cartList[a[1]]
 				let row = this.cartList[a[1]]
+				let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
 				if(this.hasZgjindu(row)){
 				if(this.hasZgjindu(row)){
-					let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
 					row.shoppingCartGoodsList[goodsIndex].checked = e.value
 					row.shoppingCartGoodsList[goodsIndex].checked = e.value
 					// 判断当前分类是否全选
 					// 判断当前分类是否全选
 					this.clasGoodsHasCheckAll(a[1])
 					this.clasGoodsHasCheckAll(a[1])
 					// 判断是否全选
 					// 判断是否全选
 					this.hasCheckAll()
 					this.hasCheckAll()
 				}else{
 				}else{
+					setTimeout(()=>{
+						row.checked = false
+						row.shoppingCartGoodsList[goodsIndex].checked = false
+						this.cartList.splice()
+					},100)
 					uni.showToast({
 					uni.showToast({
 						icon: 'none',
 						icon: 'none',
 						title: '此分类的商品乐豆合计需要满'+row.goldLimit+'乐豆才可以购买'
 						title: '此分类的商品乐豆合计需要满'+row.goldLimit+'乐豆才可以购买'
@@ -291,9 +303,22 @@
 				}
 				}
 			},
 			},
 			// 更改商品数量
 			// 更改商品数量
-			goodsNumsChange(e){
-				console.log(e)
-				uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
+			goodsNumsChange(e,cindex){
+				console.log(e,cindex)
+				let item = this.cartList[cindex]
+				console.log(item)
+				let row = item.shoppingCartGoodsList.find(k=> k.id == e.id)
+				if(this.hasZgjindu(item)){
+					uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
+				}else{
+					item.checked = false
+					row.checked = false
+					this.cartList.splice()
+					uni.showToast({
+						icon: 'none',
+						title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
+					})
+				}
 			}
 			}
 		},
 		},
 	}
 	}