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

<template>
	<view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
		<custom-p   v-if="isHeaderPoduct"
					:systeminfo='systeminfo' 
					:navbar-data='nvabarData' 
					:headerBtnPosi ="headerBtnPosi" 
					:headerColor="headerColor" 
					:type="isShareType"
					:page='backPage'>
		</custom-p>
		<view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
			<view class="navbar">
				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
					<text>商品</text>
					<text class="line"></text>
				</view>
				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
					<text>详情</text>
					<text class="line"></text>
				</view>	
				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
					<text>服务项目</text>
					<text class="line"></text>
				</view>	
			</view>	
		</view>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="2"></tui-skeleton>
		<template v-else >
			<view class="container-product tui-skeleton">
				<view class="container-product-main product-details product-details0">
					<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"  @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
										<image :src="item" @click="previewImg(index)" class="product-img" />
									</swiper-item>
								</swiper>
								<view class="swiper__dots-box">
									<tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
								</view>
							</uni-swiper-dot>
						</view>
						<view class="product-wrap clearfix">
							<view class="wrap-top">
								<view class="wrap-top-price">
									<cm-price v-if="isRequest"
											  :product="product"
											  :userIdentity="userIdentity"
											  :promotions="product.promotions"
											  :ladderList="ladderList"/>
								</view>
								<view class="p-title tui-skeleton-fillet">
									<view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''"> {{product.name == undefined ? '' : product.name}} </view>
									<button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
										<view class=""><text class="iconfont icon-fenxiang"></text></view>
										<view class="">分享</view>
									</button>
								</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="product-seve">
									<text class="iconfont icon-wuyoushouhou tui-skeleton-rect"><text class="text">无忧退货</text></text>
									<text class="iconfont icon-wuyoushouhou tui-skeleton-rect"><text class="text">快速退款</text></text>
									<text class="iconfont icon-wuyoushouhou tui-skeleton-rect"><text class="text">正品保证</text></text>
								</view>
							</view>
						</view>			
					</view>
					<view class="product-parameter" @click="showPopup">
						<text class="title">参数：</text>
						<text class="name">品牌  起订量  分类...</text>
						<text class="iconfont icon-chakangengduo"></text>
					</view>
				</view>
				<view class="product-details product-details1">
					<!-- 商品详情 -->
					<view class="title">
						<view class="title-tab">商品详情</view>
					</view>
					<view class="content tui-banner product-rich-text tui-skeleton-rect">
						<parser :html="html" :img-mode="widthFix" v-if="product.productDetail.detailInfo"></parser>
						<view class="product-rich-text-none" v-else>暂无商品信息</view>
					</view>
				</view>	
				<view class="product-details service product-details2">
					<!-- 服务项目 -->
					<view class="title">
						<view class="title-tab">服务项目</view>
					</view>
					<view class="content service" v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
						<cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
					</view>
					<view class="content-none"  v-else>
						<text>暂无服务项目</text>
					</view>
				</view>				
				<!-- 商品参数 -->
				<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
					<view class="tui-popup-box clearfix">
						<view class="title">商品参数</view>
						<div class="tui-popup-main">
							<scroll-view class="tui-popup-scroll"  scroll-y="true">
								<view class="content-tr">
									<view class="content-td">品牌</view>
									<view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">分类</view>
									<view class="content-th">{{product.typeName == null? '暂无' : product.typeName}}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">包装规格</view> 
									<view class="content-th">{{product.unit}}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">库存</view>
									<view class="content-th">{{product.stock}}</view>
								</view>
								<view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
									<view class="content-td">{{item.paramsName}}</view>
									<view class="content-th">{{item.paramsContent}}</view>
								</view>
							</scroll-view>
						</div>
						<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
							<view class="tui-flex-1">
								<view class="tui-button" @click="hidePopup()">收起</view>
							</view>
						</view>
					</view>	
				</tui-bottom-popup>	
				<!-- 底部按钮 -->
				<view class="menu">
					<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
						<!-- 已下架商品提示 -->
						<view class="product-invalid" v-if="isShowButton" :style="{bottom :isIphoneX ? '168rpx' : '100rpx'}">
							<text>商品已经下架啦，非常抱歉！</text>
						</view>
						<view class="bottom-le">
							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/index/index')">
								<text class="iconfont icon-fanhuishouye"></text>
								<text>首页</text>
							</view>
							<button class="item-bt" open-type="contact" @bindcontact="handleContact" >
								<text class="iconfont icon-kefu"></text>
								<text>客服</text>
							</button>
							<view class="item-bt" @click="buyProductCart()">
								<text class="iconfont icon-gouwuche"></text>
								<text>购物车</text>
								<text  	v-if="hasLogin && goodsData.cartCount>0"
										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="isShowButton" 
									class="btn btn-cart" 
									:class="[isShowButton ? 'disabled':'']"
									@tap.stop="btnGetConfirm('add')">加入购物车</button>
							<button  
									:disabled="isShowButton" 
									class="btn btn-bay" 
									:class="[isShowButton ? '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" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
						<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" @click="changeCountAdd()"></view>
									</view>
								</view>
								<view class="layer-nunbox-b">
									<view class="text">单价:
										<text class="p sm">￥</text>
										<text class="p bg">{{buyRetailPrice | NumFormat}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
					</view>
				</view>
				<!-- 侧边 -->
				<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
			</view>
		</template>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import customP from '@/components/cm-module/headerNavbar/header-poduct' 		 //自定义导航
	import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
	import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
	import parser from "@/components/jyf-Parser/index" //富文本处理
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
	import authorize from '@/common/config/authorize.js'
	import wxLogin from "@/services/wxLogin.js"
	import { debounce } from '@/common/config/common.js'
	var isPreviewImg;
	export default{
		components:{
			customP,
			parser,
			tuiSkeleton,
			cmPrice,
			cmAttributes,
			cmService
		},
		data(){
			return{			
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: ''		// 导航栏 中间的标题
				},
				clickPath:'/search/pages/search/search',
				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
				productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
				mode:'round',
				iconClass:'icon-aixin',
				iconColor:'#ff9100',
				specClass: '',//规格弹窗css类，控制开关动画
				isBtnType:'',
				isRequest:false,
				isScrollTop:false,
				current:0,
				isShareType:'',
				isHeaderPoduct:false,
				isNavbarFiexd:false,
				navbarFiexd:'none',
				ladderPriceFlag:'',
				ladderList:'',
				isEvaluate:false,
				isAnimation:false,
				skeletonShow:true,
				isQuantity:false,
				disabled:false,
				tabCurrentIndex:0,
				userId:'',
				productId:0,
				userIdentity:0,//用户类型
				goodsData:{},//自定义数据
				product:{},//采美
				productImage:[],
				retailPrice:0,
				buyRetailPrice:0,
				stock:0,
				number:1,
				productsList:[],
				goodListData:[],
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				windowHeight: '',
				headerColor:false,
				backPage:1,
				linkPath:'',
				CustomBar:this.CustomBar,// 顶部导航栏高度
				popupShow:false,//参数弹窗
				tabSelectFlag:false,
				sectionPropsArr: [],
				scrollTopArray:[],
				sectionTopRangeArr: [],
				winHeight:'',
				isShowButton:false
			}
		},
		onLoad(option) {
			
			this.productId = option.productId;//获取商品ID
			this.isShareType = option.type
			this.linkPath = option.path
			this.isHeaderPoduct = true
			if(this.isShareType =='share'){
				wxLogin.wxLoginAuthorize()
			}
			if(option.page == 2){
				this.backPage = option.page
			}
			this.getWinHeight()
		},
		computed: {
			...mapState(['hasLogin','isWxAuthorize','identity'])
		},
		filters:{
			NumFormat(value) {//处理金额
				// console.log('===' + Number(value).toFixed(2))
				return Number(value).toFixed(2);
			}
		},	
		methods:{
			initData(){// 初始化商品详情查询
				this.ProductService.QueryProductDetils(
					{
						productId:this.productId,
					}
				)
				.then(response =>{	
					//购物车数量				
					this.skeletonShow = false
					this.productImage=[];
					this.product = response.data
					//已删除/已冻结
					if(this.product.validFlag === 2){
						this.isShowButton = true
					}
					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.product.imageList.forEach(item =>{
						this.productImage.push(item);
					})
					//处理阶梯价格
					if(this.product.ladderList && this.product.ladderList.length>0){
						this.ladderList = this.product.ladderList;
					}
					this.retailPrice = this.product.price.toFixed(2);
					this.buyRetailPrice = this.product.price;
					setTimeout(()=>{
						this.getSectionProps();
					},2000)
					console.log(this.userId)
					if(this.userId > 0){
						this.GetCartNumber()
					}
					this.isRequest = true
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			GetCartNumber(){//查询购物车数量
				this.ProductService.QueryShoppingQuantity(
					{
						userId:this.userId,
					}
				)
				.then(response => {
					this.goodsData.cartCount = response.data
					this.$store.commit('updateAllNum',response.data)
				})
				.catch(error =>{
					console.log('查询购物车数量错误信息',error)
				})
			},
			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.tabSelectFlag = true
				this.tabCurrentIndex = index
				let classIndex = '.product-details' + index
				uni.createSelectorQuery()
					.select('.container-product')
					.boundingClientRect(data => {
						//最外层盒子节点
						uni.createSelectorQuery()
							.select(classIndex)
							.boundingClientRect(res => {
								//最外层盒子节点
								uni.pageScrollTo({
									duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
									scrollTop: res.top - data.top - 40 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
								})
								setTimeout(() => {
									this.tabSelectFlag = false
								}, 500)
							})
							.exec()
					})
					.exec()
			},
			handleContact(e){//跳转小程序客服

			},
			buyProductCart(){//底部购物车按钮点击
				if(this.hasLogin){
					this.$api.navigateTo('/pages/goods/cart')
				}else{					
					this.$api.navigateTo('/pages/login/login')
				}
			},
			btnGetConfirm(type){//加入购物车&&立即购买点击
				if(this.hasLogin){
					this.showSpec(type);
				}else{					
					this.$api.navigateTo('/pages/login/login')
				}
			},	
			changeCountAdd(){//popup弹窗数量增加按钮
				this.number++
				this.processActivityPrice()
			},
			changeCountSub(){//popup弹窗数量减按钮
				if(this.number == 1){
					this.isQuantity = true
					this.$util.msg('购买数量不能低于1',2000);
					return
				}else{
					this.number--
					this.processActivityPrice()
					this.isQuantity =false
				}
			 },
			changeNumber(e){
				let _value = e.detail.value;
				if(!this.$api.isNumber(_value)){
					this.number = 1
				}else if(_value == 1){	
					this.$util.msg('购买数量不能低于1',2000);
					this.number = 1
				}else{
					this.number = e.detail.value
				}
				this.processActivityPrice()
			},
			processActivityPrice(){//单独处理活动价格和阶梯价格
				if(this.ladderPriceFlag == '0' && this.product.actStatus == 0 || this.product.actStatus == 1){
					this.buyRetailPrice = this.product.retailPrice
				}else{
					this.ladderList.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弹窗提示成功	
				this.ProductService.shoppingAddCart(
					{
						productId:this.productId,
						userId:this.userId,
						productCount:this.number,
						heUserId:0,
					}
				)
				.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.GetCartNumber()
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			
			navToLogin(){
				authorize.checkLogin()
				.then(res => {
					this.$store.commit('setLoginType',8)
					this.$store.commit('setLoginproductId',this.productId)
					this.$api.navigateTo(`/pages/login/login?id=${this.productId}`)
				})
				.catch(err => {
					this.$api.navigateTo('/pages/authorization/authorization?type=1')
				})
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			discard(){
				//丢弃
			},
			onShare(res){//分享转发
				if (res.from === 'button') {
			      // 来自页面内转发按钮
			    }
				return {
				  title: `${this.product.name}`,
				  path: `pages/goods/product?type=share&id=${this.productId}`,
				  imageUrl:`${this.productImage[0]}`
				}
			},
			showPopup(){
				this.popupShow = true
			},
			hidePopup(){
				this.popupShow = false
			},
			getSectionProps() {//获取每个tab对应区域的scrollTop值
				let className = '.product-details',
					sectionPropsArr = [];
				uni.createSelectorQuery().select('.container-product').boundingClientRect((data)=>{//最外层盒子节点
				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
						res.forEach((item, index) => {
							console.log(item);
							sectionPropsArr.push({
								className: `${className}${index}`,
								scrollTop: item.top - data.top,
								height:item.height
							})
						})
						this.sectionPropsArr = sectionPropsArr;
						console.log(this.sectionPropsArr);
						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
				　　}).exec()
				}).exec()
			},
			getSectionRange(arr) {// 获取每个tab对应区域的区间
				let sectionScrollTopList = [];
				for(let i = 0; i < arr.length; i++) {
					sectionScrollTopList.push(`${arr[i].scrollTop}-${arr[i].scrollTop + arr[i].height}`)
				}
				// for(let i = 0; i < arr.length; i++) {
				// 	let thisScrollTop = arr[i].scrollTop;
				// 	let thisHeight = arr[i].height;
				// 	if(i < arr.length - 1) {
				// 		let nextScrollTop = arr[i+1].scrollTop;
				// 		if(i == 0) {
				// 			sectionScrollTopList.push(`0-${thisScrollTop + thisHeight}`);
				// 		} else if(i == arr.length - 1){
				// 			sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop - this.winHeight}`);
				// 		} else {
				// 			sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop}`);
				// 		}
				// 	} else {
				// 		sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
				// 	}
				// }
				return sectionScrollTopList;
			},
			activeTab: debounce(
				(top, _this) => {
					//当滑动时也能同步激活tab
					const { sectionTopRangeArr } = _this
					console.log(sectionTopRangeArr);
					if (sectionTopRangeArr.length > 0) {
						sectionTopRangeArr.forEach((item, index) => {
							let splitItem = item.split('-'),
								openInterval = Number(splitItem[0]),
								closedInterval = Number(splitItem[1])
							if (top >= openInterval && top < closedInterval) {
								console.log(top);
								_this.tabCurrentIndex = index
							}
						})
					}
				},
				100,
				true
			),
			getWinHeight() {
				this.winHeight = wx.getSystemInfoSync().windowHeight;
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			const { scrollTop } = e;
			if(!this.tabSelectFlag) {
				this.activeTab(scrollTop, this);
			}
			if(e.scrollTop>60){
				this.headerColor = true
				this.navbarFiexd = 'fixed'
				this.isNavbarFiexd = true
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = false
				this.isNavbarFiexd = false
				this.navbarFiexd = 'none'
				this.nvabarData={
					showCapsule: 1, 
					title: '', 		
				}
			}
			if(e.scrollTop>700){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			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 : 0
				if (isPreviewImg) {
					isPreviewImg = false;
					return;
				} else {
					this.initData();
				}
			}).catch(error =>{
				this.initData();
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.banner-section{
		width: 100%;
		height: 750rpx;
		position: relative;
	}	
	.banner{
		width: 100%;
		height: 750rpx;
		.product-img{
			width: 750rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
	.swiper__dots-box{
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}
	.product-wrap{
		width: 100%;
		height: auto;
		padding: 24rpx 0 0 0;
		background-color: #FFFFFF;
		border-bottom: 20rpx solid #F7F7F7;
		.wrap-top{
			width: 702rpx;
			padding: 0 24rpx;
			height: auto;
			float: left;
			padding-bottom:20rpx;
			border-bottom: 1px solid #F8F8F8;
			.p-title{
				width: 100%;
				height: auto;
				float: left;
				position: relative;
				.p-title-name{
					width:602rpx;
					height: auto;
					float: left;
					line-height:48rpx;
					font-size: $font-size-28;
					color: $text-color;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					&.indent{
						text-indent: 95rpx;
					}
				}
				.p-title-share{
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					text-align: center;
					color: #999999;
					font-size: $font-size-24;
					box-sizing: border-box;
					display: block;
					background: transparent;
					border-radius: 0;
					border: 0;
					margin: 0;
					padding: 8rpx 0;
					z-index: 990;
					.icon-fenxiang1{
						font-size: $font-size-34;
					}
				}
				.tui-share-btn::after {
					border: 0;
				}
			}
			.wrap-main-text{
				line-height: 56rpx;
				color: #FF2A2A;
				font-size: $font-size-26;
				display: block;
				float: left;
				font-weight: normal;
			}
			.wrap-main-none{
				display: block;
				width: 256rpx;
				height: 44rpx;
				padding-left: 20rpx;
				border-radius: 11rpx;
				background: $btn-confirm;
				float: right;
				line-height: 44rpx;
				color: #FFFFFF;
				text-align: center;
				font-size: $font-size-24;
			}
			
			.p-price-none{
				height: 44rpx;
				line-height: 44rpx;
				float: left;
				font-size: $font-size-24;
				color: #666;
				text-decoration: line-through;
				margin-left: 8rpx;
			}
			.p-minBuy{
				height: 44rpx;
				line-height: 44rpx;
				float: right;
				padding: 0 18rpx;
				border-radius: 22rpx;
				background-color: #f7f7f7;
				color: #7F7F7F;
				font-size: 24rpx;
				text-align: center;
				.min-text{
					margin: 0 6rpx;
				}
			}
			.p-login{
				height: 56rpx;
				line-height: 56rpx;
				color: $color-system;
				font-size: $font-size-24;
				&.grade{
					.price-left{
						float: left;
						.none{
							display: block;
							font-size: $font-size-20;
							line-height: 48rpx;
							color: #4A4B54;
							float: left;
							font-weight: bold;
							margin-left: 5rpx;
							text{
								letter-spacing: 4rpx;
								font-size: $font-size-32;
							}
						}
					}
				}
				.p-no{
					float: left;
					margin-right: 5rpx;
					font-size: $font-size-28;
					color: $text-color;
				}
				.p-login-btn{
					display: block;
					height: 44rpx;
					padding: 0 10rpx 0 20rpx;
					border-radius: 11rpx;
					background: $btn-confirm;
					float: right;
					line-height: 44rpx;
					color: #FFFFFF;
					text-align: center;
					font-size: $font-size-24;
				}
			}
		}
		.wrap-label{
			float: left;
			width: 100%;
			box-sizing: border-box;
			.label-a{
				padding: 0 18rpx;
				line-height: 32rpx;
				font-size: $font-size-20;
				color:$color-system;
				text-align: center;
				border-radius: 6rpx;
				background:#fff3f7;
				margin: 0 20rpx 15rpx 0;
				display: inline-block;
			}
		}
		.wrap-top-price{
			float: left;
			width: 100%;
			box-sizing: border-box;
			.wrap-main-item{
				width: 100%;
				height: 56rpx;
				.p-price{
					height: 56rpx;
					line-height: 56rpx;
					float: left;
					color: $color-system;
					font-weight: bold;
					.txt{
						margin:0 2rpx;
					}
					.txt.sm{
						font-size: $font-size-26;
					}
					.txt.big{
						font-size: $font-size-34;
					}
				}
			}
			.floor-item-act{
				// width: 80rpx;
				height: 34rpx;
				margin-top: 15rpx;
				margin-left: 20rpx;
				float: left;
				.tag{
					display: inline-block;
					height: 32rpx;
					font-size: 22rpx;
					line-height: 30rpx;
					text-align: center;
					color: #f83c6c;
					float: left;
					margin-right: 10rpx;
					&.tag-02{
						width: 80rpx;
						background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
						background-size: contain;
					}
					&.tag-01{
						width: 56rpx;
						color: #fff;
						background-color: #f83c6c;
						border-radius: 4rpx;
					}
				}
			}
			.floor-item-btn{
				float: left;
				height: 40rpx;
				margin-top: 8rpx;
				margin-left: 10rpx;
				.btn{
					line-height: 40rpx;
					padding: 0 20rpx;
					height: 40rpx;
					background: $btn-confirm;
					color: #FFFFFF;
					font-size: $font-size-20;
					border-radius: 4rpx;
				}
			}
		}
		.wrap-info{
			float: left;
			width: 702rpx;
			padding: 24rpx 24rpx 0 24rpx;
			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;
			}
		}
	}
	.product-seve{
		width: 100%;
		height: 60rpx;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		line-height: 60rpx;
		.label{
			font-size: $font-size-28;
			color: #333333;
		}
		.iconfont{
			color: $color-system;
			margin-right: 20rpx;
			font-size: $font-size-30;
		}
		.text{
			font-size: $font-size-22;
			color: #999999;
			margin-left: 10rpx;
		}
	}
	.product-parameter{
		width: 702rpx;
		height: 90rpx;
		padding: 0 24rpx;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		border-bottom: 20rpx solid #F7F7F7;
		.title{
			line-height: 90rpx;
			display: inline-block;
			float: left;
			font-size: $font-size-28;
			color: #666666;
		}
		.name{
			float: right;
			line-height: 90rpx;
			display: inline-block;
			float: left;
			font-size: $font-size-28;
			color: $text-color;
			float: right;
			padding-right: 48rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			text-align: right;
		}
		.icon-chakangengduo{
			line-height: 90rpx;
			display: inline-block;
			position: absolute;
			width: 48rpx;
			top: 0;
			right: 0;
			color: #b2b2b2;
		}
	}
	.product-details {
		width: 100%;
		background: #FFFFFF;
		border-bottom: 20rpx solid #F7F7F7;
		&.service{
			border-bottom: none;
		}
		&.recommend{
			background-color: #F7F7F7;
			border-bottom: none;
			.title{
				.title-tab{
					background-color: #F7F7F7;
					color: $text-color;
				}
			}
		}
		.product-rich-text-none{
			box-sizing: border-box;
			padding: 0 24rpx;
			text-align: left;
			font-size: 24rpx;
			color: #999999;
			line-height: 60rpx;
		}
		.content-none{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: left;
			font-size: $font-size-26;
			color: #999999;
			box-sizing: border-box;
			padding: 0 24rpx;
		}
		.title{
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;
			.title-tab{
				width: 100%;
				height: 100rpx;
				background: #fff;
				z-index: 10;
				font-size: $font-size-30;
				text-align: left;
				color: $text-color;
				line-height: 100rpx;
				font-weight: 600;
			}
			.title-msg{
				width: 100%;
				height: 236rpx;
				padding: 18rpx;
				background-color: rgba(225,86,22, 0.1);
				color: $color-system;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.tit{
					line-height: 46rpx;
					font-size: $font-size-24;
					text-align: left;
				}
				.txt{
					line-height: 38rpx;
					font-size: $font-size-20;
					text-align: justify;
				}
			}
		}
		.content{
			width: 100%;
			background-color: #FFFFFF;
		}
	}
	.isLower{
		width: 100%;
		height: 116rpx;
		line-height: 116rpx;
		text-align: center;
		color: #000000;
		font-size: $font-size-32;
		font-weight: bold;
	}
	.product-invalid{
		width: 100%;
		height: 80rpx;
		background-color: #666666;
		text-align: center;
		line-height: 80rpx;
		font-size: $font-size-26;
		color: #FFFFFF;
		position: fixed;
		bottom: 180rpx;
		left: 0;
	}
	.bottom-btn{
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 999;
		.bottom-le{
			width: 300rpx;
			height: 100rpx;
			padding:10rpx 20rpx 10rpx 0;
			float: left;
			box-sizing: border-box;
			.item-bt{
				width: 80rpx;
				height: 100%;
				margin-right:15rpx;
				display: flex;
				float: left;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-size-22;
				color: #666666;
				line-height: 34rpx;
				position: relative;
				.iconfont{
					display: block;
					width: 36rpx;
					height: 36rpx;
					text-align: center;
					font-size: 34rpx;
				}
				.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: -5rpx;
				}
				.icon-num.goleft{
					right: 2rpx;
				}
				&:last-child{
					margin-right: 0;
				}
				image {
					width: 44rpx;
					height: 44rpx;
				}
				button.contact-btn{
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: 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: 450rpx;
			height: 100%;
			float: right;
			display: flex;
			box-sizing: border-box;
			padding: 13rpx 20rpx 13rpx 0;
			.btn{
				flex: 1;
				width: 200rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: $font-size-24;
				color: #FFFFFF;
			}
			.btn-cart{
				background-color: #ffeff4;
				color: $color-system;
				border-radius: 42rpx 0 0 42rpx;
			}
			.btn-cart.disabled{
				background-color: #ffeff4;
				color: #ff457b;
			}
			.btn-bay{
				background:$btn-confirm;
				border-radius: 0 42rpx 42rpx 0;
			}
			.btn-bay.disabled{
				background:$btn-confirm;
				color: ffffff;
				opacity: 0.2;
			}
		}
	}
	.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;
	}
	.product-topnav{
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		z-index: 1000;
		position: fixed;
		opacity: 1;
		left: 0;
		&.fixed{
			animation: showFixedColor 0.1s ease-in-out both;
		}
		&.none{
		   animation: hideFixedColor 0.1s ease-in-out both;
		}
		.navbar {
			width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			display: flex;
			.nav-item {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				font-size: $font-size-28;
				color: $text-color;
				position: relative;
				float: left;
				position: relative;
				.line{
					width: 60rpx;
					height: 2px;
					border-radius: 1px;
					background: #FFFFFF;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -30rpx;
				}
				&.current{
					color:$color-system;
					.line{
						background: $color-system;
					}
				}
			}
		}
	}
	
	@keyframes showFixedColor {
		0% {background: rgba(255,255,255,0);}
		50% {background: rgba(255,255,255,0.5);}
		100% {background: rgba(255,255,255,1);}
	}
	@keyframes hideFixedColor {
		0% {background: rgba(255,255,255,1);}
		50% {background: rgba(255,255,255,0.5);}
		100% {background: rgba(255,255,255,0);}
	}
	/* 加入购物模态层*/
	@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: 260rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
			}
			.btn {
				width: 100%;
				height: 88rpx;
				margin-top: 20rpx;
				.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: 44rpx;
				}
			}
		}
		
		&.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: auto;
			float: left;
			.layer-nunbox-t{
				width: 100%;
				height:44rpx;
				position:relative;
				display: flex;
				margin-bottom: 10rpx;
				.text{
					font-size: $font-size-24;
					line-height: 48rpx;
					color: #999999;
				}
				.layer-nunbox-text{
					line-height: 44rpx;
					font-size: $font-size-28;
				}
				.number-box {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #e1e1e1;
					border-radius: 30rpx;
					height: 48rpx;
					margin-left: 20rpx;
					.iconfont {
						font-size: $font-size-24;
						padding: 0 14rpx;
						color: #666666;
						text-align: center;
						line-height: 48rpx;
						font-weight: bold;
						background: #ffffff;
						&.icon-jianhao {
							border-radius: 30rpx 0 0 30rpx;
						}
						&.icon-jiahao {
							border-radius: 0 30rpx 30rpx 0;
						}
					}
					.btn-input {
						width: 56rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-24;
						color: #333333;
						background-color: #f7f7f7;
					}
				}
				.product-step{
					position: absolute;
					left: 45rpx;
					bottom: 0;
					height: 44rpx;
					background: #FFFFFF;
				}
			}
			.layer-nunbox-b{
				width: 100%;
				height:44rpx;
				margin-top: 30rpx;
			}
			.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;
				}
			}
		}
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 220rpx;
		padding:0rpx 24rpx 0 24rpx;
		.title{
			font-size: $font-size-34;
			color: $text-color;
			line-height: 88rpx;
			text-align: center;
			float: left;
			width: 100%;
			height: 88rpx;
		}
		.tui-popup-main{
			width: 100%;
			float: left;
			.tui-popup-scroll{
				width: 100%;
				height: 320rpx;
				.content-tr{
					width: 100%;
					min-height: 58rpx;
					line-height: 58rpx;
					display: flex;
					.content-td{
						display: flex;
						flex: 3;
						font-size: $font-size-26;
						color: #999999;
						line-height: 58rpx;
						text-align: left;
					}
					.content-th{
						display: flex;
						flex: 7;
						font-size: $font-size-26;
						color: #333333;
						line-height: 58rpx;
						text-align: left;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button{
			width: 100%;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-28;
			border-radius: 44rpx;
		}
	}
	/*富文本样式*/
	rich-text.p{
		width: 702rpx !important;
		padding: 0 24rpx;
		text-align: justify;
	}
	rich-text.img{
		width: 100%;
		height: auto;
	}
</style>