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

<template>
    <view class="product " :style="{
			paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
			paddingTop: CustomBar + 'px'
		}">
        <custom-p v-if="isHeaderPoduct" :systeminfo="systeminfo" :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi" :headerColor="headerColor" :type="isShareType" :page="backPage" />
        <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 && userInfo.userIdentity !== 3">
                    <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"
                                        v-if="userInfo.userIdentity !== 1">
                                        <text class="iconfont icon-weixin"></text>
                                    </button>
                                    <button class="p-title-share tui-share-position" @click="handleShare" v-else>
                                        <text class="iconfont icon-weixin"></text>
                                    </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 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, 1)" :key="index">
                                <template v-if="coupon.couponTextFlag === 1">
                                    满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
                                </template>
                                <template v-else>
                                    {{ coupon.couponText }}
                                </template>
                            </text>
                        </view>
                        <text class="iconfont icon-xiayibu"></text>
                    </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" @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">
                                            <template v-if="coupon.couponTextFlag === 1">
                                                <view class="coupon-maxMoney"> <text class="small">￥</text>
                                                    {{ coupon.couponAmount }}
                                                </view>
                                                <view class="coupon-minMoney"> 满{{ coupon.touchPrice }}可用 </view>
                                            </template>
                                            <template v-else>
                                                <view class="coupon-maxMoney six"> <text class="small">￥</text>
                                                    {{ coupon.couponText }}
                                                </view>
                                            </template>
                                        </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
																	? '全商城商品通用'
																	: coupon.couponName
															}}
                                                        </text>
                                                        <text v-if="coupon.couponType == 1">
                                                            {{
																coupon.categoryType == 1
																	? coupon.couponName
																	: coupon.couponName
															}}
                                                        </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>
            </view>
        </template>
        <!-- 商品参数 -->
        <cm-prams-popup :popupShow="popupShow0" :product="product" />
        <!-- 选择规格弹窗 -->
        <cm-unit-popup :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 :popupShow="showRossHtml" :advertisInfo="advertisement" />
        <!-- 分享弹窗 -->
        <cm-share-popup ref="sharePopup" :data="posterData" type="product" />
        <!-- 协销名片 -->
        <cm-seller-modal :suid="suid" />
        <!-- 侧边 -->
        <scroll-top :isScrollTop="isScrollTop" :bottom="240" :isShowKefu="true" v-show="tabCurrentIndex !== 3" />
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import customP from './components/cm-header.vue' //自定义导航
    import cmPrice from './components/cm-price.vue' //价格显示
    import cmRecommend from './components/recommend' //相关推荐
    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,
            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.$api.navigateTo(`/pages/user/pay/card-coupon-under?amount=${coupon.moneyCouponPrice}`)
                // 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
                }
                console.log('posterData=======>', this.posterData)
                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: 16rpx solid #f7f7f7;

        .productRemarks {
            height: 48rpx;
            width: 100%;
            float: left;
            line-height: 48rpx;
            font-size: 24rpx;
            color: #999999;
            text-align: left;
        }

        .wrap-top {
            width: 100%;
            box-sizing: border-box;
            padding: 0 24rpx 10rpx 24rpx;
            height: auto;
            float: left;

            &.none {
                .p-title {
                    color: #999999;
                }
            }

            .p-title {
                width: 100%;
                height: auto;
                float: left;
                position: relative;

                .p-title-name {
                    width: 100%;
                    height: auto;
                    float: left;
                    line-height: 38rpx;
                    font-size: $font-size-28;
                    color: $text-color;
                    font-weight: 600;
                    -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: 80rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    position: fixed;
                    right: 20rpx;
                    bottom: 380rpx;
                    text-align: center;
                    box-sizing: border-box;
                    display: block;
                    background: rgba(255, 255, 255, 0.7);
                    margin: 0;
                    z-index: 20;
                    border: 1px solid #E1E1E1;
                    border-radius: 50%;

                    .icon-weixin {
                        font-size: 56rpx;
                        color: #07c160;
                    }
                }

                .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 10rpx 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: 20rpx;
                }
            }
        }

        .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: 70rpx;
        background-color: #ffffff;
        position: relative;
        display: flex;
        line-height: 70rpx;

        .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: 16rpx 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: 262rpx;
        box-sizing: border-box;
        padding: 24rpx;
        background-color: #ffffff;
        border-bottom: 16rpx 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: 16rpx solid #f7f7f7;
    }

    .product-parameter {
        width: 702rpx;
        height: 90rpx;
        padding: 0 24rpx;
        background-color: #ffffff;
        position: relative;
        border-bottom: 16rpx 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: 164rpx;
        padding: 20rpx 24rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        position: relative;
        box-sizing: border-box;
        border-bottom: 16rpx solid #f7f7f7;

        .logo {
            width: 100rpx;
            height: 100rpx;
            float: left;
            border: 1px solid #efefef;
            border-radius: 50%;

            image {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 50%;
            }
        }

        .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: 16rpx 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;

                            &.six {
                                margin-top: 20rpx;
                            }

                            .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;
    }
</style>