yogaApp/pages/product/cdetail.vue

<template>
	<view class="page">
		
		<!-- 轮播图商品 -->
		<view class="container">
			<swiper class="product" @change="change" :current="swiperCurrent"
			  :autoplay="true"
			  :interval="3000"
			  :duration="1000">
				<swiper-item v-for="(item, index) in swiperList" :key="index" class="imgload">
					<view class="swiper-item">
						<image :src="item.img" mode="aspectFill"></image>
					</view> 
				</swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"  @tap="dotclick(index)">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 课程信息 -->
		<view class="s-list">
			<view class="product-item">
				<view class="price">
					<text class="txtt">￥</text>
					<text class="tint">{{product.price}}</text>
					<text class="txt" v-if="product.unit"> / {{product.unit}} </text>
					<!-- <text class="pretxt"> ￥{{product.preprice}} </text> -->
					<view v-if="ifcollect" class="collect" @tap="collectDo">
						<uni-icons type="star-filled" size="18" color="#89965f"></uni-icons>
						<text class="txt">已收藏</text>
					</view>
					<view v-else class="collect" @tap="collectDo">
						<uni-icons type="star" size="18" color="#89965f"></uni-icons>
						<text class="txt">加入收藏</text>
					</view>
				</view>
				<view class="hnacon">
					<view v-if="product.tip" class="btn">
						{{product.tip}}
					</view>
					<text class="title">
					{{product.name}}
					</text>
				</view>
				<view v-if="product.remarks" class="tag">
				  	{{product.remarks}} 
				</view>
			</view>
			<view class="pjcon">
				<view class="pjitem">
					<view class="pjyg">评价（{{product.pjnum}}）</view>
					<view class="srpj" v-if="product.pjnum>0">
						查看全部评价<uni-icons type="forward" color="#b3b3b3" size="20"></uni-icons>
					</view>
				</view>
				<view class="pjitem" v-if="product.pjnum>0">
					<view class="pjr">
						<image class="img" :src="product.pjrimg"></image>
						<text class="ptxt">{{product.pjname}}</text>
						<text class="ptxt">{{product.pjdate}}</text>
					</view>
				</view>
				<view class="pjitem">
					{{product.pjcontent}}
				</view>
			</view>
			<view>
				<button type="primary" class="cbtn" @tap="gotoCourse()">课程表</button>
			</view>
			<view class="ocen">
				<view class="title">课程信息</view>
				<!-- <view v-if="product.list.length>0" class="icell" v-for="(cell, ii) in product.list" :key="ii">
					<text class="iname">{{cell.name}}</text>
					<text class="itxt">{{cell.text}}</text>
				</view> -->
				<view class="icell" v-if="product.brandName">
					<text class="iname">品牌名</text>
					<text class="itxt">{{product.brandName}}</text>
				</view>
				<view class="icell" v-if="product.productCategoryName">
					<text class="iname">商品分类</text>
					<text class="itxt">{{product.productCategoryName}}</text>
				</view>
			</view>
		</view>
		
		<!-- 课程详情 -->
		<view class="s-list1">
			<scroll-view scroll-x style="width: 100%;" scroll-with-animation>
				<view class="mlist">
					<view class="tabicl" :class="0==tabCurrentIndex?'cur':''" @tap="tabSelect(0)">
						<view class="ptext">课程详情</view>
						<view class="pline"></view>
					</view>
				</view>
			</scroll-view>
			<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish">
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 课程详情 -->
						<view class="info-content">
							<!-- 课程详情 -->
							<mp-html v-if="sphtml" :content="sphtml" :selectable="true" :show-img-menu="true" :scroll-table="true" :markdown="true" :lazy-load="false"/>
							<image  v-for="(item, index) in swiperList" :key="index" style="width: 100%;height: 560rpx;margin-bottom: 20rpx;" :src="item.img"></image>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- <swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="info-content" v-if="html">
							<mp-html :content="html" :selectable="true" :show-img-menu="true" :scroll-table="true" :markdown="true" :lazy-load="false"/>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="info-content" v-if="html1">
							<mp-html :content="html1" :selectable="true" :show-img-menu="true" :scroll-table="true" :markdown="true" :lazy-load="false"/>
						</view>
					</scroll-view>
				</swiper-item> -->
			</swiper>
		</view>
		
		<!-- 底部菜单 -->
		<view class="submitcon">
			<view class="skipbtn">
				<view class="sitem" @tap="gotoHome">
					<uni-icons type="shop" size="24" color="#919191"></uni-icons>
					<view class="txt">首页</view>
				</view>
				<view class="sitem" @tap="gotoSevice">
					<uni-icons type="headphones" size="24" color="#919191"></uni-icons>
					<view class="txt">客服</view>
				</view>
				<view class="sitem" @tap="gotoCart">
					<uni-icons type="cart" size="25" color="#919191"></uni-icons>
					<view class="txt">购物车</view>
					<view class="cnum">{{cartnum}}</view>
				</view>
			</view>
			<button type="primary" class="bbtn" @tap="gobuy($event,1)" data-img="/static/image/cart.png">加入购物车</button>
			<button type="primary" class="bbtn1" @tap="gobuy($event,2)">立即购买</button>
		</view>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		<!-- cart 购物车-->
		<cart ref="cartId" x="0.18" y="1.08" @addShopCar="addShopCar" :pdata="product" :ptype="buyType"></cart>
		
		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
		<shopCarAnimation ref="carAnmation" cartx="0.18" carty="1.08"></shopCarAnimation>
		
	</view>
</template>

<script>
	import { myCache,getcartNum,getRemoteFile,getRemoteHtmlFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	import cart from "../components/cart.vue";
	//  加入购物车动画组件
	import shopCarAnimation from '@/components/fly-in-cart/fly-in-cart.vue'
	export default {
		components: {
		  openlogin,top,service,cart,shopCarAnimation
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				swiperCurrent: 0,
				ifcollect:false,
				info: [
					{
						colorClass: 'uni-bg-red',
						url: '../../static/image/index/p6.jpg',
						content: '内容 A'
					}
					 
				],
				// 商品图片
				swiperList: [
					// { 
					// 	id: 0,
					// 	img: '../../static/image/theme/p9.png',
					// },
					// {
					// 	id: 2,
					// 	img: '../../static/image/theme/t1.jpg',
					// },
					// {
					// 	id: 3,
					// 	img: '../../static/image/theme/p10.jpg',
					// }
				],
				cartnum:getcartNum(), // 购物车数量
				product:{
					id:2,
					productId:2,
					name:"瑜伽入门 | 精品团课",
					remarks:"入门瑜伽教程-好物集结,大牌汇聚,放心购!在线下单,退换无忧,快来选购吧!超多品牌,好物集结,放心买好物,尽在淘宝,淘你满意!",
					price:99,
					preprice:245,
					unit:"",
					type:'2',
					list:[
						{
							name:"规格",
							text:"3节"
						},
						{
							name:"有效时间",
							text:"2025-04-01至2025-05-01"
						},
						{
							name:"可参加课程",
							text:"哈他瑜伽小班课/健康减脂小班课/普拉提小班课"
						},
						{
							name:"上课地址",
							text:"沈阳市沈北新区X大街888号"
						}
					],
					tip:"精品",
					pjnum:203,
					pjrimg:'../../static/image/ibg.png',
					pjname:'小梅花',
					pjdate:'2025-06-26',
					pjcontent:'环境好，教练水平高，给出了好评。',
					img:'../../static/image/theme/p1.jpg',// 详情
					img1:'../../static/image/theme/p2.jpg',// 规格图片
					quantity:1, // 商品数量
					ifspec:'1',
					sels:"",
					specs:[
						{
							id:1,
							name:"课时",
							sels:0,
							list:[
								{
									id:11,
									name:"10课时"
								},
								{
									id:12,
									name:"20课时"
								},
								{
									id:13,
									name:"30课时"
								},
								{
									id:14,
									name:"50课时"
								},
							]
						}
					],
				},
				buyType:1,
				html:"",
				html1:"",
				sphtml:"课程介绍",
				tabCurrentIndex:0,
				id:''
			};
		},
		onLoad(option) {
			if(option.id&&option.id!=='undefined'){
				this.id=option.id;
				this.loadinfo();
			}
			else{
				uni.showModal({
					title: '提示',
					content: '当前商品不存在..',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						// 返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
		},
		onShow() {
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
		},
		mounted() {
			if(this.userid==""||this.userid=="0"){
				this.$refs.loginId.open();
			}
			else{
				this.getcollect();
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onReachBottom() {
			console.log('onReachBottom');
			//  this.loadData();
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			goservice(val){
				console.log(val);
			},
			dotclick(index){
				this.swiperCurrent = index;
				this.$forceUpdate();
			},
			change(e) {
				this.swiperCurrent = e.detail.current;
				this.$forceUpdate();
			},
			clickItem(e) {
				this.swiperCurrent = e
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
					return false;
				}
				else{
					return true;
				}
			},
			async getcollect(){
				const {data: res} = await uni.$http.post('/api/userFavorite/existsByProductId', {productId:this.id});
				if(res&&res.data){
					this.ifcollect=true;
					this.$forceUpdate();
				}
			},
			async collectDo(){
				if(this.iflogin()){
					if(this.ifcollect){
						// 取消收藏 
						uni.showLoading({
							title: '操作中...'
						});
						const {data: res} = await uni.$http.post('/api/userFavorite/removeFavorite', {productId:this.id});
						console.log(res)
						if(res&&res.data){
							uni.showToast({
								title: '已取消收藏！',
								icon: 'success',
								duration: 2000
							}) 
							this.ifcollect=!this.ifcollect;
							this.$forceUpdate();
						}
						else{
							uni.showToast({
								title: res.msg? res.msg:'收藏操作失败！',
								icon: 'error',
								duration: 2000
							}) 
						}
					}
					else{
						// 加入收藏
						uni.showLoading({
							title: '操作中...'
						});
						const {data: res} = await uni.$http.post('/api/userFavorite/add', {productId:this.id});
						console.log(res)
						if(res&&res.data){
							uni.showToast({
								title: '已加入收藏！',
								icon: 'success',
								duration: 2000
							}) 
							this.ifcollect=!this.ifcollect;
							this.$forceUpdate();
						} 
						else{
							uni.showToast({
								title: res.msg? res.msg:'收藏操作失败！',
								icon: 'error',
								duration: 2000
							}) 
						}
					}
				}
			},
			async loadinfo(){
				// 详情
				uni.showLoading();
				try{
					const {data: res1} = await uni.$http.get('/api/product/detail/'+this.id);
					if (res1&&res1.product) {
						
						var product=res1.product;
						// (parseFloat(price)).toFixed(2);
						
						// 图片
						var pics=product.albumPics?product.albumPics.split(','):[];
						pics.forEach((cell,idx)=>{
							this.swiperList.push({
								id: idx+1,
								img:cell?getRemoteFile(cell):'../../static/image/nopic.jpg',
							})
						});
						
						this.product={
							storeNmae:myCache('myshop'),// 所属门店
							id:product.id, // 商品id
							productId:product.id, // 商品id
							name:product.name, // 商品名称
							productName:product.name, // 商品名称
							unit:product.unit,
							weight:product.weight, // 重量，默认克
							instructor:product.instructor, // 教练id
							brandName:product.brandName, //  
							productCategoryName:product.productCategoryName, //  
							isCourse:product.isCourse, // 
							price:product.price, // 价格
							pic:product.pic?product.pic:'',// 详情
							img:product.pic?product.pic:'',// 详情
							img1:product.pic?getRemoteFile(product.pic):'../../static/image/imgicon.png', // 规格图片 商品详情默认图片
							state:product.showStatus, // 1：已上架  2：审核中  3：已下架  4：未通过  5：草稿
							customerService:product.scustomerService,// 客服id
							pjnum:0, // 总评价数量
							quantity:1, // 商品数量
							ifspec: res1.skus&&res1.skus.length>0?'1':'0',
							skuId:"", //当前选中id
							sels:"", //当前选中
							specs:[],
							skus:res1.skus,
							spData:'',
							stock:product.stock?product.stock:1000, //商品库存
						}
						// pjrimg:'../../static/image/ibg.png',
						// pjname:'小梅花',
						// pjdate:'2026-06-26',
						// pjcontent:'该用户觉得商品很好，给出了好评。',
						
						// 商品详情
						this.sphtml=product.detailMobileHtml?getRemoteHtmlFile(product.detailMobileHtml):'';
						this.$forceUpdate();
						
						// productAttr 规格
						var productAttr= JSON.parse(product.productAttr);
						if(productAttr&&productAttr.length>0){
							productAttr.forEach((cell,ii)=>{
								var list=[];
								cell.options.forEach((item,kk)=>{
									if(item.name){
										list.push({name:item.name,id:kk})
									}
								});
								this.product.specs.push({
									id:ii,
									name:cell.name,
									sels:0,
									list:list
								});
								this.$forceUpdate();
							});
						}
						this.$forceUpdate();
						
						// 规格默认选中
						this.selinit();
					}
					else{
						uni.showModal({
							title: '提示',
							content: '当前商品不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					console.log(e)
				}
			},
			selinit(){
				// 初始化
				if(this.product.specs&&this.product.specs.length>0){
					var sels='',spData={};
					this.product.specs.forEach((cell,idx)=>{
						if(cell.list&&cell.list[cell.sels]){
							sels=sels+cell.list[cell.sels].name+' ';
							spData[cell.name]=cell.list[cell.sels].name;
						}
					});
					this.product.sels=sels;
					this.product.skus.forEach(cell=>{
						if(cell.spData==JSON.stringify(spData)){
							this.product.skuId=cell.id;
							this.product.spData=cell.spData;
							this.product.price=cell.price;
							this.product.img=cell.pic?getRemoteFile(cell.pic):this.product.img1;
							this.product.img1=cell.pic?getRemoteFile(cell.pic):this.product.img1;
							this.product.stock=cell.stock;//库存
							if(this.product.quantity>this.product.stock){
								this.product.quantity=this.product.stock
							}
							else if(this.product.quantity==0&&this.product.stock>0){
								this.product.quantity=1
							}
						}
					});
					this.$forceUpdate();
				}
				else{
					this.product.sels='';
					this.product.skuId=null;
					this.$forceUpdate();
				}
			},
			// 加入购物车
			addShopCar(sels,quantity,buyType){
				console.log("mycartlist1,",myCache("mycartlist"));
				if(sels){
					this.product.sels=sels;
					this.product.quantity=quantity;
					this.$forceUpdate();
					if(buyType==1){
						// 已加入购物车动画
						this.cartnum=getcartNum();
						this.$forceUpdate();
					}
					else{
						// 跳转去立即购买
						uni.navigateTo({
							url: `/pages/order/order?type=buy`
						});
					}
				}
				else{
					if(buyType==1){
						uni.showToast({
							title: '加入购物车失败！请重试！',
							icon: 'error',
							duration: 2000
						});
					}
					else{
						uni.showToast({
							title: '立即购买失败！请重试！',
							icon: 'error',
							duration: 2000
						});
					}
				}
			},
			// 加入购物车/立即购买
			async gobuy(e,type){
				if(this.userid==""||this.userid=="0"){
					// 去登录
					this.$refs.loginId.open();
				}
				else{
					this.buyType=type;
					if(this.product.ifspec=='1'){
						// 是规格商品
						this.$refs.cartId.show();
					}
					else{
						// 非规格商品直接加入购物车
						if(type==1){
							// 加入购物车动画
							var param={
								productId:this.product.productId,
								productName:this.product.name,
								pic:this.product.img,
								spData:this.product.spData,
								skuId:this.product.skuId,
								quantity:this.product.quantity,
								storeId:myCache('myshopid')?myCache('myshopid'):'',
								isCourse:this.product.isCourse,
							};
							// 加入购物车
							const {data: res1} = await uni.$http.post('/api/cart/add',param);
							if (res1) {
								this.$refs.carAnmation.touchOnGoods(e);
								// 缓存购物车
								this.updatecart();
							}
							else{
								uni.showModal({
									title: '提示',
									content:  res1.message? res1.message:'加入购物车失败！请稍候再试',
									cancelText: '取消',
									confirmText: '确定',
								});
							}
							
						}
						else{
							// 去购买
							this.product["buy"]='1';
							var setcart= JSON.parse(JSON.stringify(this.product))
							myCache('buycartList',setcart);
							// 跳转订单结算
							uni.navigateTo({
								url: `/pages/product/order?type=buy`
							});
						}
					}
				}
			},
			async updatecart(){
				try{
					const {data: res } = await uni.$http.get('/api/cart/list');
					if (res&&res.length>0) {
						// 购物车缓存
						myCache("carts",res);
						this.cartnum=getcartNum();
						this.$forceUpdate();
					}
				}
				catch(e){
					console.log(e)
				}
			},
			gotoBack(){
				// 返回
				uni.navigateBack({
					delta: 1
				});
			},
			gotoBuy(){
				// 跳转订单结算
				uni.navigateTo({
					url: `/pages/product/order?type=buy`
				});
			},
			gotoHome(){
				// 跳转 首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			gotoCart(){
				// 跳转 购物车
				uni.switchTab({
					url: `/pages/cart/cart`
				});
			},
			gotoSevice(){
				// 在线客服
				uni.navigateTo({
					url: `/pages/product/service`
				});
			},
			gotoCourse(){
				// 课程表
				uni.navigateTo({
					url: `/pages/teacher/course?type=2&name=${this.product.name}&id=${this.id}`
				})
			},
			tabSelect(i) {
				console.log(i)
				this.tabCurrentIndex = i;
			},
			animationfinish({ detail: { current } }) {
				this.tabCurrentIndex = current;
			},
			scroll: function(e) {
				console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
					}, 300);
				}
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
	}
	.fixhead{
		position: fixed;
		top:0;
		left:0;
		z-index: 999;
		display: flex;
		flex-direction: row;
		padding-left: 35rpx;
		width: 100%;
		background-color: #FFF;
		align-items: center;
	}
	.search{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 500rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border:1rpx solid #ddd;
		padding-left: 30rpx;
		margin-left: 20rpx;
		.txt{
			margin-left: 20rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #666;
		}
	}
	.container{
		margin: 0;
		position: relative;
		.dots {
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.dot {
				width: 70rpx;
				height: 70rpx;
				transition: all .6s;
				background: rgba(255, 255, 255, .3);
				margin-right: 10rpx;
				border-radius: 10rpx;
				background: rgba(243, 244, 239, .8);
				border:5rpx solid rgba(195, 196, 197, .7);
			}
			.active {
				width: 77rpx;
				height: 77rpx;
				border:5rpx solid #fff;
			}
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
				border-radius: 10rpx;
			}
		}
	}
	
	.tips{
		display: flex;
		flex-direction: row;
		margin: 0;
		align-items: center;
		justify-content: flex-start;
		padding: 16rpx 10rpx;
		background-color: #f3f4ef;
		.tip{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			margin-right: 15rpx;
			.tip-img{
				width: 40rpx;
				height: 40rpx;
			}
			.tip-txt{
				margin-left: 5rpx;
				font-size: 22rpx;
				color: #666;
			}
		}
	}
	
	/* 弹框 */
	.allcon{
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		.gcon{
			display:flex;
			align-items:center;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;
			image{
				flex-shrink: 0;
				width: 150rpx;
				height: 150rpx;
				border-radius: 6rpx;
				border: 1rpx solid #eee;
				margin-right: 20rpx;
			}
			.tit-box{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.price{
				line-height: 1;
				color: #89965f;
				.txt{
					font-size: 30rpx;
				}
				.tint{
					font-size: 42rpx;
					font-weight: 600;
				}
			}
			.tit{
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 1.3;
			}
			.tit2{
				font-size: 24rpx;
				color: #909399;
				margin-top: 10rpx;
			}
		}
		.selcon{
			position: relative;
			padding: 20rpx 0;
			.spcitem{
				padding: 0 20rpx 0 20rpx;
				display: flex;
				flex-direction: column;
				.spcname{
					line-height: 70rpx;
					color: #000;
					font-size: 28rpx;
				}
				.spcul{
					display: flex;
					flex-direction: row;
					flex-flow: wrap;
					.spcli{
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
						border: 1rpx solid #eee;
						font-size: 26rpx;
						color: #000;
						background: #FFF;
						margin-right: 20rpx;
						border-radius: 6rpx;
						margin-bottom: 20rpx;
					}
					.spcli.cur{
						background: #dceef7;
						border: 1rpx solid #89965f;
						font-weight: 600;
					}
					.spclilong{
						height: 66rpx;
						line-height: 66rpx;
						padding: 0 20rpx;
						border: 1rpx solid #eee;
						font-size: 26rox;
						color: #000;
						background: #FFF;
						margin-right: 20rpx;
						border-radius: 6rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex:1;
						justify-content: space-between;
					}
					.spclilong.cur{
						background: #dceef7;
						border: 1rpx solid #89965f;
						font-weight: 600;
					}
				}
			}
		}
		.numcon{
			padding: 10rpx 20rpx 40rpx 20rpx;
			display: flex;
			justify-content: space-between;
			.ntip{
				font-size: 28rpx;
				color: #000;
			}
			.nadc{
				margin-right: 20rpx;
			}
		}
		.sbtn{
			margin: 20rpx 30rpx 54rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
			width: 690rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #89965f;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			opacity: 1;
			&::after{
				border:none;
			}
		}
		.sbtn1{
			margin: 20rpx 30rpx 54rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
			width: 690rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #55690e;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			opacity: 1;
			&::after{
				border:none;
			}
		}
	}
	/* banner */
	.product {
		height: 750rpx;
		width: 750rpx;
		margin: 0 0 0 0;
		.swiper-item,
		image {
			margin: auto;
			height: 100%;
			width: 100%;
		}
	}
	.explain {
		height: 500rpx;
		width: 710rpx;
		margin: 0 20rpx 20rpx 20rpx;
		.swiper-item,
		image {
			margin: auto;
			height: 100%;
			width: 100%;
		}
	}
	::v-deep .uni-popup{
		z-index: 999;
	}
	::v-deep .explain .uni-swiper-dot-active {
	    width: 36rpx !important;
	    border-radius: 5rpx !important;
	}
	.info-content{
		padding: 30rpx;
		line-height: 1.5;
		color:#666;
		font-size: 28rpx;
		letter-spacing: 1rpx;
	}
	.submitcon{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 60rpx 2rpx rgba(1,31,63,0.1);
		opacity: 1;
		display: flex;
		flex-direction: row;
	}
	.skipbtn{
		height: 76rpx;
		opacity: 1;
		color: #23262F;
		margin-top: 16rpx;
		padding-top: 20rpx;
		display: flex;
		flex: 1;
		flex-direction: row;
		.sitem{
			min-width: 60rpx;
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;
			justify-content: center;
			align-items: center;
			position: relative;
			.txt{
				line-height: 30rpx;
				font-size: 22rpx;
				color: #909399;
			}
			.cnum{
				position: absolute;
				top:-28rpx;
				left:45rpx;
				height: 36rpx;
				line-height: 36rpx;
				min-width: 32rpx;
				border-radius: 50%;
				background: #f7362d;
				color:#fff;
				font-size: 26rpx;
				padding: 0 9rpx;
			}
		}
	}
	.cbtn{
		margin: 20rpx 0;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.bbtn{
		margin: 20rpx 10rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 220rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.bbtn1{
		margin: 20rpx 20rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 210rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #55690e;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - 360rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	
	.mlist{
		width: 100%; 
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.tabicl{
		width: 25%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.ptext{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #A0A0A0;
		height: 76rpx;
	}
	.cur .ptext{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #89965f;
	}
	.cur .pline{
		width: 40rpx;
		height: 6rpx;
		background: #89965f;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
	}
	.pjcon{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #f9faf7;
		border: 1rpx solid #eeefe8;
		justify-content: center;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.pjitem{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.pjyg{
			display: flex;
			flex: 1;
			font-size: 30rpx;
			color: #1f1f1f;
		}
		.srpj{
			display: flex;
			align-items: center;
		}
		.pjr{
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			.ptxt{
				font-size: 28rpx;
				color:#959694;
				margin-left: 10rpx;
			}
			.img{
				height: 50rpx;
				width: 50rpx;
			}
		}
	}
	.secon{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background: #f9faf7;
		border: 1rpx solid #eeefe8;
		align-items: center;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.seyg{
			display: flex;
			flex: 1;
			font-size: 28rpx;
			color: #1f1f1f;
		}
	}
	.s-list1{
		margin: 6rpx 0  150rpx 0;
		background: #FFF;
		background-image: radial-gradient(#f5f5f5, #ffffff, #f0f0f0);
	}
	.s-list{
		padding: 20rpx 30rpx;
		background: #FFF;
		.icell{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 20rpx;
			.iname{
				font-size: 26rpx;
				color: #aaa;
				width: 200rpx;
			}
			.itxt{
				display: flex;
				flex: 1;
				color: #000;
				font-size: 26rpx;
			}
		}
		.product-item{
			position: relative;
			display: inline-block;
			overflow: hidden;
			width: 100%;
			margin-right: 20rpx;
			padding-bottom: 10rpx;
		}
		.ocen{
			padding:0 20rpx 10rpx 20rpx;
			background: #fafafa;
			border-radius: 20rpx;
			.title{
				font-size: 28rpx;
				color: #000;
			}
		}
		.hnacon{
			width: 100%;
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
		}
		.tag{
			color: #999999;
			font-size: 26rpx;
		}
		.btn {
			height: 40rpx;
			line-height: 40rpx;
			color: #fff;
			font-size: 22rpx;
			background: #89965f;
			border-radius: 20rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
		}
		.title{
			line-height: 80rpx;
			color: #000;
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.price{
			line-height: 1;
			display: flex;
			flex-direction: row;
			align-items: baseline;
			.txtt{
				font-size: 24rpx;
				color: #89965f;
				margin-right: 10rpx;
			}
			.txt{
				font-size: 28rpx;
				color: #000000;
				margin-left: 10rpx;
			}
			.tint{
				font-size: 42rpx;
				font-weight: 600;
				color: #89965f;
			}
			.pretxt{
				color: #959694;
				font-size: 28rpx;
				text-decoration:line-through;
				margin-left: 30rpx;
			}
			.collect
			{
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: flex-end;
				.txt{
					color: #89965f;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.s-header{
		display:flex;
		flex-direction: row;
		align-items:center;
		height: 100rpx;
		padding: 6rpx 0;
		image{
			flex-shrink: 0;
			width: 55rpx;
			height: 55rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: row;
		}
		.tit{
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.9);
			line-height: 1.3;
		}
		.tit2{
			font-size: 26rpx;
			color: #bababa;
			margin-left: 30rpx;
			margin-top: 6rpx;
		}
	}
	
	/* 为你推荐 */
	.f-header{
		display:flex;
		align-items:center;
		height: 140rpx;
		padding: 6rpx 0;
		image{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.9);
			line-height: 1.3;
		}
		.tit2{
			font-size: 24rpx;
			color: #909399;
		}
	}
	.f-list {
		margin: 20rpx 20rpx 20rpx 20rpx;
		padding:0 20rpx 20rpx 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		.guess-section{
			display:flex;
			flex-wrap:wrap;
			padding: 0;
			background: #fff;
			.guess-item{
				display:flex;
				flex-direction: column;
				width: 48%;
				padding-bottom: 30rpx;
				&:nth-child(2n+1){
					margin-right: 4%;
				}
			}
			.image-wrapper{
				width: 100%;
				height: 330rpx;
				border-radius: 3px;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			.title{
				line-height: 80rpx;
				color: #000000;
				font-size: 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.price{
				line-height: 1;
				color: #89965f;
				.txt{
					font-size: 30rpx;
				}
				.tint{
					font-size: 42rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>