From 2b5f57dfab91a9003e119951b0e00f249afbea08 Mon Sep 17 00:00:00 2001
From: chc <1501738723@qq.com>
Date: Tue, 29 Nov 2022 11:19:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E4=B9=B0=E6=95=B0=E9=87=8F=E8=B6=85?=
 =?UTF-8?q?=E8=BF=87=E5=BA=93=E5=AD=98=E5=90=8E=E4=BF=AE=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=BA=93=E5=AD=98=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/m-buy/goods.vue | 769 +++++++++++++++++++------------------
 1 file changed, 391 insertions(+), 378 deletions(-)

diff --git a/components/m-buy/goods.vue b/components/m-buy/goods.vue
index 35d6211..f3e5611 100644
--- a/components/m-buy/goods.vue
+++ b/components/m-buy/goods.vue
@@ -16,39 +16,39 @@
 							<span v-if="goodsDetail.promotionPrice && !pointDetail">
 								￥
 								<span class="goods-price-promotionShow goods-price-bigshow">{{
-                  $options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[0]
-                }}</span>
+										$options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[0]
+								}}</span>
 								.{{ $options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[1] }}
 							</span>
 							<span v-if="pointDetail.points">
 								<span class="goods-price-promotionShow goods-price-bigshow">{{
-                  pointDetail.points
-                }}</span>
+										pointDetail.points
+								}}</span>
 								积分
 							</span>
 							<div class="promotion-box">
 								￥
 								<span class="goods-price-bigshow">{{
-                  $options.filters.goodsFormatPrice(goodsDetail.price)[0]
-                }}</span>
+										$options.filters.goodsFormatPrice(goodsDetail.price)[0]
+								}}</span>
 								.{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }}
 							</div>
 						</view>
 						<!-- 正常商品的价格 -->
 						<view v-else>
-							
+
 							<!-- 批发价格 -->
 							<div class='price-row flex' v-if="goodsDetail.salesModel === 'WHOLESALE'">
-								<div class='goods-price' v-for="(item,index) in wholesaleList" :key="index">
+								<div class='goods-price' v-for="(item, index) in wholesaleList" :key="index">
 									<span>
 										￥
 										<span class="goods-price-bigshow">{{
-									    $options.filters.goodsFormatPrice(item.price)[0]
-									  }}</span>
+												$options.filters.goodsFormatPrice(item.price)[0]
+										}}</span>
 										.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
 									</span>
 									<span class='wholesale-item'>
-										{{item.num}}{{goodsDetail.goodsUnit}}
+										{{ item.num }}{{ goodsDetail.goodsUnit }}
 									</span>
 								</div>
 							</div>
@@ -56,8 +56,8 @@
 								<span>
 									￥
 									<span class="goods-price-bigshow">{{
-							    $options.filters.goodsFormatPrice(goodsDetail.price)[0]
-							  }}</span>
+											$options.filters.goodsFormatPrice(goodsDetail.price)[0]
+									}}</span>
 									.{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }}
 								</span>
 							</div>
@@ -101,8 +101,9 @@
 					<!-- 数量 -->
 					<view class="goods-skus-number flex flex-a-c flex-j-sb">
 						<view class="view-class-title">数量</view>
-						
-						<u-input  class="view-class-input" input-align="right" v-model="num" type="number"  />
+
+						<u-input class="view-class-input" input-align="right" v-model="num" type="number"
+							@change="numChange()" />
 					</view>
 				</scroll-view>
 				<!-- 按钮 -->
@@ -116,421 +117,433 @@
 	</div>
 </template>
 <script>
-	import * as API_trade from "@/api/trade.js";
-	import setup from "./popup";
+import * as API_trade from "@/api/trade.js";
+import setup from "./popup";
 
-	export default {
-		data() {
-			return {
-				setup,
-				num: 1,
-				
-				selectName: "", //选中商品的昵称
-				selectSkuList: "", //选中商铺sku,
-				selectedSpecImg: "", //选中的图片路径
-				buyType: "", //用于存储促销，拼团等活动类型
-				parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
-				formatList: [],
-				currentSelceted: [],
-				skuList: "",
-				isClose: false, //是否可以点击遮罩关闭
-				
-			};
+export default {
+	data() {
+		return {
+			setup,
+			num: 1,
+
+			selectName: "", //选中商品的昵称
+			selectSkuList: "", //选中商铺sku,
+			selectedSpecImg: "", //选中的图片路径
+			buyType: "", //用于存储促销，拼团等活动类型
+			parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
+			formatList: [],
+			currentSelceted: [],
+			skuList: "",
+			isClose: false, //是否可以点击遮罩关闭
+
+		};
+	},
+	props: {
+		wholesaleList: {
+			type: null,
+			default: false,
 		},
-		props: {
-			wholesaleList:{
-				type: null,
-				default: false,
-			},
-			buyMask: {
-				type: Boolean,
-				default: false,
-			},
-			isGroup: {
-				type: Boolean,
-				default: false,
-			},
-			goodsDetail: {
-				default: "",
-				type: null,
-			},
-			selectedSku: {
-				default: "",
-				type: null,
-			},
-			goodsSpec: {
-				default: "",
-				type: null,
-			},
-			addr: {
-				default: "",
-				type: null,
-			},
-			pointDetail: {
-				default: "",
-				type: null,
-			},
+		buyMask: {
+			type: Boolean,
+			default: false,
 		},
-		computed: {
-			wholesalePrice(key){
-				return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[]
-			},
-			wholesaleNum(key){
-				return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[]
+		isGroup: {
+			type: Boolean,
+			default: false,
+		},
+		goodsDetail: {
+			default: "",
+			type: null,
+		},
+		selectedSku: {
+			default: "",
+			type: null,
+		},
+		goodsSpec: {
+			default: "",
+			type: null,
+		},
+		addr: {
+			default: "",
+			type: null,
+		},
+		pointDetail: {
+			default: "",
+			type: null,
+		},
+	},
+	computed: {
+		wholesalePrice(key) {
+			return this.wholesaleList.length ? this.wholesaleList.map(item => { return item.price }) : []
+		},
+		wholesaleNum(key) {
+			return this.wholesaleList.length ? this.wholesaleList.map(item => { return item.num }) : []
+		}
+	},
+	watch: {
+		num(val) {
+			if (val) {
+				//超过库存后修改回库存
+				if (val > this.goodsDetail.quantity) {
+					this.$nextTick(function () {
+						this.num = this.goodsDetail.quantity
+					})
+				}
+
 			}
 		},
-		watch: {
-			num(val){
-				if(val){
-					if(val > this.goodsDetail.quantity){
-						this.val = this.goodsDetail.quantity
-					}
+		buyType: {
+			handler(val) {
+				if (val) {
+					this.buyType = val;
 				}
 			},
-			buyType: {
-				handler(val) {
-					if (val) {
-						this.buyType = val;
-					}
-				},
-				immediate: true,
-			},
-			selectSkuList: {
-				handler(val, oldval) {
-					this.$emit("changed", val);
-				},
-				deep: true,
-			},
+			immediate: true,
 		},
-
-		methods: {
-			closeMask() {
-				this.$emit("closeBuy", false);
+		selectSkuList: {
+			handler(val, oldval) {
+				this.$emit("changed", val);
 			},
+			deep: true,
+		},
+	},
 
-			/**点击规格 */
-			handleClickSpec(val, index, specValue) {
-				this.currentSelceted[index] = specValue.value;
-				let selectedSkuId = this.goodsSpec.find((i) => {
-					let matched = true;
-					let specValues = i.specValues.filter((j) => j.specName !== "images");
-					for (let n = 0; n < specValues.length; n++) {
-						if (specValues[n].specValue !== this.currentSelceted[n]) {
-							matched = false;
-							return;
-						}
+	methods: {
+		closeMask() {
+			this.$emit("closeBuy", false);
+		},
+		numChange() {
+			if (this.num > this.goodsDetail.quantity) {
+				alert(1)
+				this.num = this.goodsDetail.quantity
+			}
+		},
+		/**点击规格 */
+		handleClickSpec(val, index, specValue) {
+			this.currentSelceted[index] = specValue.value;
+			let selectedSkuId = this.goodsSpec.find((i) => {
+				let matched = true;
+				let specValues = i.specValues.filter((j) => j.specName !== "images");
+				for (let n = 0; n < specValues.length; n++) {
+					if (specValues[n].specValue !== this.currentSelceted[n]) {
+						matched = false;
+						return;
 					}
-					if (matched) {
-						return i;
-					}
-				});
-				if (selectedSkuId?.skuId) {
-					this.$set(this.currentSelceted, index, specValue.value);
-					this.selectSkuList = {
-						spec: {
-							specName: val.name,
-							specValue: specValue.value,
-						},
-						data: this.goodsDetail,
-					};
-					this.selectName = specValue.value;
-
-					this.$emit("handleClickSku", {
-						skuId: selectedSkuId.skuId,
-						goodsId: this.goodsDetail.goodsId,
-					});
-				} else {
-					uni.showToast({
-						title: "暂无该商品!",
-						duration: 2000,
-						icon: "none",
-					});
 				}
-			},
-
-			/**
-			 * 直接购买
-			 */
-			buy(data) {
-				API_trade.addToCart(data).then((res) => {
-					if (res.data.success) {
-						uni.navigateTo({
-							url: `/pages/order/fillorder?way=${
-              data.cartType
-            }&addr=${""}&parentOrder=${encodeURIComponent(
-              JSON.stringify(this.parentOrder)
-            )}`,
-						});
-					}
-				});
-			},
-
-			/**
-			 * 添加到购物车或购买
-			 */
-			addToCartOrBuy(val) {
-				if (!this.selectSkuList) {
-					uni.showToast({
-						title: "请选择规格商品",
-						icon: "none",
-					});
-					return;
+				if (matched) {
+					return i;
 				}
-				let data = {
-					skuId: this.goodsDetail.id,
-					num: this.num,
+			});
+			if (selectedSkuId?.skuId) {
+				this.$set(this.currentSelceted, index, specValue.value);
+				this.selectSkuList = {
+					spec: {
+						specName: val.name,
+						specValue: specValue.value,
+					},
+					data: this.goodsDetail,
 				};
+				this.selectName = specValue.value;
 
-				if (val == "cart") {
-					API_trade.addToCart(data).then((res) => {
-						if (res.data.code == 200) {
-							uni.showToast({
-								title: "商品已添加到购物车",
-								icon: "none",
-							});
+				this.$emit("handleClickSku", {
+					skuId: selectedSkuId.skuId,
+					goodsId: this.goodsDetail.goodsId,
+				});
+			} else {
+				uni.showToast({
+					title: "暂无该商品!",
+					duration: 2000,
+					icon: "none",
+				});
+			}
+		},
 
-							this.$emit("queryCart");
-							this.closeMask();
-						}
-					});
-				} else {
-					// 判断是否拼团商品
-					if (this.buyType) {
-						data.cartType = "PINTUAN";
-					} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
-						data.cartType = "VIRTUAL";
-					} else {
-						data.cartType = "BUY_NOW";
-					}
-
-					API_trade.addToCart(data).then((res) => {
-						if (res.data.code == 200) {
-							uni.navigateTo({
-								url: `/pages/order/fillorder?way=${data.cartType}&addr=${
-                this.addr.id || ""
-              }&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`,
-							});
-						}
+		/**
+		 * 直接购买
+		 */
+		buy(data) {
+			API_trade.addToCart(data).then((res) => {
+				if (res.data.success) {
+					uni.navigateTo({
+						url: `/pages/order/fillorder?way=${data.cartType
+							}&addr=${""}&parentOrder=${encodeURIComponent(
+								JSON.stringify(this.parentOrder)
+							)}`,
 					});
 				}
-			},
-			formatSku(list) {
-				// 格式化数据
-				let arr = [{}];
+			});
+		},
 
-				if (!Array.isArray(list)) {
-					return false
-				}
-				list.forEach((item, index) => {
-					item.specValues.forEach((spec, specIndex) => {
-						let name = spec.specName;
-						let values = {
-							value: spec.specValue,
-							quantity: item.quantity,
-							skuId: item.skuId,
-						};
-						if (name === "images") {
-							return;
-						}
+		/**
+		 * 添加到购物车或购买
+		 */
+		addToCartOrBuy(val) {
+			if (!this.selectSkuList) {
+				uni.showToast({
+					title: "请选择规格商品",
+					icon: "none",
+				});
+				return;
+			}
+			let data = {
+				skuId: this.goodsDetail.id,
+				num: this.num,
+			};
 
-						arr.forEach((arrItem, arrIndex) => {
-							if (
-								arrItem.name == name &&
-								arrItem.values &&
-								!arrItem.values.find((i) => {
-									return i.value === values.value;
-								})
-							) {
-								arrItem.values.push(values);
-							}
-
-							let keys = arr.map((key) => {
-								return key.name;
-							});
-							if (!keys.includes(name)) {
-								arr.push({
-									name: name,
-									values: [values],
-								});
-							}
+			if (val == "cart") {
+				API_trade.addToCart(data).then((res) => {
+					if (res.data.code == 200) {
+						uni.showToast({
+							title: "商品已添加到购物车",
+							icon: "none",
 						});
-					});
-				});
 
-				arr.shift();
-				this.formatList = arr;
-
-				list.forEach((item) => {
-					// 默认选中
-					if (item.skuId === this.goodsDetail.id) {
-						item.specValues
-							.filter((i) => i.specName !== "images")
-							.forEach((value, _index) => {
-								this.currentSelceted[_index] = value.specValue;
-
-								this.selectName = value.specValue;
-
-								this.selectSkuList = {
-									spec: value,
-									data: this.goodsDetail,
-								};
-							});
+						this.$emit("queryCart");
+						this.closeMask();
 					}
 				});
+			} else {
+				// 判断是否拼团商品
+				if (this.buyType) {
+					data.cartType = "PINTUAN";
+				} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
+					data.cartType = "VIRTUAL";
+				} else {
+					data.cartType = "BUY_NOW";
+				}
 
-				this.skuList = list;
-				// console.log(" this.skuList", this.skuList)
-			},
+				API_trade.addToCart(data).then((res) => {
+					if (res.data.code == 200) {
+						uni.navigateTo({
+							url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ""
+								}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`,
+						});
+					}
+				});
+			}
 		},
+		formatSku(list) {
+			// 格式化数据
+			let arr = [{}];
 
-		mounted() {
-			this.formatSku(this.goodsSpec);
+			if (!Array.isArray(list)) {
+				return false
+			}
+			list.forEach((item, index) => {
+				item.specValues.forEach((spec, specIndex) => {
+					let name = spec.specName;
+					let values = {
+						value: spec.specValue,
+						quantity: item.quantity,
+						skuId: item.skuId,
+					};
+					if (name === "images") {
+						return;
+					}
+
+					arr.forEach((arrItem, arrIndex) => {
+						if (
+							arrItem.name == name &&
+							arrItem.values &&
+							!arrItem.values.find((i) => {
+								return i.value === values.value;
+							})
+						) {
+							arrItem.values.push(values);
+						}
+
+						let keys = arr.map((key) => {
+							return key.name;
+						});
+						if (!keys.includes(name)) {
+							arr.push({
+								name: name,
+								values: [values],
+							});
+						}
+					});
+				});
+			});
+
+			arr.shift();
+			this.formatList = arr;
+
+			list.forEach((item) => {
+				// 默认选中
+				if (item.skuId === this.goodsDetail.id) {
+					item.specValues
+						.filter((i) => i.specName !== "images")
+						.forEach((value, _index) => {
+							this.currentSelceted[_index] = value.specValue;
+
+							this.selectName = value.specValue;
+
+							this.selectSkuList = {
+								spec: value,
+								data: this.goodsDetail,
+							};
+						});
+				}
+			});
+
+			this.skuList = list;
+			// console.log(" this.skuList", this.skuList)
 		},
-	};
+	},
+
+	mounted() {
+		this.formatSku(this.goodsSpec);
+	},
+};
 </script>
 <style lang="scss" scoped>
-	@import "./popup.scss";
-	.price-row{
-		text-align: center;
-		
-	}
-	.buy {
-		background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
-		box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
+@import "./popup.scss";
+
+.price-row {
+	text-align: center;
+
+}
+
+.buy {
+	background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
+	box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
+}
+
+.card {
+	background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
+	box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
+}
+
+/deep/.u-icon-plus,
+.u-icon-minus,
+.u-icon-disabled {
+	height: 30rpx !important;
+	background: #fff !important;
+}
+
+.goods-skus-number {
+	justify-content: space-between;
+	display: flex;
+
+	>.view-class-title {
+		flex: 8;
 	}
 
-	.card {
-		background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
-		box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
+	>.view-class-input {
+		flex: 1
 	}
+}
 
-	/deep/.u-icon-plus,
-	.u-icon-minus,
-	.u-icon-disabled {
-		height: 30rpx !important;
-		background: #fff !important;
-	}
+/deep/ .uni-scroll-view {
+	overflow: hidden !important;
+}
 
-	.goods-skus-number {
-		justify-content: space-between;
-		display: flex;
-		
-		>.view-class-title{
-			flex: 8;
-		}
-		>.view-class-input{
-			flex:1
+.active {
+	background: $price-light-color !important;
+	border: 2rpx solid $price-color;
+	font-weight: bold;
+	color: $price-color !important;
+	box-sizing: border-box;
+}
+
+.goods-skus-box {
+	overflow-y: auto;
+	height: 610rpx;
+	// #ifdef MP-WEIXIN
+	height: 570rpx;
+	// #endif
+	margin-bottom: 10rpx;
+}
+
+.goods-skus-view {
+	overflow: hidden;
+
+	.skus-view-list {
+		>.skus-view-item {
+			flex: 1;
+			padding: 0 36rpx;
+
+			overflow: hidden;
+			height: 60rpx;
+			line-height: 60rpx;
+			float: left;
+			text-align: center;
+			margin-left: 24rpx;
+			margin-bottom: 20rpx;
+			font-size: 22rpx;
+			color: #262626;
+			background: #f2f2f2;
+			border-radius: 30rpx;
 		}
 	}
+}
 
-	/deep/ .uni-scroll-view {
-		overflow: hidden !important;
-	}
+.wholesale-item {
+	color: #999 !important;
+	font-size: 24rpx;
+	margin: 0 20rpx;
+	display: flex;
+	justify-content: center;
+}
 
-	.active {
-		background: $price-light-color !important;
-		border: 2rpx solid $price-color;
-		font-weight: bold;
-		color: $price-color !important;
-		box-sizing: border-box;
-	}
+.goods-header {
+	height: 200rpx;
+	display: flex;
+	align-items: center;
+	margin-bottom: 36rpx;
+}
 
-	.goods-skus-box {
-		overflow-y: auto;
-		height: 610rpx;
-		// #ifdef MP-WEIXIN
-		height: 570rpx;
-		// #endif
-		margin-bottom: 10rpx;
-	}
+.goods-box {
+	padding: 50rpx 36rpx 0 36rpx;
+}
 
-	.goods-skus-view {
-		overflow: hidden;
+.goods-skus {
+	padding: 0 20rpx;
+}
 
-		.skus-view-list {
-			>.skus-view-item {
-				flex: 1;
-				padding: 0 36rpx;
+.goods-price {
+	color: $price-color;
+	line-height: 80rpx;
+	margin-right: 20rpx;
 
-				overflow: hidden;
-				height: 60rpx;
-				line-height: 60rpx;
-				float: left;
-				text-align: center;
-				margin-left: 24rpx;
-				margin-bottom: 20rpx;
-				font-size: 22rpx;
-				color: #262626;
-				background: #f2f2f2;
-				border-radius: 30rpx;
-			}
-		}
-	}
-	.wholesale-item{
-		color: #999 !important;
-		font-size: 24rpx;
-		margin:0 20rpx;
-		display: flex;
-		justify-content: center;
-	}
-
-	.goods-header {
-		height: 200rpx;
-		display: flex;
-		align-items: center;
-		margin-bottom: 36rpx;
-	}
-
-	.goods-box {
-		padding: 50rpx 36rpx 0 36rpx;
-	}
-
-	.goods-skus {
-		padding: 0 20rpx;
-	}
-
-	.goods-price {
+	>* {
 		color: $price-color;
 		line-height: 80rpx;
-		margin-right: 20rpx;
-		>* {
-			color: $price-color;
-			line-height: 80rpx;
-	
-		}
+
 	}
+}
 
-	.promotion-box {
-		line-height: 1;
-		display: flex;
-		align-items: center;
-		text-decoration: line-through;
-		color: #999;
-		margin-left: 10rpx;
+.promotion-box {
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	text-decoration: line-through;
+	color: #999;
+	margin-left: 10rpx;
 
-		/deep/ span {
-			font-size: 30rpx;
-		}
-	}
-
-	.promotion {
+	/deep/ span {
 		font-size: 30rpx;
 	}
+}
 
-	.goods-price-promotionShow {
-		font-size: 48rpx;
+.promotion {
+	font-size: 30rpx;
+}
+
+.goods-price-promotionShow {
+	font-size: 48rpx;
+}
+
+.goods-check-skus {
+	font-size: 24rpx;
+	color: #999;
+
+	>.goods-check-skus-name {
+		margin-left: 4rpx;
 	}
 
-	.goods-check-skus {
-		font-size: 24rpx;
-		color: #999;
-
-		>.goods-check-skus-name {
-			margin-left: 4rpx;
-		}
-
-		>span {
-			color: #333;
-		}
+	>span {
+		color: #333;
 	}
+}
 </style>