caimei-applets-caimei/pages/second/product/product-details.vue

<template>
	<view class="product" :style="{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="search-input">
				<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
					<view class="search-icon">
						<text class="iconfont icon-iconfonticonfontsousuo1"></text>
					</view>
					<view class="search-text">搜索其他二手商品</view>
				</view>
			</view>
			<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="5"></tui-skeleton>
		<template v-else>
			<view class="cart-content empty" v-if="isInvalid">
				<view  class="empty-container">
					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
					<text class="error-text">暂无权限查看该商品</text>
					<view class="login-btn"  @click="goIndex">去商城</view>
				</view>
			</view>
			<view class="container-product tui-skeleton" v-else>
				<view class="container-product-main">
					<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 product.imageList" :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 }}/{{ product.imageList.length }}</tui-tag>
								</view>
							</uni-swiper-dot>
						</view>
						<view class="product-wrap clearfix">
							<view class="wrap-top" >
								<view class="wrap-top-price">
									<second-price :product="product"></second-price>
								</view>
								<view class="p-title tui-skeleton-fillet">
									<view class="p-title-name">{{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-fenxiang1"></text></view>
										<view class="">分享</view>
									</button>
								</view>
								<view class="productRemarks"  v-if="product.productRemarks!=''&&product.productRemarks!=null">
									<text class="text">{{product.productRemarks}}</text>
								</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" v-if="hasLogin">
									<text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">无忧退货</text></text>
									<text class="iconfont icon-wuyoutuihuoi tui-skeleton-rect"><text class="text">快速退款</text></text>
									<text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">正品保证</text></text>
								</view>
							</view>
						</view>
						<view class="product-parameter" @click="showPopup">
							<text class="title">参数：</text>
							<text class="name">品牌  参数  分类...</text>
							<text class="iconfont icon-xiayibu"></text>
						</view>
					</view>
				</view>
				<view class="product-details productDetails0">
					<!-- 商品详情 -->
					<view class="title">
						<view class="title-tab">商品详情</view>
					</view>
					<view class="Disclaimer" v-if="hasLogin">
						<span >免责声明</span>
						<text class="text">
							鉴于本商城提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本商城对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
						</text>
					</view>
					<view class="content tui-banner product-rich-text tui-skeleton-rect">
						<view class="contentHtml">
							<view class="detailsText" v-if="product.productDetails!=''||product.productDetails!=null"  >{{product.productDetails}}</view>
							   <view class="imgList" v-for="(item, index) in product.imageList" :key="index" :data-src="item">
								   <img :src="item"/>
							   </view>
						</view>
					</view>
					<view class="product-details secondBrand productDetails1" v-if="product.brandInfo!=''&&product.brandInfo!=null">
						<!-- 品牌信息 -->
						<view class="title"><view class="title-tab">品牌信息</view></view>
						<text class="brandinfo">{{product.brandInfo}}</text>
					</view>
					<view class="product-details recommend productDetails2">
						<!-- 相关推荐 -->
						<view class="title"><view class="title-tab">相关推荐</view></view>
						<view class="content hot">
							<recommend :query-productid="product.productID" v-if="isRequest" ></recommend>
						</view>
					</view>
					<!-- 商品参数 -->
					<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
						<view class="tui-popup-box clearfix">
							<view class="title">商品参数</view>
						    <cm-parameter :product="product" :goodsData="goodsData" ></cm-parameter>
							<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>
					<!-- 侧边 -->
					<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import customP from '@/components/cm-module/headerNavbar/header-poduct' 		 //自定义导航
	import secondPrice from "@/components/cm-module/productDetails/secondPrice.vue" //价格显示
	import authorize from '@/common/config/authorize.js'
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import recommend from "@/components/cm-module/productDetails/secondRecommend" //相关推荐
	import cmParameter from "@/components/cm-module/productDetails/secondParameters.vue" //相关参数
	import wxLogin from "@/common/config/wxLogin.js"
	import { debounce } from '@/common/config/common.js'
	var isPreviewImg;
	export default{
		components:{
			uniStars,
			customP,
			tuiSkeleton,
			recommend,
			secondPrice,
			cmParameter,
		},
		data(){
			return{		
				productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
				clickPath:'/search/pages/search/search-second',
				disabledTabNavList:[{name:'相关推荐'}],
				mode:'round',
				iconClass:'icon-aixin',
				iconColor:'#ff9100',
				specClass: '',//规格弹窗css类，控制开关动画
				isRequest:false,
				isScrollTop:false,
				current:0,
				isShareType:'',
				isInvalid:false,
				isHeaderPoduct:false,
				isNavbarFiexd:false,
				navbarFiexd:'none',
				isRecommend:false,
				isRarameter:true,
				isService:false,
				skeletonShow:true,
				disabled:false,
				isNoneDisabled:false,
				tabCurrentIndex:0,
				userId:'',
				productID:0,
				userIdentity:'',//用户类型
				goodsData:{},//自定义数据
				shop:{},//供应商信息
				product:{},//采美
				productImage:[],
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				windowHeight: '',
				headerColor:false,
				backPage:1,
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: ''		// 导航栏 中间的标题
				},
				linkPath:'',
				popupShow:false,//参数弹窗
				CustomBar:this.CustomBar,// 顶部导航栏高度
				tabSelectFlag:false,
				sectionPropsArr: [],
				scrollTopArray:[],
				sectionTopRangeArr: [],
				winHeight:''
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','isWxAuthorize'])
		},
		onLoad(option) {
			this.productID = option.id;//获取商品ID
			this.isShareType = option.type
			this.linkPath = option.path
			this.isHeaderPoduct = true
			if(option.page == 2){
				this.backPage = option.page
			}
			if(this.isShareType =='share'){
				wxLogin.wxLoginAuthorize()
			}
		},
		methods:{
			initData(){// 初始化商品详情查询
				this.SecondService.ProductDetail({productId:this.productID,userId:this.userId}).then(response =>{
					this.skeletonShow = false
					this.productImage=[];
					this.shop = response.data.shop
					this.product = response.data
					//处理商品图片列表
					this.product.imageList.forEach(item =>{
						this.productImage.push(item);
					})
					setTimeout(()=>{
						this.getSectionProps();
					},2000)
					this.isRequest = true
				}).catch(error =>{
					console.log(error)
					this.skeletonShow = false
					this.isInvalid = true
				})
			},
			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 = '.productDetails'+index;
				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
				　　uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
				　　　　uni.pageScrollTo({
				　　　　　　duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
				　　　　　　scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				　　　　})
						setTimeout(()=>{
							this.tabSelectFlag = false;
						},500)
				　　}).exec()
				}).exec()
			},
			handleContact(e){//跳转小程序客服

			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			getOptionFn(e){
				this.isShareType = e.type
			},
			discard(){
				//丢弃
			},
			onShare(res){//分享转发
				if (res.from === 'button') {
			      // 来自页面内转发按钮
			    }
				return {
				  title: `${this.product.name}`,
				  path: `second/pages/product/product-details?type=share&id=${this.productID}`,
				  imageUrl:`${this.product.imageList[0]}`
				}
			},
			showPopup(){
				this.popupShow = true
			},
			hidePopup(){
				this.popupShow = false
			},
			getSectionProps() {//获取每个tab对应区域的scrollTop值
				let className = '.product-details',
					sectionPropsArr = [];
				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
						res.forEach((item, index) => {
							sectionPropsArr.push({
								className: `${className}${index}`,
								scrollTop: item.top - data.top - 150
							})
						})
						this.sectionPropsArr = sectionPropsArr;
						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
				　　}).exec()
				}).exec()
			},
			getSectionRange(arr) {// 获取每个tab对应区域的区间
				let sectionScrollTopList = [];
				for(let i = 0; i < arr.length; i++) {
					let thisScrollTop = arr[i].scrollTop;
					if(i < arr.length - 1) {
						let nextScrollTop = arr[i+1].scrollTop;
						if(i == 0) {
							sectionScrollTopList.push(`0-${thisScrollTop}`);
						} else if(i == arr.length - 1){
							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
						} else {
							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
						}
					} else {
						sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
					}
				}
				return sectionScrollTopList;
			},
			activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
				const { sectionTopRangeArr } = _this;
				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) {
							_this.tabCurrentIndex = index;
						}
					})
				}
			},100, true),
			getWinHeight() {
				this.winHeight = wx.getSystemInfoSync().windowHeight;
			},
			goIndex(){//商城首页
				uni.switchTab({
				    url: '/pages/tabBar/home/index'
				});
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.initData()
				uni.stopPullDownRefresh()
			}, 200)
		},
		onPageScroll(e){//实时获取到滚动的值
			const { scrollTop } = e;
			if(!this.tabSelectFlag) {
				this.activeTab(scrollTop, this);
			}
			if(e.scrollTop>100){
				this.headerColor = true
				this.navbarFiexd = 'fixed'
				this.isNavbarFiexd = true
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = false
				this.navbarFiexd = 'none'
				this.isNavbarFiexd = false
				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: `second/pages/product/product-details?type=share&id=${this.productID}`,
			  imageUrl:`${this.product.imageList[0]}`
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) => {
				this.userId = resolve.userId ? resolve.userId : '';
				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
				if (isPreviewImg) {
					isPreviewImg = false;
					return;
				} else {
					this.initData();
				}
			}).catch(error =>{
				this.initData();
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.product-topnav{
		width: 100%;
		height: 174rpx;
		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;
					}
				}
			}
		}
		.search-input{
			width: 100%;
			height: 114rpx;
			padding:24rpx;
			box-sizing: border-box;
			.gosearch-btn{
				width: 100%;
				height: 100%;
				border-radius: 40rpx;
				margin: 0 auto;
				font-size: 26rpx;
				line-height: 66rpx;
				color: #B2B2B2;
				position: relative;
				box-sizing: border-box;
				padding-left: 66rpx;
				&.fixed{
					background: rgba(70,70,70,0.1);
				}
				&.none{
					background: rgba(70,70,70,0.1);
				}
				.search-icon{
					width: 66rpx;
					height: 66rpx;
					position:absolute ;
					left: 0;
					top: 2rpx;
					text-align: center;
					line-height: 66rpx;
					.icon-iconfonticonfontsousuo1{
						margin:0 6rpx;
						font-size: $font-size-34;
						color: #B2B2B2;
						z-index: 10;
					}
				}
				.search-text{
					font-size: $font-size-24;
					line-height: 66rpx;
					color: #B2B2B2;
				}
			}
		}
	}
	.productRemarks{
		height: 36rpx;
		margin: 8rpx 0;
		width: 100%;
		float: left;
		.text{
			display: inline-block;
			padding: 0 18rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			color: #FF2A2A;
			text-align: center;
			border-radius: 4rpx;
			background: #FFFFFF;
			border: 1px solid #FF2A2A;
			float: left;
			opacity: 0.8;
		}
	}
	.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;
		.wrap-top{
			width: 702rpx;
			padding: 0 24rpx;
			height: auto;
			float: left;
			padding-bottom:20rpx;
			&.none{
				.p-title{
					color:#999999
				}
			}
			.p-title{
				width: 100%;
				height: auto;
				float: left;
				.p-title-name{
					width:602rpx;
					// height: 96rpx;
					float: left;
					line-height: 46rpx;
					font-size: $font-size-34;
					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;
				}
				.p-title-share{
					width: 96rpx;
					height: 96rpx;
					float: right;
					text-align: center;
					color: #999999;
					font-size: $font-size-24;
					box-sizing: border-box;
					padding: 8rpx 0;
					.icon-fenxiang1{
						font-size: $font-size-34;
					}
				}
			}
			.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: #FF2A2A;
				}
				.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:#ffe6dc;
				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: #FF2A2A;
					font-weight: bold;
					&.none{
						text-decoration: line-through;
						color: #999999;
						font-weight: normal;
					}
					.txt{
						margin:0 2rpx;
					}
					.txt.sm{
						font-size: $font-size-26;
					}
					.txt.big{
						font-size: $font-size-34;
					}
				}
			}
			.floor-item-act{
				height: 56rpx;
				text-align: center;
				box-sizing: border-box;
				float: left;
				padding:10rpx 0;
				margin-left: 10rpx;
				.floor-tags{
					height: 28rpx;
					border-radius: 6rpx;
					background-color: #FFFFFF;
					line-height: 28rpx;
					color: $color-system;
					text-align: center;
					display: inline-block;
					padding:0 16rpx;
					font-size: $font-size-20;
					border: 1px solid #E15616;
					float: right;
				}
			}
			.floor-item-btn{
				float: left;
				height: 40rpx;
				margin-top: 8rpx;
				.btn{
					line-height: 40rpx;
					padding: 0 20rpx;
					height: 40rpx;
					background: $btn-confirm;
					color: #FFFFFF;
					font-size: $font-size-20;
					border-radius: 4rpx;
				}
				.btn-none{
					font-size: $font-size-34;
					line-height: 40rpx;
					color: #FF2A2A;
					font-weight: bold;
				}
			}
		}
		.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: 702rpx;
		height: 90rpx;
		padding: 0 24rpx;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		line-height: 90rpx;
		border-bottom: 20rpx solid #F7F7F7;
		.title{
			line-height: 90rpx;
			display: inline-block;
			float: left;
			font-size: $font-size-28;
			color: $text-color;
		}
		.iconfont{
			color: #fea785;
			margin-right: 40rpx;
			font-size: $font-size-26;
		}
		.text{
			font-size: $font-size-26;
			color: #fea785;
			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-xiayibu{
			line-height: 90rpx;
			display: inline-block;
			position: absolute;
			width: 48rpx;
			top: 0;
			right: 0;
			color: #b2b2b2;
		}
	}
	.product-supplier{
		width: 100%;
		height: 174rpx;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
		box-sizing: border-box;
		border-bottom: 20rpx solid #F7F7F7;
		.logo{
			width: 128rpx;
			height: 92rpx;
			float: left;
			border: 1px solid #efefef;
			border-radius: 6rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 6rpx;
			}
		}
		.main{
			width: 470rpx;
			height: 92rpx;
			float: left;
			margin-left: 20rpx;
			.name{
				width: 100%;
				line-height: 46rpx;
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				float: right;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				text-align: left;
			}
			.massgs{
				width: 100%;
				line-height: 46rpx;
				float: left;
				font-size: $font-size-24;
				color: #999999;
				.label{
					float: left;
				}
				.p-stars{
					float: left;
					margin-left: 20rpx;
				}
				.acount{
					float: right;
					text{
						color: $color-system;
					}
				}
			}
		}
		
		.icon-xiayibu{
			line-height: 154rpx;
			display: inline-block;
			position: absolute;
			width: 48rpx;
			top: 0;
			right: 0;
			color: #b2b2b2;
		}
	}
	.product-details {
		background: #FFFFFF;
		border-bottom: 20rpx solid #F7F7F7;
		padding: 24rpx;
		&.service{
			border-bottom: none;
		}
		&.recommend{
			background-color: #F7F7F7;
			border-bottom: none;
			padding: 0;
			.title{
				.title-tab{
					background-color: #F7F7F7;
					color: $text-color;
					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;
				box-sizing: border-box;
			}
			.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;
	}
	.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;
			box-sizing: border-box;
			padding: 13rpx 20rpx 13rpx 0;
			.btn{
				flex: 1;
				width: 200rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: $font-size-28;
				color: #FFFFFF;
			}
			.btn-cart{
				background-color: #ffe6dc;
				color: $color-system;
				border-radius: 42rpx 0 0 42rpx;
			}
			.btn-cart.disabled{
				background-color: #E1E1E1;
			}
			.btn-bay{
				background:linear-gradient(to right, #f28f31 0%, #e15616 100%);
				border-radius: 0 42rpx 42rpx 0;
			}
			.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: 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: 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: 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;
					.iconfont{
						font-size: $font-size-32;
						padding:0 18rpx;
						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;
				}
			}
		}
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 220rpx;
		padding:0rpx 24rpx 24rpx 24rpx;
		.title{
			font-size: $font-size-34;
			color: $text-color;
			line-height: 88rpx;
			text-align: center;
			float: left;
			width: 100%;
			height: 88rpx;
		}
		.content{
			width: 100%;
			height: auto;
			float: left;
			.content-tr{
				width: 100%;
				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;
				}
			}
		}
	}
	.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;
	}
	.Disclaimer {
	    background: rgba(225,86,22,0.1);
	    border-radius:20rpx;
	    padding:0 20rpx  20rpx 20rpx;
		font-size: 20rpx;
		color: #e15616;
		margin-bottom: 30rpx
	}
	.Disclaimer span {
	    display: block;
	    padding: 20rpx 0;
	    text-align: left;
		font-size: 24rpx;
	}
	.Disclaimer .text {
	    line-height:48rpx;
	}
	.brandinfo{
		color: #333333;
		line-height: 46rpx;
		font-size: 26rpx;
		}
		.imgList{
			width: 702rpx; 
			margin: auto;
			height: 710rpx;
			margin-bottom: 20rpx;
		}
		.imgList img{
			width: 100%;
			height: 100%;
			
		}
		.detailsText{
			padding: 0 30rpx 30rpx 30rpx;
			color: #333333;
			font-size: 24rpx;
			text-align: left;
		}
</style>