0919

pages/bookShop/commodityDetail.vue

@@ -13,34 +13,39 @@
 			</swiper>
 		</view>
 		<view class="commodityContent">
-			<view class="commodityPrice">
+			<view class="commodityPrice" v-if="productInfo.activityPrice && productInfo.activityPrice > 0">
-				<span style="font-size: 28rpx;">￥</span><em>{{productInfo.price}}</em>
+				<span style="font-size: 28rpx;" >￥</span><em>{{productInfo.activityPrice}}</em>
-				<span class="oldPrice " v-if="productInfo.activityPrice">原价<span style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.activityPrice}}</span>
+				<span class="oldPrice " >原价<span style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.price}}</span>
+			</view>
+			<view class="commodityPrice" v-else>
+				<span style="font-size: 28rpx;" >￥</span><em>{{productInfo.price}}</em>				
 			</view>
 			<view class="commodityyName">
 				{{productInfo.productName}}
 				<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
 				<view><text class="SoldNumber">已售<span style="padding-left:10rpx;">{{productInfo.sumSales}}</span>件</text></view>
 			</view>
-			<view class="pingjia" v-if="listenList && listenList.length > 0 && listenList[0]">
+			<view class="pingjia" v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
 				<view class="">
-					<view style="font-weight: 600;margin-bottom: 30rpx;">商品包含</view>
+					<view style="font-weight: 600;margin-bottom: 30rpx;">其他购买套餐</view>
 					<!-- <view class="icon-del rotate"></view> -->
 				</view>
 				<!-- 商品包含 -->
-				<view v-if="listenList && listenList.length > 0 && listenList[0]">				
+				<view v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">				
-					<view class="spbh" v-for="item in listenList" :key="item.id">
+					<view class="spbh" v-for="(item, index) in linkProducts" :key="item.id">
-						<view class="flexbox aligncenter" @click="previewImage(item.images)">
+						<view class="flexbox aligncenter" @click="previewProduct(item,index)">
 							<view class="spbhimg">
-								<image :src="item.images" mode="aspectFit"></image>
+								<image :src="item.productImages" mode="aspectFit"></image>
 							</view>
-							<text class="username nowrap ">{{item.name}}</text>		
+							<text class="username nowrap ">{{item.productName}}</text>
+							<text class="price" v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
+							<text class="price" v-else>￥{{item.price}}</text>
 						</view>
 					</view>
 				</view>				
-				<view class="quesheng" v-else>
+				<!-- <view class="quesheng" v-else>
-					<text>暂无评价~</text>
+					<text>暂无关联商品~</text>
-				</view>
+				</view> -->
 			</view>
 
 			<view class="contentButton">
@@ -155,6 +160,34 @@
 			</view>
 			<view style="height: 120rpx;"></view>
 		</view>
+		<view class="" v-if="upoShow">
+			<u-popup :show="upoShow" :round="10" @close="closeUpo">
+				<view class="tanchu">
+					<view class="list">
+						<view class="imgBox">
+							<image v-if="linkimg == ''" src="../../static/icon/wufeng.jpg" mode="aspectFit" style="width: 100%; height: 100%;"></image>
+							<image v-else :src="linkimg" mode="aspectFit" style="width: 100%; height: 100%;"></image>
+							<view class="xiangxi" v-if="productId != linkProducts[linkCur].productId" @click="gotoDetail(linkProducts[linkCur])">
+								<text>查看详情</text>
+							</view>
+						</view>
+						<view :class="['spbh', linkCur == index ? 'cur' :'']" v-for="(item, index) in linkProducts" :key="item.id">
+							<view class="flexbox aligncenter" @click="previewProduct(item,index)">
+								<view class="spbhimg">
+									<image :src="item.productImages" mode="aspectFit"></image>
+								</view>
+								<text class="username nowrap ">{{item.productName}}</text>
+								<text class="price" v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
+								<text class="price" v-else>￥{{item.price}}</text>
+							</view>
+						</view>
+					</view>
+					<uni-goods-nav  style="left: 0;" class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
+						@buttonClick="buttonClickLink" />
+				</view>
+			</u-popup>
+		</view>
+				
 		<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
 			@buttonClick="buttonClick" />
 		<music-play :playData="playData"></music-play>
@@ -172,6 +205,7 @@
 	export default {
 		data() {
 			return {
+				linkimg:'',   // 选中的关联商品图片
 				playData:{},
 				contentShow:0,
 				options: [{
@@ -204,13 +238,17 @@
 				cartList: [], // 购物车列表
 				commentsList:[], // 评论列表
 				productId:null, // 商品评论
-				listenList:[] // 关联得听书
+				listenList:[], // 关联得听书
+				linkProducts:[],  // 关联的商品,
+				upoShow:false,   // 显示底部购买选项
+				linkCur : 0, // 当前选中的关联项
 			}
 		},
 		onLoad(e) {	
 			this.productId = e.id
 			this.getProDetail(e)			
 			this.getComments()
+			this.getLinkPros(this.productId)
 			// console.log(emojiList1,'emojiList1')
 		},
 		computed: {
@@ -220,6 +258,41 @@
 			musicPlay
 		},
 		methods: {
+			gotoDetail(item){
+				console.log(item,'gotoDetail')
+				uni.navigateTo({
+					url: '../bookShop/commodityDetail?id=' + item.productId
+				});
+			},
+			closeUpo(){
+				console.log('关闭弹窗')
+				this.upoShow = false
+			},
+			// 点击其他套餐
+			previewProduct(item,index){
+				console.log(item,'item')
+				this.linkimg = item.productImages
+				this.upoShow = true
+				this.linkCur = index
+			},
+			// 获取商品关联商品
+			getLinkPros(id){
+				this.$http
+					.post('book/shopproduct/bookinfolists/'+id)
+					.then(res => {	
+						console.log('关联商品', res)
+						if(res.code == 0){
+							this.linkProducts = res.result
+							if(this.linkProducts.length > 0){
+								this.linkimg = this.linkProducts[0].productImages
+								this.linkCur = 0
+							}
+						}
+					})
+					.catch(e => {
+						console.log(e,'e')
+					})
+			},
 			goToListen(id){
 				// 跳转到听书
 				uni.navigateTo({
@@ -331,6 +404,40 @@
 					url: '../peanut/shopping'
 				});				
 			},
+			// 关联商品点击按钮组件
+			buttonClickLink(e){
+				console.log('点击的是关联商品的组件')
+				if(e.index == 0){
+				// 点击的是加入购物车
+					if (this.linkProducts[this.linkCur].productStock == 0) {
+						uni.showToast({
+							title: '商品库存不足',
+							icon: "none",
+							duration: 1000,
+						});
+					} else {
+						this.$http
+							.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
+							.then(res => {
+								this.cartList = res.cartList
+								this.isAddLink(this.linkProducts[this.linkCur])
+							})
+					}
+				}else{
+				// 点击的是立即购买
+				 if (this.linkProducts[this.linkCur].productStock == 0) {
+				 	uni.showToast({
+				 		title: '商品库存不足',
+				 		icon: "none",
+				 		duration: 1000,
+				 	});
+				 } else {
+				 	uni.navigateTo({
+				 		url: '../bookShop/settlement?type=2&list=' + this.linkProducts[this.linkCur].productId
+				 	});
+				 }
+				}
+			},
 			// 点击按钮组间
 			buttonClick(e) {
 				console.log(e)	
@@ -339,7 +446,8 @@
 					this.addCart()
 				}else{
 				// 点击的是立即购买
-				this.goPurse()
+				this.upoShow = true
+				// this.goPurse()
 				}
 			},
 			goToListenNone(){
@@ -366,6 +474,83 @@
 				}
 
 			},
+			isAddLink(item) {
+				// 统计商品信息
+				let data = {
+					"userId": this.userInfo.id,
+					"productId": item.productId,
+					"productAmount": this.productAmount,
+					"price": item.price
+				}				
+				// 判断列表是否为空
+				if (this.cartList.length > 0) {
+					let flag = ''
+					let shagnpin = {}
+					// 循环购物车列表
+					flag = this.cartList.some((item, index) => {
+						if (item.productId == data.productId) {
+							shagnpin = item
+							shagnpin.productAmount = item.productAmount + 1
+							return true
+						}
+					})
+					if (flag) {
+						// 已在购物车中添加
+						$http.request({
+							url: "book/ordercart/update",
+							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+							data: shagnpin,
+							header: { //默认 无 说明：请求头
+								'Content-Type': 'application/json'
+							},
+						}).then(res => {							
+							if (res.code == 0) {
+								this.upoShow = false
+								uni.showToast({
+									title: '加入购物车成功',
+									duration: 1000,
+								});
+							}
+						})
+					} else {
+						// 加入购物车
+						$http.request({
+							url: "book/ordercart/save",
+							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+							data,
+							header: { //默认 无 说明：请求头
+								'Content-Type': 'application/json'
+							},
+						}).then(res => {							
+							if (res.code == 0) {
+								this.upoShow = false
+								uni.showToast({
+									title: '加入购物车成功',
+									duration: 1000,
+								});
+							}
+						})
+					}
+			
+				} else {
+					// 购物车列表为空时直接加入购物车
+					$http.request({
+						url: "book/ordercart/save",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data,
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					}).then(res => {
+						if (res.code == 0) {
+							uni.showToast({
+								title: '加入购物车成功',
+								duration: 1000,
+							});
+						}
+					})
+				}
+			},
 			isAdd() {
 				// 统计商品信息
 				let data = {
@@ -517,6 +702,30 @@ formatRichText (html) { //控制小程序中图片大小
 	}
 </script>
 <style lang="scss" scoped>
+	.tanchu { background: #fff;position: relative;
+		padding: 40rpx 30rpx 40rpx 30rpx;
+		position: relative;
+		
+		.list{margin-bottom: 140rpx;
+			.imgBox{height: 500rpx; width: 100%;  margin-bottom: 10rpx; position: relative;
+				.xiangxi{text-align: center; position: absolute; left: 0; bottom: 20rpx; width: 100%;
+				text{padding: 10rpx 20rpx; font-size: 32rpx;  background-color: rgba(235, 160, 11, .9);  color: #def0ea; border-radius: 10px;}
+				}
+			}
+		}
+		.spbh{ border: 2rpx solid #fff;
+		.spbhimg {
+			image{
+				border: none !important;
+			}
+		}
+		}
+		.spbh.cur{
+			border: 2rpx solid #eba00b;
+			    border-radius: 10rpx;
+			    overflow: hidden;
+			}
+		}
 	.tingshuList{margin-top: 20rpx; background-color: #fff; padding: 20rpx; 
  border-radius: 20rpx; margin-bottom: 20rpx; padding-top: 40rpx;
 	background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
@@ -554,7 +763,7 @@ formatRichText (html) { //控制小程序中图片大小
 	}
 	.spbh{
 		padding-bottom: 10rpx;
-		font-size: 26rpx;
+		font-size: 26rpx; padding: 0 10rpx;
 	}
 	.spbhimg{
 		width:40px; overflow: hidden; text-align: center;
@@ -566,8 +775,12 @@ formatRichText (html) { //控制小程序中图片大小
 			border-radius: 6rpx;
 			overflow: hidden;
 		}
-		.username{font-size: 24rpx; color: #999; margin-top: 6rpx; }
+		
 	}
+	.username{ margin-left: 10rpx; }
+	.price{margin-left: 5px;
+		color: #ffa200;
+		font-weight: bold;}
 	.nowrap {
 				white-space: nowrap;
 				overflow-x: hidden;