caimei-applets-caimei/pages/goods/product.vue

<template>
	<view class="product">
		<header-poduct  v-if="isHeaderPoduct"
						:systeminfo='systeminfo' 
						:navbar-data='nvabarData' 
						:headerBtnPosi ="headerBtnPosi" 
						:headerColor="headerColor" 
						:type="isShareType"
						:page='backPage'>
		</header-poduct>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="9"></tui-skeleton>
		<view class="container-product tui-skeleton">
			<view class="product-top">
				<view class="banner-section">
					<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
						<swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :duration='800' :autoplay="false" :circular="false" >
							<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
								<image :src="item" @click="previewImg(index)" />
							</swiper-item>
						</swiper>
						<view class="swiper__dots-box">
							<view v-for="(item,idx) in productImage" 
								  :key="idx" 
								  :class="[idx===current?'swiper__dots-long':'none']" 
								  :data-index="current" class="swiper__dots-item">
							</view>	  
						</view>
					</uni-swiper-dot>
				</view>
				<view class="product-wrap clearfix">
					<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
						<view class="p-title tui-skeleton-fillet">
							{{product.name == undefined ? '' : product.name}}
						</view>
						<view class="wrap-top-price" v-if="!goodsData.isNoneDisabled">
							<view v-if="!hasLogin" class="p-login grade  tui-skeleton-fillet">
								<text class="p-no">价格:</text>
								<uni-stars :stars="parseInt(product.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
							</view>
							<view v-if="!hasLogin" class="p-login tui-skeleton-fillet">
								<text @click.stop="navToLogin">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
							</view>
							<view class="wrap-main" v-else>
								<view class="wrap-main-pricenone" v-if="product.price1TextFlag == 1">
									<text>该商品尚未公开价格，请联系客服购买</text>
								</view>
								<view class="wrap-main-price" v-else>
									<view class="p-main" v-if="ladderPriceFlag == '0' || product.actFlag == 1">
										<view class="p-price tui-skeleton-fillet">
											<text class="txt sm">￥</text>
											<text class="txt big">{{retailPrice}}</text>
											<text class="txt big">{{smallMoney== '0'?'.00':smallMoney}}</text>
										</view>
										<view class="p-minBuy">
											起订量:
											<text class="min-text">{{minBuyNumber}}</text>
										</view>
									</view>
									<view class="wrap-ladder" v-else>
										<view class="ladder-text">
											<text class="ladder-h1">说明：</text>
											<text class="ladder-p">本商品有以下优惠购物方案</text>
										</view>
										<view class="ladder-main tui-skeleton-fillet">
											<view class="ladder-left">
												<view class="ladder-b">起订量:</view>
												<view class="ladder-b">价格:</view>
											</view>
											<view class="ladder-right">
												<view class="ladder-li" v-for="(ladder,index) in  ladderPriceList" :key="index">
													<view class="ladder-a">{{ladder.buyNumRangeShow}}</view>
													<view class="ladder-a">￥{{ladder.buyPrice.toFixed(2)}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wrap-label" v-if="product.tagsList.length>0">
						<view class="label-a tui-skeleton-fillet" v-for="(label,index) in  product.tagsList" :key="index">{{label}}</view>
					</view>
					<view class="wrap-label"  v-if="goodsData.isNoneDisabled">
						<view class="isLower">此商品已{{disabledText}}，请浏览以下推荐商品~</view>
					</view>
					<view class="wrap-info">
						<view class="info-viewT" :class="goodsData.isNoneDisabled ? 'none' : ''">
							<view class="info-viewL tui-skeleton-fillet">品牌：<text>{{product.brandName == null? '其他' : product.brandName}}</text></view>
							<view class="info-viewR tui-skeleton-fillet">包装规格：<text>{{product.unit}}</text></view>														
						</view>
					</view>
					<view class="wrap-seve" :class="goodsData.isNoneDisabled ? 'none' : ''">
						<text class="tui-skeleton-rect">服务：</text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
					</view>
				</view>			
			</view>
			<view class="product-details">
				<!-- 头部 -->
				<view  v-if="goodsData.isNoneDisabled" class="navbar" :class="navbarFiexd"
					 :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
					<view class="nav-item tui-skeleton-fillet" v-for="(item,index) in  disabledTabNavList" :key="index" :class="{ current: tabCurrentIndex === index+2 }" @click="tabClick(index+2)">
						<text class="line"></text>
						<text>{{item.name}}</text>
					</view>					
				</view>
				<view v-else class="navbar" :class="navbarFiexd" 
					 :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
					<view class="nav-item tui-skeleton-fillet" v-for="(item,index) in  tabNavList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
						<text class="line"></text>
						<text>{{item.name}}</text>
					</view>					
				</view>
				<!-- 商品详情,供应商详情展示,相关推荐,评价-->
				<view class="content tui-banner tui-skeleton-rect" v-if="tabCurrentIndex === 0">
					<parser :html="html" :img-mode="widthFix"></parser>
				</view>
				<view class="content sup" v-if="tabCurrentIndex === 1">
					<supplier-details :shop="shop"></supplier-details>
				</view>
				<view class="content hot" v-if="tabCurrentIndex === 2">
					<recommend :query-productid="product.productID" v-if="isRecommend"></recommend>
				</view>
				<view class="content hot" v-if="tabCurrentIndex === 3">
					<evaluate :query-productid ="product.productID" v-if="isEvaluate"></evaluate>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="menu" v-if="userIdentity!=1">
				<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
					<view class="bottom-le">
						<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/home')">
							<image src="../../static/icon-home-active@3x.png"></image>
							<text>首页</text>
						</view>
						<view class="item-bt">
							<!-- #ifdef MP-WEIXIN -->
							<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
								<image src="../../static/severs@3x.png"></image>
								<text>客服</text>
							</button>	
							<!-- #endif -->
						</view>
						<view class="item-bt" @click="buyProductCart()">
							<image src="../../static/icon-cart-active@3x.png"></image>
							<text>购物车</text>
							<text  	v-if="hasLogin"
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
									:class="[goodsData.cartCount < 10 ? 'goleft':'']">
									{{ goodsData.cartCount >= 100 ? '99+': goodsData.cartCount}}
							</text>
							<view class="animation-num"  :class="isAnimation ? 'animation' : 'restion'">+1</view>
						</view>
					</view>
					<view class="bottom-ri">
						<button  
								:disabled="goodsData.disabled" 
								class="btn btn-cart" 
								:class="[goodsData.disabled ? 'disabled':'']"
								@tap.stop="btnGetConfirm('add')">加入购物车</button>
						<button  
								:disabled="goodsData.disabled" 
								class="btn btn-bay" 
								:class="[goodsData.disabled ? 'disabled':'']"
								@tap.stop="btnGetConfirm('buy')">立即购买</button>
					</view>
				</view>	
			</view>
			<!--底部选择模态层弹窗组件 -->	
			<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<view class="layer" @tap.stop="discard">
					<view class="content">
						<view class="layer-smimg">
							<image :src="product.mainImage" mode=""></image>
						</view>
						<view class="layer-nunbox">
							<view class="layer-nunbox-t">
								<view class="layer-nunbox-text">数量:</view>
								<view class="number-box">
									<view  class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
									<input class="btn-input" type="number" v-model="number" maxlength='4'  @blur="changeNumber($event)">
									<view  class="iconfont icon-jiahao"  :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
								</view>
							</view>
							<view class="layer-nunbox-b">
								<view class="text">单价:
									<text class="p sm">￥</text>
									<text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import headerPoduct from '@/components/module/headerNavbar/header-poduct' 		 //自定义导航
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import parser from "@/components/jyf-Parser/index" //富文本处理
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import supplierDetails from "@/components/module/productDetails/supplierDetails" //供应商详情
	import recommend from "@/components/module/productDetails/recommend" //供应商详情
	import evaluate from "@/components/module/productDetails/evaluate" //供应商详情
	import { queryProductDetils } from "@/api/product.js" 
	import { shoppingAddCart } from "@/api/cart.js" 

	var isPreviewImg;
	export default{
		components:{
			headerPoduct,
			parser,
			tuiSkeleton,
			supplierDetails,
			recommend,
			evaluate
		},
		data(){
			return{			
				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
				tabNavList:[{name:'商品详情'},{name:'供应商细信息'},{name:'相关推荐'},{name:'评价'}],
				disabledTabNavList:[{name:'相关推荐'},{name:'评价'}],
				mode:'round',
				specClass: '',//规格弹窗css类，控制开关动画
				isBtnType:'',
				current:0,
				isShareType:'',
				isHeaderPoduct:false,
				navbarFiexd:'none',
				ladderPriceFlag:'',
				ladderPriceList:'',
				isRecommend:false,
				isEvaluate:false,
				isAnimation:false,
				skeletonShow:true,
				isQuantity:false,
				isStock:false,
				disabled:false,
				isNoneDisabled:false,
				disabledText:'',
				tabCurrentIndex:0,
				userID:'',
				productID:0,
				userIdentity:'',//用户类型
				goodsData:{},//自定义数据
				shop:{},//供应商信息
				product:{},//采美
				productImage:[],
				retailPrice:0,
				buyRetailPrice:0,
				stock:0,
				number:0,
				minBuyNumber:0,
				productsList:[],
				goodListData:[],
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				windowHeight: '',
				headerColor:false,
				backPage:1,
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: ''		// 导航栏 中间的标题
				}
			}
		},
		onLoad(option) {
			this.productID = option.id;//获取商品ID
			this.isShareType = option.type
			this.isHeaderPoduct = true
			console.log(this.isShareType)
			if(option.page == 2){
				this.backPage = option.page
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			initData(){// 初始化商品详情查询
				queryProductDetils({userId:this.userID,productID:this.productID}).then(response =>{	
					this.skeletonShow = false
					this.productImage=[];
					this.shop = response.data.shop
					this.product = response.data
					this.ladderPriceFlag = this.product.ladderPriceFlag;
					this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
					this.stock = this.product.stock
					this.number = this.product.minBuyNumber
					this.minBuyNumber = this.product.minBuyNumber
					//处理商品图片列表
					this.product.imageList.forEach(item =>{
						this.productImage.push(item.image);
					})
					//购物车数量
					if(this.product.productCount>0){
						this.goodsData.cartCount = this.product.productCount
					}
					//处理阶梯价格
					if(this.product.ladderPriceList!=null){
						this.ladderPriceList = this.product.ladderPriceList;
					}
					//拆分金额并转千分位格式显示
					if(this.product.retailPrice!=null){
						this.retailPrice = this.product.retailPrice.toFixed(2);
						//处理除阶梯价格以外的购买价格
						// if(this.ladderPriceFlag == '0' || this.product.actFlag == 1){
						this.buyRetailPrice = this.product.retailPrice;
					}
					// }
					//处理下架商品和售罄商品
					if(this.product.validFlag =='3' || this.stock == 0 ){
						this.disabled = true
						this.isNoneDisabled = true
						this.tabCurrentIndex = 2;// 页面显示是默认选中第一
						this.isRecommend = true
						this.disabledText = '下架'
					}else{
						this.disabled = false
						this.isNoneDisabled = false
						this.tabCurrentIndex = 0;// 页面显示是默认选中第三
						this.disabledText = ''
					}
					if(this.product.price1TextFlag == 1){
						this.disabled = true
					}
					this.goodsData.disabled = this.disabled
					this.goodsData.isNoneDisabled = this.isNoneDisabled
					if(this.product.validFlag =='3'){
						this.disabledText = '下架'
					}
					if(this.stock == 0){
						this.disabledText = '售罄'
					}
				}).catch(response =>{
					this.$util.msg(response.msg,2000);
				})
			},
			swiperChange(e) {//顶部商品图片切换
				const index = e.detail.current;
				this.current = index;
			},
			previewImg (index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = this.productImage
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
			tabClick(index) {//商品详情&&供应商信息tab切换
				this.tabCurrentIndex = index;
				if(this.tabCurrentIndex == 2){
					console.log(this.product.productID)
					this.isRecommend = true
				}
				if(this.tabCurrentIndex == 3){
					this.isEvaluate = true
				}
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			handleContact(e){//跳转小程序客服
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			buyProductCart(){//底部购物车按钮点击
				if(this.hasLogin){
					this.$api.switchTabTo('/pages/tabBar/cart/cart')
				}else{
					this.$api.navigateTo('/pages/login/login-accont?type=1')
				}
			},
			btnGetConfirm(type){//加入购物车&&立即购买点击
				if(this.hasLogin){
					this.showSpec(type);
				}else{
					this.$api.navigateTo('/pages/login/login-accont?type=1')
				}
			},	
			changeCountAdd(){//popup弹窗数量增加按钮
				this.number++
				this.processActivityPrice()
			},
			changeCountSub(){//popup弹窗数量减按钮
				if(this.number<=this.minBuyNumber){
					this.number= this.minBuyNumber
					this.isQuantity =true
					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
					return
				}else{
					this.number--
					this.processActivityPrice()
					this.isQuantity =false
				}
			 },
			changeNumber(e){
				let _value = e.detail.value;
				if(!this.$api.isNumber(_value)){
					this.number = this.minBuyNumber
				}else if(_value < this.minBuyNumber){	
					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
					this.number = this.minBuyNumber
				}else{
					this.number = e.detail.value
					this.processActivityPrice()
				}
			},
			processActivityPrice(){//单独处理活动价格和阶梯价格
				if(this.ladderPriceFlag == '1' && this.product.actFlag == 1){
					this.buyRetailPrice = this.product.retailPrice
				}else{
					this.ladderPriceList.forEach((item,index)=>{
						if(this.number>=item.buyNum){
							this.buyRetailPrice = item.buyPrice
						}
					})
				}
			},
			showSpec(type) {//显示选择数量确认弹窗
				this.isBtnType = type
				this.specClass = 'show';
			},
			hideSpec() {//关闭选择数量确认弹窗
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
				if(this.isBtnType == 'add'){				
					this.getAddProductCart()				
				}else{
					this.toConfirmation()
				}
			},
			toConfirmation(){//跳转确认订单页面
				this.specClass = 'hide';
				let productStp ={
						allPrice:this.number*this.buyRetailPrice,
						allCount:this.number,
						productID:this.product.productID,
						productCount:this.number
				}	
				this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			getAddProductCart(){//增加购物车成功和toast弹窗提示成功	
				shoppingAddCart({productID:this.productID,userID:this.userID,productCount:this.number}).then(response => {
					this.specClass = 'hide';
					this.$util.msg('加入购物车成功',1500,true,'success')
					this.isAnimation = true
					setTimeout(() => {this.specClass = 'none'}, 200)
					setTimeout(() => {this.isAnimation = false},2000)
					this.goodsData.cartCount = response.data;
				}).catch(response =>{
					this.$util.msg(response.msg,2000);
				})
			},
			navToLogin(){
				this.$api.navigateTo(`/pages/login/login-accont?type=detilType&id=${this.productID}`)
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				// console.log(headerBtnPosi)
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						// console.log(res);
						// console.log(res.fontSizeSetting);
						// console.log(res.system);
						systeminfo = res
					},
				})
				return systeminfo
			},
			getOptionFn(e){
				this.isShareType = e.type
			},
			discard(){
				//丢弃
			}
		},
		onPageScroll(e){
			// console.log(e.scrollTop);//实时获取到滚动的值
			if(e.scrollTop>50){
				this.headerColor = true
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = false
				this.nvabarData={
					showCapsule: 1, 
					title: '', 		
				}
			}
			if(e.scrollTop>700){
				this.navbarFiexd = 'fixed'
			}else{
				this.navbarFiexd = 'none'
			}
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		      console.log(res.target)
		    }
			return {
			  title: `${this.product.name}`,
			  path: `pages/goods/product?type=share&id=${this.productID}`,
			  imageUrl:`${this.productImage[0]}`
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) => {
				this.userID = resolve.userID ? resolve.userID : '';	
				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
				console.log(this.userIdentity)
				if (isPreviewImg) {
					isPreviewImg = false;
					return;
				} else {
					this.initData();
				}
			})	
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.product{
		padding-bottom: 120rpx;
	}
	.banner-section{
		width: 100%;
		height: 750rpx;
		position: relative;
		border-bottom: 1px solid #EBEBEB;
	}	
	.banner{
		width: 100%;
		height: 750rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.swiper__dots-box{
		position: absolute;
		bottom: 24px;
		right: 24rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 12rpx;
		padding: 10rpx;
		background: rgba(174,174,174,0.6);
		border-radius:16rpx;
		.swiper__dots-item{
			width: 12rpx;
			height: 12rpx;
			border-radius: 100%;
			margin: 6rpx;
			background: rgba(62,62,62,1);
		}
		.none{
			background:#FFFFFF;
		}
		.swiper__dots-long{
			background: rgba(62,62,62,1);
			transition: all 0.1s;
		}
	}
	.product-wrap{
		width: 702rpx;
		height: auto;
		padding: 24rpx 24rpx 0 24rpx;
		background-color: #FFFFFF;
		border-bottom: 20rpx solid #F7F7F7;
		.wrap-top{
			width: 100%;
			height: auto;
			float: left;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #F8F8F8;
			&.none{
				.p-title{
					color:#999999
				}
			}
			.p-title{
				line-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				font-weight: Bold;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 16rpx;
				
			}
			.wrap-main-pricenone{
				line-height: 44rpx;
				color: #FF2A2A;
				font-size: $font-size-28;
				font-weight: 600;
			}
			.p-price{
				height: 44rpx;
				line-height: 44rpx;
				float: left;
				.txt{
					color: #FF2A2A;
					margin:0 2rpx;
				}
				.txt.sm{
					font-size: $font-size-24;
				}
				.txt.big{
					font-size: $font-size-32;
				}
			}
			.p-minBuy{
				height: 44rpx;
				line-height: 44rpx;
				float: right;
				padding: 0 18rpx;
				border-radius: 22rpx;
				background-color: #EBEBEB;
				color: #7F7F7F;
				font-size: 24rpx;
				text-align: center;
				.min-text{
					margin: 0 6rpx;
				}
			}
			.p-login{
				height: 44rpx;
				line-height: 44rpx;
				color: $color-system;
				font-size: $font-size-24;
				&.grade{
					margin-bottom: 20rpx;
				}
				.p-no{
					float: left;
					margin-right: 5rpx;
					font-size: $font-size-28;
				}
			}
		}
		.wrap-ladder{
			float: left;
			width: 100%;
			border-bottom: 1px solid #F8F8F8;
			.ladder-text{
				height: 34rpx;
				line-height: 34rpx;
				margin-bottom: 24rpx;
				font-size: 24rpx;
				color: #999999;
				.ladder-p{
					font-size: 20rpx;
				}
			}
			.ladder-main{
				width: 654rpx;
				height: 102rpx;
				padding: 24rpx;
				background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/02/%E9%98%B6%E6%A2%AF%E4%BB%B7%E6%A0%BC%E8%83%8C%E6%99%AF%403x.png);
				background-size: cover;
				border-radius: 20rpx;
				display: flex;
				.ladder-left{
					flex: 1.5;
					line-height: 51rpx;
					font-size: 24rpx;
					.ladder-b{
						text-align-last: justify;
					}
				}
				.ladder-right{
					height: 100%;
					display: flex;
					align-items: center;
					flex: 8.5;
					.ladder-li{
						height: 100%;
						flex: 1;
						display:flex;
						flex-flow: column;
						align-items: center;
						.ladder-a{
							flex: 1;
							height: 51rpx;
							line-height: 51rpx;
							font-size: 26rpx;
							text-align: justify;
							color: #FA6400;	
							font-weight: bold;
						}
					}
				}
			}
		}
		.wrap-label{
			float: left;
			width: 100%;
			padding: 24rpx 0 0 0;
			border-bottom: 1px solid #F8F8F8;
			.label-a{
				padding: 0 18rpx;
				line-height: 40rpx;
				font-size: $font-size-24;
				color: #FFFFFF;
				text-align: center;
				border-radius: 20rpx;
				background:linear-gradient(135deg,rgba(250,100,0,0.7) 0%,rgba(249,80,63,0.7) 100%);
				margin: 0 22rpx 22rpx 0;
				display: inline-block;
			}
		}
		.wrap-info{
			float: left;
			width: 100%;
			padding: 24rpx 0 0 0;
			border-bottom: 1px solid #F8F8F8;
			.info-viewT{
				width: 100%;
				min-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				line-height: 40rpx;
				text-align: left;
				&.none{
					color: #999999;
				}
				.info-viewL{
					min-width: 350rpx;
					float: left;
					margin-bottom: 24rpx;
				}
				.info-viewR{
					min-width: 352rpx;
					float: left;
					margin-bottom: 24rpx;
				}
			}
			.info-viewB{
				width: 100%;
				height: auto;
			}
			.info-f{
				width: 50%;
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				line-height: 40rpx;
				margin-bottom: 24rpx;
				text-align: left;
			}
	
		}
		.wrap-seve{
			float: left;
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			font-size: $font-size-28;
			color: $text-color;
			border-bottom: 1px solid #F8F8F8;
			&.none{
				color: #999999;
				.text{
					color: #999999;
				}
			}
			.iconfont{
				color: $color-system;
				margin-left: 20rpx;
				font-size: $font-size-24;
			}
			.text{
				font-size: $font-size-24;
				color: $text-color;
				margin-left: 10rpx;
			}
		}
	}
	.product-details {
		height: 100%;
		background: #FFFFFF;
		.navbar {
			width: 702rpx;
			height: 96rpx;
			padding: 0 24rpx;
			background: #fff;
			z-index: 10;
			display: flex;
			border-bottom: 1px solid #F8F8F8;
			&.fixed{
				position: fixed;
				left: 0;
			}
			.nav-item {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				height: 96rpx;
				font-size: $font-size-28;
				color: $text-color;
				position: relative;
				float: left;
				position: relative;
				.line{
					width: 60%;
					height: 2px;
					border-radius: 1px;
					background: #FFFFFF;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -30%;
				}
				&.current{
					color:$color-system;
					.line{
						background: $color-system;
					}
				}
			}
		}
		.content{
			width: 100%;
			min-height: 750rpx;
		}
	}
	.isLower{
		width: 100%;
		height: 116rpx;
		line-height: 116rpx;
		text-align: center;
		color: #000000;
		font-size: $font-size-32;
		font-weight: bold;
	}
	.bottom-btn{
		width: 100%;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 99;
		.bottom-le{
			width: 302rpx;
			height: 86rpx;
			padding:12rpx 24rpx;
			float: left;
			.item-bt{
				width: 86rpx;
				height: 100%;
				margin-right:22rpx;
				display: flex;
				float: left;
				flex-direction: column;
				align-items: center;
				font-size: $font-size-24;
				color: $text-color;
				line-height: 34rpx;
				position: relative;
				.animation-num{
					font-size:$font-size-32 ;
					color: #FF2A2A;
					position: absolute;
					top: -12rpx;
					right: 4rpx;
					font-weight: bold;
				}
				.animation{
					animation: showAmnation 2.2s ease-in-out both;
				}
				.restion{
					animation: hideAmnation 1s ease-in-out both;
				}
				.icon-num{
					position: absolute;
					right:-12rpx;
					top: -9rpx;
				}
				.icon-num.goleft{
					right: 4rpx;
				}
				&:last-child{
					margin-right: 0;
				}
				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 8rpx;
				}
				button.contact-btn{
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					font-size: $font-size-24;
					text-align: center;
					text-decoration: none;
					line-height: 34rpx;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					color: $text-color;
					background-color:#FFFFFF;
				}
			}
		}
		.bottom-ri{
			width: 400rpx;
			height: 100%;
			float: right;
			display: flex;
			.btn{
				flex: 1;
				width: 200rpx;
				line-height: 110rpx;
				text-align: center;
				font-size: $font-size-28;
				color: #FFFFFF;
			}
			.btn-cart{
				background-color: #EFAF00;
			}
			.btn-cart.disabled{
				background-color: rgba(239, 175, 0, 0.5);
			}
			.btn-bay{
				background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
			}
			.btn-bay.disabled{
				background-color: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);;
			}
		}
	}
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
	/* 加入购物模态层*/
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}
	@keyframes showAmnation {
		0% {
			top: -12rpx;
			opacity: 0;
		}
		50% {
			top: -60rpx;
			opacity: 1;
		}
		100% {
			top: -100rpx;
			opacity: 0;
		}
	}
	@keyframes hideAmnation {
		0% {
			top: -100rpx;
			opacity: 0;
		}
		100% {
			top: -12rpx;
			opacity: 0;
		}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -294rpx;
			width: 702rpx;
			padding: 24rpx 24rpx 36rpx 24rpx;
			height: 236rpx;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
			}
			.btn {
				width: 100%;
				height: 88rpx;
				.button {
					width: 100%;
					height: 88rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $btn-confirm;
					font-size: $font-size-28;
					border-radius: 14rpx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		.layer-smimg{
			width: 114rpx;
			height: 114rpx;
			float: left;
			border-radius: 10rpx;
			margin-right: 24rpx;
			image{
				width: 114rpx;
				height: 114rpx;	
				border-radius: 10rpx;
			}
		}
		.layer-nunbox{
			justify-content: space-between;
			align-items: center;
			width: 536rpx;
			height: 88rpx;
			padding: 13rpx 0 0 0;
			float: left;
			.layer-nunbox-t{
				width: 100%;
				height:44rpx;
				position:relative;
				display: flex;
				.layer-nunbox-text{
					line-height: 44rpx;
					font-size: $font-size-28;
				}
				.number-box{
					display: flex;
					justify-content: center;
					align-items: center;
					.iconfont{
						font-size: $font-size-32;
						padding:0 20rpx;
						font-size: $text-color;
					}
					.btn-input{
						width: 62rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #F8F8F8;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-28;
					}
				}
				.product-step{
					position: absolute;
					left: 45rpx;
					bottom: 0;
					height: 44rpx;
					background: #FFFFFF;
				}
			}
			.layer-nunbox-b{
				width: 100%;
				height:44rpx;
				margin-top: 13rpx;
			}
			.text{
				line-height: 44rpx;
				font-size: $font-size-28;
				.p{
					color: #FF2A2A;
				}
				.p:first-child{
					margin-left: 30rpx;
				}
				.p.sm{
					font-size: $font-size-24;
				}
			}
		}
	}
	/*富文本样式*/
	rich-text.p{
		width: 702rpx !important;
		padding: 0 24rpx;
		text-align: justify;
	}
	rich-text.img{
		width: 100%;
		height: auto;
	}
</style>