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

<template>
	<view class="product" style="padding-bottom: 30rpx;">
		<view class="product-topnav" v-if="isNavbarFiexd" :class="navbarFiexd">
			<!-- 导航栏 -->
			<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"
					v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
					: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>
				<!-- 锚点 1 -->
				<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="mclap-tag" v-if="product.beautyActFlag == '1'"
										>美博会</view
									>
									<view
										class="p-title-name"
										:class="product.beautyActFlag == '1' ? 'indent' : ''"
									>
										{{ product.name == undefined ? '' : product.name }}
									</view>
									<!-- 分享 -->
									<button
										open-type="share"
										class="p-title-share tui-share-position"
										@tap="onShare"
									>
										<view class=""
											><text class="iconfont icon-fenxiang"></text
										></view>
										<view class="">分享</view>
									</button>
								</view>
							</view>
							<!-- 产品标签 -->
							<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="label">采美承诺：</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
								class="productRemarks"
								v-if="
									product.productRemarks != '' && product.productRemarks != null
								"
							>
								备注:{{ product.productRemarks }}
							</view>
						</view>
					</view>
					<view class="product-details product-details0">
						<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"
							v-if="!goodsData.isNoneDisabled"
						>
							<text class="title">参数：</text>
							<text class="name">品牌 起订量 分类...</text>
							<text class="iconfont icon-chakangengduo"></text>
						</view>
					</view>
				</view>
				<!-- 锚点 2 -->
				<view class="product-details product-details1">
					<!-- 商品详情 -->
					<view class="title"> <view class="title-tab">商品详情</view> </view>
					<view class="content tui-banner product-rich-text tui-skeleton-rect">
						<parser
							:html="html"
							:img-mode="widthFix"
							v-if="!goodsData.isNoneDisabled"
						></parser>
						<view class="product-rich-text-none" v-else>暂无商品信息</view>
					</view>
				</view>
				<!-- 锚点 3 -->
				<view class="product-details service product-details2">
					<!-- 服务项目 -->
					<view class="title"> <view class="title-tab">服务项目</view> </view>
					<view
						class="content service"
						v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
					>
						<cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
					</view>
					<view class="content-none" v-else> <text>暂无服务项目</text> </view>
				</view>
				<!-- 商品参数 -->
				<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
					<view class="tui-popup-box clearfix">
						<view class="title">商品参数</view>
						<div class="tui-popup-main">
							<scroll-view class="tui-popup-scroll" scroll-y="true">
								<view class="content-tr">
									<view class="content-td">起订量</view>
									<view class="content-th">{{ product.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.typeName == null ? '暂无' : product.typeName
									}}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">包装规格</view>
									<view class="content-th">{{ product.unit }}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">商品编码</view>
									<view class="content-th">{{ product.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>
							</scroll-view>
						</div>
						<view
							class="tui-right-flex tui-popup-btn"
							:style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }"
						>
							<view class="tui-flex-1">
								<view class="tui-button" @click="hidePopup()">收起</view>
							</view>
						</view>
					</view>
				</tui-bottom-popup>
				<!-- 底部按钮 -->
				<!-- 侧边 -->
				<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
			</view>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
import cmPrice from '@/components/cm-module/productDetails/cm-price.vue' //价格显示
import cmAttributes from '@/components/cm-module/productDetails/cm-attributes.vue' //规格信息
import parser from '@/components/jyf-Parser/index' //富文本处理
import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
import 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 authorize from '@/common/config/authorize.js'
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 {
			clickPath: '/search/pages/search/search',
			html: '<div style="text-align: center;color:#333333;">暂无内容</div>',
			productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
			mode: 'round',
			iconClass: 'icon-aixin',
			iconColor: '#ff9100',
			specClass: '', //规格弹窗css类，控制开关动画
			isBtnType: '',
			isRequest: false,
			isScrollTop: false,
			current: 0,
			shopId: 0,
			isShareType: '',
			isHeaderPoduct: false,
			isNavbarFiexd: 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: 0, //用户类型
			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: '',
			isShowButton: true
		}
	},
	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', 'identity'])
	},
	methods: {
		initData() {
			// 初始化商品详情查询
			this.ProductService.queryProductDetils({
				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.product.validFlag == '10' ||
						this.stock == 0
					) {
						this.disabled = true
						this.isNoneDisabled = true
					} 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.product.validFlag == '10') {
						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) {
			//跳转小程序客服
		},
		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
		},
		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 > 60) {
			this.headerColor = true
			this.navbarFiexd = 'fixed'
			this.isNavbarFiexd = true
			this.nvabarData = {
				showCapsule: 1,
				title: '商品详情'
			}
		} else {
			this.headerColor = false
			this.isNavbarFiexd = false
			this.navbarFiexd = 'none'
			this.nvabarData = {
				showCapsule: 1,
				title: ''
			}
		}
		if (e.scrollTop > 700) {
			this.isScrollTop = true
		} else {
			this.isScrollTop = false
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: `${this.product.name}`,
			path: `pages/goods/product?type=share&id=${this.productID}`,
			imageUrl: `${this.productImage[0]}`
		}
	},
	onShow() {
		this.$api
			.getStorage()
			.then(resolve => {
				this.userID = resolve.userID ? resolve.userID : ''
				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
				this.shopID = resolve.shopID ? resolve.shopID : ''
				if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
					this.isShowButton = true
				} else {
					this.isShowButton = false
				}
				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;
				&.indent {
					text-indent: 95rpx;
				}
			}
			.mclap-tag {
				display: block;
				width: 84rpx;
				height: 32rpx;
				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
				border-radius: 4rpx 48rpx 4px 4px;
				line-height: 32rpx;
				font-size: $font-size-22;
				color: #ffffff;
				text-align: center;
				position: absolute;
				left: 0;
				top: 6rpx;
			}
			.p-title-share {
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right: 0;
				text-align: center;
				color: #999999;
				font-size: $font-size-24;
				box-sizing: border-box;
				display: block;
				background: transparent;
				border-radius: 0;
				border: 0;
				margin: 0;
				padding: 8rpx 0;
				z-index: 990;
				.icon-fenxiang1 {
					font-size: $font-size-34;
				}
			}
			.tui-share-btn::after {
				border: 0;
			}
		}
		.wrap-main-text {
			line-height: 56rpx;
			color: #ff2a2a;
			font-size: $font-size-26;
			display: block;
			float: left;
			font-weight: normal;
		}
		.wrap-main-none {
			display: block;
			width: 256rpx;
			height: 44rpx;
			padding-left: 20rpx;
			border-radius: 11rpx;
			background: $btn-confirm;
			float: right;
			line-height: 44rpx;
			color: #ffffff;
			text-align: center;
			font-size: $font-size-24;
		}

		.p-price-none {
			height: 44rpx;
			line-height: 44rpx;
			float: left;
			font-size: $font-size-24;
			color: #666;
			text-decoration: line-through;
			margin-left: 8rpx;
		}
		.p-minBuy {
			height: 44rpx;
			line-height: 44rpx;
			float: right;
			padding: 0 18rpx;
			border-radius: 22rpx;
			background-color: #f7f7f7;
			color: #7f7f7f;
			font-size: 24rpx;
			text-align: center;
			.min-text {
				margin: 0 6rpx;
			}
		}
		.p-login {
			height: 56rpx;
			line-height: 56rpx;
			color: $color-system;
			font-size: $font-size-24;
			&.grade {
				.price-left {
					float: left;
					.none {
						display: block;
						font-size: $font-size-20;
						line-height: 48rpx;
						color: #4a4b54;
						float: left;
						font-weight: bold;
						margin-left: 5rpx;
						text {
							letter-spacing: 4rpx;
							font-size: $font-size-32;
						}
					}
				}
			}
			.p-no {
				float: left;
				margin-right: 5rpx;
				font-size: $font-size-28;
				color: $text-color;
			}
			.p-login-btn {
				display: block;
				height: 44rpx;
				padding: 0 10rpx 0 20rpx;
				border-radius: 11rpx;
				background: $btn-confirm;
				float: right;
				line-height: 44rpx;
				color: #ffffff;
				text-align: center;
				font-size: $font-size-24;
			}
		}
	}
	.wrap-label {
		float: left;
		width: 100%;
		box-sizing: border-box;
		.label-a {
			padding: 0 18rpx;
			line-height: 32rpx;
			font-size: $font-size-20;
			color: $color-system;
			text-align: center;
			border-radius: 6rpx;
			background: #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;
					font-weight: bold;
				}
			}
		}
		.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: 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;
				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;
	padding: 0 24rpx;
	box-sizing: border-box;
	.label {
		font-size: $font-size-28;
		color: #333333;
	}
	.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: #fea785;
		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-chakangengduo {
		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-chakangengduo {
		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;
			}
		}
	}
	.product-rich-text-none {
		box-sizing: border-box;
		padding: 0 24rpx;
		text-align: left;
		font-size: 24rpx;
		color: #999999;
		line-height: 60rpx;
	}
	.content-none {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: left;
		font-size: $font-size-26;
		color: #999999;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.title {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
		.title-tab {
			width: 100%;
			height: 100rpx;
			background: #fff;
			z-index: 10;
			font-size: $font-size-30;
			text-align: left;
			color: $text-color;
			line-height: 100rpx;
			font-weight: 600;
		}
		.title-msg {
			width: 100%;
			height: 236rpx;
			padding: 18rpx;
			background-color: rgba(225, 86, 22, 0.1);
			color: $color-system;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.tit {
				line-height: 46rpx;
				font-size: $font-size-24;
				text-align: left;
			}
			.txt {
				line-height: 38rpx;
				font-size: $font-size-20;
				text-align: justify;
			}
		}
	}
	.content {
		width: 100%;
		background-color: #ffffff;
	}
}
.isLower {
	width: 100%;
	height: 116rpx;
	line-height: 116rpx;
	text-align: center;
	color: #000000;
	font-size: $font-size-32;
	font-weight: bold;
}
.bottom-btn {
	width: 100%;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	z-index: 99;
	.bottom-le {
		width: 300rpx;
		height: 100rpx;
		padding: 10rpx 20rpx 10rpx 0;
		float: left;
		box-sizing: border-box;
		.item-bt {
			width: 80rpx;
			height: 100%;
			margin-right: 15rpx;
			display: flex;
			float: left;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-22;
			color: $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: -5rpx;
			}
			.icon-num.goleft {
				right: 2rpx;
			}
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
			button.contact-btn {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				font-size: $font-size-24;
				text-align: center;
				text-decoration: none;
				line-height: 34rpx;
				border-radius: 0;
				-webkit-tap-highlight-color: transparent;
				overflow: hidden;
				color: $text-color;
				background-color: #ffffff;
			}
		}
	}
	.bottom-ri {
		width: 450rpx;
		height: 100%;
		float: right;
		display: flex;
		box-sizing: border-box;
		padding: 13rpx 20rpx 13rpx 0;
		.btn {
			flex: 1;
			width: 200rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: $font-size-24;
			color: #ffffff;
		}
		.btn-cart {
			background-color: #ffe6dc;
			color: $color-system;
			border-radius: 42rpx 0 0 42rpx;
		}
		.btn-cart.disabled {
			background-color: #e1e1e1;
			color: #ffffff;
		}
		.btn-bay {
			background: linear-gradient(to right, #f28f31 0%, #e15616 100%);
			border-radius: 0 42rpx 42rpx 0;
		}
		.btn-bay.disabled {
			background: linear-gradient(
				135deg,
				rgba(242, 143, 49, 0.5) 0%,
				rgba(225, 86, 22, 0.5) 100%
			);
		}
	}
}
.uni-badge--small {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.uni-badge {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	padding: 3px 6px;
	color: #333;
	border-radius: 100px;
	background-color: #f1f1f1;
}
.uni-badge-error {
	color: #fff;
	background-color: #dd524d;
}
.product-topnav {
	width: 100%;
	height: 80rpx;
	box-sizing: border-box;
	background: #ffffff;
	z-index: 1000;
	position: fixed;
	opacity: 1;
	left: 0;
	top: 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-sousuo {
					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;
			}
		}
	}
}

@keyframes showFixedColor {
	0% {
		background: rgba(255, 255, 255, 0);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 1);
	}
}
@keyframes hideFixedColor {
	0% {
		background: rgba(255, 255, 255, 1);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 0);
	}
}
/* 加入购物模态层*/
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes showAmnation {
	0% {
		top: -12rpx;
		opacity: 0;
	}
	50% {
		top: -60rpx;
		opacity: 1;
	}
	100% {
		top: -100rpx;
		opacity: 0;
	}
}
@keyframes hideAmnation {
	0% {
		top: -100rpx;
		opacity: 0;
	}
	100% {
		top: -12rpx;
		opacity: 0;
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -294rpx;
		width: 702rpx;
		padding: 24rpx 24rpx 36rpx 24rpx;
		height: 260rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
		}
		.btn {
			width: 100%;
			height: 88rpx;
			margin-top: 20rpx;
			.button {
				width: 100%;
				height: 88rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background: $btn-confirm;
				font-size: $font-size-28;
				border-radius: 44rpx;
			}
		}
	}

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	.layer-smimg {
		width: 114rpx;
		height: 114rpx;
		float: left;
		border-radius: 10rpx;
		margin-right: 24rpx;
		image {
			width: 114rpx;
			height: 114rpx;
			border-radius: 10rpx;
		}
	}
	.layer-nunbox {
		justify-content: space-between;
		align-items: center;
		width: 536rpx;
		height: auto;
		float: left;
		.layer-nunbox-t {
			width: 100%;
			height: 44rpx;
			position: relative;
			display: flex;
			margin-bottom: 10rpx;
			.text {
				font-size: $font-size-24;
				line-height: 48rpx;
				color: #999999;
			}
			.layer-nunbox-text {
				line-height: 44rpx;
				font-size: $font-size-28;
			}
			.number-box {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #ffe6dc;
				border-radius: 30rpx;
				height: 48rpx;
				margin-left: 20rpx;
				.iconfont {
					font-size: $font-size-24;
					padding: 0 18rpx;
					color: #999999;
					text-align: center;
					line-height: 48rpx;
					font-weight: bold;
					background: #fef6f3;
					&.icon-jianhao {
						border-radius: 30rpx 0 0 30rpx;
					}
					&.icon-jiahao {
						border-radius: 0 30rpx 30rpx 0;
					}
				}
				.btn-input {
					width: 62rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #ffffff;
					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;
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		.tui-popup-scroll {
			width: 100%;
			height: 500rpx;
			.content-tr {
				width: 100%;
				min-height: 58rpx;
				line-height: 58rpx;
				display: flex;
				.content-td {
					display: flex;
					flex: 3;
					font-size: $font-size-26;
					color: #999999;
					line-height: 58rpx;
					text-align: left;
				}
				.content-th {
					display: flex;
					flex: 7;
					font-size: $font-size-26;
					color: #333333;
					line-height: 58rpx;
					text-align: left;
					padding-left: 10rpx;
				}
			}
		}
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 24rpx;
	.tui-button {
		width: 100%;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
	}
}
/*富文本样式*/
rich-text.p {
	width: 702rpx !important;
	padding: 0 24rpx;
	text-align: justify;
}
rich-text.img {
	width: 100%;
	height: auto;
}
</style>