[fix]首页加入购入车

pages/commponent/home/goodList.vue

@@ -35,7 +35,7 @@
 						<text  class="text1  text-bold text-sm">客服询价 </text>
 
 					</view>
-					<view class="g_right" v-if="item.price" @tap="addCart(item)">
+					<view class="g_right" v-if="item.price" @tap="setCart(item)">
 						<image src="/static/images/new/jiagou.png" style=" width: 24px;height: 24px;" mode="aspectFill"></image>
 					</view>
 				</view>
@@ -67,9 +67,26 @@
 		<view class="no-more" v-if="loading">
 			{{ hasMore ? '' : list.length === 0  ? '无相关数据...' : '已经到底了...' }}
 		</view>
+		<view class="mask-box" v-show="showMask">
+			<image class="close-btn" @tap="showMask = false" src="../../../static/images/search/close.png" mode=""></image>
+			<view class="btn-box">
+				<view class="right_btn">
+					<view class="sub" @tap="onChangeNum('sub')" :style="'color:' + (num == 1?'#ccc':'')">-</view>
+					<view class="input">
+						<input
+						@blur="handlerChangeNum('blur')"
+						@input="handlerChangeNum('input')"
+						v-model="num"
+						type="number"
+						max="99999"></input>
+					</view>
+					<view class="add"  @tap="onChangeNum('add')" >+</view>
+				</view>
+				<view class="submit-btn" @tap="addCart">确定</view>
+			</view>
+		</view>
 	</view>
 </template>
-
 <script>
 	import { setTabBarBadge } from '@/utils/util.js'
 	import {getCart, setCart ,resetCart, getCartNumber,setGoodsData,
@@ -85,7 +102,11 @@
 					sku: [],
 					skuArr: []
 				},
-				list: []
+				list: [],
+				showMask: false,
+				goodsItem: {},
+				num: 1,
+				stock: 99999
 			}
 		},
 		props:{
@@ -111,12 +132,42 @@
 		    }
 		 },
 		methods: {
+			handlerChangeNum(type = 'input') {
+				const total = Math.floor(Number(this.num))
+				const number = total < 1 ? 1 : total > this.stock ? this.stock : total
+				if (type === 'blur') {
+					if (!number) {
+						this.num = 1
+					}
+				}
+			},
+			onChangeNum(type = 'add') {
+				const item = this.goodsItem
+				if (item.status == 1) { //已失效商品不做操作
+					return
+				}
+				const total = Math.floor(Number(this.num))
+				let num = total < 1 ? 1 : total > this.stock ? this.stock : total
+				if (type === 'add') {
+					//增加
+					if (num >= this.stock) {
+						this.num = this.stock
+						return
+					}
+					this.num = String(num + 1)
+				} else {
+					if (num <= 1) {
+						return
+					}
+					this.num = String(num - 1)
+				}
+			},
 			jumpDetails(item) {
 				uni.navigateTo({
 					url: '/pages/views/goods/goodsDetails?id=' + item.id
 				});
 			},
-			addCart(item) {
+			setCart(item) {
 				if(!getToken()){
 					uni.navigateTo({ //登录
 						url:'/pages/login/index1'
@@ -127,14 +178,27 @@
 					this.$toast('该商品已下架')
 					return
 				}
+				this.num = '1'
+				this.goodsItem  = item
+				this.showMask = true
+			},
+			addCart() {
+				const number = Math.abs(Number(this.num))
+				if (number >= this.stock ) {
+					this.num = this.stock
+				}
+				if (number < 1) {
+					this.num = 1
+				}
+				const item = this.goodsItem
 				const cartList = getCart()
 				item.imgList = item.url.split(',')
-				item.number = 1
+				item.number = number
 				item._selectedSku = [{
 					id: item.id,
 					imgs: '',
 					money: item.price,
-					number: 1,
+					number: number,
 					tagname: item.goodsName
 				}]
 				item._skus = [
@@ -146,18 +210,18 @@
 								id: 1,
 								imgs: '',
 								money: item.price,
-								number: 1,
+								number: number,
 								tagname: item.goodsName
 							}
 						]
 					}
 				]
-				const goodsItem = item
 				let hasItem = false
 				const cartHasGoodsList = cartList.map(v => {
-					if (v.id === (goodsItem.id +'')) {
+					if (v.id === (item.id +'')) {
+						const number1 = v.number + number
 						hasItem = true
-						v.number = v.number >= 99999 ? 99999 : v.number + 1
+						v.number = number1 >= this.stock ? this.stock : number1
 					}
 					return v
 				})
@@ -167,12 +231,99 @@
 				resetCart(cartHasGoodsList)
 				setTabBarBadge(cartHasGoodsList.length)
 				this.$toast('加入购物车成功')
+				this.showMask = false
+				this.num = '1'
 			},
 		},
 	}
 </script>
 
 <style scoped lang="scss">
+	.mask-box {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 999;
+		background-color: rgba(0,0,0, 0.5);
+		.close-btn {
+			position: absolute;
+			right: 20upx;
+			top: 20upx;
+			width: 50upx;
+			height: 50upx;
+		}
+		.submit-btn {
+			margin-top: 40upx;
+			width: 280upx;
+			height: 70upx;
+			line-height: 70upx;
+			text-align: center;
+			background: #ddd;
+			border-radius: 10upx;
+		}
+		.btn-box {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.right_btn {
+			display: flex;
+			justify-content: center;
+			align-items: flex-end;
+
+		}
+
+		.right_btn .sub, .right_btn .add {
+			width: 56rpx;
+			height: 56rpx;
+			font-size: 56rpx;
+			background-color: #f3f3f3;
+			border-radius: 4rpx;
+			text-align: center;
+			line-height: 56rpx;
+		}
+
+		.right_btn .sub:active {
+			background-color: #f8f8f8;
+		}
+
+		.right_btn .input {
+			width: 160upx;
+			height: 80upx;
+			margin: 0 8rpx;
+			background-color: #f3f3f3;
+		}
+
+		.right_btn .input input {
+			width: 100%;
+			height: 80upx;
+			text-align: center;
+			// display: flex;
+			// font-size: 22rpx;
+			// text-align: center;
+			// align-items: center;
+			// justify-content: center;
+			color: $mycolor;
+		}
+
+		// .right_btn .add {
+		// 	width: 40rpx;
+		// 	height: 40rpx;
+		// 	font-size: 40rpx;
+		// 	background-color: #f3f3f3;
+		// 	border-radius: 4rpx;
+		// 	text-align: center;
+		// 	line-height: 40rpx;
+		// }
+
+		.right_btn .add:active {
+			background-color: #f8f8f8;
+		}
+
+	}
 	.good_skuSubTitle {
 		overflow: hidden;
 		text-overflow: ellipsis;