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

<<<<<<< HEAD
<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 - 2 + '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)"
                    v-if="product.qualificationImg"
                >
                    <text>商品资质</text>
                    <text class="line"></text>
                </view>
                <view
                    class="nav-item tui-skeleton-fillet"
                    :class="{ current: tabCurrentIndex === 3 }"
                    @click="tabClick(3)"
                >
                    <text>推荐</text>
                    <text class="line"></text>
                </view>
                <view
                    class="nav-item tui-skeleton-fillet"
                    :class="{ current: tabCurrentIndex === 4 }"
                    @click="tabClick(4)"
                    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">
                            <!-- <view class="cm-product-tags"> -->
                            <!-- <view class="cm-product-cover" v-if="product.appletsActType === 1"
									>云上美博会</view
								> -->
                            <view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
                            <view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
                            <!-- </view> -->
                            <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 && 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"
                                        v-if="userInfo.userIdentity !== 1"
                                    >
                                        <view class=""><text class="iconfont icon-fenxiang1"></text></view>
                                        <view class="">分享</view>
                                    </button>
                                    <button class="p-title-share tui-share-position" @click="handleShare" v-else>
                                        <view class=""><text class="iconfont icon-fenxiang1"></text></view>
                                        <view class="">分享</view>
                                    </button>
                                </view>
                                <view class="wrap-label" v-if="product.tagsList && 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 class="none-text">咨询类似商品，请联系客服!</view>
                    </view>
                    <!-- 选择规格 -->
                    <view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
                        <text class="title">选择：</text>
                        <text class="name">共{{ skusCount }}种规格可选</text>
                        <text class="iconfont icon-xiayibu"></text>
                    </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="return-instructions" v-if="returnGoodsStutas">
                        <cm-return-instructions :content="helpContent"></cm-return-instructions>
                    </view>
                    <!-- 配套商品 -->
                    <view
                        class="product-supporting"
                        v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
                        @click.stop="handleSupporting"
                    >
                        <view class="product-supporting-title">配套商品({{ supportingNum }})</view>
                        <view class="product-supporting-list">
                            <view
                                class="list"
                                v-for="(supporting, index) in supportingList"
                                :key="index"
                                v-if="index < 4"
                            >
                                <image class="list-image" :src="supporting.image" mode=""></image>
                            </view>
                            <text class="iconfont icon-xiayibu"></text>
                        </view>
                    </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" @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" v-if="!isShowCaimeiShop"><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">
                            <template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
                                <mp-html :content="html" :tag-style="tagStyle" />
                            </template>
                            <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 qualifications product-details2" v-if="product.qualificationImg">
                        <view class="title"><view class="title-tab">商品资质</view></view>
                        <view class="product-details-image">
                            <view class="product-details-table clearfix" v-if="product.qualificationNo">
                                <view class="ladder-tr">
                                    <view class="ladder-item-td th">证书编号</view>
                                    <view class="ladder-item-td th">产品名称</view>
                                    <view class="ladder-item-td th">详情</view>
                                </view>
                                <view class="ladder-tr">
                                    <view class="ladder-item-td">
                                        <view class="te-text">{{ product.qualificationNo }}</view>
                                    </view>
                                    <view class="ladder-item-td">
                                        <view class="te-text">{{ product.productName }}</view>
                                    </view>
                                    <view class="ladder-item-td">
                                        <view class="te-text last">{{ product.qualificationLink }}</view>
                                        <view class="te-copy">
                                            <text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
                                                复制
                                            </text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <image
                                class="qualificationImg-image"
                                :src="product.qualificationImg"
                                mode="aspectFill"
                                @click="previewImg1(product.qualificationImg)"
                            ></image>
                        </view>
                    </view>
                    <!-- 相关推荐 -->
                    <view class="product-details recommend product-details3">
                        <view class="title"><view class="title-tab">相关推荐</view></view>
                        <view class="content hot">
                            <cm-recommend
                                :query-productid="product.productId"
                                :query-type="product.recommendType"
                                v-if="isRequest"
                            ></cm-recommend>
                        </view>
                    </view>
                </view>
                <!-- 相关资料 -->
                <view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
                    <cm-product-doc
                        @previewImage="changePreViewImageStatus"
                        :archiveId="product.archiveId"
                        :userId="userId"
                    ></cm-product-doc>
                </view>
                <!-- 优惠券 -->
                <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="#FF5B00"
                                sliderBgColor="#FF5B00"
                            ></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">
                                                        <template v-if="coupon.moneyCouponFlag == 1">
                                                            <text class="tags" v-if="coupon.moneyCouponType == 1">
                                                                意向{{ coupon.couponType | TypeFormat }}
                                                            </text>
                                                            <text class="tags" v-else>
                                                                定向{{ coupon.couponType | TypeFormat }}
                                                            </text>
                                                        </template>
                                                        <template v-else>
                                                            <text class="tags">
                                                                {{ coupon.couponType | TypeFormat }}
                                                            </text>
                                                        </template>
                                                    </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">
                                                        <template v-if="coupon.couponBtnType == 0">
                                                            <template v-if="coupon.couponPayWay == 2">
                                                                <view class="icon-used-text">
                                                                    {{ coupon.moneyCouponPrice }}采美豆
                                                                </view>
                                                                <view
                                                                    class="icon-used-btn receive"
                                                                    @click="toDeductCoupon(coupon)"
                                                                >
                                                                    抵扣
                                                                </view>
                                                            </template>
                                                            <template v-else-if="coupon.couponPayWay == 1">
                                                                <view class="icon-used-text">购买</view>
                                                                <view
                                                                    class="icon-used-btn receive"
                                                                    @click="toPayCoupon(coupon)"
                                                                >
                                                                    ￥{{ coupon.moneyCouponPrice }}
                                                                </view>
                                                            </template>
                                                            <template v-else>
                                                                <view
                                                                    class="icon-used-btn receive"
                                                                    @click="receiveCoupon(coupon)"
                                                                >
                                                                    领取
                                                                </view>
                                                            </template>
                                                        </template>
                                                        <view
                                                            class="icon-used-btn make"
                                                            v-if="coupon.couponBtnType == 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' : '.34rpx' }"
                        >
                            <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>
                            <view class="item-bt" @click="handleCollection">
                                <image
                                    :src="
                                        collectionType
                                            ? StaticUrl + 'icon/icon-collection@2x.png'
                                            : StaticUrl + 'icon/icon-collection-none@2x.png'
                                    "
                                ></image>
                                <text>{{ collectionType ? '已收藏' : '收藏' }}</text>
                            </view>
                            <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>
                <!-- 侧边 -->
                <scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
            </view>
        </template>
        <!-- 商品参数 -->
        <cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product"></cm-prams-popup>
        <!-- 选择规格弹窗 -->
        <cm-unit-popup
            v-if="popupShow3"
            :popupShow="popupShow3"
            :skuProduct="skuProduct"
            :productCoupon="productCoupon"
            :type="unitPopupType"
            :btnType="btnType"
            :goodsData="goodsData"
            @buyConfirm="handleBuyConfirm"
            @skuClick="handleSkuClick"
        ></cm-unit-popup>
        <!-- 弹窗提示 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel"
            :content="contentModalText"
            :button="modalButton"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 商品详情可见度弹窗提醒 -->
        <cm-product-modal
            v-if="showModal"
            :showModal="showModal"
            :commodityDetailsFlag="product.commodityDetailsFlag"
            :isShareType="isShareType"
            :userIdentity="userIdentity"
            :firstClubType="firstClubType"
        />
        <!-- ross弹窗 -->
        <cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml"></cmRossPopup>

        <!-- 分享弹窗 -->
        <cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>

        <!-- 协销名片 -->
        <cm-seller-modal :suid="suid"></cm-seller-modal>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import customP from './components/cm-header.vue' //自定义导航
import cmPrice from './components/cm-price.vue' //价格显示
import cmAttributes from './components/cm-attributes.vue' //规格信息
import cmRecommend from './components/recommend' //相关推荐
import cmParameter from './components/cm-parameter' //相关参数
import cmService from './components/cm-service' //服务项目
import cmProductDoc from './components/cm-product-doc.vue'
import cmProductModal from './components/cm-product-modal.vue'
import cmPramsPopup from './components/cm-prams-popup.vue'
import cmUnitPopup from './components/cm-unit-popup.vue'
import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
import cmReturnInstructions from './components/cm-return-instructions.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import { debounce } from '@/common/config/common.js'
import payMixins from '@/mixins/payMixins.js'
import proMixins from './mixins/proMixins.js'
import cmSrsMixins from '@/utils/cmSrsMixins.js'
import thorui from '@/components/clipboard/clipboard.thorui.js'
import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
import { queryParse } from './mixins/share.helper.js'
var isPreviewImg
export default {
    mixins: [payMixins, proMixins, cmSrsMixins],
    components: {
        customP,
        cmRecommend,
        cmPrice,
        cmAttributes,
        cmParameter,
        cmService,
        couponTabs,
        cmProductDoc,
        cmPramsPopup,
        cmUnitPopup,
        cmProductModal,
        cmRossPopup,
        cmReturnInstructions,
        cmSharePopup,
        cmSellerModal
    },
    data() {
        return {
            StaticUrl: this.$Static, //静态图片路径
            clickPath: '/pages/search/search',
            html: '',
            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,
            isShareType: '',
            isHeaderPoduct: false,
            isNavbarFiexd: false,
            navbarFiexd: 'none',
            ladderPriceFlag: '',
            ladderPriceList: '',
            isInvalid: false,
            isEvaluate: false,
            isAnimation: false,
            skeletonShow: true,
            isStock: false,
            disabled: false,
            isNoneDisabled: false,
            tabCurrentIndex: 0,
            userId: 0,
            shopId: 0,
            shopID: 0,
            typeId: 0,
            vipFlag: 0,
            firstClubType: 0,
            productId: 0,
            skusCount: 0, // 规格种类
            userIdentity: 0, // 用户类型
            goodsData: {}, // 自定义数据
            shop: {}, //供应商信息
            product: {}, //采美
            productImage: [],
            retailPrice: 0,
            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, // 优惠券
            popupShow3: false, // 购买弹窗
            tabSelectFlag: false,
            sectionPropsArr: [],
            scrollTopArray: [],
            winHeight: '',
            isShowButton: true,
            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: '',
            collectionType: false,
            isShowSupportingList: false,
            supportingList: [],
            supportingNum: 0, // 组合商品总数
            contentModalText: '', //操作文字提示语句
            modal: false,
            modalButton: [
                {
                    text: '取消',
                    type: 'gray',
                    plain: true //是否空心
                },
                {
                    text: '去升级',
                    customStyle: {
                        color: '#fff',
                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
                    },
                    plain: false
                }
            ],
            showModal: false,
            isShowCaimeiShop: false,
            unitPopupType: 0, // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
            returnGoodsStutas: false,
            helpContent: '',
            posterData: {}, // 商品详情
            suid: 0, // 协销id
            scene: {}, //获取二维码参数
            options: {}
        }
    },
    computed: {
        ...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
    },
    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) {
        if (option.scene) {
            // 识别小程序二维码
            this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
        }
        this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId =
            option.id || this.scene.id //获取商品ID
        if (option.typeId) {
            this.typeId = option.typeId
        }
        this.opentype = option.open
        this.isShareType = option.type
        this.linkPath = option.path
        this.isHeaderPoduct = true
        if (option.page == 2) {
            this.backPage = option.page
        }
        this.options = option.scene ? this.scene : option
        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: {
        async initGetStotage() {
            // 初始化
            const userInfo = await this.$api.getStorage()
            this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
            this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
            this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
            this.shopID = userInfo.shopId ? userInfo.shopId : 0
            this.firstClubType = this.clubType
            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()
            }
        },
        initData() {
            // 初始化商品详情查询
            this.ProductService.QueryProductDetils({
                userId: this.userId,
                productId: this.productId,
                identity: this.identity,
                typeId: this.typeId
            })
                .then(response => {
                    let productLabel = ''
                    this.productImage = []
                    this.shop = response.data.shop
                    this.shopId = response.data.shopId
                    const dataStr = JSON.stringify(response.data)
                    this.product = JSON.parse(dataStr)
                    this.skuProduct = JSON.parse(dataStr)
                    this.skusCount = this.product.skus.length
                    this.addParams.skuId = this.product.skuId
                    if (this.product.tinyTypeName) {
                        productLabel = this.product.tinyTypeName
                    } else if (!this.product.tinyTypeName && this.product.smallTypeName) {
                        productLabel = this.product.smallTypeName
                    } else {
                        productLabel = this.product.bigTypeName
                    }
                    //设置统计数据标签
                    if (this.product.relatedLabels) {
                        uni.setStorageSync('productLabel', this.product.relatedLabels)
                    } else {
                        uni.setStorageSync(
                            'productLabel',
                            `${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
                        )
                    }
                    //校验是否为ross
                    this.checkedIsRossSet()
                    //判断是否可以跳转供应商主页
                    if (this.product.shopType === 2) {
                        this.isShowCaimeiShop = true
                    }
                    // 判断是否显示已收藏
                    if (this.product.userLike && this.product.userLike == 1) {
                        this.collectionType = true
                    } else {
                        this.collectionType = false
                    }
                    //已删除/已冻结
                    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.adaptRichTextImg(this.product)
                    this.stock = this.product.stock
                    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)
                    }
                    //处理下架商品和售罄商品
                    if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
                        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.vipFlag != 1) {
                            this.disabled = true
                        } else {
                            this.disabled = false
                        }
                    } else if (this.product.priceFlag == 3) {
                        if (this.userIdentity == 4) {
                            this.disabled = true
                        } else if (this.userIdentity == 2 && this.firstClubType != 1) {
                            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.product.saleOutFlag === 1) {
                        this.goodsData.disabledText = '售罄'
                    }
                    console.log(this.disabled)
                    // setTimeout(() => {
                    //     this.getSectionProps()
                    // }, 2000)
                    this.handleShowProductType(this.product.commodityDetailsFlag)
                    if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
                        this.ProductCartNumber()
                    }
                    this.queryProductDetilsCoupons()
                    this.getCommodityCombinationList()
                    // 特殊商品退货须知
                    this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
                    this.helpContent = response.data.helpContent

                    setTimeout(() => {
                        this.skeletonShow = false
                        this.isRequest = true
                    }, 1000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handleShowProductType(flag = '') {
            // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
            const flagMap = {
                '2': true,
                '3': true,
                '4': true
            }
            if (!this.hasLogin) {
                this.showModal = flagMap[flag]
                return
            }
            if (this.vipFlag === 1) {
                this.showModal = false
                return
            }
            if (flag === 3 && this.userIdentity === 4) {
                this.showModal = true
                return
            }
            if (flag === 4 && this.userIdentity === 4) {
                this.showModal = true
                return
            }
            if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
                this.showModal = true
                return
            }
        },
        hideMobel1() {
            this.modal1 = false
            this.$api.navigateBack(1)
        },

        adaptRichTextImg(product) {
            // 商品详情
            let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
            let html = ''
            if (product.productDetailChose == 1) {
                // 同资质机构显示商品详情
                html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
            } else {
                if (this.hasLogin && this.userIdentity != 4) {
                    html = product.productDetail
                        ? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
                        : defaulHtml
                } else {
                    if (product.productDetail.commonDetailInfo) {
                        html = product.productDetail
                            ? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
                            : defaulHtml
                    } else {
                        html = defaulHtml
                    }
                }
            }
            return html
        },
        getCommodityCombinationList() {
            // 初始化商品详情配套商品
            this.ProductService.getCommodityCombinationList({
                userId: this.userId,
                productId: this.productId,
                source: 2,
                pageNum: 1,
                pageSize: 4
            })
                .then(response => {
                    const data = response.data
                    this.supportingList = data.results
                    this.supportingNum = data.totalRecord
                    if (this.supportingList.length > 0) {
                        if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
                            this.isShowSupportingList = true
                        }
                    }
                })
                .catch(error => {
                    console.log('获取组合商品列表失败')
                })
        },
        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('获取优惠券列表失败')
                })
        },
        ProductCartNumber() {
            // 获取用户购物车储量
            this.ProductService.ProductCartNumber({ userId: this.userId })
                .then(response => {
                    this.bottomCartNumber = response.data
                })
                .catch(error => {
                    console.log('获取购物车数量失败')
                })
        },
        receiveCoupon(coupon) {
            // 点击优惠券领取按钮,友盟埋点收集领取优惠券
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_productCouponReceive', {
                    Um_Key_PageName: '商品详情',
                    Um_Key_EvenName: '领取优惠券',
                    Um_Key_CouponId: `${coupon.couponId}`
                })
            }
            this.ProductService.ReceiveCoupon({
                userId: this.couponParam.userId,
                couponId: coupon.couponId,
                source: 1
            })
                .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)
                })
        },
        toDeductCoupon(coupon) {
            // 点击采美豆抵扣优惠券
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
                    Um_Key_PageName: '领券中心',
                    Um_Key_EvenName: '抵扣优惠券',
                    Um_Key_CouponId: `${coupon.couponId}`
                })
            }
            if (this.hasLogin) {
                if (this.userIdentity === 1 || this.userIdentity === 3) {
                    this.$util.msg('您的身份暂不支持领取优惠券', 2000)
                    return
                }
                this.WeChatPayCouponBeans(coupon)
            } else {
                this.$api.navigateTo('/pages/login/login')
            }
        },
        WeChatPayCouponBeans(coupon) {
            // 采美豆抵扣优惠券
            this.PayService.WeChatPayCouponBeans({
                source: 1, //领取渠道 1 小程序  2 网站
                userId: this.couponParam.userId,
                couponId: coupon.couponId
            })
                .then(response => {
                    this.$util.msg('抵扣成功', 1500)
                    setTimeout(() => {
                        this.currentTab = 1
                        this.couponParam.status = 2
                        this.queryPopupCoupons()
                    }, 1500)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        toPayCoupon(coupon) {
            // 点击购买优惠券,友盟埋点收集购买优惠券
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_productCouponBuy', {
                    Um_Key_PageName: '商品详情',
                    Um_Key_EvenName: '购买优惠券',
                    Um_Key_CouponId: `${coupon.couponId}`
                })
            }
            this.createCouponRecord(coupon)
        },
        createCouponRecord(coupon) {
            // 生成购买优惠券记录Id
            this.PayService.WeChatCouponRecord({
                userId: this.userId,
                couponId: coupon.couponId
            })
                .then(response => {
                    this.MiniWxPayFor(coupon, response.data.couponRecordId)
                })
                .catch(error => {
                    if (error.code == -1) {
                        //个人机构不能购买
                        this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
                        this.modal = true
                    } else if (error.code == -2) {
                        //会员机构不是医美机构不能购买
                        this.$util.msg('该优惠券仅限医美机构购买', 2000)
                    }
                })
        },
        async MiniWxPayFor(coupon, couponRecordId) {
            const wechatcode = await authorize.getCode('weixin')
            const params = {
                userId: this.userId,
                couponId: coupon.couponId,
                couponRecordId: couponRecordId,
                payType: 'XCX',
                code: wechatcode,
                source: 1 //支付来源 1 小程序 2 WWW
            }
            this.weChatMiniCouponWxPay(
                params,
                'Um_Event_productCouponPay',
                '商品详情',
                '线上支付优惠券',
                coupon.couponId,
                this.userId
            )
        },
        hideMobel() {
            this.modal = false
        },
        handleClick(e) {
            //个人机构跳转升级页面
            if (e.index == 1) {
                this.$api.navigateTo('/pages/login/apply')
            }
            this.modal = false
        },
        swiperChange(e) {
            //顶部商品图片切换
            const index = e.detail.current
            this.current = index
        },
        previewImg1(url) {
            let mentuzArray = []
            mentuzArray.push(url)
            uni.previewImage({
                urls: mentuzArray,
                current: 0
            })
        },
        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)
            }, 500)
        },
        // 跳转执行
        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')
            } else {
                this.$api.navigateTo('/pages/login/login?type=1')
            }
        },
        btnGetConfirm(type) {
            //加入购物车&&立即购买点击
            if (this.hasLogin) {
                this.btnType = type
                this.popupShow3 = true
                this.unitPopupType = 1
            } else {
                this.$api.navigateTo('/pages/login/login?type=1')
            }
        },
        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() {
            //跳供应商资料页
            if (!this.isShowCaimeiShop) {
                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]}`
            }
        },
        // 分享海报
        handleShare() {
            this.posterData = {
                productName: this.product.name,
                productImage: this.productImage[0],
                suid: this.suid,
                path: 'pages/goods/product',
                id: this.productId
            }
            this.$refs.sharePopup.open()
        },
        handleCollection() {
            // 收藏
            if (this.hasLogin) {
                this.ProductService.getProductUserLike({
                    userId: this.userId,
                    productId: this.product.productId
                })
                    .then(response => {
                        this.collectionType = !this.collectionType
                        this.$util.msg(response.data, 1500, true, 'success')
                    })
                    .catch(error => {
                        this.$util.msg(error.msg, 2000)
                    })
            } else {
                this.$api.navigateTo('/pages/login/login')
            }
        },
        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
                case 3:
                    this.popupShow3 = true
                    this.unitPopupType = 2
                    break
            }
        },
        hidePopup(index) {
            switch (index) {
                case 0:
                    this.popupShow0 = false
                    break
                case 1:
                    this.popupShow1 = false
                    break
                case 2:
                    this.popupShow2 = false
                    break
                case 3:
                    this.popupShow3 = 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
            }
        },
        handleSupporting() {
            // 跳转组合商品页面
            this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
        },
        // 获取每个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 && 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
        ),
        debounce(fn, delay) {
            let timer = null //借助闭包
            return function() {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(fn, delay) // 简化写法
            }
        },
        clipboard(data) {
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$util.msg('复制成功', 2000, true, 'success')
                } else {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        },
        getWinHeight() {
            this.winHeight = wx.getSystemInfoSync().windowHeight
        },
        changePreViewImageStatus(falg) {
            this.isPreviewImage = falg
        }
    },
    onPageScroll(e) {
        //实时获取到滚动的值
        const { scrollTop } = e
        this.debounce(this.getSectionProps(), 1000)
        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=4&id=${this.productId}&suid=${
                this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
            }&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
            imageUrl: `${this.productImage[0]}`
        }
    },
    onShow() {
        wxLogin.wxLoginAuthorize()
        // 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
        if (!this.isPreviewImage) {
            this.initGetStotage()
        }
        this.isPreviewImage = false
        const suid = this.options.suid
            ? this.options.suid
            : this.scene.suid
            ? this.scene.suid
            : uni.getStorageSync('suid') * 1
            ? uni.getStorageSync('suid') * 1
            : 0 // 协销userId
        const spId = this.options.spId
            ? this.options.spId
            : this.scene.spId
            ? this.scene.spId
            : uni.getStorageSync('spId') * 1
            ? uni.getStorageSync('spId') * 1
            : 0 // 协销id
        const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
        if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) { // 分享进入 且 用户非协销 或不是从分享进入有缓存
            if (
                !uni.getStorageSync('spUserId') || // 未绑定
                uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1 // 绑定未更换
            ) {
                this.suid = suid
                uni.setStorageSync('suid', suid)
                uni.setStorageSync('spId', spId)
            } else {
                uni.setStorageSync('suid', 0)
                this.suid = 0
                uni.setStorageSync('spId', 0)
            }
        }
        console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
    }
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}
.banner-section {
    width: 100%;
    height: 750rpx;
    position: relative;
    .cm-product-tags {
        position: absolute;
        right: 30rpx;
        top: 0;
        z-index: 999;
    }
    .cm-product-type {
        width: 64rpx;
        height: 64rpx;
        text-align: justify;
        box-sizing: border-box;
        padding: 10rpx;
        border-radius: 0 0 8rpx 8rpx;
        background-color: #33ccbf;
        font-size: $font-size-22;
        color: #ffffff;
        line-height: 25rpx;
        position: absolute;
        left: 30rpx;
        top: 0;
        z-index: 999;
    }
    .cm-product-cover {
        width: 120rpx;
        height: 77rpx;
        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: 120rpx;
        float: left;
        position: absolute;
        right: 30rpx;
        top: 0;
        z-index: 999;
    }
}
.banner {
    width: 100%;
    height: 750rpx;
    .product-img {
        width: 750rpx;
    }
    image {
        width: 100%;
        height: 100%;
    }
    .banner-item {
        position: relative;
    }
}
.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: 20;
                .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: 85%;
        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;
                }
            }
            .p-right-price {
                height: 56rpx;
                line-height: 56rpx;
                float: right;
                color: #999999;
                font-size: $font-size-30;
                .none {
                    font-size: $font-size-26;
                    text-decoration: line-through;
                }
            }
        }
        .floor-item-act {
            height: 56rpx;
            text-align: center;
            box-sizing: border-box;
            float: left;
            padding: 10rpx 0;
            margin-left: 10rpx;
        }
        .floor-item-btn {
            float: right;
            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-supporting {
    width: 100%;
    height: 274rpx;
    box-sizing: border-box;
    padding: 30rpx 24rpx;
    background-color: #ffffff;
    border-bottom: 20rpx solid #f7f7f7;
    .product-supporting-title {
        width: 100%;
        height: 40rpx;
        text-align: left;
        line-height: 40rpx;
        font-size: $font-size-28;
        color: #333333;
    }
    .product-supporting-list {
        width: 100%;
        height: 154rpx;
        box-sizing: border-box;
        padding: 13rpx 0;
        position: relative;
        .icon-xiayibu {
            line-height: 154rpx;
            display: inline-block;
            position: absolute;
            width: 80rpx;
            top: 0;
            right: 0;
            color: #b2b2b2;
            text-align: right;
        }
        .list {
            width: 128rpx;
            height: 128rpx;
            margin-right: 24rpx;
            float: left;
            border: 1px solid #e1e1e1;
            border-radius: 8rpx;
            .list-image {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 8rpx;
            }
        }
    }
}
.return-instructions {
    padding: 0 24rpx;
    border-bottom: 20rpx solid #f7f7f7;
}
.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;
    &.recommend {
        background-color: #f7f7f7;
        border-bottom: none;
        .title {
            .title-tab {
                background-color: #f7f7f7;
                color: $text-color;
            }
        }
    }
    .product-details-image {
        width: 100%;
        min-height: 856rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        .product-details-table {
            width: 100%;
            min-height: 160rpx;
            border: 1px solid #e1e1e1;
            border-radius: 10rpx;
            .ladder-tr {
                display: flex;
                width: 100%;
                justify-content: center;
                height: 80rpx;
                align-items: center;
                border-bottom: 1px solid #e1e1e1;
                &:last-child {
                    border-bottom: none;
                }
                .ladder-item-td {
                    height: 80rpx;
                    justify-content: center;
                    text-align: center;
                    box-sizing: border-box;
                    padding: 10rpx;
                    float: left;
                    .te-text {
                        line-height: 28rpx;
                        font-size: $font-size-24;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        word-break: break-all;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        color: #999999;
                        &.last {
                            width: 60%;
                            float: left;
                        }
                    }
                    .te-copy {
                        width: 40%;
                        float: right;
                        font-size: $font-size-24;
                        padding-top: 10rpx;
                        .clipboard {
                            width: 84rpx;
                            height: 36rpx;
                            background: #4688fa;
                            text-align: center;
                            font-size: $font-size-24;
                            color: #ffffff;
                            border-radius: 18rpx;
                            line-height: 36rpx;
                            display: inline-block;
                        }
                    }
                    &.th {
                        display: flex;
                        height: 80rpx;
                        align-items: center;
                        line-height: 80rpx;
                        font-size: 26rpx;
                        color: #666;
                    }
                    &:nth-child(1) {
                        width: 25%;
                        border-right: 1px solid #e1e1e1;
                    }
                    &:nth-child(2) {
                        width: 35%;
                        border-right: 1px solid #e1e1e1;
                    }
                    &:nth-child(3) {
                        width: 40%;
                    }
                }
            }
        }
        .qualificationImg-image {
            width: 100%;
            height: 856rpx;
            display: block;
        }
    }
    .product-rich-text-none {
        box-sizing: border-box;
        padding: 0 24rpx;
        text-align: left;
        font-size: 24rpx;
        color: #999999;
        line-height: 60rpx;
        &.bold {
            font-weight: bold;
            color: #333333;
        }
    }
    .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%, #ff5b00 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;
    }
}
.tui-popup-box {
    position: relative;
    box-sizing: border-box;
    min-height: 220rpx;
    padding: 40rpx 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: 28rpx;
                                .icon-used-text {
                                    width: 100%;
                                    text-align: center;
                                    line-height: 26rpx;
                                    font-size: $font-size-20;
                                    color: #f94b4b;
                                }
                                .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-shopping-main {
        width: 100%;
        .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-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;
}
=======
<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"
		/>
		<view
			class="product-topnav"
			id="topBar"
			v-show="isNavbarFiexd"
			:class="navbarFiexd"
			:style="{ top: CustomBar - 2 + '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)"
					v-if="product.qualificationImg"
				>
					<text>商品资质</text> <text class="line"></text>
				</view>
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 3 }"
					@click="tabClick(3)"
				>
					<text>推荐</text> <text class="line"></text>
				</view>
				<view
					class="nav-item tui-skeleton-fillet"
					:class="{ current: tabCurrentIndex === 4 }"
					@click="tabClick(4)"
					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"
		/>
		<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">
							<view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
							<view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
							<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 && 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"
										v-if="userInfo.userIdentity !== 1"
									>
										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
										<view class="">分享</view>
									</button>
									<button class="p-title-share tui-share-position" @click="handleShare" v-else>
										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
										<view class="">分享</view>
									</button>
								</view>
								<view class="wrap-label" v-if="product.tagsList && 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 class="none-text">咨询类似商品，请联系客服!</view>
					</view>
					<!-- 选择规格 -->
					<view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
						<text class="title">选择：</text> <text class="name">共{{ skusCount }}种规格可选</text>
						<text class="iconfont icon-xiayibu"></text>
					</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="return-instructions" v-if="returnGoodsStutas">
						<cm-return-instructions :content="helpContent"></cm-return-instructions>
					</view>
					<!-- 配套商品 -->
					<view
						class="product-supporting"
						v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
						@click.stop="handleSupporting"
					>
						<view class="product-supporting-title">配套商品({{ supportingNum }})</view>
						<view class="product-supporting-list">
							<view
								class="list"
								v-for="(supporting, index) in supportingList"
								:key="index"
								v-if="index < 4"
							>
								<image class="list-image" :src="supporting.image" mode=""></image>
							</view>
							<text class="iconfont icon-xiayibu"></text>
						</view>
					</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" @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" v-if="!isShowCaimeiShop"><text class="iconfont icon-xiayibu"></text></view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view v-show="tabCurrentIndex !== 4">
					<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">
							<template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
								<mp-html :content="html" :tag-style="tagStyle" />
							</template>
							<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" />
						</view>
						<view class="content-none" v-else><text>暂无服务项目</text></view>
					</view>
					<!-- 商品资质 -->
					<view class="product-details qualifications product-details2" v-if="product.qualificationImg">
						<view class="title"><view class="title-tab">商品资质</view></view>
						<view class="product-details-image">
							<view class="product-details-table clearfix" v-if="product.qualificationNo">
								<view class="ladder-tr">
									<view class="ladder-item-td th">证书编号</view>
									<view class="ladder-item-td th">产品名称</view>
									<view class="ladder-item-td th">详情</view>
								</view>
								<view class="ladder-tr">
									<view class="ladder-item-td">
										<view class="te-text">{{ product.qualificationNo }}</view>
									</view>
									<view class="ladder-item-td">
										<view class="te-text">{{ product.productName }}</view>
									</view>
									<view class="ladder-item-td">
										<view class="te-text last">{{ product.qualificationLink }}</view>
										<view class="te-copy">
											<text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
												复制
											</text>
										</view>
									</view>
								</view>
							</view>
							<image
								class="qualificationImg-image"
								:src="product.qualificationImg"
								mode="aspectFill"
								@click="previewImg1(product.qualificationImg)"
							></image>
						</view>
					</view>
					<!-- 相关推荐 -->
					<view class="product-details recommend product-details3">
						<view class="title"><view class="title-tab">相关推荐</view></view>
						<view class="content hot">
							<cm-recommend
								:query-productid="product.productId"
								:query-type="product.recommendType"
								v-if="isRequest"
							/>
						</view>
					</view>
				</view>
				<!-- 相关资料 -->
				<view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
					<cm-product-doc
						@previewImage="changePreViewImageStatus"
						:archiveId="product.archiveId"
						:userId="userId"
					/>
				</view>
				<!-- 优惠券 -->
				<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="#FF5B00"
								sliderBgColor="#FF5B00"
							/>
						</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">
														<template v-if="coupon.moneyCouponFlag == 1">
															<text class="tags" v-if="coupon.moneyCouponType == 1">
																意向{{ coupon.couponType | TypeFormat }}
															</text>
															<text class="tags" v-else>
																定向{{ coupon.couponType | TypeFormat }}
															</text>
														</template>
														<template v-else>
															<text class="tags">
																{{ coupon.couponType | TypeFormat }}
															</text>
														</template>
													</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">
														<template v-if="coupon.couponBtnType == 0">
															<template v-if="coupon.couponPayWay == 2">
																<view class="icon-used-text">
																	{{ coupon.moneyCouponPrice }}采美豆
																</view>
																<view
																	class="icon-used-btn receive"
																	@click="toDeductCoupon(coupon)"
																>
																	抵扣
																</view>
															</template>
															<template v-else-if="coupon.couponPayWay == 1">
																<view class="icon-used-text">购买</view>
																<view
																	class="icon-used-btn receive"
																	@click="toPayCoupon(coupon)"
																>
																	￥{{ coupon.moneyCouponPrice }}
																</view>
															</template>
															<template v-else>
																<view
																	class="icon-used-btn receive"
																	@click="receiveCoupon(coupon)"
																>
																	领取
																</view>
															</template>
														</template>
														<view
															class="icon-used-btn make"
															v-if="coupon.couponBtnType == 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' : '.34rpx' }"
						>
							<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>
							<view class="item-bt" @click="handleCollection">
								<image
									:src="
										collectionType
											? StaticUrl + 'icon/icon-collection@2x.png'
											: StaticUrl + 'icon/icon-collection-none@2x.png'
									"
								></image>
								<text>{{ collectionType ? '已收藏' : '收藏' }}</text>
							</view>
							<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>
				<!-- 侧边 -->
				<scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
			</view>
		</template>
		<!-- 商品参数 -->
		<cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product" />
		<!-- 选择规格弹窗 -->
		<cm-unit-popup
			v-if="popupShow3"
			:popupShow="popupShow3"
			:skuProduct="skuProduct"
			:productCoupon="productCoupon"
			:type="unitPopupType"
			:btnType="btnType"
			:goodsData="goodsData"
			@buyConfirm="handleBuyConfirm"
			@skuClick="handleSkuClick"
		/>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
		<!-- 商品详情可见度弹窗提醒 -->
		<cm-product-modal
			v-if="showModal"
			:showModal="showModal"
			:commodityDetailsFlag="product.commodityDetailsFlag"
			:isShareType="isShareType"
			:userIdentity="userIdentity"
			:firstClubType="firstClubType"
		/>
		<!-- 供应商收集用户信息弹窗 -->
		<cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml" :advertisement="advertisement" />

		<!-- 分享弹窗 -->
		<cm-share-popup ref="sharePopup" :data="posterData" type="product" />

		<!-- 协销名片 -->
		<cm-seller-modal :suid="suid" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import customP from './components/cm-header.vue' //自定义导航
import cmPrice from './components/cm-price.vue' //价格显示
import cmAttributes from './components/cm-attributes.vue' //规格信息
import cmRecommend from './components/recommend' //相关推荐
import cmParameter from './components/cm-parameter' //相关参数
import cmService from './components/cm-service' //服务项目
import cmProductDoc from './components/cm-product-doc.vue'
import cmProductModal from './components/cm-product-modal.vue'
import cmPramsPopup from './components/cm-prams-popup.vue'
import cmUnitPopup from './components/cm-unit-popup.vue'
import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
import cmReturnInstructions from './components/cm-return-instructions.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import { debounce } from '@/common/config/common.js'
import payMixins from '@/mixins/payMixins.js'
import proMixins from './mixins/proMixins.js'
import cmSrsMixins from '@/utils/cmSrsMixins.js'
import thorui from '@/components/clipboard/clipboard.thorui.js'
import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
import { queryParse } from './mixins/share.helper.js'
var isPreviewImg
export default {
	mixins: [payMixins, proMixins, cmSrsMixins],
	components: {
		customP,
		cmRecommend,
		cmPrice,
		cmAttributes,
		cmParameter,
		cmService,
		couponTabs,
		cmProductDoc,
		cmPramsPopup,
		cmUnitPopup,
		cmProductModal,
		cmRossPopup,
		cmReturnInstructions,
		cmSharePopup,
		cmSellerModal
	},
	data() {
		return {
			StaticUrl: this.$Static, //静态图片路径
			clickPath: '/pages/search/search',
			html: '',
			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,
			isShareType: '',
			isHeaderPoduct: false,
			isNavbarFiexd: false,
			navbarFiexd: 'none',
			ladderPriceFlag: '',
			ladderPriceList: '',
			isInvalid: false,
			isEvaluate: false,
			isAnimation: false,
			skeletonShow: true,
			isStock: false,
			disabled: false,
			isNoneDisabled: false,
			tabCurrentIndex: 0,
			userId: 0,
			shopId: 0,
			shopID: 0,
			typeId: 0,
			vipFlag: 0,
			firstClubType: 0,
			productId: 0,
			skusCount: 0, // 规格种类
			userIdentity: 0, // 用户类型
			goodsData: {}, // 自定义数据
			shop: {}, //供应商信息
			product: {}, //采美
			productImage: [],
			retailPrice: 0,
			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, // 优惠券
			popupShow3: false, // 购买弹窗
			tabSelectFlag: false,
			sectionPropsArr: [],
			scrollTopArray: [],
			winHeight: '',
			isShowButton: true,
			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: '',
			collectionType: false,
			isShowSupportingList: false,
			supportingList: [],
			supportingNum: 0, // 组合商品总数
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '去升级',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
					},
					plain: false
				}
			],
			showModal: false,
			isShowCaimeiShop: false,
			unitPopupType: 0, // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
			returnGoodsStutas: false,
			helpContent: '',
			posterData: {}, // 商品详情
			suid: 0, // 协销id
			scene: {}, //获取二维码参数
			options: {}
		}
	},
	computed: {
		...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
	},
	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) {
		if (option.scene) {
			// 识别小程序二维码
			this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
		}
		this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId =
			option.id || this.scene.id //获取商品ID
		if (option.typeId) {
			this.typeId = option.typeId
		}
		this.opentype = option.open
		this.isShareType = option.type
		this.linkPath = option.path
		this.isHeaderPoduct = true
		if (option.page == 2) {
			this.backPage = option.page
		}
		this.options = option.scene ? this.scene : option
		this.getWinHeight()
	},
	onReady() {
		if (this.opentype == 'caimei') {
			// 跳转到资料详情
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				this.isNavbarFiexd = true
				this.tabClick(4)
				uni.hideLoading()
			}, 2000)
		}
		console.log('是iPhoneX', this.isIphoneX)
	},
	methods: {
		async initGetStotage() {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.shopID = userInfo.shopId ? userInfo.shopId : 0
			this.firstClubType = this.clubType
			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()
			}
		},
		initData() {
			// 初始化商品详情查询
			this.ProductService.QueryProductDetils({
				userId: this.userId,
				productId: this.productId,
				identity: this.identity,
				typeId: this.typeId
			})
				.then(response => {
					let productLabel = ''
					this.productImage = []
					this.shop = response.data.shop
					this.shopId = response.data.shopId
					const dataStr = JSON.stringify(response.data)
					this.product = JSON.parse(dataStr)
					this.skuProduct = JSON.parse(dataStr)
					this.skusCount = this.product.skus.length
					this.addParams.skuId = this.product.skuId
					if (this.product.tinyTypeName) {
						productLabel = this.product.tinyTypeName
					} else if (!this.product.tinyTypeName && this.product.smallTypeName) {
						productLabel = this.product.smallTypeName
					} else {
						productLabel = this.product.bigTypeName
					}
					//设置统计数据标签
					if (this.product.relatedLabels) {
						uni.setStorageSync('productLabel', this.product.relatedLabels)
					} else {
						uni.setStorageSync(
							'productLabel',
							`${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
						)
					}
					//校验是否为ross
					this.checkedIsRossSet()
					//判断是否可以跳转供应商主页
					if (this.product.shopType === 2) {
						this.isShowCaimeiShop = true
					}
					// 判断是否显示已收藏
					if (this.product.userLike && this.product.userLike == 1) {
						this.collectionType = true
					} else {
						this.collectionType = false
					}
					//已删除/已冻结
					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.adaptRichTextImg(this.product)
					this.stock = this.product.stock
					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)
					}
					//处理下架商品和售罄商品
					if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
						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.vipFlag != 1) {
							this.disabled = true
						} else {
							this.disabled = false
						}
					} else if (this.product.priceFlag == 3) {
						if (this.userIdentity == 4) {
							this.disabled = true
						} else if (this.userIdentity == 2 && this.firstClubType != 1) {
							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.product.saleOutFlag === 1) {
						this.goodsData.disabledText = '售罄'
					}
					console.log(this.disabled)
					// setTimeout(() => {
					//     this.getSectionProps()
					// }, 2000)
					this.handleShowProductType(this.product.commodityDetailsFlag)
					if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
						this.ProductCartNumber()
					}
					this.queryProductDetilsCoupons()
					this.getCommodityCombinationList()
					// 特殊商品退货须知
					this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
					this.helpContent = response.data.helpContent

					setTimeout(() => {
						this.skeletonShow = false
						this.isRequest = true
					}, 1000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleShowProductType(flag = '') {
			// 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
			const flagMap = {
				'2': true,
				'3': true,
				'4': true
			}
			if (!this.hasLogin) {
				this.showModal = flagMap[flag]
				return
			}
			if (this.vipFlag === 1) {
				this.showModal = false
				return
			}
			if (flag === 3 && this.userIdentity === 4) {
				this.showModal = true
				return
			}
			if (flag === 4 && this.userIdentity === 4) {
				this.showModal = true
				return
			}
			if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
				this.showModal = true
				return
			}
		},
		hideMobel1() {
			this.modal1 = false
			this.$api.navigateBack(1)
		},

		adaptRichTextImg(product) {
			// 商品详情
			let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
			let html = ''
			if (product.productDetailChose == 1) {
				// 同资质机构显示商品详情
				html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
			} else {
				if (this.hasLogin && this.userIdentity != 4) {
					html = product.productDetail
						? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
						: defaulHtml
				} else {
					if (product.productDetail.commonDetailInfo) {
						html = product.productDetail
							? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
							: defaulHtml
					} else {
						html = defaulHtml
					}
				}
			}
			return html
		},
		getCommodityCombinationList() {
			// 初始化商品详情配套商品
			this.ProductService.getCommodityCombinationList({
				userId: this.userId,
				productId: this.productId,
				source: 2,
				pageNum: 1,
				pageSize: 4
			})
				.then(response => {
					const data = response.data
					this.supportingList = data.results
					this.supportingNum = data.totalRecord
					if (this.supportingList.length > 0) {
						if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
							this.isShowSupportingList = true
						}
					}
				})
				.catch(error => {
					console.log('获取组合商品列表失败')
				})
		},
		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('获取优惠券列表失败')
				})
		},
		ProductCartNumber() {
			// 获取用户购物车储量
			this.ProductService.ProductCartNumber({ userId: this.userId })
				.then(response => {
					this.bottomCartNumber = response.data
				})
				.catch(error => {
					console.log('获取购物车数量失败')
				})
		},
		receiveCoupon(coupon) {
			// 点击优惠券领取按钮,友盟埋点收集领取优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_productCouponReceive', {
					Um_Key_PageName: '商品详情',
					Um_Key_EvenName: '领取优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			this.ProductService.ReceiveCoupon({
				userId: this.couponParam.userId,
				couponId: coupon.couponId,
				source: 1
			})
				.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)
				})
		},
		toDeductCoupon(coupon) {
			// 点击采美豆抵扣优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
					Um_Key_PageName: '领券中心',
					Um_Key_EvenName: '抵扣优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			if (this.hasLogin) {
				if (this.userIdentity === 1 || this.userIdentity === 3) {
					this.$util.msg('您的身份暂不支持领取优惠券', 2000)
					return
				}
				this.WeChatPayCouponBeans(coupon)
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		WeChatPayCouponBeans(coupon) {
			// 采美豆抵扣优惠券
			this.PayService.WeChatPayCouponBeans({
				source: 1, //领取渠道 1 小程序  2 网站
				userId: this.couponParam.userId,
				couponId: coupon.couponId
			})
				.then(response => {
					this.$util.msg('抵扣成功', 1500)
					setTimeout(() => {
						this.currentTab = 1
						this.couponParam.status = 2
						this.queryPopupCoupons()
					}, 1500)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		toPayCoupon(coupon) {
			// 点击购买优惠券,友盟埋点收集购买优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_productCouponBuy', {
					Um_Key_PageName: '商品详情',
					Um_Key_EvenName: '购买优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			this.createCouponRecord(coupon)
		},
		createCouponRecord(coupon) {
			// 生成购买优惠券记录Id
			this.PayService.WeChatCouponRecord({
				userId: this.userId,
				couponId: coupon.couponId
			})
				.then(response => {
					this.MiniWxPayFor(coupon, response.data.couponRecordId)
				})
				.catch(error => {
					if (error.code == -1) {
						//个人机构不能购买
						this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
						this.modal = true
					} else if (error.code == -2) {
						//会员机构不是医美机构不能购买
						this.$util.msg('该优惠券仅限医美机构购买', 2000)
					}
				})
		},
		async MiniWxPayFor(coupon, couponRecordId) {
			const wechatcode = await authorize.getCode('weixin')
			const params = {
				userId: this.userId,
				couponId: coupon.couponId,
				couponRecordId: couponRecordId,
				payType: 'XCX',
				code: wechatcode,
				source: 1 //支付来源 1 小程序 2 WWW
			}
			this.weChatMiniCouponWxPay(
				params,
				'Um_Event_productCouponPay',
				'商品详情',
				'线上支付优惠券',
				coupon.couponId,
				this.userId
			)
		},
		hideMobel() {
			this.modal = false
		},
		handleClick(e) {
			//个人机构跳转升级页面
			if (e.index == 1) {
				this.$api.navigateTo('/pages/login/apply')
			}
			this.modal = false
		},
		swiperChange(e) {
			//顶部商品图片切换
			const index = e.detail.current
			this.current = index
		},
		previewImg1(url) {
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
		},
		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)
			}, 500)
		},
		// 跳转执行
		tabClickAction(index) {
			const that = this
			if (index === 4) {
				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')
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		btnGetConfirm(type) {
			//加入购物车&&立即购买点击
			if (this.hasLogin) {
				this.btnType = type
				this.popupShow3 = true
				this.unitPopupType = 1
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		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() {
			//跳供应商资料页
			if (!this.isShowCaimeiShop) {
				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]}`
			}
		},
		// 分享海报
		handleShare() {
			this.posterData = {
				productName: this.product.name,
				productImage: this.productImage[0],
				suid: this.suid,
				path: 'pages/goods/product',
				id: this.productId
			}
			this.$refs.sharePopup.open()
		},
		handleCollection() {
			// 收藏
			if (this.hasLogin) {
				this.ProductService.getProductUserLike({
					userId: this.userId,
					productId: this.product.productId
				})
					.then(response => {
						this.collectionType = !this.collectionType
						this.$util.msg(response.data, 1500, true, 'success')
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		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
				case 3:
					this.popupShow3 = true
					this.unitPopupType = 2
					break
			}
		},
		hidePopup(index) {
			switch (index) {
				case 0:
					this.popupShow0 = false
					break
				case 1:
					this.popupShow1 = false
					break
				case 2:
					this.popupShow2 = false
					break
				case 3:
					this.popupShow3 = 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
			}
		},
		handleSupporting() {
			// 跳转组合商品页面
			this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
		},
		// 获取每个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影响区域', this.sectionPropsArr)
		},
		//当滑动时也能同步激活tab
		activeTab: debounce(
			(top, _this) => {
				const { sectionPropsArr } = _this
				if (sectionPropsArr && 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
		),
		debounce(fn, delay) {
			let timer = null //借助闭包
			return function() {
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(fn, delay) // 简化写法
			}
		},
		clipboard(data) {
			thorui.getClipboardData(data, res => {
				if (res) {
					this.$util.msg('复制成功', 2000, true, 'success')
				} else {
					this.$util.msg('复制失败', 2000, true, 'none')
				}
			})
		},
		getWinHeight() {
			this.winHeight = wx.getSystemInfoSync().windowHeight
		},
		changePreViewImageStatus(falg) {
			this.isPreviewImage = falg
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		const { scrollTop } = e
		this.debounce(this.getSectionProps(), 1000)
		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=4&id=${this.productId}&suid=${
				this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
			}&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
			imageUrl: `${this.productImage[0]}`
		}
	},
	onShow() {
		wxLogin.wxLoginAuthorize()
		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
		if (!this.isPreviewImage) {
			this.initGetStotage()
		}
		this.isPreviewImage = false
		const suid = this.options.suid
			? this.options.suid
			: this.scene.suid
			? this.scene.suid
			: uni.getStorageSync('suid') * 1
			? uni.getStorageSync('suid') * 1
			: 0 // 协销userId
		const spId = this.options.spId
			? this.options.spId
			: this.scene.spId
			? this.scene.spId
			: uni.getStorageSync('spId') * 1
			? uni.getStorageSync('spId') * 1
			: 0 // 协销id
		const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
		if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) {
			// 分享进入 且 用户非协销 或不是从分享进入有缓存
			if (
				!uni.getStorageSync('spUserId') ||
				uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1
			) {
				// 如果未分配或者分配相同
				this.suid = suid
				uni.setStorageSync('suid', suid)
				uni.setStorageSync('spId', spId)
			} else {
				uni.setStorageSync('suid', 0)
				this.suid = 0
				uni.setStorageSync('spId', 0)
			}
		}
		console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.banner-section {
	width: 100%;
	height: 750rpx;
	position: relative;
	.cm-product-tags {
		position: absolute;
		right: 30rpx;
		top: 0;
		z-index: 999;
	}
	.cm-product-type {
		width: 64rpx;
		height: 64rpx;
		text-align: justify;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 0 0 8rpx 8rpx;
		background-color: #33ccbf;
		font-size: $font-size-22;
		color: #ffffff;
		line-height: 25rpx;
		position: absolute;
		left: 30rpx;
		top: 0;
		z-index: 999;
	}
	.cm-product-cover {
		width: 120rpx;
		height: 77rpx;
		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: 120rpx;
		float: left;
		position: absolute;
		right: 30rpx;
		top: 0;
		z-index: 999;
	}
}
.banner {
	width: 100%;
	height: 750rpx;
	.product-img {
		width: 750rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.banner-item {
		position: relative;
	}
}
.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: 20;
				.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: 85%;
		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;
				}
			}
			.p-right-price {
				height: 56rpx;
				line-height: 56rpx;
				float: right;
				color: #999999;
				font-size: $font-size-30;
				.none {
					font-size: $font-size-26;
					text-decoration: line-through;
				}
			}
		}
		.floor-item-act {
			height: 56rpx;
			text-align: center;
			box-sizing: border-box;
			float: left;
			padding: 10rpx 0;
			margin-left: 10rpx;
		}
		.floor-item-btn {
			float: right;
			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-supporting {
	width: 100%;
	height: 274rpx;
	box-sizing: border-box;
	padding: 30rpx 24rpx;
	background-color: #ffffff;
	border-bottom: 20rpx solid #f7f7f7;
	.product-supporting-title {
		width: 100%;
		height: 40rpx;
		text-align: left;
		line-height: 40rpx;
		font-size: $font-size-28;
		color: #333333;
	}
	.product-supporting-list {
		width: 100%;
		height: 154rpx;
		box-sizing: border-box;
		padding: 13rpx 0;
		position: relative;
		.icon-xiayibu {
			line-height: 154rpx;
			display: inline-block;
			position: absolute;
			width: 80rpx;
			top: 0;
			right: 0;
			color: #b2b2b2;
			text-align: right;
		}
		.list {
			width: 128rpx;
			height: 128rpx;
			margin-right: 24rpx;
			float: left;
			border: 1px solid #e1e1e1;
			border-radius: 8rpx;
			.list-image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 8rpx;
			}
		}
	}
}
.return-instructions {
	padding: 0 24rpx;
	border-bottom: 20rpx solid #f7f7f7;
}
.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;
	&.recommend {
		background-color: #f7f7f7;
		border-bottom: none;
		.title {
			.title-tab {
				background-color: #f7f7f7;
				color: $text-color;
			}
		}
	}
	.product-details-image {
		width: 100%;
		min-height: 856rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		.product-details-table {
			width: 100%;
			min-height: 160rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			.ladder-tr {
				display: flex;
				width: 100%;
				justify-content: center;
				height: 80rpx;
				align-items: center;
				border-bottom: 1px solid #e1e1e1;
				&:last-child {
					border-bottom: none;
				}
				.ladder-item-td {
					height: 80rpx;
					justify-content: center;
					text-align: center;
					box-sizing: border-box;
					padding: 10rpx;
					float: left;
					.te-text {
						line-height: 28rpx;
						font-size: $font-size-24;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						color: #999999;
						&.last {
							width: 60%;
							float: left;
						}
					}
					.te-copy {
						width: 40%;
						float: right;
						font-size: $font-size-24;
						padding-top: 10rpx;
						.clipboard {
							width: 84rpx;
							height: 36rpx;
							background: #4688fa;
							text-align: center;
							font-size: $font-size-24;
							color: #ffffff;
							border-radius: 18rpx;
							line-height: 36rpx;
							display: inline-block;
						}
					}
					&.th {
						display: flex;
						height: 80rpx;
						align-items: center;
						line-height: 80rpx;
						font-size: 26rpx;
						color: #666;
					}
					&:nth-child(1) {
						width: 25%;
						border-right: 1px solid #e1e1e1;
					}
					&:nth-child(2) {
						width: 35%;
						border-right: 1px solid #e1e1e1;
					}
					&:nth-child(3) {
						width: 40%;
					}
				}
			}
		}
		.qualificationImg-image {
			width: 100%;
			height: 856rpx;
			display: block;
		}
	}
	.product-rich-text-none {
		box-sizing: border-box;
		padding: 0 24rpx;
		text-align: left;
		font-size: 24rpx;
		color: #999999;
		line-height: 60rpx;
		&.bold {
			font-weight: bold;
			color: #333333;
		}
	}
	.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%, #ff5b00 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;
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 40rpx 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: 28rpx;
								.icon-used-text {
									width: 100%;
									text-align: center;
									line-height: 26rpx;
									font-size: $font-size-20;
									color: #f94b4b;
								}
								.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-shopping-main {
		width: 100%;
		.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-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;
}
>>>>>>> 731998a9ad0679346181c50ed13c5e96f704b3dd
</style>