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

<template>
	<view class="product">
		<header-back  :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :headerColor="headerColor" :page='1'></header-back>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="9"></tui-skeleton>
		<view class="container-product tui-skeleton">
			<view class="product-top">
				<view class="banner-section">
					<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
						<swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :duration='800' :autoplay="false" :circular="false" >
							<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
								<image :src="item" @click="previewImg(index)" />
							</swiper-item>
						</swiper>
						<view class="swiper__dots-box">
							<view v-for="(item,idx) in productImage" 
								  :key="idx" 
								  :class="[idx===current?'swiper__dots-long':'none']" 
								  :data-index="current" class="swiper__dots-item">
							</view>	  
						</view>
					</uni-swiper-dot>
				</view>
				<view class="product-wrap clearfix">
					<view class="wrap-top">
						<view class="p-title tui-skeleton-rect">
							{{product.name == undefined ? '' : product.name}}
						</view>
						<view v-if="!isLogin" class="p-login tui-skeleton-rect">
							<text @click.stop="navToLogin">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
						</view>
						<view class="wrap-main" v-else>
							<view class="p-main" v-if="ladderPriceFlag == '0'">
								<view class="p-price tui-skeleton-fillet">
									<text class="txt sm">￥</text>
									<text class="txt big">{{retailPrice}}</text>
									<text class="txt big">{{smallMoney== '0'?'.00':smallMoney}}</text>
								</view>
								<view class="p-minBuy">
									起订量:
									<text class="min-text">{{minBuyNumber}}</text>
								</view>
							</view>
							<view class="wrap-ladder" v-else>
								<view class="ladder-text">
									<text class="ladder-h1">说明：</text>
									<text class="ladder-p">本商品有以下优惠购物方案</text>
								</view>
								<view class="ladder-main tui-skeleton-rect">
									<view class="ladder-left">
										<view class="ladder-b">起订量:</view>
										<view class="ladder-b">价格:</view>
									</view>
									<view class="ladder-right">
										<view class="ladder-li" v-for="(ladder,index) in  productLadderPrices" :key="index">
											<view class="ladder-a">{{ladder.buyNumRangeShow}}</view>
											<view class="ladder-a">￥{{ladder.buyPrice.toFixed(2)}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wrap-label" v-if="product.tagsList.length>0">
						<view class="label-a tui-skeleton-rect" v-for="(label,index) in  product.tagsList" :key="index">{{label}}</view>
					</view>
					<view class="wrap-info">
						<view class="info-viewT">
							<view class="info-viewL tui-skeleton-fillet">品牌：<text>{{product.brandName == null? '其他' : product.brandName}}</text></view>
							<view class="info-viewR tui-skeleton-fillet">包装规格：<text>{{product.unit}}</text></view>														
						</view>
<!-- 						<view class="info-viewB">
							<view class="info-f tui-skeleton-fillet">库存：<text>{{product.stock}}</text></view>
							<view class="info-f tui-skeleton-fillet">起订量：<text>{{minBuyNumber}}</text></view>
						</view> -->
					</view>
					<view class="wrap-seve">
						<text class="tui-skeleton-rect">服务：</text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
						<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
					</view>
				</view>			
			</view>
			<view class="product-details">
				<!-- 头部 -->
				<view class="navbar tui-skeleton-fillet">
					<view class="nav-item" 
						  :class="{ current: tabCurrentIndex === 1 }" 
						  @click="tabClick(1)">
						   <text class="line"></text>
						  商品详情
					</view>					
					<view class="nav-item" 
						  :class="{ current: tabCurrentIndex === 2 }" 
						  @click="tabClick(2)">
						  <text class="line"></text>
						  供应商信息
					</view>
				</view>
				<!-- 商品详情，供应商详情展示 -->
				<view class="content tui-banner tui-skeleton-rect" v-if="tabCurrentIndex === 1">
					<parser :html="html" :img-mode="widthFix"></parser>
				</view>
				<view class="content sup" v-else>
					<supplier-details :shop="shop"></supplier-details>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="menu">
				<view class="isLower" v-if="goodsData.disabled">该商品已下架~</view>
				<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
					<view class="bottom-le">
						<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/home')">
							<image src="../../static/home-current@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/cart-current@3x.png"></image>
							<text>购物车</text>
							<text  	v-if="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">
					<view class="content">
						<view class="layer-smimg">
							<image :src="product.mainImage" mode=""></image>
						</view>
						<view class="layer-nunbox">
							<view class="layer-nunbox-t">
								<view class="layer-nunbox-text">数量:</view>
								<view class="number-box">
									<view  class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
									<input class="btn-input" type="number" v-model="number" maxlength='4'  @blur="changeNumber($event)">
									<view  class="iconfont icon-jiahao"  :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
								</view>
							</view>
							<view class="layer-nunbox-b">
								<view class="text">单价:
									<text class="p sm">￥</text>
									<text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btn"><view class="button" @click="btnConfirm">确定</view></view>
				</view>
			</view>
			<no-login v-if="isShowNoLogin" :productid="productID" :telPhone='telPhone' :alertType ='alertType'></no-login>
		</view>
	</view>
</template>

<script>
	import headerBack from '@/components/module/headerNavbar/header-poduct' 		 //自定义导航
	import parser from "@/components/jyf-Parser/index" //富文本处理
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import supplierDetails from "@/components/module/productDetails/supplierDetails" //供应商详情
	import noLogin from '@/components/module/noLogin/nologin'//未登录弹窗
	
	var isPreviewImg;
	export default{
		components:{
			headerBack,
			parser,
			tuiSkeleton,
			noLogin,
			supplierDetails
		},
		data(){
			return{			
				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',	
				mode:'round',
				specClass: '',//规格弹窗css类，控制开关动画
				isBtnType:'',
				current:0,
				telPhone:'',
				ladderPriceFlag:'',
				productLadderPrices:'',
				loginStatus:true,
				isAnimation:false,
				skeletonShow:true,
				isShowNoLogin:false,
				isQuantity:false,
				isStock:false,
				disabled:false,
				tabCurrentIndex: 1,
				userID:'',
				isLogin:true,
				productID:0,
				classifyID:'',//分类ID
				goodsData:{},//自定义数据
				shop:{},//供应商信息
				product:{},//采美
				productImage:[],
				retailPrice:0,
				buyRetailPrice:0,
				stock:0,
				number:0,
				minBuyNumber:0,
				alertType:'',
				productsList:[],
				goodListData:[],
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				windowHeight: '',
				headerColor:false,
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: '', 		// 导航栏 中间的标题
				},
			}
		},
		onLoad(option) {
			let self = this;
			this.productID = option.id;//获取商品ID
			this.tabCurrentIndex = 1;// 页面显示是默认选中第一个	
		},
		methods:{
			initData(){// 初始化商品详情查询
				this.$api.getStorage().then((resolve) => {
					this.userID = resolve.userID;	
					this.$api.get('/details/product',{id:this.productID,userID:this.userID},
						response => {
							// console.log(response)
							if (response.code == "1") {	
								this.productData = response.data;
								this.productImage=[];
								this.shop = response.data.shop;	
								this.product = response.data.product;
								this.ladderPriceFlag = response.data.ladderPriceFlag;
								if(response.data.productLadderPrices!=null){
									this.productLadderPrices = response.data.productLadderPrices;
								}
								this.html = response.data.productDetailInfo == null ? this.html : this.$api.adaptRichTextImg(response.data.productDetailInfo.detailInfo)
								response.data.productImage.forEach(item =>{
									this.productImage.push(item.image);
								})
								//拆分金额并转千分位格式显示
								this.retailPrice = this.productData.retailPrice.toFixed(2);
								this.buyRetailPrice = this.productData.retailPrice.toFixed(2);
								if(this.productData.validFlag =='2'){
									this.disabled = true
								}else{
									this.disabled = false
								}
								this.stock = this.productData.product.stock
								this.number = this.productData.minBuyNumber
								this.minBuyNumber = this.productData.minBuyNumber
								this.classifyID = this.productData.classifyID
								this.goodsData.disabled = this.disabled 
								this.goodsData.cartCount = this.productData.cartCount
							} else {
								this.$util.msg(response.msg,2000);
							}
							this.skeletonShow = false
						}
					)	
				});
			},
			initLogin(){//未登录时的处理
				this.$api.getStorage().then((resolve) => {
					this.isLogin = false;
					this.telPhone = resolve.tel
				})
			},
			swiperChange(e) {//顶部商品图片切换
				const index = e.detail.current;
				this.current = index;
			},
			previewImg (index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = this.productImage
				uni.previewImage({
					current: index, //图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
			tabClick(index) {//商品详情&&供应商信息tab切换
				this.tabCurrentIndex = index;
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			handleContact(e){//跳转小程序客服
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			buyProductCart(){//底部购物车按钮点击
				if(!this.isLogin){
					this.alertType = '3'
					this.isShowNoLogin =true
				}else{
					this.isShowNoLogin =false
					this.$api.switchTabTo('/pages/tabBar/cart/cart');
				}
			},
			btnGetConfirm(type){//加入购物车&&立即购买点击
				if(!this.isLogin){
					if(type =='add'){
						this.alertType = '1'
					}else{
						this.alertType = '2'
					}
					this.isShowNoLogin =true
				}else{
					this.isShowNoLogin =false
					this.showSpec(type);
				}
			},	
			changeCountAdd(){//popup弹窗数量增加按钮
				this.number++
				if(this.ladderPriceFlag == '1'){
					this.productLadderPrices.forEach((item,index)=>{
						if(this.number>=item.buyNum){
							this.buyRetailPrice = item.buyPrice
						}
					})
				}
			},
			changeCountSub(){//popup弹窗数量减按钮
				if(this.number<=this.minBuyNumber){
					this.number= this.minBuyNumber
					this.isQuantity =true
					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
					return
				}else{
					this.number--
					if(this.ladderPriceFlag == '1'){
						this.productLadderPrices.forEach((item,index)=>{
							if(this.number>=item.buyNum){
								this.buyRetailPrice = item.buyPrice
							}
						})
					}
					this.isQuantity =false
				}
			 },
			changeNumber(e){
				let _value = e.detail.value;
				if(!this.$api.isNumber(_value)){
					this.number = this.minBuyNumber
				}else if(_value < this.minBuyNumber){	
					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
					this.number = this.minBuyNumber
				}else{
					this.number = e.detail.value
				}
			},
			showSpec(type) {//显示选择数量确认弹窗
				this.isBtnType = type
				this.specClass = 'show';
			},
			hideSpec() {//关闭选择数量确认弹窗
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
				if(this.isBtnType == 'add'){				
					// console.log(this.number)
					this.getAddProductCart()				
				}else{
					// console.log(this.number)
					this.toConfirmation()
				}
			},
			toConfirmation(){//跳转确认订单页面
				this.specClass = 'hide';
				let productStp ={
						allPrice:this.number*this.buyRetailPrice,
						allCount:this.number,
						id:this.productData.id,
						productCount:this.number,
						classifyID:this.classifyID,
				}	
				this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			getAddProductCart(){//增加购物车成功和toast弹窗提示成功		
				this.$api.post('/details/addCart',
					{
						productID:this.productID,
						userID:this.userID,
						productCount:this.number,
						organizeID:this.userOrganizeID
					},
					response => {
						if (response.code == "1") {				
							this.specClass = 'hide';
							this.$util.msg(response.msg,1500,true,'success');
							this.isAnimation = true
							setTimeout(() => {
								this.specClass = 'none';							
							}, 200);
							setTimeout(() => {
								this.isAnimation = false;							
							}, 2000);
							this.goodsData.cartCount = response.data;
						}else{
							this.$util.msg(response.msg,2000);
							setTimeout(function(){
								this.$api.switchTabTo('/pages/tabBar/home/home')
							},1000)
						}
					}	
				)	
			},
			navToLogin(){
				this.$api.navigateTo(`/pages/login/login?type=detilType&id=${this.productID}`)
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						// console.log(res);
						// console.log(res.fontSizeSetting);
						// console.log(res.system);
						systeminfo = res
					},
				})
				return systeminfo
			},
			discard(){
				//丢弃
			}
		},
		onPageScroll(e){
			// console.log(e.scrollTop);//实时获取到滚动的值
			if(e.scrollTop>50){
				this.headerColor = true
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = false
				this.nvabarData={
					showCapsule: 1, 
					title: '', 		
				}
			}
		},
		onShow() {
			this.$api.loginStatus().then((resolveData) => {
				if(resolveData){
					this.isLogin = true;
				}else{
					this.initLogin()
				}
				if (isPreviewImg) {
					isPreviewImg = false;
					return;
				} else {
					this.initData();
				}
			});	
		},
	}
</script>

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