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

<template>
    <view
        class="product"
        :style="{
            paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
            paddingTop: CustomBar + 'px'
        }"
    >
        <header-product
            v-if="isHeaderPoduct"
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :headerColor="headerColor"
            :type="isShareType"
            :page="backPage"
        >
        </header-product>
        <view class="product-topnav" v-if="isNavbarFiexd" :class="navbarFiexd" :style="{ top: CustomBar + 'px' }">
            <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="2"
        ></tui-skeleton>
        <template v-else>
            <view class="container-product tui-skeleton">
                <view class="container-product-main product-details product-details0">
                    <view class="product-top">
                        <view class="banner-section">
                            <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
                                <swiper
                                    class="banner tui-banner tui-skeleton-rect"
                                    @change="swiperChange"
                                    :duration="800"
                                    :autoplay="false"
                                    :circular="true"
                                >
                                    <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
                                        <image :src="item" @click="previewImg(index)" class="product-img" />
                                    </swiper-item>
                                </swiper>
                                <view class="swiper__dots-box">
                                    <tui-tag
                                        padding="12rpx 24rpx"
                                        type="translucent"
                                        shape="circleLeft"
                                        size="32rpx"
                                        :scaleMultiple="0.82"
                                        originRight
                                        >{{ current + 1 }}/{{ productImage.length }}</tui-tag
                                    >
                                </view>
                            </uni-swiper-dot>
                        </view>
                        <view class="product-wrap clearfix">
                            <view class="wrap-top">
                                <view class="wrap-top-price">
                                    <cm-price
                                        v-if="isRequest"
                                        :product="product"
                                        :userIdentity="userIdentity"
                                        :promotions="product.promotions"
                                        :ladderList="ladderList"
                                    />
                                </view>
                                <view class="p-title tui-skeleton-fillet">
                                    <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
                                        {{ product.name == undefined ? '' : product.name }}
                                    </view>
                                    <button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
                                        <view class=""><text class="iconfont icon-fenxiang"></text></view>
                                        <view class="">分享</view>
                                    </button>
                                </view>
                                <view class="wrap-label" v-if="product.tagsList.length > 0">
                                    <view
                                        class="label-a tui-skeleton-fillet"
                                        v-for="(label, index) in product.tagsList"
                                        :key="index"
                                        >{{ label }}</view
                                    >
                                </view>
                                <view class="product-seve">
                                    <text class="iconfont icon-wuyoushouhou tui-skeleton-rect"
                                        ><text class="text">无忧退货</text></text
                                    >
                                    <text class="iconfont icon-wuyoushouhou tui-skeleton-rect"
                                        ><text class="text">快速退款</text></text
                                    >
                                    <text class="iconfont icon-wuyoushouhou tui-skeleton-rect"
                                        ><text class="text">正品保证</text></text
                                    >
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="product-parameter" @click="showPopup">
                        <text class="title">参数：</text> <text class="name">品牌 分类...</text>
                        <text class="iconfont icon-chakangengduo"></text>
                    </view>
                </view>
                <view class="product-details product-details1">
                    <!-- 商品详情 -->
                    <view class="title"> <view class="title-tab">商品详情</view> </view>
                    <view class="content tui-banner product-rich-text tui-skeleton-rect">
                        <parser :html="html" :img-mode="widthFix" v-if="product.productDetail.detailInfo"></parser>
                        <view class="product-rich-text-none" v-else>暂无商品信息</view>
                    </view>
                </view>
                <view class="product-details service product-details2">
                    <!-- 服务项目 -->
                    <view class="title"> <view class="title-tab">服务项目</view> </view>
                    <view
                        class="content service"
                        v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
                    >
                        <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
                    </view>
                    <view class="content-none" v-else> <text>暂无服务项目</text> </view>
                </view>
                <!-- 商品参数 -->
                <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
                    <view class="tui-popup-box clearfix">
                        <view class="title">商品参数</view>
                        <div class="tui-popup-main">
                            <scroll-view class="tui-popup-scroll" scroll-y="true">
                                <view class="content-tr">
                                    <view class="content-td">品牌</view>
                                    <view class="content-th">{{
                                        product.brandName == null ? '其他' : product.brandName
                                    }}</view>
                                </view>
                                <view class="content-tr">
                                    <view class="content-td">包装规格</view>
                                    <view class="content-th">{{ product.unit }}</view>
                                </view>
                                <view class="content-tr">
                                    <view class="content-td">库存</view>
                                    <view class="content-th">{{ product.stock }}</view>
                                </view>
                                <view
                                    class="content-tr"
                                    v-if="product.parametersList.length > 0"
                                    v-for="(item, index) in product.parametersList"
                                    :key="index"
                                >
                                    <view class="content-td">{{ item.paramsName }}</view>
                                    <view class="content-th">{{ item.paramsContent }}</view>
                                </view>
                            </scroll-view>
                        </div>
                        <view
                            class="tui-right-flex tui-popup-btn"
                            :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }"
                        >
                            <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup()">收起</view> </view>
                        </view>
                    </view>
                </tui-bottom-popup>
                <!-- 底部按钮 -->
                <view class="menu">
                    <view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
                        <!-- 已下架商品提示 -->
                        <view
                            class="product-invalid"
                            v-if="isShowButton"
                            :style="{ bottom: isIphoneX ? '168rpx' : '100rpx' }"
                        >
                            <text>商品已经下架啦，非常抱歉！</text>
                        </view>
                        <view class="bottom-le">
                            <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/index/index')">
                                <text class="iconfont icon-fanhuishouye"></text> <text>首页</text>
                            </view>
                            <button class="item-bt" open-type="contact" @bindcontact="handleContact">
                                <text class="iconfont icon-kefu"></text> <text>客服</text>
                            </button>
                            <view class="item-bt" @click="buyProductCart()">
                                <text class="iconfont icon-gouwuche"></text> <text>购物车</text>
                                <text
                                    v-if="hasLogin && goodsData.cartCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                    :class="[goodsData.cartCount < 10 ? 'goleft' : '']"
                                >
                                    {{ goodsData.cartCount >= 100 ? '99+' : goodsData.cartCount }}
                                </text>
                                <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
                            </view>
                        </view>
                        <view class="bottom-ri">
                            <button
                                :disabled="isShowButton"
                                class="btn btn-cart"
                                :class="[isShowButton ? 'disabled' : '']"
                                @tap.stop="btnGetConfirm('add')"
                            >
                                加入购物车
                            </button>
                            <button
                                :disabled="isShowButton"
                                class="btn btn-bay"
                                :class="[isShowButton ? 'disabled' : '']"
                                @tap.stop="btnGetConfirm('buy')"
                            >
                                立即购买
                            </button>
                        </view>
                    </view>
                </view>
                <!--底部选择模态层弹窗组件 -->
                <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
                    <!-- 遮罩层 -->
                    <view class="mask"></view>
                    <view
                        class="layer"
                        @tap.stop="discard"
                        :style="{
                            paddingBottom: isIphoneX ? '68rpx' : '36rpx',
                            bottom: isIphoneX ? '-352rpx' : '-296rpx'
                        }"
                    >
                        <view class="content">
                            <view class="layer-smimg"> <image :src="product.mainImage" mode=""></image> </view>
                            <view class="layer-nunbox">
                                <view class="layer-nunbox-t">
                                    <view class="layer-nunbox-text">数量:</view>
                                    <view class="number-box">
                                        <view
                                            class="iconfont icon-jianhao"
                                            :class="[isQuantity == true ? 'disabled' : '']"
                                            @click="changeCountSub()"
                                        ></view>
                                        <input
                                            class="btn-input"
                                            type="number"
                                            v-model="number"
                                            maxlength="4"
                                            @blur="changeNumber($event)"
                                        />
                                        <view class="iconfont icon-jiahao" @click="changeCountAdd()"></view>
                                    </view>
                                </view>
                                <view class="layer-nunbox-b">
                                    <view class="text"
                                        >单价: <text class="p sm">￥</text>
                                        <text class="p bg">{{ buyRetailPrice | NumFormat }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
                    </view>
                </view>
                <!-- 侧边 -->
                <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
            </view>
        </template>
    </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import HeaderProduct from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
import cmPrice from '@/components/cm-module/productDetails/cm-price-activity.vue' //价格显示
import cmAttributes from '@/components/cm-module/productDetails/cm-attributes.vue' //规格信息
import parser from '@/components/jyf-Parser/index' //富文本处理
import cmService from '@/components/cm-module/productDetails/cm-service' //服务项目
import authorize from '@/common/authorize.js'
import wxLogin from '@/services/wxLogin.js'
import { debounce } from '@/common/common.js'
var isPreviewImg
export default {
    components: {
        HeaderProduct,
        parser,
        cmPrice,
        cmAttributes,
        cmService
    },
    data() {
        return {
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
                title: '' // 导航栏 中间的标题
            },
            clickPath: '/search/pages/search/search',
            html: '<div style="text-align: center;color:#333333;">暂无内容</div>',
            productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
            mode: 'round',
            iconClass: 'icon-aixin',
            iconColor: '#ff9100',
            specClass: '', //规格弹窗css类，控制开关动画
            isBtnType: '',
            isRequest: false,
            isScrollTop: false,
            current: 0,
            isShareType: '',
            isHeaderPoduct: false,
            isNavbarFiexd: false,
            navbarFiexd: 'none',
            ladderPriceFlag: '',
            ladderList: '',
            isEvaluate: false,
            isAnimation: false,
            skeletonShow: true,
            isQuantity: false,
            disabled: false,
            tabCurrentIndex: 0,
            userId: '',
            productId: 0,
            userIdentity: 0, //用户类型
            goodsData: {}, //自定义数据
            product: {}, //采美
            productImage: [],
            retailPrice: 0,
            buyRetailPrice: 0,
            stock: 0,
            number: 1,
            productsList: [],
            goodListData: [],
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            windowHeight: '',
            headerColor: false,
            backPage: 1,
            linkPath: '',
            CustomBar: this.CustomBar, // 顶部导航栏高度
            popupShow: false, //参数弹窗
            tabSelectFlag: false,
            sectionPropsArr: [],
            scrollTopArray: [],
            sectionTopRangeArr: [],
            winHeight: '',
            isShowButton: false,
            heUserId: 0
        }
    },
    onLoad(option) {
        this.productId = option.productId //获取商品ID
        this.heUserId = option.heUserId
        this.isShareType = option.type
        this.linkPath = option.path
        this.isHeaderPoduct = true
        if (this.isShareType == 'share') {
            // 收集分享信息
            this.setInviteUserId(option.inviteUserId)
            wxLogin.wxLoginAuthorize()
        }
        if (option.page == 2) {
            this.backPage = option.page
        }
        this.getWinHeight()
    },
    computed: {
        ...mapGetters(['hasLogin', 'isIphoneX', 'userId'])
    },
    filters: {
        NumFormat(value) {
            //处理金额
            // console.log('===' + Number(value).toFixed(2))
            return Number(value).toFixed(2)
        }
    },
    methods: {
        ...mapMutations('user', ['setInviteUserId']),
        initData() {
            // 初始化商品详情查询
            this.ProductService.QueryProductDetils({
                productId: this.productId
            })
                .then(response => {
                    //购物车数量
                    this.skeletonShow = false
                    this.productImage = []
                    this.product = response.data
                    //已删除/已冻结
                    if (this.product.validFlag === 2) {
                        this.isShowButton = true
                    }
                    this.ladderPriceFlag = this.product.ladderPriceFlag
                    this.html =
                        this.product.productDetail == null
                            ? this.html
                            : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
                    this.stock = this.product.stock
                    //处理商品图片列表
                    this.product.imageList.forEach(item => {
                        this.productImage.push(item)
                    })
                    //处理阶梯价格
                    if (this.product.ladderList && this.product.ladderList.length > 0) {
                        this.ladderList = this.product.ladderList
                    }
                    this.retailPrice = this.product.price.toFixed(2)
                    this.buyRetailPrice = this.product.price
                    setTimeout(() => {
                        this.getSectionProps()
                    }, 2000)
                    console.log(this.userId)
                    if (this.userId > 0) {
                        this.GetCartNumber()
                    }
                    this.isRequest = true
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        GetCartNumber() {
            //查询购物车数量
            this.ProductService.QueryShoppingQuantity({
                userId: this.userId
            })
                .then(response => {
                    this.goodsData.cartCount = response.data
                    this.$store.commit('app/updateAllNum', response.data)
                })
                .catch(error => {
                    console.log('查询购物车数量错误信息', error)
                })
        },
        swiperChange(e) {
            //顶部商品图片切换
            const index = e.detail.current
            this.current = index
        },
        previewImg(index) {
            //顶部商品图片预览
            isPreviewImg = true
            let previewUrls = this.productImage
            uni.previewImage({
                current: index, //图片索引
                urls: previewUrls, //必须是http图片，本地图片无效
                longPressActions: ''
            })
        },
        tabClick(index) {
            //商品详情&&供应商信息tab切换
            this.tabSelectFlag = true
            this.tabCurrentIndex = index
            let classIndex = '.product-details' + index
            uni.createSelectorQuery()
                .select('.container-product')
                .boundingClientRect(data => {
                    //最外层盒子节点
                    uni.createSelectorQuery()
                        .select(classIndex)
                        .boundingClientRect(res => {
                            //最外层盒子节点
                            uni.pageScrollTo({
                                duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
                                scrollTop: res.top - data.top - 40 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
                            })
                            setTimeout(() => {
                                this.tabSelectFlag = false
                            }, 500)
                        })
                        .exec()
                })
                .exec()
        },
        handleContact(e) {
            //跳转小程序客服
        },
        buyProductCart() {
            //底部购物车按钮点击
            if (this.hasLogin) {
                this.$api.navigateTo('/pages/goods/cart')
            } else {
                this.$api.navigateTo('/pages/login/login')
            }
        },
        btnGetConfirm(type) {
            //加入购物车&&立即购买点击
            if (this.hasLogin) {
                this.showSpec(type)
            } else {
                this.$api.navigateTo('/pages/login/login')
            }
        },
        changeCountAdd() {
            //popup弹窗数量增加按钮
            this.number++
            this.processActivityPrice()
        },
        changeCountSub() {
            //popup弹窗数量减按钮
            if (this.number == 1) {
                this.isQuantity = true
                this.$util.msg('购买数量不能低于1', 2000)
                return
            } else {
                this.number--
                this.processActivityPrice()
                this.isQuantity = false
            }
        },
        changeNumber(e) {
            let _value = e.detail.value
            if (!this.$api.isNumber(_value)) {
                this.number = 1
            } else if (_value == 1) {
                this.$util.msg('购买数量不能低于1', 2000)
                this.number = 1
            } else {
                this.number = e.detail.value
            }
            this.processActivityPrice()
        },
        processActivityPrice() {
            //单独处理活动价格和阶梯价格
            if ((this.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
                this.buyRetailPrice = this.product.retailPrice
            } else {
                this.ladderList.forEach((item, index) => {
                    if (this.number >= item.buyNum) {
                        this.buyRetailPrice = item.buyPrice
                    }
                })
            }
        },
        showSpec(type) {
            //显示选择数量确认弹窗
            this.isBtnType = type
            this.specClass = 'show'
        },
        hideSpec() {
            //关闭选择数量确认弹窗
            this.specClass = 'hide'
            setTimeout(() => {
                this.specClass = 'none'
            }, 200)
        },
        btnConfirm() {
            //加入购物车&&立即购买跳转订单页并关闭弹窗
            if (this.isBtnType == 'add') {
                this.getAddProductCart()
            } else {
                this.toConfirmation()
            }
        },
        toConfirmation() {
            //跳转确认订单页面
            this.specClass = 'hide'
            let productStp = {
                allPrice: this.number * this.buyRetailPrice,
                allCount: this.number,
                productId: this.product.productId,
                productCount: this.number
            }
            this.$api.navigateTo(
                `/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({ data: productStp })}`
            )
            setTimeout(() => {
                this.specClass = 'none'
            }, 200)
        },
        getAddProductCart() {
            //增加购物车成功和toast弹窗提示成功
            this.ProductService.shoppingAddCart({
                productId: this.productId,
                userId: this.userId,
                productCount: this.number,
                heUserId: this.heUserId
            })
                .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.GetCartNumber()
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },

        navToLogin() {
            authorize
                .checkLogin()
                .then(res => {
                    this.$store.commit('app/setLoginType', 8)
                    this.$store.commit('app/setLoginproductId', this.productId)
                    this.$api.navigateTo(`/pages/login/login?id=${this.productId}`)
                })
                .catch(err => {
                    this.$api.navigateTo('/pages/authorization/authorization?type=1')
                })
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        discard() {
            //丢弃
        },
        onShare(res) {
            //分享转发
            if (res.from === 'button') {
                // 来自页面内转发按钮
            }
            return {
                title: `${this.product.name}`,
                path: `pages/goods/product?type=share&productId=${this.productId}`,
                imageUrl: `${this.productImage[0]}`
            }
        },
        showPopup() {
            this.popupShow = true
        },
        hidePopup() {
            this.popupShow = false
        },
        getSectionProps() {
            //获取每个tab对应区域的scrollTop值
            let className = '.product-details',
                sectionPropsArr = []
            uni.createSelectorQuery()
                .select('.container-product')
                .boundingClientRect(data => {
                    //最外层盒子节点
                    uni.createSelectorQuery()
                        .selectAll(className)
                        .boundingClientRect(res => {
                            //最外层盒子节点
                            res.forEach((item, index) => {
                                sectionPropsArr.push({
                                    className: `${className}${index}`,
                                    scrollTop: item.top - data.top,
                                    height: item.height
                                })
                            })
                            this.sectionPropsArr = sectionPropsArr
                            console.log(this.sectionPropsArr)
                            this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr)
                        })
                        .exec()
                })
                .exec()
        },
        getSectionRange(arr) {
            // 获取每个tab对应区域的区间
            let sectionScrollTopList = []
            for (let i = 0; i < arr.length; i++) {
                sectionScrollTopList.push(`${arr[i].scrollTop}-${arr[i].scrollTop + arr[i].height}`)
            }
            // for(let i = 0; i < arr.length; i++) {
            // 	let thisScrollTop = arr[i].scrollTop;
            // 	let thisHeight = arr[i].height;
            // 	if(i < arr.length - 1) {
            // 		let nextScrollTop = arr[i+1].scrollTop;
            // 		if(i == 0) {
            // 			sectionScrollTopList.push(`0-${thisScrollTop + thisHeight}`);
            // 		} else if(i == arr.length - 1){
            // 			sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop - this.winHeight}`);
            // 		} else {
            // 			sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${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) {
                            console.log(top)
                            _this.tabCurrentIndex = index
                        }
                    })
                }
            },
            100,
            true
        ),
        getWinHeight() {
            this.winHeight = wx.getSystemInfoSync().windowHeight
        }
    },
    onPageScroll(e) {
        //实时获取到滚动的值
        const { scrollTop } = e
        if (!this.tabSelectFlag) {
            this.activeTab(scrollTop, this)
        }
        if (e.scrollTop > 60) {
            this.headerColor = true
            this.navbarFiexd = 'fixed'
            this.isNavbarFiexd = true
            this.nvabarData = {
                showCapsule: 1,
                title: '商品详情'
            }
        } else {
            this.headerColor = false
            this.isNavbarFiexd = false
            this.navbarFiexd = 'none'
            this.nvabarData = {
                showCapsule: 1,
                title: ''
            }
        }
        if (e.scrollTop > 700) {
            this.isScrollTop = true
        } else {
            this.isScrollTop = false
        }
    },
    onShareAppMessage(res) {
        //分享转发
        if (res.from === 'button') {
            // 来自页面内转发按钮
        }
        return {
            title: `${this.product.name}`,
            path: `pages/goods/product?type=share&productId=${this.productId}&inviteUserId=${this.userId}`,
            imageUrl: `${this.productImage[0]}`
        }
    },
    onShow() {
        this.$api
            .getStorage()
            .then(resolve => {
                this.userId = resolve.userId ? resolve.userId : ''
                this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
                if (isPreviewImg) {
                    isPreviewImg = false
                    return
                } else {
                    this.initData()
                }
            })
            .catch(error => {
                this.initData()
            })
    }
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}
.banner-section {
    width: 100%;
    height: 750rpx;
    position: relative;
}
.banner {
    width: 100%;
    height: 750rpx;
    .product-img {
        width: 750rpx;
    }
    image {
        width: 100%;
        height: 100%;
    }
}
.swiper__dots-box {
    position: absolute;
    color: #fff;
    bottom: 30rpx;
    right: 0;
}
.product-wrap {
    width: 100%;
    height: auto;
    padding: 24rpx 0 0 0;
    background-color: #ffffff;
    border-bottom: 20rpx solid #f7f7f7;
    .wrap-top {
        width: 702rpx;
        padding: 0 24rpx;
        height: auto;
        float: left;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #f8f8f8;
        .p-title {
            width: 100%;
            height: auto;
            float: left;
            position: relative;
            .p-title-name {
                width: 602rpx;
                height: auto;
                float: left;
                line-height: 48rpx;
                font-size: $font-size-28;
                color: $text-color;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                &.indent {
                    text-indent: 95rpx;
                }
            }
            .p-title-share {
                width: 96rpx;
                height: 96rpx;
                position: absolute;
                right: 0;
                text-align: center;
                color: #999999;
                font-size: $font-size-24;
                box-sizing: border-box;
                display: block;
                background: transparent;
                border-radius: 0;
                border: 0;
                margin: 0;
                padding: 8rpx 0;
                z-index: 990;
                .icon-fenxiang1 {
                    font-size: $font-size-34;
                }
            }
            .tui-share-btn::after {
                border: 0;
            }
        }
        .wrap-main-text {
            line-height: 56rpx;
            color: #ff2a2a;
            font-size: $font-size-26;
            display: block;
            float: left;
            font-weight: normal;
        }
        .wrap-main-none {
            display: block;
            width: 256rpx;
            height: 44rpx;
            padding-left: 20rpx;
            border-radius: 11rpx;
            background: $btn-confirm;
            float: right;
            line-height: 44rpx;
            color: #ffffff;
            text-align: center;
            font-size: $font-size-24;
        }

        .p-price-none {
            height: 44rpx;
            line-height: 44rpx;
            float: left;
            font-size: $font-size-24;
            color: #666;
            text-decoration: line-through;
            margin-left: 8rpx;
        }
        .p-minBuy {
            height: 44rpx;
            line-height: 44rpx;
            float: right;
            padding: 0 18rpx;
            border-radius: 22rpx;
            background-color: #f7f7f7;
            color: #7f7f7f;
            font-size: 24rpx;
            text-align: center;
            .min-text {
                margin: 0 6rpx;
            }
        }
        .p-login {
            height: 56rpx;
            line-height: 56rpx;
            color: $color-system;
            font-size: $font-size-24;
            &.grade {
                .price-left {
                    float: left;
                    .none {
                        display: block;
                        font-size: $font-size-20;
                        line-height: 48rpx;
                        color: #4a4b54;
                        float: left;
                        font-weight: bold;
                        margin-left: 5rpx;
                        text {
                            letter-spacing: 4rpx;
                            font-size: $font-size-32;
                        }
                    }
                }
            }
            .p-no {
                float: left;
                margin-right: 5rpx;
                font-size: $font-size-28;
                color: $text-color;
            }
            .p-login-btn {
                display: block;
                height: 44rpx;
                padding: 0 10rpx 0 20rpx;
                border-radius: 11rpx;
                background: $btn-confirm;
                float: right;
                line-height: 44rpx;
                color: #ffffff;
                text-align: center;
                font-size: $font-size-24;
            }
        }
    }
    .wrap-label {
        float: left;
        width: 100%;
        box-sizing: border-box;
        .label-a {
            padding: 0 18rpx;
            line-height: 32rpx;
            font-size: $font-size-20;
            color: $color-system;
            text-align: center;
            border-radius: 6rpx;
            background: #fff3f7;
            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: $color-system;
                font-weight: bold;
                .txt {
                    margin: 0 2rpx;
                }
                .txt.sm {
                    font-size: $font-size-26;
                }
                .txt.big {
                    font-size: $font-size-34;
                }
            }
        }
        .floor-item-act {
            // width: 80rpx;
            height: 34rpx;
            margin-top: 15rpx;
            margin-left: 20rpx;
            float: left;
            .tag {
                display: inline-block;
                height: 32rpx;
                font-size: 22rpx;
                line-height: 30rpx;
                text-align: center;
                color: #f83c6c;
                float: left;
                margin-right: 10rpx;
                &.tag-02 {
                    width: 80rpx;
                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
                        no-repeat;
                    background-size: contain;
                }
                &.tag-01 {
                    width: 56rpx;
                    color: #fff;
                    background-color: #f83c6c;
                    border-radius: 4rpx;
                }
            }
        }
        .floor-item-btn {
            float: left;
            height: 40rpx;
            margin-top: 8rpx;
            margin-left: 10rpx;
            .btn {
                line-height: 40rpx;
                padding: 0 20rpx;
                height: 40rpx;
                background: $btn-confirm;
                color: #ffffff;
                font-size: $font-size-20;
                border-radius: 4rpx;
            }
        }
    }
    .wrap-info {
        float: left;
        width: 702rpx;
        padding: 24rpx 24rpx 0 24rpx;
        border-bottom: 1px solid #f8f8f8;
        .info-viewT {
            width: 100%;
            min-height: 40rpx;
            font-size: $font-size-28;
            color: $text-color;
            line-height: 40rpx;
            text-align: left;
            &.none {
                color: #999999;
            }
            .info-viewL {
                min-width: 350rpx;
                float: left;
                margin-bottom: 24rpx;
            }
            .info-viewR {
                min-width: 352rpx;
                float: left;
                margin-bottom: 24rpx;
            }
        }
        .info-viewB {
            width: 100%;
            height: auto;
        }
        .info-f {
            width: 50%;
            float: left;
            font-size: $font-size-28;
            color: $text-color;
            line-height: 40rpx;
            margin-bottom: 24rpx;
            text-align: left;
        }
    }
}
.product-seve {
    width: 100%;
    height: 60rpx;
    background-color: #ffffff;
    position: relative;
    display: flex;
    line-height: 60rpx;
    .label {
        font-size: $font-size-28;
        color: #333333;
    }
    .iconfont {
        color: $color-system;
        margin-right: 20rpx;
        font-size: $font-size-30;
    }
    .text {
        font-size: $font-size-22;
        color: #999999;
        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-chakangengduo {
        line-height: 90rpx;
        display: inline-block;
        position: absolute;
        width: 48rpx;
        top: 0;
        right: 0;
        color: #b2b2b2;
    }
}
.product-details {
    width: 100%;
    background: #ffffff;
    border-bottom: 20rpx solid #f7f7f7;
    &.service {
        border-bottom: none;
    }
    &.recommend {
        background-color: #f7f7f7;
        border-bottom: none;
        .title {
            .title-tab {
                background-color: #f7f7f7;
                color: $text-color;
            }
        }
    }
    .product-rich-text-none {
        box-sizing: border-box;
        padding: 0 24rpx;
        text-align: left;
        font-size: 24rpx;
        color: #999999;
        line-height: 60rpx;
    }
    .content-none {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: left;
        font-size: $font-size-26;
        color: #999999;
        box-sizing: border-box;
        padding: 0 24rpx;
    }
    .title {
        width: 100%;
        box-sizing: border-box;
        padding: 0 24rpx;
        .title-tab {
            width: 100%;
            height: 100rpx;
            background: #fff;
            z-index: 10;
            font-size: $font-size-30;
            text-align: left;
            color: $text-color;
            line-height: 100rpx;
            font-weight: 600;
        }
        .title-msg {
            width: 100%;
            height: 236rpx;
            padding: 18rpx;
            background-color: rgba(225, 86, 22, 0.1);
            color: $color-system;
            box-sizing: border-box;
            margin-bottom: 30rpx;
            .tit {
                line-height: 46rpx;
                font-size: $font-size-24;
                text-align: left;
            }
            .txt {
                line-height: 38rpx;
                font-size: $font-size-20;
                text-align: justify;
            }
        }
    }
    .content {
        width: 100%;
        background-color: #ffffff;
    }
}
.isLower {
    width: 100%;
    height: 116rpx;
    line-height: 116rpx;
    text-align: center;
    color: #000000;
    font-size: $font-size-32;
    font-weight: bold;
}
.product-invalid {
    width: 100%;
    height: 80rpx;
    background-color: #666666;
    text-align: center;
    line-height: 80rpx;
    font-size: $font-size-26;
    color: #ffffff;
    position: fixed;
    bottom: 180rpx;
    left: 0;
}
.bottom-btn {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    // z-index: 999;
    .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: #666666;
            line-height: 34rpx;
            position: relative;
            .iconfont {
                display: block;
                width: 36rpx;
                height: 36rpx;
                text-align: center;
                font-size: 34rpx;
            }
            .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: #ffeff4;
            color: $color-system;
            border-radius: 42rpx 0 0 42rpx;
        }
        .btn-cart.disabled {
            background-color: #ffeff4;
            color: #ff457b;
        }
        .btn-bay {
            background: $btn-confirm;
            border-radius: 0 42rpx 42rpx 0;
        }
        .btn-bay.disabled {
            background: $btn-confirm;
            color: ffffff;
            opacity: 0.2;
        }
    }
}
.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: 60rpx;
    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;
                }
            }
        }
    }
}

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

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

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