high-mini/physical-merchants/classify/goodsDetail/goodsDetail.vue

<template>
	<view class="">
		<!-- 商品主图轮播 -->
		<view class="swiper-box" v-if="goodsDetail.bannerImg">
			<swiper circular="true" :autoplay="false" style="height: 288px;" @change="swiperChange">
				<swiper-item class="fotct" v-for="(swiper,index) in goodsDetail.bannerImg" :key="index">
					<image mode="heightFix" style="height: 100%;" :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;{{goodsDetail.price}}</text>
					<text class="old">&yen;{{goodsDetail.originalPrice}}</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=" font16">
					选择
				</view>
				<view class="color999 font14">
					规格
				</view>
				<view class="icon-ymt to-right"></view>
			</view>
			<!-- 保障 -->
			<view class="br bg-white parameter  width100 " @click="showPopup(2)">
				<view class="font16 ">
					保障
				</view>
				<view class="color999 font14">
					破损包退 · 假一赔四 
				</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="font13  goods-desc-img br tc  colorccc">
				———— 商品详情 ————
			</view>
			<view style="font-size: 0;" >
				<image mode="widthFix" class="width100" v-for="(item,index) in  goodsDetail.detailImg" :key="index"
					: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" zIndex="999"  height="500"   type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true">

			<cart-choose :goodsDetail="goodsDetail" :status="status" @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 '@/components/no-more/no-more.vue'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'

	import cartChoose from '@/components/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: {},
				specificationList: [],

				// 0,加入购物车，1：加入购物车，直接购买，2：直接购买
				status: 1




			}
		},
		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();

		},
		components: {
			wybPopup,
			cartChoose,
			uniGoodsNav,
			noMore
		},
		onShow() {
			this.refreshCartNum();

			// 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
				}

				uni.showLoading({
					title: '加载中',
					mask: true,
				});

				findGoodsDetailById(params).then(res => {
					
					setTimeout(()=>{
					
						uni.hideLoading();

						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
							})
						}
					
					},100)
					
					
				})
			},


			//显示弹出
			showPopup(num) {
				if (num == 1) { //选择规格弹出
					this.status = 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: "/physical-merchants/classify/cart/cart"
					})
					return

				}
				// 收藏
				// if(e.index == 1){
				// 	this.isShowCang = !this.isShowCang;
				// 	console.log("点击收藏")
				// 	return

				// }
				// 购物车
				// if(e.index == 2){
				// 	console.log("点击去购物车")
				// 	uni.navigateTo({
				// 		url:"/physical-merchants/classify/cart/cart"
				// 	})
				// 	return

				// }

				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
			},
			//加入购物车，立即购买按钮点击事件
			buttonClick(e) {

				this.findGoodsSku(this.goodsId);
				// 加入购物车
				if (e.index == 0) {
					this.status = 0;
					// console.log("加入购物车")	
				} else if (e.index == 1) {
					this.status = 2;
					// console.log("立即购买")
				}

			},
			//加入购物车
			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;
		align-items: center;
		border-bottom: 1px solid #F6F6F6;
	}

	.parameter:last-of-type {
		border-bottom: none
	}

	//popUp
	.choose-detail {
		position: relative;
		

		//保障
		&.baozhang-detail {
			padding:30px 10px 10px;
			box-sizing: border-box;
			height:calc(100% - 100rpx);

			.baozhangTitle {}

			.baozhangDescDesc {
				color: #999999;
			}

			.baozhang-btn {
				position: fixed;
				bottom: 20rpx;
				width: calc(100% - 40rpx);
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				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>