IHG/pages/goods/goods-detail/index.vue

<template>
	<view class="goods-detail">
		<!-- swiper -->
		<view class="home-swiper">
			<!-- <uni-swiper-dot :info="info" :current="current1" :mode="mode" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change1" circular>
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item" >
							<image style="width: 100%;height:576rpx;" :src="item.img" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot> -->
			<uni-swiper-dot :mode="mode" :info="info" :current="current1" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change1" circular>
					<swiper-item v-for="(item ,index) in info" :key="index"  v-if="resource_type == 1 ">
						<view class="swiper-item">
							<image style="width: 100%;height:576rpx;" :src="item.img" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item  v-if="resource_type == 2 ">
						<view class="swiper-item">
							<video class="baner-video" id="myVideo" ref="myVideo" style="width: 100%; height: 564rpx;"
								:src="video_url" controls :enable-progress-gesture="false">
							</video>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view style="background-color: #f9f9f9;">
			<!-- 价格 -->
			<view class="price">
				<view class="price-top" v-if="produceType == 1">
					<text>￥</text>
					<text>{{productDetail.price}}</text>
				</view>
				<view class="price-top" v-if="produceType == 2">
					<text>{{productDetail.integral}}</text>
					<text>积分</text>
				</view>	
				<text class="price-text">{{productDetail.name}}</text>
				<view @click="goOther" class="price-banner" :style="{backgroundImage:'url('+backImageUrl+')'}">
					<text>加入IHG优悦会会员享受更多福利</text>
					<image style="width: 12rpx;height: 20rpx;" src="/static/icon/right02.png" mode=""></image>
				</view>
				<!--规格-->
				<view class="price-specs" @click="Recipientopen()">
					<view class="price-specs-left">
						<text>选择</text>
					</view>
					<view class="price-specs-main" @click="Recipientopen()">
						<text>{{specsText||'请选择规格'}}</text>
					</view>
					<view @click="Recipientopen()">
						<image style="width: 12rpx;height: 20rpx;" src="/static/icon/right03.png" mode=""></image>
					</view>
				</view>
			</view>

			<!--酒店信息  -->
			<view class="about">
				<text class="about-title">可购买酒店信息</text>
				<text class="about-name">{{hotelDetail.name}}</text>
				<view class="about-address">
					<text style="margin-right:20rpx ;">地址:</text>
					<text>{{hotelDetail.address}}</text>
				</view>
				<view class="about-phone">
					<text style="margin-right:20rpx ;">电话:</text>
					<text>{{hotelDetail.phone}}</text>
				</view>
				<view class="about-all">
					<text @click="goGoodsHotel(product_id)" style="margin-right: 16rpx;">全部酒店</text>
					<image @click="goGoodsHotel(product_id)" style="width: 12rpx;height: 20rpx;" src="/static/icon/right04.png"
						mode=""></image>
				</view>

			</view>

			<!-- 产品介绍 -->
			<view class="produce">
				<view class="produce-title">
					<text>产品简介</text>
				</view>
				<view class="produce-text" v-html="productDetail.details"></view>
			</view>
		</view>

		<view class="buy-btn">
			<view class="buy-btn-left" @click="goHome">
				<image style="width: 40rpx;height: 42rpx;" src="/static/icon/home01.png" mode=""></image>
				<text>首页</text>
			</view>
			<view class="buy-btn-right" @click="$refs.codePurchase.open()" v-if="produceType==1">
				<text>立即购买</text>
			</view>
			<view v-if="produceType==2" class="buy-btn-right" @click="goIntegralOrder(product_id)">
				<text>立即兑换</text>
			</view>
		</view>
		<view style="height: 90px;background-color: #f9f9f9;"></view>

		<!-- 选择规格 -->
		<uni-popup ref="Recipient" type="bottom" mask-background-color=" rgba(0,0,0,0.3);">
			<view class="pop">
				<view class="pop-price">
					<view class="pop-price-left">
						<image style="width: 180rpx;height: 136rpx; border-radius:12rpx ;"
							src="http://t9.9026.com/imgs/special01.png" mode="" ></image>
						<view class="pop-price-left-money" v-if="produceType == 1">
							<text>￥</text>
							<text>{{productDetail.price}}</text>
						</view>
						<view class="pop-price-left-money" v-if="produceType == 2">
							<text>{{productDetail.integral}}</text>
							<text>积分</text>
						</view>
					</view>
					<image style="width: 52rpx;height: 52rpx;" src="/static/icon/close01.png" mode=""  @click="Recipientclose"></image>
				</view>

				<view class="pop-flavor">
					<text>口味</text>
					<view class="tab_flavor">
						<view class="flavorTitle-item" :class="{'flavorTitle-item-active':flavorIsActive === index}"  v-for="(item,index) in flavorList" :key="index"
							@click="flavorchecked(index,item.attr_name)">
							<view :class="{'active-flavor':flavorIsActive === index}">
								{{item.attr_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="pop-flavor" style="margin-top: 44rpx;">
					<text>重量</text>
					<view class="tab_flavor">
						<view class="flavorTitle-item" :class="{'flavorTitle-item-active':weightIsActive === index}" v-for="(item,index) in weightList" :key="index"
							@click="weightchecked(index,item.attr_name)">
							<view :class="{'active-flavor':weightIsActive === index}">
								{{item.attr_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="pop-flavor" style="margin-top: 44rpx;">
					<text>包装</text>
					<view class="tab_flavor">
						<view class="flavorTitle-item" :class="{'flavorTitle-item-active':packIsActive === index}" v-for="(item,index) in packList" :key="index"
							@click="packchecked(index,item.title)">
							<view :class="{'active-flavor':packIsActive === index}">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="purchase" v-if="produceType == 1" @click="goIntegralOrder(product_id)">
				<view class="purchase-btn">立即购买</view>
			</view>
			<view class="purchase" v-if="produceType == 2"  @click="selectSpecs">
				<!-- <view class="purchase-btn">立即兑换</view> -->
				<view class="purchase-btn">确认</view>
			</view>

		</uni-popup>

		<!-- 二维码购买 -->
		<uni-popup ref="codePurchase" type="center">
			<view class="code-purchase">
				<view class="title"><text>识别下方二维码即可购买</text></view>
				<view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
				<view class="img">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
				</view>
				<view class="btn">
					<view class="cancel" @click="dialogClose"><text>取消</text></view>
					<view class="download" @click="dialogConfirm"><text>保存图片</text></view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				jump_type: '',
				jump_config: '',
				resource_type: '',
				//1:第三方产品2:积分兑换产品
				produceType:'',
				// 规格
				specsText:'',
				specs:{
					pack:'',
					weight:'',
					flavor:'',
				},
				// 产品详情
				productDetail:'',
				// 酒店详情
				hotelDetail:'',
				// 产品id
				product_id:'',
				packList: [{
						title: '礼盒'
					},
					{
						title: '普通'
					}
				],
				weightList: [{
					attr_name: '50g'
				}, {
					attr_name: '100g'
				}, {
					attr_name: '150g'
				}],
				flavorList: [{
					attr_name: '五仁'
				}, {
					attr_name: '豆沙'
				}, {
					attr_name: '水果'
				}],
				//激活指定table菜单
				isActive: 0,
				flavorIsActive:0,
				weightIsActive:0,
				packIsActive:0,
				
				backImageUrl: require('../../../static/icon/add01.png'),

				//轮播图
				info: [{
					img: 'http://t9.9026.com/imgs/swiper01.png',
					name: '酒店预订'
				}, ],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
				},
				//指示点显示位置
				current1: 0,
				//指示点模式
				mode: 'dot',
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(op) {
			this.admin = this.$store.getters.userInfo
			console.log(this.admin);
			this.product_id=op.id
			this.produceType = op.type
			console.log(this.product_id,this.produceType,"产品id")
			this.getProductDetail(op.id)
			
		},
		methods: {
			//获取当前页面路径
			getPageUrl() {
				const pages = getCurrentPages();
				if(pages.length==1){
					const currentPage = pages[0];
					console.log(currentPage.options,'--------->currentPage.options')
					let pageUrl = `/${currentPage.route}?type=${currentPage.options.type}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				}else{
					const currentPage = pages[pages.length - 1];
					console.log(currentPage.options,'--------->currentPage.options')
					let pageUrl = `/${currentPage.route}?type=${currentPage.options.type}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				}
			},
			// 跳转其他小程序
			goOther() {
				let _this = this
				wx.navigateToMiniProgram({
					appId: 'wx255b58f0992b3c53', //appid
					path: 'newUIMain/enrollment/enrollment', //path
					extraData: { //参数
						foo: 'bar'
					},
					// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
					success(res) {
						let page = _this.getPageUrl()
						let user_id = ''
						 if(_this.admin != null ){
							 user_id = _this.admin.id
						 }else{
							 user_id = 0
						 }
						console.log('成功',page)
						_this.$api.my.userMemberAdd({
							user_id,
							page,
						}).then(res=>{
							console.log(res.data);
						})
						// 打开成功
					},
					fail(e) {
						console.log(e, '失败')
					}
				})
			},
			
			//视频自动播放
			openVideoPlay() {
				this.videoContext.play()
			},
			// 获取商品详情
			getProductDetail(id){
				this.$api.product.getProductDetail({
					product_id:id
				}).then(res=>{
					console.log(res,"产品详情")
					// console.log(res.data.attr_group,"产品规格")
					if(res.code==0){
						this.productDetail=res.data
						this.info = JSON.parse(res.data.img_urls).map(item => {
							return {
								img: item
							}
						})
						//跳转h5和小程序
						this.jump_type = res.data.jump_type,
							this.jump_config = res.data.jump_config
						//banner展示视频或者图片
						this.resource_type = res.data.resource_type
						this.video_url = res.data.video_url
						console.log(this.video_url, '--->this.video_url');
						//视频自动播放
						this.openVideoPlay()
						// 口味
						// this.flavorList=JSON.parse(res.data.attr_group)[0].attr_list
						// 重量
						// this.weightList=JSON.parse(res.data.attr_group)[1].attr_list
						this.getHotelDetail(res.data.hotel_id)
					}
				})
			},
			// 获取酒店详情
			getHotelDetail(id){
				this.$api.hotel.getHotelDetail({
					hotel_id:id
				}).then(res=>{
					console.log(res,"酒店详情")
					this.hotelDetail=res.data
				})
			},
			//跳转酒店列表
			goGoodsHotel(id) {
				uni.navigateTo({
					url: '/pages/goods/goods-hotel/index?product_id='+id
				})
			},
			//首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//二维码购买确认按钮
			dialogConfirm() {
				console.log('确认');
				this.codePurchaseClose()
			},
			//二维码购买取消按钮
			dialogClose() {
				console.log('取消');
				this.codePurchaseClose()
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
			},
			// 口味切换
			flavorchecked(index,name) {
				this.flavorIsActive = index
				this.specs.flavor=name
			},
			// 重量切换
			weightchecked(index,name) {
				this.weightIsActive = index
				this.specs.weight=name
			},
			// 包装切换
			packchecked(index,name) {
				this.packIsActive = index
				this.specs.pack=name
			},
			// 选择规格
			selectSpecs(){
				this.specs.flavor='五仁'
				this.specs.weight='50g'
				this.specs.pack='礼盒'
				console.log(this.specs)
				this.specsText=this.specs.flavor+'--'+this.specs.weight+'--'+this.specs.pack
				this.Recipientclose()
			},
			Recipientopen() {
				this.$refs.Recipient.open('bottom')
			},
			Recipientclose() {
				this.$refs.Recipient.close()
			},
			codePurchaseClose(){
				this.$refs.codePurchase.close()
			},
			// 切换轮播图指示点
			change1(e) {
				this.current1 = e.detail.current;
			},
			// 跳转积分兑换
			goIntegralOrder(id){
				uni.navigateTo({
					url:'/pages/my/integral/integralOrder?product_id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		height: 100% !important;
		background: #F9F9F9 !important;
	}

	.code-purchase {
		width: 640rpx;
		height: 764rpx;
		background: $bgColor;
		border-radius: 20rpx;
		padding-top: 64rpx;
		box-sizing: border-box;

		.title {
			@include flexlayout();
			margin-bottom: 24rpx;

			text {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.img {
			margin-top: 10rpx;
			margin-left: 48rpx;
			width: 544rpx;
			height: 468rpx;
			background: $bgColor;
			border-radius: 2rpx;
			@include flexlayout();

			image {
				width: 392rpx;
				height: 390rpx;
			}
		}

		.btn {
			margin-top: 40rpx;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;

			.cancel {
				@include flexlayout();
				width: 50%;
				height: 100%;
				border-top: #E5E5E5 solid 1rpx;
				border-right: #E5E5E5 solid 1rpx;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.download {
				border-top: #E5E5E5 solid 1rpx;
				// border-left:#E5E5E5 solid 0.3rpx;
				@include flexlayout();
				height: 100%;
				width: 50%;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF7119;
				}
			}
		}
	}



	.purchase {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.purchase-btn {
			width: 100%;
			height: 92rpx;
			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}

	.pop {
		padding: 32rpx 30rpx 80rpx;
		width: 100%;
		height: 914rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0px 0px;
		overflow-y: scroll;
		position: relative;

		.pop-price {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			.pop-price-left {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.pop-price-left-money {
					font-weight: 800;
					color: #FF6200;
					font-size: 48rpx;
					margin-left: 20rpx;
				}
			}
		}

		.pop-flavor {
			width: 100%;
			margin-top: 64rpx;
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
		}
	}

	//口味切换
	.tab_flavor {
		margin-top: 14rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		flex-wrap: wrap;
	}

	.tab_flavor .flavorTitle-item {
		width: 220rpx;
		height: 60rpx;
		background-color: #FFF;
		border: 2rpx solid #CCCCCC;
		border-radius: 30rpx;
		font-size: 30rpx;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
		font-weight: normal;
		margin-top: 16rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}
	
	.flavorTitle-item-active{
		border: none !important;
	}
	
	.active-flavor {
		width: 220rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #FF6200;
		border: none;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buy-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0 30rpx 0 58rpx;
		height: 148rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.buy-btn-left {
			flex: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #FF6200;
			font-size: 22rpx;
		}

		.buy-btn-right {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 40rpx;
			flex: 1;
			height: 92rpx;
			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
			border-radius: 12rpx;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}


	.goods-detail {
		height: 100%;
		background: #F9F9F9;
	}

	.produce {
		margin-top: 24rpx;
		padding: 40rpx 30rpx 36rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx;

		.produce-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.produce-text {
			margin-top: 26rpx;
			font-size: 30rpx;
			color: #333333;
			line-height: 48rpx;
		}
	}

	.about {
		padding: 40rpx 30rpx 40rpx;
		width: 100%;
		// height: 350rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;

		.about-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.about-name {
			margin: 30rpx 0 20rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.about-address {
			font-size: 30rpx;
			color: #333333;
		}

		.about-phone {
			margin: 20rpx 0 48rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.about-all {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FF6200;
		}
	}



	.home-swiper {
		height: 576rpx;

		.swiper-box {
			height: 576rpx;
		}
	}

	::v-deep .uni-swiper__dots-box {
		bottom: 48rpx !important;
	}

	.price {
		padding: 32rpx 30rpx 0rpx;
		position: relative;
		top: -20rpx;
		// height: 406rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;

		.price-top {
			font-size: 48rpx;
			font-weight: 800;
			color: #FF6200;
		}

		.price-text {
			margin: 30rpx 0 26rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.price-banner {
			padding: 0 24rpx;
			width: 100%;
			height: 80rpx;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}

		.price-specs {
			margin-top: 48rpx;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #F0F0F0;

			.price-specs-left {
				flex: none;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.price-specs-main {
				flex: 1;
				margin-left: 28rpx;
				font-size: 30rpx;
				color: #666666;
			}

		}
	}
</style>