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

<template>
	<view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx'}">
		<custom-p   v-if="isHeaderPoduct"
					:systeminfo='systeminfo' 
					:navbar-data='nvabarData' 
					:headerBtnPosi ="headerBtnPosi" 
					:headerColor="headerColor" 
					:type="isShareType"
					:page='backPage'>
		</custom-p>
		<view  class="navbar" :class="navbarFiexd" :style="{top:CustomBar +'px'}">
			<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>	
		<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 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" :class="goodsData.isNoneDisabled ? 'none' : ''">
								<view class="wrap-top-price">
									<cm-price v-if="isRequest"
											  :product="product"
											  :userIdentity="userIdentity"
											  :shopID= "shopID"
											  :promotions="product.promotions"
											  :ladderPriceList="ladderPriceList"/>
								</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="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-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 class="productRemarks"  v-if="product.productRemarks!=''&&product.productRemarks!=null">
									备注:{{product.productRemarks}}
								</view>
							</view>
						</view>			
					</view>
					<view class="product-item-none" v-if="goodsData.isNoneDisabled">
						<image class="none-image" :src="productNoneImage" mode=""></image>
						<view class="none-text">此商品已{{goodsData.disabledText}}，请浏览以下推荐商品~</view>
					</view>
					<view class="product-parameter" @click="showPopup">
						<text class="title">参数：</text>
						<text class="name">品牌  起订量  分类...</text>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<view class="product-supplier" @click="goSupplier">
						<view class="logo"><img :src="shop.logo" alt=""></view>
						<view class="main">
							<view class="name">{{shop.name}}</view>
							<view class="massgs">
								<view class="label">满意度:</view>
								<view class="p-stars">
									<uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
								</view>
								<view class="acount">
									<text>{{ shop.normalNum }}</text>件商品
								</view>
							</view>
						</view>
						<view class="right"><text class="iconfont icon-xiayibu"></text></view>
					</view>
				</view>
				<view class="product-details product-details0">
					<!-- 商品详情 -->
					<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"></parser>
					</view>
				</view>	
				<view class="product-details service product-details1">
					<!-- 服务项目 -->
					<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>	
				<view class="product-details recommend product-details2">
					<!-- 相关推荐 -->
					<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>
						<view class="content">
							<view class="content-tr">
								<view class="content-td">起订量</view>
								<view class="content-th">{{product.minBuyNumber}}</view>
							</view>
							<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.unit}}</view>
							</view>
							<view class="content-tr">
								<view class="content-td">商品编码</view>
								<view class="content-th">{{product.productCode}}</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>
						</view>
						<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" v-if="userIdentity!=1 && userIdentity != 3">
					<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
						<view class="bottom-le">
							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
								<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 && 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="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" :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" v-if="product.step === 2">
									<view class="text">*该商品只能以起订量的整数倍购买</view>
								</view>
								<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>
				<!-- 侧边 -->
				<scroll-top v-if="isScrollTop"></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 authorize from '@/common/config/authorize.js'
	import parser from "@/components/jyf-Parser/index" //富文本处理
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import recommend from "@/components/cm-module/productDetails/recommend" //相关推荐
	import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
	import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
	import wxLogin from "@/common/config/wxLogin.js"
	import { debounce } from '@/common/config/common.js'
	var isPreviewImg;
	export default{
		components:{
			customP,
			parser,
			tuiSkeleton,
			recommend,
			cmPrice,
			cmAttributes,
			cmParameter,
			cmService
		},
		data(){
			return{			
				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
				productNoneImage:'http://static-b.caimei365.com/app/img/icon/icon-pnone.png',
				mode:'round',
				iconClass:'icon-aixin',
				iconColor:'#ff9100',
				specClass: '',//规格弹窗css类，控制开关动画
				isBtnType:'',
				isRequest:false,
				isScrollTop:false,
				current:0,
				shopId:0,
				isShareType:'',
				isHeaderPoduct:false,
				navbarFiexd:'none',
				ladderPriceFlag:'',
				ladderPriceList:'',
				isInvalid:false,
				isEvaluate:false,
				isAnimation:false,
				skeletonShow:true,
				isQuantity:false,
				isStock:false,
				disabled:false,
				isNoneDisabled:false,
				tabCurrentIndex:0,
				userID:'',
				shopID:'',
				productID:0,
				userIdentity:'',//用户类型
				goodsData:{},//自定义数据
				shop:{},//供应商信息
				product:{},//采美
				productImage:[],
				retailPrice:0,
				buyRetailPrice:0,
				buyRetailPriceStep:1,
				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: ''		// 导航栏 中间的标题
				},
				linkPath:'',
				CustomBar:this.CustomBar,// 顶部导航栏高度
				popupShow:false,//参数弹窗
				tabSelectFlag:false,
				sectionPropsArr: [],
				scrollTopArray:[],
				sectionTopRangeArr: [],
				winHeight:''
			}
		},
		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'){
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					console.log(wxResponse)
					if(wxResponse == 1){
						wxLogin.wxLoginAuthorize()
					}else{
						console.log(new Date +'用户未授权微信信息')
					}
				})	
			}
			this.getWinHeight()
		},
		computed: {
			...mapState(['hasLogin','isWxAuthorize'])
		},
		methods:{
			initData(){// 初始化商品详情查询
				this.ProductService.queryProductDetils({userId:this.userID,productID:this.productID}).then(response =>{	
					this.skeletonShow = false
					this.productImage=[];
					this.shop = response.data.shop
					this.shopId = response.data.shopID
					this.product = response.data
					//已删除/已冻结
					if(this.product.validFlag === '0'){
						this.isInvalid = 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.buyRetailPriceStep = this.product.step
					this.number = this.product.minBuyNumber
					this.minBuyNumber = this.product.minBuyNumber					
					//处理商品图片列表
					this.product.imageList.forEach(item =>{
						this.productImage.push(item.image);
					})
					//购物车数量
					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);
						this.buyRetailPrice = this.product.retailPrice;
					}
					//处理下架商品和售罄商品
					if(this.product.validFlag =='3' || this.stock == 0 ){
						this.disabled = true
						this.isNoneDisabled = true
						this.goodsData.disabledText = '下架'
					}else{
						this.disabled = false
						this.isNoneDisabled = false
						this.goodsData.disabledText = ''
					}
					if(this.product.price1TextFlag == "1"){
						this.disabled = true
					}
					if(this.product.price1TextFlag == "2"){
						if(this.userIdentity == 4){	
							this.disabled = true
						}else{
							this.disabled = false
						}
					}
					this.goodsData.disabled = this.disabled
					this.goodsData.isNoneDisabled = this.isNoneDisabled
					if(this.product.validFlag =='3'){
						this.goodsData.disabledText = '下架'
					}
					if(this.stock == 0){
						this.goodsData.disabledText = '售罄'
					}
					setTimeout(()=>{
						this.getSectionProps();
					},2000)
					this.isRequest = true
				}).catch(error =>{
					this.$util.msg(error.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.tabSelectFlag = true
				this.tabCurrentIndex = index;
				let classIndex = '.product-details'+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){//跳转小程序客服

			},
			buyProductCart(){//底部购物车按钮点击
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						if(this.hasLogin){
							this.$api.navigateTo('/pages/goods/cart')
						}else{					
							this.$api.navigateTo('/pages/login/login?type=1')
						}
					}else{
						this.$api.navigateTo('/pages/authorization/authorization?type=1')
					}
				})	
			},
			btnGetConfirm(type){//加入购物车&&立即购买点击
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						if(this.hasLogin){
							this.showSpec(type);
						}else{
							this.$api.navigateTo('/pages/login/login?type=1')
						}
					}else{
						this.$api.navigateTo('/pages/authorization/authorization?type=1')
					}	
				})
			},	
			changeCountAdd(){//popup弹窗数量增加按钮
				if(this.buyRetailPriceStep == 2){
					this.number+=this.minBuyNumber
				}else{
					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{
					if(this.buyRetailPriceStep == 2){
						this.number-=this.minBuyNumber
					}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 if( _value % this.minBuyNumber !=0 ){
					this.$util.msg(`购买量必须为起订量的整数倍`,2000);
					this.number = this.minBuyNumber
				}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.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弹窗提示成功	
				this.ProductService.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(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			navToLogin(){
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						this.$store.commit('setLoginType',8)
						this.$store.commit('setLoginProductId',this.productID)
						this.$api.navigateTo(`/pages/login/login?id=${this.productID}`)
					}else{
						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
			},
			getOptionFn(e){
				this.isShareType = e.type
			},
			goIndex(){//商城首页
				uni.switchTab({
				    url: '/pages/tabBar/home/index'
				});
			},
			goSupplier(){//跳供应商资料页
				this.$api.navigateTo('/supplier/pages/user/my-shop?shopId='+this.shopId)
			},
			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-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;
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			const { scrollTop } = e;
			if(!this.tabSelectFlag) {
				this.activeTab(scrollTop, this);
			}
			if(e.scrollTop>100){
				this.headerColor = true
				this.navbarFiexd = 'fixed'
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = 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 : 3
				this.shopID =  resolve.shopID ? resolve.shopID : '';	
				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;
		.productRemarks{
			height: 48rpx;
			width: 100%;
			float: left;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #999999;
			text-align: left;
		}
		.wrap-top{
			width: 702rpx;
			padding: 0 24rpx;
			height: auto;
			float: left;
			padding-bottom:20rpx;
			border-bottom: 1px solid #F8F8F8;
			&.none{
				.p-title{
					color:#999999
				}
			}
			.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;
				}
				.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;
					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: $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:#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{
					float: right;
					height: 36rpx;
					border-radius: 6rpx;
					background-color: #FFFFFF;
					line-height: 36rpx;
					color: $color-system;
					text-align: center;
					display: inline-block;
					padding:0 16rpx;
					font-size: $font-size-20;
					margin-left: 15rpx;
					border: 1px solid #E15616;
				}
			}
			.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;
		.iconfont{
			color: #fea785;
			margin-right: 20rpx;
			font-size: $font-size-22;
		}
		.text{
			font-size: $font-size-22;
			color: #fea785;
			margin-left: 10rpx;
		}
	}
	.product-item-none{
		min-height: 348rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 20rpx solid #F7F7F7;
		box-sizing: border-box;
		padding: 40rpx 0;
		.none-image{
			width: 284rpx;
			height: 225rpx;
		}
		.none-text{
			text-align: center;
			font-size: $font-size-28;
			color: #999999;
			line-height: 40rpx;
		}
	}
	.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 {
		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;
					
				}
			}
		}
		.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;
	}
	.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;
	}
	.navbar {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		background: #FFFFFF;
		z-index: 10;
		display: flex;
		position: fixed;
		opacity: 0;
		left: 0;
		&.fixed{
			animation: showFixedColor 0.3s ease-in-out both;
		}
		&.none{
		   animation: hideFixedColor 0.3s ease-in-out both;
		}
		.nav-item {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			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);opacity: 0;}
		50% {background: rgba(255,255,255,0.5);opacity: 0.5;}
		100% {background: rgba(255,255,255,1);opacity: 1;}
	}
	@keyframes hideFixedColor {
		0% {background: rgba(255,255,255,1);opacity: 1;}
		50% {background: rgba(255,255,255,0.5);opacity: 0.5;}
		100% {background: rgba(255,255,255,0);opacity: 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: 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 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;
				}
			}
		}
	}
	.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;
		}
		.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;
	}
</style>