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

<template>
	<view
		class="product "
		:style="{
			paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
			paddingTop: CustomBar + 'px'
		}"
	>
		<custom-p
			v-if="isHeaderPoduct"
			:systeminfo="systeminfo"
			:navbar-data="nvabarData"
			:headerBtnPosi="headerBtnPosi"
			:headerColor="headerColor"
			:type="isShareType"
			:page="backPage"
		>
		</custom-p>
		<view
			class="product-topnav"
			id="topBar"
			v-show="isNavbarFiexd"
			:class="navbarFiexd"
			:style="{ top: CustomBar + 'px' }"
		>
			<view class="search-input">
				<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
					<view class="search-icon"> <text class="iconfont icon-iconfonticonfontsousuo1"></text> </view>
					<view class="search-text">搜索商品/项目仪器</view>
				</view>
			</view>
			<view class="navbar">
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 0 }"
					@click="tabClick(0)"
				>
					<text>详情</text> <text class="line"></text>
				</view>
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 1 }"
					@click="tabClick(1)"
				>
					<text>服务项目</text> <text class="line"></text>
				</view>
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 2 }"
					@click="tabClick(2)"
				>
					<text>推荐</text> <text class="line"></text>
				</view>
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 3 }"
					@click="tabClick(3)"
					v-if="product.archiveId !== 0"
				>
					<text>相关资料</text> <text class="line"></text>
				</view>
			</view>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="cart-content empty" v-if="isInvalid">
				<view class="empty-container">
					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
					<text class="error-text">商品已失效，去商城逛逛别的吧~</text>
					<view class="login-btn" @click="goIndex">去商城</view>
				</view>
			</view>
			<view class="container-product tui-skeleton" v-else>
				<view class="container-product-main">
					<view class="product-top">
						<view class="banner-section">
							<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
								<swiper
									class="banner tui-banner tui-skeleton-rect"
									@change="swiperChange"
									:duration="800"
									:autoplay="false"
									:circular="true"
								>
									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
										<image :src="item" @click="previewImg(index)" class="product-img" />
										<view class="cm-product-cover" v-if="product.appletsActType === 1"
											>云上美博会</view
										>
									</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-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" v-if="hasLogin">
									<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>
					<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(0)" v-if="!goodsData.isNoneDisabled">
						<text class="title">参数：</text> <text class="name">品牌 起订量 分类...</text>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<!-- 优惠券 -->
					<view
						class="product-parameter coupon"
						v-if="isShowButton && productCoupon.length > 0"
						@click="showPopup(2)"
					>
						<text class="title">优惠券：</text>
						<view class="coupon">
							<text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
								满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
							</text>
						</view>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<!-- 仪器培训方案 -->
					<view
						class="product-parameter"
						@click="showPopup(1)"
						v-if="product.commodityType == 2 && product.trainingMethod"
					>
						<text class="title">培训方案：</text>
						<text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<!-- 供应商 -->
					<view class="product-supplier" v-if="isNoneSupplier" @click="goSupplier">
						<view class="logo">
							<img
								:src="
									shop.logo
										? shop.logo
										: 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
								"
								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 v-show="tabCurrentIndex !== 3">
					<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"
								v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo"
							></parser>
							<view class="product-rich-text-none" v-else>暂无商品信息</view>
						</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"
								:query-type="product.recommendType"
								v-if="isRequest"
							></recommend>
						</view>
					</view>
				</view>
				<!-- 相关资料 -->
				<view class="product-details recommend product-details3" v-show="tabCurrentIndex === 3">
					<cm-product-doc
						@previewImage="changePreViewImageStatus"
						:archiveId="product.archiveId"
						:userId="userId"
					></cm-product-doc>
				</view>
				<!-- 商品参数 -->
				<tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
					<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(0)">收起</view> </view>
						</view>
					</view>
				</tui-bottom-popup>
				<!-- 优惠券 -->
				<tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
					<view class="tui-popup-box clearfix">
						<view class="title">优惠券</view>
						<view class="tui-popup-close" @click="hidePopup(2)">
							<text class="iconfont icon-iconfontguanbi"></text>
						</view>
						<view class="tui-popup-tabs">
							<coupon-tabs
								:tabs="navbar"
								:currentTab="currentTab > 2 ? 0 : currentTab"
								@change="couponChange"
								:itemWidth="100 / navbar.length + '%'"
								selectedColor="#e15616"
								sliderBgColor="#e15616"
							>
							</coupon-tabs>
						</view>
						<div class="tui-popup-main coupon">
							<scroll-view class="tui-popup-scroll" scroll-y="true">
								<view class="coupon-empty" v-if="isCouponEmpty">
									<image
										class="empty-container-image"
										:src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
									></image>
									<text class="error-text">暂无可领的优惠券~</text>
								</view>
								<template v-else>
									<view
										v-for="(coupon, index) in productCouponList"
										:key="index"
										:id="coupon.couponId"
										class="coupon-list"
									>
										<view class="list-cell-le">
											<view class="coupon-maxMoney"
												><text class="small">￥</text>{{ coupon.couponAmount }}</view
											>
											<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
										</view>
										<view class="list-cell-ri">
											<view class="list-cell-top">
												<view class="list-cell-type">
													<view class="list-cell-tags">
														<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
													</view>
													<view class="list-cell-texts">
														<text v-if="coupon.couponType == 0">
															{{
																coupon.productType && coupon.productType == 1
																	? '全商城商品通用'
																	: '仅可购买指定商品'
															}}
														</text>
														<text v-if="coupon.couponType == 1">
															{{
																coupon.categoryType == 1
																	? '仅限购买产品类商品'
																	: '仅限购买仪器类商品'
															}}
														</text>
														<text v-if="coupon.couponType == 3"
															>仅限购买店铺【{{ coupon.shopName }}】的商品</text
														>
														<text v-if="coupon.couponType == 4 || coupon.couponType == 2"
															>全商城商品通用</text
														>
													</view>
												</view>
												<view class="list-cell-btn">
													<view class="icon-used">
														<view
															class="icon-used-btn receive"
															v-if="currentTab == 0"
															@click="receiveCoupon(coupon)"
															>领取</view
														>
														<view class="icon-used-btn make" v-if="currentTab == 1"
															>已领取</view
														>
													</view>
												</view>
											</view>
											<view class="list-cell-time"
												>{{ coupon.startDate }} - {{ coupon.endDate }}</view
											>
										</view>
									</view>
								</template>
							</scroll-view>
						</div>
					</view>
				</tui-bottom-popup>
				<!-- 培训方案 -->
				<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
					<view class="tui-popup-box clearfix">
						<view class="title">培训方案</view>
						<div class="tui-popup-main">
							<scroll-view class="tui-popup-scroll train" scroll-y="true">
								<view class="content-tr">
									<view class="content-td">培训方式：</view>
									<view class="content-th">{{
										product.trainingMethod == 1 ? '线上培训' : '线下培训'
									}}</view>
								</view>
								<view class="content-tr">
									<view class="content-td">培训费用：</view>
									<view class="content-th">{{
										product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含'
									}}</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(1)">收起</view> </view>
						</view>
					</view>
				</tui-bottom-popup>
				<!-- 底部按钮 -->
				<view class="menu" v-if="isShowButton">
					<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>
							<button class="item-bt" open-type="contact" @click="handleContact">
								<image src="../../static/severs@3x.png"></image> <text>客服</text>
							</button>
							<view class="item-bt" @click="buyProductCart()">
								<image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
								<text>购物车</text>
								<text
									v-if="hasLogin && bottomCartNumber > 0"
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
									:class="[bottomCartNumber < 10 ? 'goleft' : '']"
								>
									{{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
								</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 :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></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 cmProductDoc from '@/components/cm-module/productDetails/cm-product-doc.vue'
import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
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,
		couponTabs,
		cmProductDoc
	},
	data() {
		return {
			StaticUrl: this.$Static, //静态图片路径
			clickPath: '/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: [],
			productCoupon: [], // 优惠券
			productCouponList: [], // 优惠券弹窗列表
			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
			systeminfo: this.setSysteminfo(), // 获取设备信息
			windowHeight: '',
			headerColor: false,
			backPage: 1,
			nvabarData: {
				// 顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
				title: '' // 导航栏 中间的标题
			},
			linkPath: '',
			CustomBar: this.CustomBar, // 顶部导航栏高度
			popupShow0: false, // 参数弹窗
			popupShow1: false, // 培训方案
			popupShow2: false, // 优惠券
			tabSelectFlag: false,
			sectionPropsArr: [],
			scrollTopArray: [],
			winHeight: '',
			isShowButton: true,
			isNoneSupplier: false,
			isCouponEmpty: false,
			currentTab: 0,
			couponParam: {
				// 获取弹窗优惠券领取参数
				userId: 0,
				productId: 0,
				status: 1,
				source: 2
			},
			bottomCartNumber: 0,
			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
			isPreviewImage: false,
			opentype: ''
		}
	},
	computed: {
		...mapState(['hasLogin', 'isWxAuthorize', 'identity', 'isIphoneX'])
	},
	filters: {
		TypeFormat(value) {
			switch (value) {
				case 0:
					return '活动券'
					break
				case 1:
					return '品类券'
					break
				case 2:
					return '用户专享券'
					break
				case 3:
					return '店铺券'
					break
				case 4:
					return '新用户券'
					break
			}
		}
	},
	watch: {
		isNavbarFiexd(val) {
			if (!this.isRequest || !val) return
			let timer = null
			clearTimeout(timer)
			timer = setTimeout(() => {
				if (this.sectionPropsArr.length > 0) return
				this.getSectionProps()
			}, 200)
		}
	},
	onLoad(option) {
		this.productId = this.couponParam.productId = option.id //获取商品ID
		this.opentype = option.open
		this.isShareType = option.type
		this.linkPath = option.path
		this.isHeaderPoduct = true
		if (option.page == 2) {
			this.backPage = option.page
		}
		if (this.isShareType == 'share') {
			wxLogin.wxLoginAuthorize()
		}
		this.getWinHeight()
	},
	onReady() {
		if (this.opentype == 'caimei') {
			// 跳转到资料详情
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				this.isNavbarFiexd = true
				this.tabClick(3)
				uni.hideLoading()
			}, 2000)
		}
		console.log('是iPhoneX', this.isIphoneX)
	},
	methods: {
		initData() {
			// 初始化商品详情查询
			this.ProductService.QueryProductDetils({
				userId: this.userId,
				productId: this.productId,
				identity: this.identity
			})
				.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.product.validFlag == 10) {
						this.isInvalid = true
					} else if (this.product.validFlag === 9) {
						if (this.userIdentity == 1) {
							this.isInvalid = false
						} else {
							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)
					})
					//处理阶梯价格
					if (this.product.ladderPriceList != null) {
						this.ladderPriceList = this.product.ladderPriceList
					}
					//拆分金额并转千分位格式显示
					if (this.product.price != null) {
						this.retailPrice = this.product.price.toFixed(2)
						this.buyRetailPrice = this.product.price
					}

					//处理下架商品和售罄商品
					if (this.product.validFlag == 3 || this.stock == 0) {
						this.isNoneDisabled = true
						this.disabled = true
					} else {
						this.disabled = false
						this.isNoneDisabled = false
						this.goodsData.disabledText = ''
					}
					if (this.product.priceFlag == 1) {
						this.disabled = true
					} else if (this.product.priceFlag == 2) {
						if (this.userIdentity == 4) {
							this.disabled = true
						} else {
							this.disabled = false
						}
					} 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 = '售罄'
					}
					console.log(this.disabled)
					// setTimeout(() => {
					//     this.getSectionProps()
					// }, 2000)
					this.shoppingHeaderCartNumber()
					this.queryProductDetilsCoupons()

					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		queryProductDetilsCoupons() {
			// 初始化商品详情优惠券信息
			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
				.then(response => {
					this.productCoupon = response.data.list
				})
				.catch(error => {
					console.log('获取优惠券列表失败')
				})
		},
		queryPopupCoupons() {
			// 获取弹窗优惠券列表
			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
				.then(response => {
					let data = response.data
					this.navbar[0].num = data.notCouponNum
					this.navbar[1].num = data.couponNum
					if (data.couponList && data.couponList.length > 0) {
						this.productCouponList = data.couponList
						this.isCouponEmpty = false
					} else {
						this.isCouponEmpty = true
					}
				})
				.catch(error => {
					console.log('获取优惠券列表失败')
				})
		},
		shoppingHeaderCartNumber() {
			// 获取用户购物车储量
			this.ProductService.shoppingHeaderCartNumber({ userId: this.userId })
				.then(response => {
					this.bottomCartNumber = response.data.length
				})
				.catch(error => {
					console.log('获取购物车数量失败')
				})
		},
		receiveCoupon(coupon) {
			// 点击优惠券领取按钮
			this.ProductService.ReceiveCoupon({
				userId: this.couponParam.userId,
				couponId: coupon.couponId,
				source: 2
			})
				.then(response => {
					this.$util.msg('领取成功', 1500, true, 'success')
					setTimeout(() => {
						this.currentTab = 1
						this.couponParam.status = 2
						this.queryPopupCoupons()
					}, 1500)
				})
				.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: ''
			})
		},
		//商品详情&&供应商信息tab切换
		tabClick(index) {
			// 重新标记
			this.getSectionProps()
			this.tabCurrentIndex = index
			this.tabSelectFlag = true
			let timer = null
			clearTimeout(timer)
			// 点击tab 300ms才执行跳转，避免出错（来回跳动）
			timer = setTimeout(() => {
				this.tabClickAction(index)
			}, 300)
		},
		// 跳转执行
		tabClickAction(index) {
			const that = this
			if (index === 3) {
				return uni.pageScrollTo({
					duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
					scrollTop: this.sectionPropsArr[0].scrollTop
				})
			}
			uni.pageScrollTo({
				duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
				scrollTop: this.sectionPropsArr[index].scrollTop,
				success() {
					setTimeout(() => {
						that.tabSelectFlag = false
					}, 300)
				}
			})
		},
		handleContact(e) {
			//跳转小程序客服
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		buyProductCart() {
			//底部购物车按钮点击
			if (this.hasLogin) {
				// 友盟埋点商品详情购物车入口点击事件
				if (process.env.NODE_ENV != 'development') {
					this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
						Um_Key_PageName: '去购物车',
						Um_Key_SourcePage: '商品详情购物车入口'
					})
				}
				// this.$api.navigateTo('/pages/goods/cart')
				this.$api.navigateTo('/pages/goods/cart-index')
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		btnGetConfirm(type) {
			//加入购物车&&立即购买点击
			if (this.hasLogin) {
				switch (type) {
					case 'add':
						// 友盟埋点商品详情加入购物车点击事件
						if (process.env.NODE_ENV != 'development') {
							this.$uma.trackEvent('Um_Event_ProductAddCart', {
								Um_Key_PageName: '加入购物车',
								Um_Key_SourcePage: '商品详情',
								Um_Key_ProductID: `${this.product.productId}`
							})
						}
						break
					case 'buy':
						// 友盟埋点商品详情立即购买点击事件
						if (process.env.NODE_ENV != 'development') {
							this.$uma.trackEvent('Um_Event_ProductBuyConfirm', {
								Um_Key_PageName: '立即购买',
								Um_Key_SourcePage: '商品详情',
								Um_Key_ProductID: `${this.product.productId}`
							})
						}
						break
				}
				this.showSpec(type)
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		//popup弹窗数量增加按钮
		changeCountAdd() {
			if (this.buyRetailPriceStep == 2) {
				this.number += this.minBuyNumber
			} else {
				this.number++
			}
			this.processActivityPrice()
		},
		//popup弹窗数量减按钮
		changeCountSub() {
			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.price
			} else {
				this.ladderPriceList.forEach((item, index) => {
					if (this.number >= item.buyNum) {
						this.buyRetailPrice = item.buyPrice
					}
				})
			}
		},
		showSpec(type) {
			//显示选择数量确认弹窗
			this.isBtnType = type
			this.specClass = 'show'
			if (this.ladderPriceFlag) {
				this.processActivityPrice()
			}
		},
		hideSpec() {
			//关闭选择数量确认弹窗
			this.specClass = 'hide'
			setTimeout(() => {
				this.specClass = 'none'
			}, 200)
		},
		btnConfirm() {
			//加入购物车&&立即购买跳转订单页并关闭弹窗
			// 友盟埋点商品详情确认购买商品点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_ProductShoppingConfirm', {
					Um_Key_PageName: '商品购买确认',
					Um_Key_SourcePage: '商品详情',
					Um_Key_ProductID: `${this.product.productId}`
				})
			}
			if (this.isBtnType == 'add') {
				this.getAddProductCart()
			} else {
				this.toConfirmation()
			}
		},
		toConfirmation() {
			//跳转确认订单页面
			this.specClass = 'hide'
			let productStp = {
				productIds: 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,
				source: 2
			})
				.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.bottomCartNumber = response.data
				})
				.catch(error => {
					console.log('error', error.msg)
				})
		},
		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('/pages/supplier/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(index) {
			switch (index) {
				case 0:
					this.popupShow0 = true
					break
				case 1:
					this.popupShow1 = true
					break
				case 2:
					if (this.hasLogin) {
						this.queryPopupCoupons()
						this.popupShow2 = true
					} else {
						this.$api.navigateTo('/pages/login/login')
					}
					break
			}
		},
		hidePopup(index) {
			switch (index) {
				case 0:
					this.popupShow0 = false
					break
				case 1:
					this.popupShow1 = false
					break
				case 2:
					this.popupShow2 = false
					break
			}
		},
		couponChange(e) {
			this.currentTab = e.index
			switch (this.currentTab) {
				case 0:
					this.couponParam.status = 1
					this.queryPopupCoupons()
					break
				case 1:
					this.couponParam.status = 2
					this.queryPopupCoupons()
					break
			}
		},
		// 获取每个tab对应区域的区间
		async getSectionProps() {
			const sectionPropsArr = [],
				scrollTopArray = [],
				className = 'product-details'

			// 获取相关节点元素信息
			const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
			const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
			const topBar = await this.$util.boundingClientRect(this, '#topBar', false)

			/*
                说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
                     scrollTop = 上一个的scrollTop + 上一个的高度
            */
			productDetail.forEach((item, index) => {
				// 上一个 prdocut-details 的 scrollTop 值
				const prev = sectionPropsArr[index - 1]
				const prevScrollTop = prev ? prev.scrollTop : productMain.height
				// 上一个 prdocut-details 的高度
				const add = productDetail[index - 1]
				// 第一个需要减去tabs的高度
				const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0

				sectionPropsArr.push({
					className: `${className}-${index}`,
					scrollTop: prevScrollTop + addHeight
				})
				// - topBar.height
			})
			this.sectionPropsArr = sectionPropsArr

			console.log('更新tab影响区域')
		},
		//当滑动时也能同步激活tab
		activeTab: debounce(
			(top, _this) => {
				const { sectionPropsArr } = _this
				if (sectionPropsArr.length > 0) {
					sectionPropsArr.forEach((item, index) => {
						// 当前位置为开始位置， 下个起始位置为结束位置
						const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
						const next = sectionPropsArr[index + 1]
						const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
						if (top >= openInterval && top < closedInterval) {
							_this.tabCurrentIndex = index
						}
					})
				}
			},
			100,
			true
		),
		getWinHeight() {
			this.winHeight = wx.getSystemInfoSync().windowHeight
		},
		changePreViewImageStatus(falg) {
			this.isPreviewImage = falg
		}
	},
	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() {
		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
		if (!this.isPreviewImage) {
			this.$api
				.getStorage()
				.then(resolve => {
					this.userId = this.couponParam.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()
				})
		}
		this.isPreviewImage = false
	},
	created() {}
}
</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%;
	}
	.banner-item {
		position: relative;
		.cm-product-cover {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 147rpx;
			height: 57rpx;
			line-height: 57rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
			background-size: 147rpx;
		}
	}
}
.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: 980;
				.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;
				}
			}
		}
		.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;
	.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;
	border-bottom: 20rpx solid #f7f7f7;
	&.coupon {
		.title {
			color: #f94b4b;
		}
		.icon-xiayibu {
			color: #f94b4b;
		}
		.coupon {
			float: right;
			box-sizing: border-box;
			padding: 29rpx 0;
			padding-right: 35rpx;
			.tags {
				height: 32rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				background-color: #fff1eb;
				line-height: 28rpx;
				color: #f94b4b;
				text-align: center;
				display: inline-block;
				padding: 0 10rpx;
				font-size: $font-size-20;
				border: 1px solid #f94b4b;
				float: right;
				margin: 0 6rpx;
			}
		}
	}
	.title {
		line-height: 90rpx;
		display: inline-block;
		float: left;
		font-size: $font-size-28;
		color: #666666;
	}
	.name {
		line-height: 90rpx;
		display: inline-block;
		float: left;
		font-size: $font-size-28;
		color: $text-color;
		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;
			}
		}
	}
	.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: 174rpx;
	box-sizing: border-box;
	background: #ffffff;
	z-index: 990;
	position: fixed;
	opacity: 1;
	left: 0;
	&.fixed {
		animation: showFixedColor 0.1s ease-in-out both;
	}
	&.none {
		animation: hideFixedColor 0.1s ease-in-out both;
	}
	.navbar {
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		display: flex;
		.nav-item {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			font-size: $font-size-28;
			color: $text-color;
			position: relative;
			float: left;
			position: relative;
			.line {
				width: 60rpx;
				height: 2px;
				border-radius: 1px;
				background: #ffffff;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -30rpx;
			}
			&.current {
				color: $color-system;
				.line {
					background: $color-system;
				}
			}
		}
	}
	.search-input {
		width: 100%;
		height: 114rpx;
		padding: 24rpx;
		box-sizing: border-box;
		.gosearch-btn {
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			margin: 0 auto;
			font-size: 26rpx;
			line-height: 66rpx;
			color: #b2b2b2;
			position: relative;
			box-sizing: border-box;
			padding-left: 66rpx;
			&.fixed {
				background: rgba(70, 70, 70, 0.1);
			}
			&.none {
				background: rgba(70, 70, 70, 0.1);
			}
			.search-icon {
				width: 66rpx;
				height: 66rpx;
				position: absolute;
				left: 0;
				top: 2rpx;
				text-align: center;
				line-height: 66rpx;
				.icon-iconfonticonfontsousuo1 {
					margin: 0 6rpx;
					font-size: $font-size-34;
					color: #b2b2b2;
					z-index: 10;
				}
			}
			.search-text {
				font-size: $font-size-24;
				line-height: 66rpx;
				color: #b2b2b2;
			}
		}
	}
}

@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: 24rpx 24rpx 0 24rpx;
	.tui-popup-close {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		right: 0;
		top: 24rpx;
		line-height: 90rpx;
		text-align: center;
		color: #b2b2b2;
		.icon-iconfontguanbi {
			font-size: $font-size-40;
		}
	}
	.title {
		font-size: $font-size-34;
		color: $text-color;
		line-height: 88rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 88rpx;
		font-weight: bold;
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		&.coupon {
			padding-bottom: 40rpx;
			.coupon-empty {
				width: 100%;
				height: 600rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: fixed;
				background: $bg-color;
				.empty-container-image {
					width: 150rpx;
					height: 150rpx;
					margin-bottom: 0;
					margin-top: 0;
				}
				.error-text {
					font-size: $font-size-28;
					color: #999999;
					line-height: 88rpx;
				}
			}
		}
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.coupon-list {
				width: 100%;
				height: 200rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
				background-size: cover;
				&:last-child {
					margin-bottom: 24rpx;
				}
				.list-cell-le {
					width: 224rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 37rpx 0;
					float: left;
					.coupon-maxMoney {
						width: 100%;
						height: 78rpx;
						line-height: 78rpx;
						font-size: 56rpx;
						color: #ffffff;
						text-align: center;
						.small {
							font-size: $font-size-24;
						}
					}
					.coupon-minMoney {
						width: 100%;
						height: 33rpx;
						line-height: 33rpx;
						font-size: $font-size-24;
						color: #ffffff;
						text-align: center;
					}
				}
				.list-cell-ri {
					width: 478rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 20rpx 24rpx 0 24rpx;
					float: right;
					.list-cell-top {
						width: 100%;
						height: 121rpx;
						float: left;
						border-bottom: 1px solid #e1e1e1;
						.list-cell-type {
							width: 286rpx;
							height: 100%;
							float: left;
							.list-cell-tags {
								width: 100%;
								height: 32rpx;
								margin-bottom: 7rpx;
								.tags {
									display: inline-block;
									padding: 0 10rpx;
									height: 32rpx;
									line-height: 32rpx;
									background-color: #ffdcce;
									color: #f94b4b;
									font-size: $font-size-20;
									border-radius: 8rpx;
									text-align: center;
									float: left;
								}
							}
							.list-cell-texts {
								width: 100%;
								height: auto;
								line-height: 35rpx;
								text-overflow: ellipsis;
								display: -webkit-box;
								word-break: break-all;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								font-size: 26rpx;
								color: #333333;
							}
						}
						.list-cell-btn {
							width: 128rpx;
							height: 100%;
							float: right;
							.icon-used {
								width: 100%;
								height: 100%;
								box-sizing: border-box;
								padding-top: 57rpx;
								.icon-used-btn {
									width: 128rpx;
									height: 48rpx;
									border-radius: 28rpx;
									line-height: 48rpx;
									font-size: $font-size-26;
									text-align: center;
									&.receive {
										background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
										color: #ffffff;
									}
									&.make {
										border: solid 1px #f94b4b;
										color: #f94b4b;
									}
								}
							}
						}
					}
					.list-cell-time {
						width: 100%;
						height: 58rpx;
						line-height: 58rpx;
						text-align: left;
						font-size: $font-size-20;
						color: #999999;
					}
				}
			}
			&.train {
				height: 240rpx;
			}
			.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>