caimei-applets-caimei/pages/second/product/product-details.vue

<template>
    <view class="product" :style="{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" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
            <view class="search-input">
                <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
                    <view class="search-icon">
                        <text class="iconfont icon-iconfonticonfontsousuo1"></text>
                    </view>
                    <view class="search-text">搜索其他二手商品</view>
                </view>
            </view>
            <view class="navbar">
                <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }"
                    @click="tabClick(0)">
                    <text>详情</text>
                    <text class="line"></text>
                </view>
                <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }"
                    @click="tabClick(1)">
                    <text>品牌</text>
                    <text class="line"></text>
                </view>
                <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }"
                    @click="tabClick(2)">
                    <text>推荐</text>
                    <text class="line"></text>
                </view>
            </view>
        </view> -->
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5"></tui-skeleton>
        <template v-else>
            <view class="cart-content empty" v-if="isInvalid">
                <view class="empty-container">
                    <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
                    <text class="error-text">暂无权限查看该商品</text>
                    <view class="login-btn" @click="goIndex">去商城</view>
                </view>
            </view>
            <view class="container-product tui-skeleton" v-else>
                <view class="container-product-main">
                    <view class="product-top">
                        <view class="banner-section">
                            <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
                                <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange"
                                    :duration='800' :autoplay="false" :circular="true">
                                    <swiper-item v-for="(item, index) in product.imageList" :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 }}/{{ currentTotal }}</tui-tag>
                                </view>
                            </uni-swiper-dot>
                            <view class="infotag mai" v-if="product.buyFlag === 1">卖</view>
                            <view class="infotag buy" v-else>买</view>    
                        </view>
                        <view class="product-wrap clearfix">
                            <view class="wrap-top">
                                <view class="wrap-top-price">
                                    <second-price :product="product" />
                                </view>
                                <view class="p-title tui-skeleton-fillet">
                                    <view class="p-title-name">{{product.name == undefined ? '' : product.name}}</view>
                                   <button open-type="share" class="p-title-share tui-share-position" @click="onShare">
                                        <text class="iconfont icon-weixin"></text>
                                   </button>
                                </view>
                            </view>
                        </view>
                        <view class="product-parameter" @click="showPopup">
                            <text class="title">参数：</text>
                            <text class="name">品牌 信息 分类...</text>
                            <text class="iconfont icon-xiayibu"></text>
                        </view>
                    </view>
                </view>
                <view class="product-details productDetails0">
                    <!-- 商品详情 -->
                    <view class="title">
                        <view class="title-tab">二手详情</view>
                    </view>
                    <view class="Disclaimer" v-if="hasLogin">
                        <span>免责声明</span>
                        <text class="text">
                            鉴于本商城提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本商城对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
                        </text>
                    </view>
                    <view class="content tui-banner product-rich-text tui-skeleton-rect">
                        <view class="contentHtml">
                            <view class="detailsText" v-if="product.productDetails!=''||product.productDetails!=null">
                                {{product.productDetails}}</view>
                            <view class="imgList" v-for="(item, index) in product.imageList" :key="index"
                                :data-src="item">
                                <img :src="item" />
                            </view>
                        </view>
                    </view>
                    <view class="product-details secondBrand productDetails1"
                        v-if="product.brandInfo!=''&&product.brandInfo!=null">
                        <!-- 品牌信息 -->
                        <view class="title">
                            <view class="title-tab">品牌信息</view>
                        </view>
                        <text class="brandinfo">{{product.brandInfo}}</text>
                    </view>
                    <!-- 商品参数 -->
                    <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
                        <view class="tui-popup-box clearfix">
                            <view class="title">二手信息</view>
                            <cm-parameter :product="product" :goodsData="goodsData"></cm-parameter>
                            <view class="tui-right-flex tui-popup-btn"
                                :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
                                <view class="tui-flex-1">
                                    <view class="tui-button" @click="hidePopup()">收起</view>
                                </view>
                            </view>
                        </view>
                    </tui-bottom-popup>
                    <!-- 侧边 -->
                    <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import customP from './components/cm-header' //自定义导航
    import secondPrice from './components/secondPrice.vue' //价格显示
    import authorize from '@/common/config/authorize.js'
    import uniStars from '@/components/uni-stars/uni-stars.vue'
    import recommend from './components/secondRecommend' //相关推荐
    import cmParameter from './components/secondParameters.vue' //相关参数
    import wxLogin from '@/common/config/wxLogin.js'
    import { debounce } from '@/common/config/common.js'
    var isPreviewImg
    export default {
        components: {
            uniStars,
            customP,
            recommend,
            secondPrice,
            cmParameter,
        },
        data() {
            return {
                productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
                clickPath: '/search/pages/search/search-second',
                disabledTabNavList: [{ name: '相关推荐' }],
                mode: 'round',
                iconClass: 'icon-aixin',
                iconColor: '#ff9100',
                specClass: '', //规格弹窗css类，控制开关动画
                isRequest: false,
                isScrollTop: false,
                current: 0,
                isShareType: '',
                isInvalid: false,
                isHeaderPoduct: false,
                isNavbarFiexd: false,
                navbarFiexd: 'none',
                isRecommend: false,
                isRarameter: true,
                isService: false,
                skeletonShow: true,
                disabled: false,
                isNoneDisabled: false,
                tabCurrentIndex: 0,
                userId: '',
                productId: 0,
                userIdentity: '', //用户类型
                goodsData: {}, //自定义数据
                shop: {}, //供应商信息
                product: {}, //采美
                productImage: [],
                headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
                systeminfo: this.setSysteminfo(), //获取设备信息
                isIphoneX: this.$store.state.isIphoneX,
                windowHeight: '',
                headerColor: false,
                backPage: 1,
                nvabarData: { //顶部自定义导航
                    showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
                    title: '' // 导航栏 中间的标题
                },
                linkPath: '',
                popupShow: false, //参数弹窗
                CustomBar: this.CustomBar, // 顶部导航栏高度
                tabSelectFlag: false,
                sectionPropsArr: [],
                scrollTopArray: [],
                sectionTopRangeArr: [],
                winHeight: ''
            }
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', 'isWxAuthorize']),
            currentTotal(){
                const list = this.product.imageList
                if (list && list.length > 0) {  
                    return list.length
                }else{
                    return 1
                }
            }
        },
        onLoad(option) {
            if (this.isShareType == 'share') {
                wxLogin.wxLoginAuthorize()
            }
            if (option.page == 2) {
                this.backPage = option.page
            }
            this.productId = option.id //获取商品ID
            this.isShareType = option.type
            this.linkPath = option.path
            this.isHeaderPoduct = true
        },
        methods: {
            initData() { // 初始化商品详情查询
                this.SecondService.ProductDetail({ productId: this.productId, userId: this.userId }).then(response => {
                    this.skeletonShow = false
                    this.productImage = []
                    this.product = response.data
                    uni.setStorageSync('productLabel', `${response.data.brandName}`)
                    this.shop = response.data.shop
                    //处理商品图片列表
                    this.product.imageList.forEach(item => {
                        this.productImage.push(item)
                    })
                    setTimeout(() => {
                        this.getSectionProps()
                        this.isRequest = true
                    }, 2000)
                }).catch(error => {
                    console.log(error)
                    this.skeletonShow = false
                    this.isInvalid = true
                })
            },
            swiperChange(e) { //顶部商品图片切换
                const index = e.detail.current
                this.current = index
            },
            previewImg(index) { //顶部商品图片预览
                isPreviewImg = true
                let previewUrls = this.productImage
                uni.previewImage({
                    current: index, //图片索引
                    urls: previewUrls, //必须是http图片，本地图片无效
                    longPressActions: ''
                })
            },
            tabClick(index) { //商品详情&&供应商信息tab切换
                this.tabSelectFlag = true
                this.tabCurrentIndex = index
                let classIndex = '.productDetails' + index
                uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data) => { //最外层盒子节点
                    uni.createSelectorQuery().select(classIndex).boundingClientRect((res) => { //最外层盒子节点
                        uni.pageScrollTo({
                            duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
                            scrollTop: res.top - data.top - 150, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
                        })
                        setTimeout(() => {
                            this.tabSelectFlag = false
                        }, 500)
                    }).exec()
                }).exec()
            },
            handleContact(e) { //跳转小程序客服

            },
            setHeaderBtnPosi() {
                // 获得胶囊按钮位置信息
                let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
                return headerBtnPosi
            },
            setSysteminfo() {
                let systeminfo
                uni.getSystemInfo({ // 获取设备信息
                    success: (res) => {
                        systeminfo = res
                    },
                })
                return systeminfo
            },
            getOptionFn(e) {
                this.isShareType = e.type
            },
            discard() {
                //丢弃
            },
            onShare(res) { //分享转发
                if (res.from === 'button') {
                    // 来自页面内转发按钮
                }
                return {
                    title: `${this.product.name}`,
                    path: `/pages/second/product/product-details?type=share&id=${this.productId}`,
                    imageUrl: `${this.product.imageList[0]}`
                }
            },
            showPopup() {
                this.popupShow = true
            },
            hidePopup() {
                this.popupShow = false
            },
            getSectionProps() { //获取每个tab对应区域的scrollTop值
                let className = '.product-details',
                    sectionPropsArr = []
                uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data) => { //最外层盒子节点
                    uni.createSelectorQuery().selectAll(className).boundingClientRect((res) => { //最外层盒子节点
                        res.forEach((item, index) => {
                            sectionPropsArr.push({
                                className: `${className}${index}`,
                                scrollTop: item.top - data.top - 150
                            })
                        })
                        this.sectionPropsArr = sectionPropsArr
                        this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr)
                    }).exec()
                }).exec()
            },
            getSectionRange(arr) { // 获取每个tab对应区域的区间
                let sectionScrollTopList = []
                for (let i = 0; i < arr.length; i++) {
                    let thisScrollTop = arr[i].scrollTop
                    if (i < arr.length - 1) {
                        let nextScrollTop = arr[i + 1].scrollTop
                        if (i == 0) {
                            sectionScrollTopList.push(`0-${thisScrollTop}`)
                        } else if (i == arr.length - 1) {
                            sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`)
                        } else {
                            sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`)
                        }
                    } else {
                        sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`)
                    }
                }
                return sectionScrollTopList
            },
            activeTab: debounce((top, _this) => { //当滑动时也能同步激活tab
                const { sectionTopRangeArr } = _this
                if (sectionTopRangeArr.length > 0) {
                    sectionTopRangeArr.forEach((item, index) => {
                        let splitItem = item.split('-'),
                            openInterval = Number(splitItem[0]),
                            closedInterval = Number(splitItem[1])
                        if (top >= openInterval && top < closedInterval) {
                            _this.tabCurrentIndex = index
                        }
                    })
                }
            }, 100, true),
            getWinHeight() {
                this.winHeight = wx.getSystemInfoSync().windowHeight
            },
            goIndex() { //商城首页
                uni.switchTab({
                    url: '/pages/tabBar/home/index'
                })
            }
        },
        onPullDownRefresh() {
            setTimeout(() => {
                this.initData()
                uni.stopPullDownRefresh()
            }, 200)
        },
        onPageScroll(e) { //实时获取到滚动的值
            const { scrollTop } = e
            if (!this.tabSelectFlag) {
                this.activeTab(scrollTop, this)
            }
            if (e.scrollTop > 100) {
                this.headerColor = true
                this.navbarFiexd = 'fixed'
                this.isNavbarFiexd = true
                this.nvabarData = {
                    showCapsule: 1,
                    title: '二手详情',
                }
            } else {
                this.headerColor = false
                this.navbarFiexd = 'none'
                this.isNavbarFiexd = false
                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: `second/pages/product/product-details?type=share&id=${this.productId}`,
                imageUrl: `${this.product.imageList[0]}`
            }
        },
        onShow() {
            this.$api.getStorage().then((resolve) => {
                this.userId = resolve.userId ? resolve.userId : ''
                this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
                if (isPreviewImg) {
                    isPreviewImg = false
                    return
                } else {
                    this.initData()
                }
            }).catch(error => {
                this.initData()
            })
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .product-topnav {
        width: 100%;
        height: 174rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        z-index: 1000;
        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;
                }
            }
        }
    }

    .productRemarks {
        height: 36rpx;
        margin: 8rpx 0;
        width: 100%;
        float: left;

        .text {
            display: inline-block;
            padding: 0 18rpx;
            line-height: 32rpx;
            font-size: 20rpx;
            color: #FF2A2A;
            text-align: center;
            border-radius: 4rpx;
            background: #FFFFFF;
            border: 1px solid #FF2A2A;
            float: left;
            opacity: 0.8;
        }
    }

    .banner-section {
        width: 100%;
        height: 750rpx;
        position: relative;
        .infotag {
            font-size: 30rpx;
            color: #FFFFFF;
            width: 70rpx;
            height: 70rpx;
            text-align: center;
            line-height: 70rpx;
            border-radius: 50%;
            position: absolute;
            left: 10rpx;
            top: 10rpx;
            &.buy{
                background: #31d29d;
            }
            &.mai{
                background: #efb336;
            }
        }
    }

    .banner {
        width: 100%;
        height: 750rpx;

        .product-img {
            width: 750rpx;
        }

        image {
            width: 100%;
            height: 100%;
        }
    }

    .swiper__dots-box {
        position: absolute;
        color: #fff;
        bottom: 30rpx;
        right: 0;
    }

    .product-wrap {
        width: 100%;
        height: auto;
        padding: 24rpx 0 0 0;
        background-color: #FFFFFF;

        .wrap-top {
            width: 702rpx;
            padding: 0 24rpx;
            height: auto;
            float: left;
            padding-bottom: 20rpx;

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

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

                .p-title-name {
                    width: 602rpx;
                    // height: 96rpx;
                    float: left;
                    line-height: 46rpx;
                    font-size: $font-size-34;
                    color: $text-color;
                    // -o-text-overflow: ellipsis;
                    // text-overflow: ellipsis;
                    // display: -webkit-box;
                    // word-break: break-all;
                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 2;
                    // overflow: hidden;
                }
                .p-title-share {
                	width: 80rpx;
                	height: 80rpx;
                    line-height: 80rpx;
                	position: fixed;
                	right: 20rpx;
                    bottom: 350rpx;
                	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;
                	}
                }
            }

            .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: #FF2A2A;
                }

                .p-login-btn {
                    display: block;
                    height: 44rpx;
                    padding: 0 10rpx 0 20rpx;
                    border-radius: 11rpx;
                    background: $btn-confirm;
                    float: right;
                    line-height: 44rpx;
                    color: #FFFFFF;
                    text-align: center;
                    font-size: $font-size-24;
                }
            }
        }

        .wrap-label {
            float: left;
            width: 100%;
            box-sizing: border-box;

            .label-a {
                padding: 0 18rpx;
                line-height: 32rpx;
                font-size: $font-size-20;
                color: $color-system;
                text-align: center;
                border-radius: 6rpx;
                background: #ffe6dc;
                margin: 0 20rpx 15rpx 0;
                display: inline-block;
            }
        }

        .wrap-top-price {
            float: left;
            width: 100%;
            box-sizing: border-box;

            .wrap-main-item {
                width: 100%;
                height: 56rpx;

                .p-price {
                    height: 56rpx;
                    line-height: 56rpx;
                    float: left;
                    color: #FF2A2A;
                    font-weight: bold;

                    &.none {
                        text-decoration: line-through;
                        color: #999999;
                        font-weight: normal;
                    }

                    .txt {
                        margin: 0 2rpx;
                    }

                    .txt.sm {
                        font-size: $font-size-26;
                    }

                    .txt.big {
                        font-size: $font-size-34;
                    }
                }
            }

            .floor-item-act {
                height: 56rpx;
                text-align: center;
                box-sizing: border-box;
                float: left;
                padding: 10rpx 0;
                margin-left: 10rpx;
            }

            .floor-item-btn {
                float: left;
                height: 40rpx;
                margin-top: 8rpx;

                .btn {
                    line-height: 40rpx;
                    padding: 0 20rpx;
                    height: 40rpx;
                    background: $btn-confirm;
                    color: #FFFFFF;
                    font-size: $font-size-20;
                    border-radius: 4rpx;
                }

                .btn-none {
                    font-size: $font-size-34;
                    line-height: 40rpx;
                    color: #FF2A2A;
                    font-weight: bold;
                }
            }
        }

        .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: 702rpx;
        height: 90rpx;
        padding: 0 24rpx;
        background-color: #FFFFFF;
        position: relative;
        display: flex;
        line-height: 90rpx;
        border-bottom: 20rpx solid #F7F7F7;

        .title {
            line-height: 90rpx;
            display: inline-block;
            float: left;
            font-size: $font-size-28;
            color: $text-color;
        }

        .iconfont {
            color: #fea785;
            margin-right: 40rpx;
            font-size: $font-size-26;
        }

        .text {
            font-size: $font-size-26;
            color: #fea785;
            margin-left: 10rpx;
        }
    }

    .product-parameter {
        width: 702rpx;
        height: 90rpx;
        padding: 0 24rpx;
        background-color: #FFFFFF;
        position: relative;
        display: flex;
        border-bottom: 20rpx solid #F7F7F7;

        .title {
            line-height: 90rpx;
            display: inline-block;
            float: left;
            font-size: $font-size-28;
            color: #666666;
        }

        .name {
            float: right;
            line-height: 90rpx;
            display: inline-block;
            float: left;
            font-size: $font-size-28;
            color: $text-color;
            float: right;
            padding-right: 48rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
        }

        .icon-xiayibu {
            line-height: 90rpx;
            display: inline-block;
            position: absolute;
            width: 48rpx;
            top: 0;
            right: 0;
            color: #b2b2b2;
        }
    }

    .product-supplier {
        width: 100%;
        height: 174rpx;
        padding: 30rpx 24rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        position: relative;
        box-sizing: border-box;
        border-bottom: 20rpx solid #F7F7F7;

        .logo {
            width: 128rpx;
            height: 92rpx;
            float: left;
            border: 1px solid #efefef;
            border-radius: 6rpx;

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

        .main {
            width: 470rpx;
            height: 92rpx;
            float: left;
            margin-left: 20rpx;

            .name {
                width: 100%;
                line-height: 46rpx;
                float: left;
                font-size: $font-size-28;
                color: $text-color;
                float: right;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: left;
            }

            .massgs {
                width: 100%;
                line-height: 46rpx;
                float: left;
                font-size: $font-size-24;
                color: #999999;

                .label {
                    float: left;
                }

                .p-stars {
                    float: left;
                    margin-left: 20rpx;
                }

                .acount {
                    float: right;

                    text {
                        color: $color-system;
                    }
                }
            }
        }

        .icon-xiayibu {
            line-height: 154rpx;
            display: inline-block;
            position: absolute;
            width: 48rpx;
            top: 0;
            right: 0;
            color: #b2b2b2;
        }
    }

    .product-details {
        background: #FFFFFF;
        border-bottom: 20rpx solid #F7F7F7;
        padding: 24rpx;

        &.service {
            border-bottom: none;
        }

        &.recommend {
            background-color: #F7F7F7;
            border-bottom: none;
            padding: 0;

            .title {
                .title-tab {
                    background-color: #F7F7F7;
                    color: $text-color;
                    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;
                box-sizing: border-box;
            }

            .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: 110rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #FFFFFF;
        z-index: 99;

        .bottom-le {
            width: 302rpx;
            height: 86rpx;
            padding: 12rpx 24rpx;
            float: left;

            .item-bt {
                width: 86rpx;
                height: 100%;
                margin-right: 22rpx;
                display: flex;
                float: left;
                flex-direction: column;
                align-items: center;
                font-size: $font-size-24;
                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: -9rpx;
                }

                .icon-num.goleft {
                    right: 4rpx;
                }

                &:last-child {
                    margin-right: 0;
                }

                image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-bottom: 8rpx;
                }

                button.contact-btn {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    font-size: $font-size-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: 400rpx;
            height: 100%;
            float: right;
            display: flex;
            box-sizing: border-box;
            padding: 13rpx 20rpx 13rpx 0;

            .btn {
                flex: 1;
                width: 200rpx;
                line-height: 84rpx;
                text-align: center;
                font-size: $font-size-28;
                color: #FFFFFF;
            }

            .btn-cart {
                background-color: #ffe6dc;
                color: $color-system;
                border-radius: 42rpx 0 0 42rpx;
            }

            .btn-cart.disabled {
                background-color: #E1E1E1;
            }

            .btn-bay {
                background: linear-gradient(to right, #f28f31 0%, #FF5B00 100%);
                border-radius: 0 42rpx 42rpx 0;
            }

            .btn-bay.disabled {
                background-color: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
                ;
            }
        }
    }

    .uni-badge--small {
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }

    .uni-badge {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 1;
        display: inline-block;
        padding: 3px 6px;
        color: #333;
        border-radius: 100px;
        background-color: #f1f1f1;
    }

    .uni-badge-error {
        color: #fff;
        background-color: #dd524d;
    }

    /* 加入购物模态层*/
    @keyframes showPopup {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes hidePopup {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes showLayer {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-100%);
        }
    }

    @keyframes hideLayer {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes showAmnation {
        0% {
            top: -12rpx;
            opacity: 0;
        }

        50% {
            top: -60rpx;
            opacity: 1;
        }

        100% {
            top: -100rpx;
            opacity: 0;
        }
    }

    @keyframes hideAmnation {
        0% {
            top: -100rpx;
            opacity: 0;
        }

        100% {
            top: -12rpx;
            opacity: 0;
        }
    }

    .popup {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: none;

        .mask {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 21;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .layer {
            position: fixed;
            z-index: 22;
            bottom: -294rpx;
            width: 702rpx;
            padding: 24rpx 24rpx 36rpx 24rpx;
            height: 260rpx;
            border-radius: 20rpx 20rpx 0 0;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            .content {
                width: 100%;
            }

            .btn {
                width: 100%;
                height: 88rpx;
                margin-top: 20rpx;

                .button {
                    width: 100%;
                    height: 88rpx;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: $btn-confirm;
                    font-size: $font-size-28;
                    border-radius: 14rpx;
                }
            }
        }

        &.show {
            display: block;

            .mask {
                animation: showPopup 0.2s linear both;
            }

            .layer {
                animation: showLayer 0.2s linear both;
            }
        }

        &.hide {
            display: block;

            .mask {
                animation: hidePopup 0.2s linear both;
            }

            .layer {
                animation: hideLayer 0.2s linear both;
            }
        }

        &.none {
            display: none;
        }

        &.service {
            .row {
                margin: 30upx 0;

                .title {
                    font-size: 30upx;
                    margin: 10upx 0;
                }

                .description {
                    font-size: 28upx;
                    color: #999;
                }
            }
        }

        .layer-smimg {
            width: 114rpx;
            height: 114rpx;
            float: left;
            border-radius: 10rpx;
            margin-right: 24rpx;

            image {
                width: 114rpx;
                height: 114rpx;
                border-radius: 10rpx;
            }
        }

        .layer-nunbox {
            justify-content: space-between;
            align-items: center;
            width: 536rpx;
            height: 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;

                    .iconfont {
                        font-size: $font-size-32;
                        padding: 0 18rpx;
                        font-size: $text-color;
                    }

                    .btn-input {
                        width: 62rpx;
                        height: 48rpx;
                        line-height: 48rpx;
                        background: #F8F8F8;
                        border-radius: 4rpx;
                        text-align: center;
                        font-size: $font-size-28;
                    }
                }

                .product-step {
                    position: absolute;
                    left: 45rpx;
                    bottom: 0;
                    height: 44rpx;
                    background: #FFFFFF;
                }
            }

            .layer-nunbox-b {
                width: 100%;
                height: 44rpx;
                margin-top: 13rpx;
            }

            .text {
                line-height: 44rpx;
                font-size: $font-size-28;

                .p {
                    color: #FF2A2A;
                }

                .p:first-child {
                    margin-left: 30rpx;
                }

                .p.sm {
                    font-size: $font-size-24;
                }
            }
        }
    }

    .tui-popup-box {
        position: relative;
        box-sizing: border-box;
        min-height: 220rpx;
        padding: 0rpx 24rpx 24rpx 24rpx;

        .title {
            font-size: $font-size-34;
            color: $text-color;
            line-height: 88rpx;
            text-align: center;
            float: left;
            width: 100%;
            height: 88rpx;
        }

        .content {
            width: 100%;
            height: auto;
            float: left;

            .content-tr {
                width: 100%;
                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;
                }
            }
        }
    }

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

    .Disclaimer {
        background: rgba(225, 86, 22, 0.1);
        border-radius: 20rpx;
        padding: 0 20rpx 20rpx 20rpx;
        font-size: 20rpx;
        color: #FF5B00;
        margin-bottom: 30rpx
    }

    .Disclaimer span {
        display: block;
        padding: 20rpx 0;
        text-align: left;
        font-size: 24rpx;
    }

    .Disclaimer .text {
        line-height: 48rpx;
    }

    .brandinfo {
        color: #333333;
        line-height: 46rpx;
        font-size: 26rpx;
    }

    .imgList {
        width: 702rpx;
        margin: auto;
        height: 710rpx;
        margin-bottom: 20rpx;
    }

    .imgList img {
        width: 100%;
        height: 100%;

    }

    .detailsText {
        padding: 0 30rpx 30rpx 30rpx;
        color: #333333;
        font-size: 24rpx;
        text-align: left;
    }
</style>