1

pagesHome/order/detail.vue

@@ -105,71 +105,58 @@
 				<view class="close">
 					<text @click="toClose" class="iconfont icon-shanchu"></text>
 				</view>
-				<view class="info">
-					<scroll-view scroll-y="true" class="scroll-view">
-						<view class="list-scroll-view">
-							<view class="info_1" v-if="popupShow=='1'">
+				<view class="info_1" v-if="popupShow=='1'">
+					<view class="info_1">
+						<scroll-view scroll-y="true" class="scroll-view">
+							<view class="list-scroll-view">
 								<view class="one">
 									<view class="one_1">
 										<view class="l">
-											<image src="" mode=""></image>
+											<image class="image" :src="specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url" mode="aspectFill" @tap="imageView(specsInfo.file)"></image>
 										</view>
 										<view class="r">
 											<view class="money">
-												<text>金额</text>
-												<text>金额</text>
+												<text class="money_1"><text>¥</text>{{specsInfo.sell_money}}</text>
+												<text class="money_1"><text>¥</text>{{specsInfo.flow_money}}</text>
 											</view>
 											<view class="other_1">
 												<text>已选：</text>
-												<text>已选规格</text>
+												<text>{{specsInfo.name}}</text>
 											</view>
 										</view>
 									</view>
+									<view class="one_2">
+										<view class="one_2_1">
+											规格
+										</view>
+										<view class="one_2_2">
+											<view :class="['list',`${item.num==0?'zero_list':''}`,`${is_specs==index?'one_list':''}`]" v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
+												<text>{{item.name}}</text>
+											</view>
+										</view>
+									</view>
+									<view class="one_3">
+										<view class="one_3_1">
+											<text>数量</text>
+										</view>
+										<view class="one_3_1">
+											<uni-number-box v-model="buy_num" @change="toCount" :min="1" :max="specsInfo.num">
+											</uni-number-box>
+										</view>
+										<view class="one_3_1">
+											<text>库存{{specsInfo.num||0}}</text>
+										</view>
+									</view>
 								</view>
-								<view class="btn">
-									<button size="mini">按钮</button>
-								</view>
-							</view>
-						</view>
-					</scroll-view>
-				</view>
-				<!-- 	<view class="close">
-							<text @click="toClose" class="iconfont icon-shanchu"></text>
-						</view>
-						<view class="popup_1" v-if="popupShow=='1'">
-							<view class="info">
-								<view class="info_1">
-									1
-								</view>
-							</view>
-							<view class="btn">
-								<button>按钮</button>
 							</view>
-						</view> -->
-				<!-- 	<view class="close">
-					<text @click="toClose" class="iconfont icon-shanchu"></text>
+						</scroll-view>
+					</view>
+					<view class="info_2">
+						<button size="mini" v-if="btn_type==''||btn_type=='0'" @tap="toMarket">加入购物车</button>
+						<button size="mini" v-if="btn_type==''||btn_type=='1'" @tap="toBuy">立即购买</button>
+						<button size="mini" v-if="specsInfo.can_group=='0'" @tap="toGroup">参团</button>
+					</view>
 				</view>
-				<view class="popup_1" v-if="popupShow=='1'">
-					<scroll-view scroll-y="true" class="scroll-view">
-						<view class="list-scroll-view">
-							<view class="info">
-								<view class="info_1">
-									商品
-								</view>
-								<view class="info_2">
-									规格
-								</view>
-								<view class="info_3">
-									数量
-								</view>
-							</view>
-							<view class="btn">
-								<button>按钮</button>
-							</view>
-						</view>
-					</scroll-view>
-				</view> -->
-
 			</view>
 		</uni-popup>
 	</mobile-frame>
@@ -228,7 +215,11 @@
 				// 规格
 				popupShow: '1',
 				// 规格信息
-				specsInfo: {}
+				is_specs: 0,
+				btn_type: '',
+				specsInfo: {},
+				// 购买数量
+				buy_num: 1,
 			};
 		},
 		onLoad: async function(e) {
@@ -313,7 +304,6 @@
 						that.searchSpecs(data.specs);
 						// 查询评价数
 						that.searchRate(data);
-						that.$refs.specShow.open();
 					}
 				} else {
 					uni.showToast({
@@ -327,16 +317,34 @@
 				const that = this;
 				if (e.length > 0) {
 					let data = e.find(i => i.num > 0);
+					let dataIndex = e.findIndex(i => i.id == data.id);
 					if (data) {
-						that.$set(that, `specsInfo`, data)
+						that.$set(that, `specsInfo`, data);
+						that.$set(that, `is_specs`, dataIndex);
 					}
 				}
-				// 	if (data.specs.length > 0) {
-				// 		that.$set(that, `specsInfo`, data.specs[0])
-				// 		that.$set(that, `isActive`, 0)
-				// 		that.disabled = false;
-				// 	}
-				// }
+			},
+			// 选择规格
+			toSpecs(e) {
+				const that = this;
+				let specs = that.info.specs;
+				if (e.num > 0) {
+					let dataIndex = specs.findIndex(i => i.id == e.id);
+					that.$set(that, `is_specs`, dataIndex);
+					that.$set(that, `specsInfo`, e)
+					that.$set(that, `buy_num`, 1);
+				} else {
+					uni.showToast({
+						title: '库存量不足',
+						icon: 'none'
+					})
+				}
+
+			},
+			// 计数器
+			toCount(e) {
+				const that = this;
+				that.$set(that, `buy_num`, e)
 			},
 			// 查询评价数
 			async searchRate(e) {
@@ -375,9 +383,92 @@
 				this.$set(that, `popupShow`, '1')
 				that.$refs.specShow.open();
 			},
+			// 加入购物车
+			async toMarket() {
+				const that = this;
+				let user = that.user;
+				let info = that.info;
+				let specsInfo = that.specsInfo;
+				if (user && user._id) {
+					let obj = {
+						customer: user._id,
+						shop: info.shop._id,
+						goods: info.goods._id,
+						goodsSpec: specsInfo._id,
+						num: that.buy_num,
+						inviter: that.inviter
+					}
+					let res = await that.$api(`/cart`, 'POST', obj)
+					if (res.errcode == '0') {
+						uni.showToast({
+							title: `加入购物车成功`,
+							icon: 'none'
+						})
+						that.toClose();
+					} else {
+						uni.showToast({
+							title: res.errmsg,
+							icon: 'none'
+						})
+					}
+				} else {
+					uni.navigateTo({
+						url: `/pages/login/index`
+					})
+				}
+			},
+			// 立即购买
+			async toBuy() {
+				const that = this;
+				let user = that.user;
+				let info = that.info;
+				let specsInfo = that.specsInfo;
+				if (user && user._id) {
+					let obj = {
+						customer: user._id,
+						shop: info.shop._id,
+						goods: info.goods._id,
+						goodsSpec: specsInfo._id,
+						num: that.buy_num,
+						inviter: that.inviter
+					}
+					let res = await that.$api(`/util/checkCanBuy`, 'POST', obj)
+					if (res.errcode == '0') {
+						if (res.data.result == true) {
+							uni.navigateTo({
+								url: `/pagesHome/order/order?key=${res.data.key}`
+							})
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'none'
+							})
+						}
+					} else {
+						uni.showToast({
+							title: res.errmsg,
+							icon: 'none'
+						})
+					}
+				} else {
+					uni.navigateTo({
+						url: `/pages/login/index`
+					})
+				}
+			},
+			// 参团
+			toGroup() {
+				const that = this;
+				let specs_id = that.specsInfo._id;
+				let id = that.id;
+				uni.navigateTo({
+					url: `/pagesHome/group/index?specs_id=${specs_id}&goods_id=${id}`
+				})
+			},
 			// 关闭弹框
 			toClose() {
 				const that = this;
+				that.$set(that, `btn_type`, '');
 				that.$refs.specShow.close();
 			},
 			// 评价
@@ -418,10 +509,6 @@
 					})
 				}
 			},
-			buttonClick(e) {
-				console.log(e);
-				console.log('1');
-			},
 			// 店铺,购物车
 			toNavleft(e) {
 				const that = this;
@@ -437,7 +524,8 @@
 			// 加入购物车,立即购买
 			toNavright(e) {
 				const that = this;
-				this.$set(that, `popupShow`, '1')
+				this.$set(that, `popupShow`, '1');
+				that.$set(that, `btn_type`, e.content.type);
 				that.$refs.specShow.open();
 			},
 			// 右侧菜单
@@ -463,6 +551,19 @@
 					path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
 					imageUrl: imageUrl
 				}
+			},
+			// 图片预览
+			imageView(e) {
+				const that = this;
+				let goods = that.info.goods;
+				let file = [];
+				if (e && e.length > 0) file = e;
+				else file = goods.file;
+				file = file.map(i => i.url);
+				uni.previewImage({
+					current: 0,
+					urls: file,
+				})
 			}
 		}
 	}
@@ -480,8 +581,8 @@
 			flex-grow: 1;
 
 			.one_1 {
-				// var(--f9Color)
-				border-bottom: 0.5vw solid #ff0000;
+
+				border-bottom: 0.5vw solid var(--f9Color);
 
 				swiper {
 					height: 44vh !important;
@@ -512,7 +613,7 @@
 			}
 
 			.one_2 {
-				border-bottom: 0.5vw solid #ff0000;
+				border-bottom: 0.5vw solid var(--f9Color);
 				padding: 2vw;
 
 				.money {
@@ -534,7 +635,7 @@
 			}
 
 			.one_3 {
-				border-bottom: 0.5vw solid #ff0000;
+				border-bottom: 0.5vw solid var(--f9Color);
 				padding: 2vw;
 
 				.name {
@@ -563,7 +664,7 @@
 				display: flex;
 				justify-content: space-between;
 				padding: 2vw;
-				border-bottom: 0.5vw solid #ff0000;
+				border-bottom: 0.5vw solid var(--f9Color);
 				font-size: 14px;
 			}
 
@@ -571,13 +672,13 @@
 				display: flex;
 				justify-content: space-between;
 				padding: 2vw;
-				border-bottom: 0.5vw solid #ff0000;
+				border-bottom: 0.5vw solid var(--f9Color);
 				font-size: 14px;
 			}
 
 			.one_6 {
 				padding: 2vw;
-				border-bottom: 0.5vw solid #ff0000;
+				border-bottom: 0.5vw solid var(--f9Color);
 
 				.one_6_1 {
 					margin: 0 0 1vw 0;
@@ -736,35 +837,146 @@
 			padding: 2vw;
 		}
 
-		.info {
+		.info_1 {
 			position: relative;
-			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			height: 54vh;
 
 			.info_1 {
+				position: relative;
+				flex-grow: 1;
+
 				.one {
 					padding: 2vw;
+
+					.one_1 {
+						display: flex;
+						margin: 0 0 2vw 0;
+						padding: 0 0 2vw 0;
+						border-bottom: 0.5vw solid var(--f9Color);
+
+						.l {
+							width: 25vw;
+							height: 25vw;
+
+							.image {
+								width: 100%;
+								height: 100%;
+								border-radius: 5px;
+							}
+						}
+
+						.r {
+							width: 70vw;
+							padding: 0 0 0 2vw;
+
+							.money {
+
+								margin: 0 0 2vw 0;
+
+								.money_1 {
+									font-size: 20px;
+									color: #ff0000;
+									padding: 0 2vw 0 0;
+
+									text {
+										font-size: 14px;
+									}
+								}
+
+								.money_1:last-child {
+									font-size: 16px;
+									color: #858585;
+									text-decoration: line-through;
+
+								}
+							}
+
+							.other_1 {
+								font-size: 15px;
+								color: #858585;
+
+								text:last-child {
+									color: #000000;
+								}
+							}
+						}
+					}
+
+					.one_2 {
+						margin: 0 0 2vw 0;
+						border-bottom: 0.5vw solid var(--f9Color);
+
+						.one_2_1 {
+							font-size: 14px;
+							margin: 0 0 2vw 0;
+						}
+
+						.one_2_2 {
+							display: flex;
+							flex-wrap: wrap;
+
+							.list {
+								background-color: #f9f9f9;
+								margin: 0 2vw 2vw 0;
+								padding: 0.5vw 1vw;
+								border-radius: 5px;
+
+								text {
+									font-size: 14px;
+									color: #000;
+								}
+							}
+
+							.zero_list {
+								background-color: #f5f5f5;
+
+								text {
+									color: #858585;
+								}
+							}
+
+							.one_list {
+								background-color: red;
+
+								text {
+									color: #fff;
+								}
+							}
+						}
+					}
+
+					.one_3 {
+						display: flex;
+
+						.one_3_1 {
+							margin: 0 2vw 0 0;
+
+							text {
+								font-size: 14px;
+								color: #858585;
+							}
+						}
+					}
 				}
+			}
 
-				.btn {
-					background-color: red;
-					position: absolute;
-					bottom: 0;
-					width: 100vw;
-					text-align: center;
+			.info_2 {
+				text-align: center;
+				height: 7vh;
+				padding: 2vw 0;
+				border-top: 0.5vw solid var(--f9Color);
+
+				button {
+					line-height: 3;
+					margin: 0 2vw;
+					padding: 0.3vw 6vw;
+					background-color: #ff0000;
+					color: #fff;
+					font-weight: bold;
 				}
 			}
 		}
-
-		// .popup_1 {
-		// 	display: flex;
-		// 	flex-direction: column;
-
-		// 	.info {}
-
-		// 	.btn {
-		// 		position: absolute;
-		// 		bottom: 0;
-		// 	}
-		// }
 	}
 </style>