high-mini/pages/classify/goodsDetail/goodsDetail.vue

<template>
	<view class="">
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" :autoplay="false" style="height: 188px;" @change="swiperChange">
				<swiper-item class="fotct" v-for="(swiper,index) in goodsDetail.bannerImg" :key="index">
					<image mode="heightFix" :src="swiper" @click="perImage(index,goodsDetail.bannerImg)"></image>
				</swiper-item>
			</swiper>
			<view class="indicator">{{currentSwiper+1}}/{{goodsDetail.bannerImg.length}}</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-container ">
			<!-- 商品信息 -->
			<view class="goods-message br bg-white marb10">
				<view class="goods-price">
					<text>&yen;19</text>
					<text class="old">&yen;26</text>
				</view>	
				<view class="goods-title">
				    <view class="goods-text">{{goodsDetail.name || ''}}</view>
					<view  class="goods-desc">{{goodsDetail.listDescribe || ''}}</view>
				</view>
			</view>
			
			<!-- 选择参数 -->
			<view class="br bg-white parameter  width100 " @click="showPopup(1)">
				<view class="color999 " >
					选择
				</view>
				<view class=" " >
					颜色分类
				</view>
				<view class="icon-ymt to-right"></view>	
			</view>
			<!-- 保障 -->
			<view class="br bg-white parameter  width100 " @click="showPopup(2)">
				<view class="color999 " >
					保障
				</view>
				<view class=" " >
					破损包赔 · 假一赔四 · 退货运费险
				</view>
				<view class="icon-ymt to-right"></view>	
			</view>
			
			<!--评论-->
			<view class="br bg-white   width100 marb10" @click="goComment">
				<view class="parameter">
					<view class="color999 " >
						评论
					</view>
					<view class=" " >
						
					</view>
					<view class="icon-ymt to-right"></view>	
				</view>
				
			</view>
			
			<!-- 详情 -->
			<view class="goods-desc-img br tc marb10 colorccc">
				———— 商品详情 ————
			</view>
			<view style="font-size: 0;">
				<image mode="widthFix" class="width100" v-for="(item,index) in  goodsDetail.detailImg" :key="key" :src="item"
					@click="perImage(index,goodsDetail.detailImg)">
				</image>
			</view>
			<noMore></noMore>
		</view>
		
		<!-- 底部购物车 -->
		<view class="uni-container">
				<view class="goods-carts">
					<uniGoodsNav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>
		
		</view>
			
		
		
		
		
		
		
		
		
		<!-- 选择类别 -->
		<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">

			<cart-choose :status="1" @refreshCartNum="refreshCartNum"  :specificationList="specificationList"  @close="close" ></cart-choose>
		</wybPopup>
		
		<!-- 保障 -->
		<wybPopup ref="popup2" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">
			 
			<view class="choose-detail baozhang-detail">
				
				<view >
					<view class="baozhangTitle fontwig6 font16 mart10">
						破损包退 
					</view>
					<view class="baozhangDescDesc  font13 mart10">
						签收72小时之内。发现商品破损或商品变形等，保存有限证件，商家24小时内响应并退款，诚信用户享受极速退款 
					</view>
				</view>
				<view >
					<view class="baozhangTitle fontwig6 font16 mart10">
						假一赔四
					</view>
					<view class="baozhangDescDesc  font13 mart10">
						正品保障,假一赔四
					</view>
				</view>
				<view >
					<view class="baozhangTitle fontwig6 font16 mart10">
						七天无理由退换 
					</view>
					<view class="baozhangDescDesc  font13 mart10">
						满足相应条件时，消费者可申请"七天无理由退换货"
					</view>
				</view>
				
				
				<view class="fcorfff baozhang-btn " @click="closeBaoZhang">
					我知道了
				</view>
				
				
					
				
				
			</view>
			
		</wybPopup>
		
		
	</view>
</template>

<script>
	import noMore from '@/pages/classify/no-more/no-more.vue'
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
	
	import cartChoose from '@/pages/classify/cart-choose/cart-choose.vue'
	import uniGoodsNav from '@/components/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	
	
	
	import { findGoodsDetailById ,getShoppingCartList,insertShoppingCart,findGoodsSkuByGoodsId} from '@/Utils/physicalObject.js';
	const app = getApp();
	export default {
		data(){
			return{
				imageUrl: app.globalData.imgUrl,//图片地址
				//轮播图下标
				currentSwiper: 0,
				
				isStar:false,
				
				
				
				// 
				options:[
					// {
					// 			icon: 'chat',
					// 			text: '客服',
					// 		}, {
					// 			icon: 'shoucang31',
					// 			text: '收藏',
					// 		}, 
							{
								icon: 'cart',
								text: '购物车',
								info: 0,
								color:"#646566"
						}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				isShowCang:false,
				// scIcon:'shoucang31-select'
				// scIcon:'shoucang31'
				
				
				goodsId:0,
				goodsDetail:null,
				specificationList:[]
				
				
				
				
			}
		},
		watch: {
		        isShowCang: function (n) {
				  if(n){
					  this.options[1].icon="shoucang31-select"
				  }else{
					   this.options[1].icon="shoucang31"
				  }
				  
				  return
		        }
		},
		onLoad(options){
			this.goodsId = options.goodsId;
			this.findGoodsById();
			this.refreshCartNum()
		},
		components:{
			wybPopup,
			cartChoose,
			uniGoodsNav,
			noMore
		},
		onShow(){
			
			
			// if(this.options[1].shoucang == true){
				
				
			// }
			
			// this.isStar=this.options[1].shoucang
			
			
			// 判断是否收藏了该物品
			 
			
			// this.isShowCang?
			
			
		},
		
		methods:{
			// 刷新购物车数量
			refreshCartNum(){
				getShoppingCartList().then( res=>{
					if (res.return_code == '000000') {
						this.options[0].info = res.return_data.length;
						
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})	
			},
			findGoodsById(){
				let _this = this;
				let params ={
					id:_this.goodsId
				}
				findGoodsDetailById(params).then(res=>{
					if (res.return_code == '000000') {
					
					this.goodsDetail = res.return_data;
					this.goodsDetail.bannerImg = res.return_data.bannerImg.split(",").map(temp=>this.imageUrl + temp);
					this.goodsDetail.detailImg = res.return_data.detailImg.split(",").map(temp=>this.imageUrl + temp);
						console.log(this.goodsDetail,)			
						
						// let list =item.map(temp=>this.imageUrl + temp)
					
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			
			
			//显示弹出
			 showPopup(num) {
				if(num == 1){
					 this.findGoodsSku(this.goodsId);	
				}else if(num == 2){
					this.$refs.popup2.show();
				}
				
			},
			//关闭选择参数
			close(){
				this.$refs.popup.hide();
			},
			//关闭保障--我知道了
			closeBaoZhang(){
				this.$refs.popup2.hide();
			},
			//查看大图
			perImage(index,item) {
				uni.previewImage({
					current: Number(index), //预览图片的下标
					urls: item //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//点击去评论页面
			goComment(){
				//要判断评论条数
				
				uni.navigateTo({
					url:"../goods-comment/goods-comment?gid="+1598348
				})
			},
			
			
			// 客服，收藏，购物车图标点击事件
			onClick(e) {
				
				
				// 购物车
				if(e.index == 0){
					// console.log("点击购物车")
						uni.navigateTo({
							url:"/pages/classify/cart/cart"
						})
					return
					
				}
				// 收藏
				// if(e.index == 1){
				// 	this.isShowCang = !this.isShowCang;
				// 	console.log("点击收藏")
				// 	return
					
				// }
				// 购物车
				// if(e.index == 2){
				// 	console.log("点击去购物车")
				// 	uni.navigateTo({
				// 		url:"/pages/classify/cart/cart"
				// 	})
				// 	return
					
				// }
				
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
			},
			//加入购物车，立即购买按钮点击事件
			buttonClick(e) {
				
				this.options[2].info++
				
				// 加入购物车
				if(e.index == 0){
					console.log("加入购物车")
					return
				}
				if(e.index == 1){
					console.log("立即购买")
					return
				}
				
			},
			//加入购物车
			toCart(){
				let params={
					// goodsId:this.specificationList[this.chooseIndex].goodsId,
					// num:this.chooseNumber,
					// sku:this.specificationList[this.chooseIndex].id,
					// whetherCheck:true
				}
				
				// insertShoppingCart(params).then(async res=>{
				// 	let title ;
				// 	if (res.return_code == '000000') {
				// 		title = res.return_data;	
				// 		this.$emit("refreshCartNum")
							
				// 	}else{
				// 		title = res.return_msg;
				// 	}
				// 	uni.showToast({
				// 		title: title,
				// 		icon: 'none',
				// 		duration: 2000
				// 	})		
					
					
					
				// 	this.$emit("close")
					
				// })
				
				
			},
			// 查询规格
			findGoodsSku(id){
				this.specificationList = [];
				let params={
					goodsId:id
				};
				
				findGoodsSkuByGoodsId(params).then(res=>{
					if (res.return_code == '000000') {
						if(res.return_data&&res.return_data.length>0){
							this.specificationList = res.return_data;
							this.$refs.popup.show();
						}else{
							this.specificationList = [];
						}
						
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
					
					
				})
				
				
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	// 修改uni-goods-nav默认图标颜色
	
	
	
	// 底部购物车
	.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
	
	// 轮播图	
.swiper-box {
		position: relative;
		width: 100%;

		swiper {
			width: 100%;

			swiper-item {
				image {
					width: 100%;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 40upx;
			font-size: 22upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
}


.tc{
	text-align: center;
}

.br{
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;
}
.bg-white{
	background-color: #fff;
}

.price-tag{
	font-family:Arial;
	font-weight: bold;
}


//商品详情 
.goods-container{
	padding: 20rpx 20rpx 60px;
	background-color:#F6F6F6;
}

.goods-price{
	font-family:Arial;
	font-weight: bold;
	color: red;
	font-size: 28px;
	.old{
		text-decoration: line-through;
		color:#CCCCCC;
		display: inline-block;
		padding-left: 20rpx;
		font-size: 20px;
	}
	
}

.goods-title {
		width: 100%;
		padding: 0 10rpx 0 0;
		// height: 140rpx;
		
}
.goods-title .goods-text {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 30rpx;
	padding: 20rpx 0 10rpx;
}
.goods-title .goods-desc {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	color: #999999;
}

//选择参数
.parameter {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #F6F6F6;
}
.parameter:last-of-type{
	border-bottom:none
}

//popUp
.choose-detail {
	position: relative;
	padding: 20rpx;
	//保障
	&.baozhang-detail{
		padding-top: 30px;
		box-sizing: border-box;
		height: 100%;
		
		.baozhangTitle{
			
		}
		.baozhangDescDesc{
			color: #999999;
		}
		.baozhang-btn{
			position: fixed;
			bottom: 20rpx;
			width: calc(100% - 40rpx);
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			background: linear-gradient(to right,#FF8E01,#FD5100);
			
		}
		
	}
	
	//选择
	// .choose-top {
	// 	display: flex;
	// 	align-items: center;
	// 	height: 160rpx;
	// 	color: red;
	// 	.choose-img {
	// 		width: 160rpx;
	// 		height: 160rpx;
	// 		border-radius: 20rpx;
			
	// 	}
	// 	.choose-price {
			
	// 	}
	// 	.choose-less-price {
	// 		display: inline-block;
	// 		height: 40rpx;
	// 		line-height: 40rpx;
	// 		padding:4rpx 10rpx;
	// 		color: white;
	// 		background-color:#F95100 ;
	// 		border-radius: 20rpx;
	// 	}
	// }
	
	
	// .choose-bottom {
	// 	.choose-bottom-title{
			
	// 	}
	// 	.choose-select {
	// 		.choose-item{
	// 			display: flex;
	// 			align-items: center;
	// 			height: 60rpx;
	// 			border-radius: 20rpx;
	// 			overflow: hidden;
	// 			background-color:#F6F6F6;
	// 			border:1px solid transparent;
	// 			width: fit-content;
	// 			.img{
	// 				width: 60rpx;
	// 				height: 60rpx;
	// 			}
	// 		}
	// 		.choose-active{
	// 			border-color: #F95100;
	// 		}
	// 	}
		
	// 	.choose-num{
	// 		display: flex;
	// 		height: 60rpx;
	// 		justify-content: space-between;
	// 		align-items: center;
			
	// 		.choose-change{
	// 			width: 240rpx;
	// 			background-color:#F4F4F4;	
	// 			height: 100%;
	// 			border-radius: 30rpx;
	// 			display: flex;
	// 			.number{
	// 				// width: 80rpx;
	// 				height: 60rpx;
	// 				line-height: 60rpx;
	// 				text-align: center;
	// 				color: #333333;
	// 				font-size: 30rpx;
	// 			}
	// 			.width140{
	// 				width: 120rpx !important;
	// 			}
	// 			.wid25{
	// 				width: 60rpx !important;
	// 				background-color:#f8f8f8 ;
	// 				border-radius: 30rpx;
	// 			}
				
	// 		}
	// 	}
	// }
	
	// .choose-cart{
	// 	position: fixed;
	// 	bottom: 0;
	// 	width: calc(100% - 40rpx);
	// 	padding-bottom: 20rpx;
	// 	.choose-way{
	// 		height: 60rpx;
	// 		width: 100%;
	// 		border-radius: 30rpx;
	// 		overflow: hidden;
	// 		display: flex;
	// 		align-items: center;
			
			
	// 		.way{
	// 			width: 50%;
	// 			height: 60rpx;
	// 			line-height: 60rpx;
	// 			text-align: center;
	// 		}
			
	// 		.bgcolor-ri{
	// 			background-color:  #FD5100;
	// 		}
	// 		.bgcolor-left{
	// 			background-color:  #FF8E01;
	// 		}
	// 	}
	// }
	
}


//商品信息图片
.goods-desc-img{
	
}


</style>