|
|
@@ -1,3040 +1,3056 @@
|
|
|
-<template>
|
|
|
- <view
|
|
|
- class="product "
|
|
|
- :style="{
|
|
|
- paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
|
|
|
- paddingTop: CustomBar + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <custom-p
|
|
|
- v-if="isHeaderPoduct"
|
|
|
- :systeminfo="systeminfo"
|
|
|
- :navbar-data="nvabarData"
|
|
|
- :headerBtnPosi="headerBtnPosi"
|
|
|
- :headerColor="headerColor"
|
|
|
- :type="isShareType"
|
|
|
- :page="backPage"
|
|
|
- ></custom-p>
|
|
|
- <view
|
|
|
- class="product-topnav"
|
|
|
- id="topBar"
|
|
|
- v-show="isNavbarFiexd"
|
|
|
- :class="navbarFiexd"
|
|
|
- :style="{ top: CustomBar - 2 + 'px' }"
|
|
|
- >
|
|
|
- <view class="search-input">
|
|
|
- <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
|
|
|
- <view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
|
|
|
- <view class="search-text">搜索商品/项目仪器</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="navbar">
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 0 }"
|
|
|
- @click="tabClick(0)"
|
|
|
- >
|
|
|
- <text>详情</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 1 }"
|
|
|
- @click="tabClick(1)"
|
|
|
- >
|
|
|
- <text>服务项目</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 2 }"
|
|
|
- @click="tabClick(2)"
|
|
|
- v-if="product.qualificationImg"
|
|
|
- >
|
|
|
- <text>商品资质</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 3 }"
|
|
|
- @click="tabClick(3)"
|
|
|
- >
|
|
|
- <text>推荐</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 4 }"
|
|
|
- @click="tabClick(4)"
|
|
|
- v-if="product.archiveId !== 0"
|
|
|
- >
|
|
|
- <text>相关资料</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <tui-skeleton
|
|
|
- v-if="skeletonShow"
|
|
|
- backgroundColor="#fafafa"
|
|
|
- borderRadius="10rpx"
|
|
|
- :isLoading="true"
|
|
|
- :loadingType="5"
|
|
|
- ></tui-skeleton>
|
|
|
- <template v-else>
|
|
|
- <view class="cart-content empty" v-if="isInvalid">
|
|
|
- <view class="empty-container">
|
|
|
- <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
|
- <text class="error-text">商品已失效，去商城逛逛别的吧~</text>
|
|
|
- <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="container-product tui-skeleton" v-else>
|
|
|
- <view class="container-product-main">
|
|
|
- <view class="product-top">
|
|
|
- <view class="banner-section">
|
|
|
- <!-- <view class="cm-product-tags"> -->
|
|
|
- <!-- <view class="cm-product-cover" v-if="product.appletsActType === 1"
|
|
|
- >云上美博会</view
|
|
|
- > -->
|
|
|
- <view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
|
|
|
- <view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
|
|
|
- <!-- </view> -->
|
|
|
- <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
|
|
|
- <swiper
|
|
|
- class="banner tui-banner tui-skeleton-rect"
|
|
|
- @change="swiperChange"
|
|
|
- :duration="800"
|
|
|
- :autoplay="false"
|
|
|
- :circular="true"
|
|
|
- >
|
|
|
- <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
- <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__dots-box">
|
|
|
- <tui-tag
|
|
|
- padding="12rpx 24rpx"
|
|
|
- type="translucent"
|
|
|
- shape="circleLeft"
|
|
|
- size="32rpx"
|
|
|
- :scaleMultiple="0.82"
|
|
|
- originRight
|
|
|
- >
|
|
|
- {{ current + 1 }}/{{ productImage && productImage.length }}
|
|
|
- </tui-tag>
|
|
|
- </view>
|
|
|
- </uni-swiper-dot>
|
|
|
- </view>
|
|
|
- <view class="product-wrap clearfix">
|
|
|
- <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
|
- <view class="wrap-top-price">
|
|
|
- <cm-price
|
|
|
- v-if="isRequest"
|
|
|
- :product="product"
|
|
|
- :userIdentity="userIdentity"
|
|
|
- :shopID="shopID"
|
|
|
- :promotions="product.promotions"
|
|
|
- :ladderPriceList="ladderPriceList"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="p-title tui-skeleton-fillet">
|
|
|
- <view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
|
|
|
- <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
|
|
|
- {{ product.name == undefined ? '' : product.name }}
|
|
|
- </view>
|
|
|
- <button
|
|
|
- open-type="share"
|
|
|
- class="p-title-share tui-share-position"
|
|
|
- @tap="onShare"
|
|
|
- v-if="userInfo.userIdentity !== 1"
|
|
|
- >
|
|
|
- <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
- <view class="">分享</view>
|
|
|
- </button>
|
|
|
- <button class="p-title-share tui-share-position" @click="handleShare" v-else>
|
|
|
- <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
- <view class="">分享</view>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="wrap-label" v-if="product.tagsList && product.tagsList.length > 0">
|
|
|
- <view
|
|
|
- class="label-a tui-skeleton-fillet"
|
|
|
- v-for="(label, index) in product.tagsList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- {{ label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-seve" v-if="hasLogin">
|
|
|
- <text class="label">采美承诺：</text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
- <text class="text">无忧退货</text>
|
|
|
- </text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
- <text class="text">快速退款</text>
|
|
|
- </text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
- <text class="text">正品保证</text>
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="productRemarks"
|
|
|
- v-if="product.productRemarks != '' && product.productRemarks != null"
|
|
|
- >
|
|
|
- 备注:{{ product.productRemarks }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-item-none" v-if="goodsData.isNoneDisabled">
|
|
|
- <image class="none-image" :src="productNoneImage" mode=""></image>
|
|
|
- <view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
|
|
|
- <view class="none-text">咨询类似商品，请联系客服!</view>
|
|
|
- </view>
|
|
|
- <!-- 选择规格 -->
|
|
|
- <view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
|
|
|
- <text class="title">选择：</text>
|
|
|
- <text class="name">共{{ skusCount }}种规格可选</text>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- <!-- 参数 -->
|
|
|
- <view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
|
|
|
- <text class="title">参数：</text>
|
|
|
- <text class="name">品牌 分类...</text>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- <!-- 特殊商品退货须知 -->
|
|
|
- <view class="return-instructions" v-if="returnGoodsStutas">
|
|
|
- <cm-return-instructions :content="helpContent"></cm-return-instructions>
|
|
|
- </view>
|
|
|
- <!-- 配套商品 -->
|
|
|
- <view
|
|
|
- class="product-supporting"
|
|
|
- v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
|
|
|
- @click.stop="handleSupporting"
|
|
|
- >
|
|
|
- <view class="product-supporting-title">配套商品({{ supportingNum }})</view>
|
|
|
- <view class="product-supporting-list">
|
|
|
- <view
|
|
|
- class="list"
|
|
|
- v-for="(supporting, index) in supportingList"
|
|
|
- :key="index"
|
|
|
- v-if="index < 4"
|
|
|
- >
|
|
|
- <image class="list-image" :src="supporting.image" mode=""></image>
|
|
|
- </view>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 优惠券 -->
|
|
|
- <view
|
|
|
- class="product-parameter coupon"
|
|
|
- v-if="isShowButton && productCoupon.length > 0"
|
|
|
- @click="showPopup(2)"
|
|
|
- >
|
|
|
- <text class="title">优惠券：</text>
|
|
|
- <view class="coupon">
|
|
|
- <text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
|
|
|
- 满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- <!-- 仪器培训方案 -->
|
|
|
- <view
|
|
|
- class="product-parameter"
|
|
|
- @click="showPopup(1)"
|
|
|
- v-if="product.commodityType == 2 && product.trainingMethod"
|
|
|
- >
|
|
|
- <text class="title">培训方案：</text>
|
|
|
- <text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- <!-- 供应商 -->
|
|
|
- <view class="product-supplier" @click="goSupplier">
|
|
|
- <view class="logo">
|
|
|
- <img
|
|
|
- :src="
|
|
|
- shop.logo
|
|
|
- ? shop.logo
|
|
|
- : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="main">
|
|
|
- <view class="name">{{ shop.name }}</view>
|
|
|
- <view class="massgs">
|
|
|
- <view class="label">满意度:</view>
|
|
|
- <view class="p-stars">
|
|
|
- <uni-stars
|
|
|
- :stars="6"
|
|
|
- :iconClass="iconClass"
|
|
|
- :iconColor="iconColor"
|
|
|
- :fontSize="36"
|
|
|
- :widthInfo="176"
|
|
|
- ></uni-stars>
|
|
|
- </view>
|
|
|
- <view class="acount">
|
|
|
- <text>{{ shop.normalNum }}</text>
|
|
|
- 件商品
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right" v-if="!isShowCaimeiShop"><text class="iconfont icon-xiayibu"></text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 商品详情 -->
|
|
|
- <view v-show="tabCurrentIndex !== 3">
|
|
|
- <view class="product-details product-details0">
|
|
|
- <view class="title"><view class="title-tab">商品详情</view></view>
|
|
|
- <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
- <template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
|
|
|
- <mp-html :content="html" :tag-style="tagStyle" />
|
|
|
- </template>
|
|
|
- <view class="product-rich-text-none" v-else>暂无商品信息</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 服务项目 -->
|
|
|
- <view class="product-details service product-details1">
|
|
|
- <view class="title"><view class="title-tab">服务项目</view></view>
|
|
|
- <view
|
|
|
- class="content service"
|
|
|
- v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
|
|
|
- >
|
|
|
- <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
|
|
|
- </view>
|
|
|
- <view class="content-none" v-else><text>暂无服务项目</text></view>
|
|
|
- </view>
|
|
|
- <!-- 商品资质 -->
|
|
|
- <view class="product-details qualifications product-details2" v-if="product.qualificationImg">
|
|
|
- <view class="title"><view class="title-tab">商品资质</view></view>
|
|
|
- <view class="product-details-image">
|
|
|
- <view class="product-details-table clearfix" v-if="product.qualificationNo">
|
|
|
- <view class="ladder-tr">
|
|
|
- <view class="ladder-item-td th">证书编号</view>
|
|
|
- <view class="ladder-item-td th">产品名称</view>
|
|
|
- <view class="ladder-item-td th">详情</view>
|
|
|
- </view>
|
|
|
- <view class="ladder-tr">
|
|
|
- <view class="ladder-item-td">
|
|
|
- <view class="te-text">{{ product.qualificationNo }}</view>
|
|
|
- </view>
|
|
|
- <view class="ladder-item-td">
|
|
|
- <view class="te-text">{{ product.productName }}</view>
|
|
|
- </view>
|
|
|
- <view class="ladder-item-td">
|
|
|
- <view class="te-text last">{{ product.qualificationLink }}</view>
|
|
|
- <view class="te-copy">
|
|
|
- <text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
|
|
|
- 复制
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image
|
|
|
- class="qualificationImg-image"
|
|
|
- :src="product.qualificationImg"
|
|
|
- mode="aspectFill"
|
|
|
- @click="previewImg1(product.qualificationImg)"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 相关推荐 -->
|
|
|
- <view class="product-details recommend product-details3">
|
|
|
- <view class="title"><view class="title-tab">相关推荐</view></view>
|
|
|
- <view class="content hot">
|
|
|
- <cm-recommend
|
|
|
- :query-productid="product.productId"
|
|
|
- :query-type="product.recommendType"
|
|
|
- v-if="isRequest"
|
|
|
- ></cm-recommend>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 相关资料 -->
|
|
|
- <view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
|
|
|
- <cm-product-doc
|
|
|
- @previewImage="changePreViewImageStatus"
|
|
|
- :archiveId="product.archiveId"
|
|
|
- :userId="userId"
|
|
|
- ></cm-product-doc>
|
|
|
- </view>
|
|
|
- <!-- 优惠券 -->
|
|
|
- <tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
|
|
|
- <view class="tui-popup-box clearfix">
|
|
|
- <view class="title">优惠券</view>
|
|
|
- <view class="tui-popup-close" @click="hidePopup(2)">
|
|
|
- <text class="iconfont icon-iconfontguanbi"></text>
|
|
|
- </view>
|
|
|
- <view class="tui-popup-tabs">
|
|
|
- <coupon-tabs
|
|
|
- :tabs="navbar"
|
|
|
- :currentTab="currentTab > 2 ? 0 : currentTab"
|
|
|
- @change="couponChange"
|
|
|
- :itemWidth="100 / navbar.length + '%'"
|
|
|
- selectedColor="#FF5B00"
|
|
|
- sliderBgColor="#FF5B00"
|
|
|
- ></coupon-tabs>
|
|
|
- </view>
|
|
|
- <div class="tui-popup-main coupon">
|
|
|
- <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
- <view class="coupon-empty" v-if="isCouponEmpty">
|
|
|
- <image
|
|
|
- class="empty-container-image"
|
|
|
- :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
|
|
|
- ></image>
|
|
|
- <text class="error-text">暂无可领的优惠券~</text>
|
|
|
- </view>
|
|
|
- <template v-else>
|
|
|
- <view
|
|
|
- v-for="(coupon, index) in productCouponList"
|
|
|
- :key="index"
|
|
|
- :id="coupon.couponId"
|
|
|
- class="coupon-list"
|
|
|
- >
|
|
|
- <view class="list-cell-le">
|
|
|
- <view class="coupon-maxMoney">
|
|
|
- <text class="small">￥</text>
|
|
|
- {{ coupon.couponAmount }}
|
|
|
- </view>
|
|
|
- <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-ri">
|
|
|
- <view class="list-cell-top">
|
|
|
- <view class="list-cell-type">
|
|
|
- <view class="list-cell-tags">
|
|
|
- <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
- <text class="tags" v-if="coupon.moneyCouponType == 1">
|
|
|
- 意向{{ coupon.couponType | TypeFormat }}
|
|
|
- </text>
|
|
|
- <text class="tags" v-else>
|
|
|
- 定向{{ coupon.couponType | TypeFormat }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <text class="tags">
|
|
|
- {{ coupon.couponType | TypeFormat }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="list-cell-texts">
|
|
|
- <text v-if="coupon.couponType == 0">
|
|
|
- {{
|
|
|
- coupon.productType && coupon.productType == 1
|
|
|
- ? '全商城商品通用'
|
|
|
- : '仅可购买指定商品'
|
|
|
- }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 1">
|
|
|
- {{
|
|
|
- coupon.categoryType == 1
|
|
|
- ? '仅限购买产品类商品'
|
|
|
- : '仅限购买仪器类商品'
|
|
|
- }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 3">
|
|
|
- 仅限购买店铺【{{ coupon.shopName }}】的商品
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 4 || coupon.couponType == 2">
|
|
|
- 全商城商品通用
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-btn">
|
|
|
- <view class="icon-used">
|
|
|
- <template v-if="coupon.couponBtnType == 0">
|
|
|
- <template v-if="coupon.couponPayWay == 2">
|
|
|
- <view class="icon-used-text">
|
|
|
- {{ coupon.moneyCouponPrice }}采美豆
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="icon-used-btn receive"
|
|
|
- @click="toDeductCoupon(coupon)"
|
|
|
- >
|
|
|
- 抵扣
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else-if="coupon.couponPayWay == 1">
|
|
|
- <view class="icon-used-text">购买</view>
|
|
|
- <view
|
|
|
- class="icon-used-btn receive"
|
|
|
- @click="toPayCoupon(coupon)"
|
|
|
- >
|
|
|
- ￥{{ coupon.moneyCouponPrice }}
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view
|
|
|
- class="icon-used-btn receive"
|
|
|
- @click="receiveCoupon(coupon)"
|
|
|
- >
|
|
|
- 领取
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <view
|
|
|
- class="icon-used-btn make"
|
|
|
- v-if="coupon.couponBtnType == 1"
|
|
|
- >
|
|
|
- 已领取
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-time">
|
|
|
- {{ coupon.startDate }} - {{ coupon.endDate }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </scroll-view>
|
|
|
- </div>
|
|
|
- </view>
|
|
|
- </tui-bottom-popup>
|
|
|
- <!-- 培训方案 -->
|
|
|
- <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
|
|
|
- <view class="tui-popup-box clearfix">
|
|
|
- <view class="title">培训方案</view>
|
|
|
- <div class="tui-popup-main">
|
|
|
- <scroll-view class="tui-popup-scroll train" scroll-y="true">
|
|
|
- <view class="content-tr">
|
|
|
- <view class="content-td">培训方式：</view>
|
|
|
- <view class="content-th">
|
|
|
- {{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content-tr">
|
|
|
- <view class="content-td">培训费用：</view>
|
|
|
- <view class="content-th">
|
|
|
- {{ product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含' }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </div>
|
|
|
- <view
|
|
|
- class="tui-right-flex tui-popup-btn"
|
|
|
- :style="{ paddingBottom: isIphoneX ? '68rpx' : '.34rpx' }"
|
|
|
- >
|
|
|
- <view class="tui-flex-1"><view class="tui-button" @click="hidePopup(1)">收起</view></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tui-bottom-popup>
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="menu" v-if="isShowButton">
|
|
|
- <view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
- <view class="bottom-le">
|
|
|
- <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
|
|
|
- <image src="../../static/icon-home-active@3x.png"></image>
|
|
|
- <text>首页</text>
|
|
|
- </view>
|
|
|
- <view class="item-bt" @click="handleCollection">
|
|
|
- <image
|
|
|
- :src="
|
|
|
- collectionType
|
|
|
- ? StaticUrl + 'icon/icon-collection@2x.png'
|
|
|
- : StaticUrl + 'icon/icon-collection-none@2x.png'
|
|
|
- "
|
|
|
- ></image>
|
|
|
- <text>{{ collectionType ? '已收藏' : '收藏' }}</text>
|
|
|
- </view>
|
|
|
- <view class="item-bt" @click="buyProductCart()">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
|
|
|
- <text>购物车</text>
|
|
|
- <text
|
|
|
- v-if="hasLogin && bottomCartNumber > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[bottomCartNumber < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
|
|
|
- </text>
|
|
|
- <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom-ri">
|
|
|
- <button
|
|
|
- :disabled="goodsData.disabled"
|
|
|
- class="btn btn-cart"
|
|
|
- :class="[goodsData.disabled ? 'disabled' : '']"
|
|
|
- @tap.stop="btnGetConfirm('add')"
|
|
|
- >
|
|
|
- 加入购物车
|
|
|
- </button>
|
|
|
- <button
|
|
|
- :disabled="goodsData.disabled"
|
|
|
- class="btn btn-bay"
|
|
|
- :class="[goodsData.disabled ? 'disabled' : '']"
|
|
|
- @tap.stop="btnGetConfirm('buy')"
|
|
|
- >
|
|
|
- 立即购买
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 侧边 -->
|
|
|
- <scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <!-- 商品参数 -->
|
|
|
- <cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product"></cm-prams-popup>
|
|
|
- <!-- 选择规格弹窗 -->
|
|
|
- <cm-unit-popup
|
|
|
- v-if="popupShow3"
|
|
|
- :popupShow="popupShow3"
|
|
|
- :skuProduct="skuProduct"
|
|
|
- :productCoupon="productCoupon"
|
|
|
- :type="unitPopupType"
|
|
|
- :btnType="btnType"
|
|
|
- :goodsData="goodsData"
|
|
|
- @buyConfirm="handleBuyConfirm"
|
|
|
- @skuClick="handleSkuClick"
|
|
|
- ></cm-unit-popup>
|
|
|
- <!-- 弹窗提示 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- @click="handleClick"
|
|
|
- @cancel="hideMobel"
|
|
|
- :content="contentModalText"
|
|
|
- :button="modalButton"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- shape="circle"
|
|
|
- :maskClosable="false"
|
|
|
- ></tui-modal>
|
|
|
- <!-- 商品详情可见度弹窗提醒 -->
|
|
|
- <cm-product-modal
|
|
|
- v-if="showModal"
|
|
|
- :showModal="showModal"
|
|
|
- :commodityDetailsFlag="product.commodityDetailsFlag"
|
|
|
- :isShareType="isShareType"
|
|
|
- :userIdentity="userIdentity"
|
|
|
- :firstClubType="firstClubType"
|
|
|
- />
|
|
|
- <!-- ross弹窗 -->
|
|
|
- <cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml"></cmRossPopup>
|
|
|
-
|
|
|
- <!-- 分享弹窗 -->
|
|
|
- <cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>
|
|
|
-
|
|
|
- <!-- 协销名片 -->
|
|
|
- <cm-seller-modal :suid="suid"></cm-seller-modal>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-import customP from './components/cm-header.vue' //自定义导航
|
|
|
-import cmPrice from './components/cm-price.vue' //价格显示
|
|
|
-import cmAttributes from './components/cm-attributes.vue' //规格信息
|
|
|
-import cmRecommend from './components/recommend' //相关推荐
|
|
|
-import cmParameter from './components/cm-parameter' //相关参数
|
|
|
-import cmService from './components/cm-service' //服务项目
|
|
|
-import cmProductDoc from './components/cm-product-doc.vue'
|
|
|
-import cmProductModal from './components/cm-product-modal.vue'
|
|
|
-import cmPramsPopup from './components/cm-prams-popup.vue'
|
|
|
-import cmUnitPopup from './components/cm-unit-popup.vue'
|
|
|
-import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
|
|
|
-import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
|
|
|
-import cmReturnInstructions from './components/cm-return-instructions.vue'
|
|
|
-import authorize from '@/common/config/authorize.js'
|
|
|
-import wxLogin from '@/common/config/wxLogin.js'
|
|
|
-import { debounce } from '@/common/config/common.js'
|
|
|
-import payMixins from '@/mixins/payMixins.js'
|
|
|
-import proMixins from './mixins/proMixins.js'
|
|
|
-import cmSrsMixins from '@/utils/cmSrsMixins.js'
|
|
|
-import thorui from '@/components/clipboard/clipboard.thorui.js'
|
|
|
-import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
|
|
|
-import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
|
|
|
-import {queryParse} from './mixins/share.helper.js'
|
|
|
-var isPreviewImg
|
|
|
-export default {
|
|
|
- mixins: [payMixins, proMixins, cmSrsMixins],
|
|
|
- components: {
|
|
|
- customP,
|
|
|
- cmRecommend,
|
|
|
- cmPrice,
|
|
|
- cmAttributes,
|
|
|
- cmParameter,
|
|
|
- cmService,
|
|
|
- couponTabs,
|
|
|
- cmProductDoc,
|
|
|
- cmPramsPopup,
|
|
|
- cmUnitPopup,
|
|
|
- cmProductModal,
|
|
|
- cmRossPopup,
|
|
|
- cmReturnInstructions,
|
|
|
- cmSharePopup,
|
|
|
- cmSellerModal
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- StaticUrl: this.$Static, //静态图片路径
|
|
|
- clickPath: '/pages/search/search',
|
|
|
- html: '',
|
|
|
- productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
- mode: 'round',
|
|
|
- iconClass: 'icon-aixin',
|
|
|
- iconColor: '#ff9100',
|
|
|
- specClass: '', // 规格弹窗css类，控制开关动画
|
|
|
- isBtnType: '',
|
|
|
- isRequest: false,
|
|
|
- isScrollTop: false,
|
|
|
- current: 0,
|
|
|
- isShareType: '',
|
|
|
- isHeaderPoduct: false,
|
|
|
- isNavbarFiexd: false,
|
|
|
- navbarFiexd: 'none',
|
|
|
- ladderPriceFlag: '',
|
|
|
- ladderPriceList: '',
|
|
|
- isInvalid: false,
|
|
|
- isEvaluate: false,
|
|
|
- isAnimation: false,
|
|
|
- skeletonShow: true,
|
|
|
- isStock: false,
|
|
|
- disabled: false,
|
|
|
- isNoneDisabled: false,
|
|
|
- tabCurrentIndex: 0,
|
|
|
- userId: 0,
|
|
|
- shopId: 0,
|
|
|
- shopID: 0,
|
|
|
- typeId: 0,
|
|
|
- vipFlag: 0,
|
|
|
- firstClubType: 0,
|
|
|
- productId: 0,
|
|
|
- skusCount: 0, // 规格种类
|
|
|
- userIdentity: 0, // 用户类型
|
|
|
- goodsData: {}, // 自定义数据
|
|
|
- shop: {}, //供应商信息
|
|
|
- product: {}, //采美
|
|
|
- productImage: [],
|
|
|
- retailPrice: 0,
|
|
|
- stock: 0,
|
|
|
- number: 0,
|
|
|
- minBuyNumber: 0,
|
|
|
- productsList: [],
|
|
|
- goodListData: [],
|
|
|
- productCoupon: [], // 优惠券
|
|
|
- productCouponList: [], // 优惠券弹窗列表
|
|
|
- headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
|
|
|
- systeminfo: this.setSysteminfo(), // 获取设备信息
|
|
|
- windowHeight: '',
|
|
|
- headerColor: false,
|
|
|
- backPage: 1,
|
|
|
- nvabarData: {
|
|
|
- // 顶部自定义导航
|
|
|
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
|
|
|
- title: '' // 导航栏 中间的标题
|
|
|
- },
|
|
|
- linkPath: '',
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- popupShow0: false, // 参数弹窗
|
|
|
- popupShow1: false, // 培训方案
|
|
|
- popupShow2: false, // 优惠券
|
|
|
- popupShow3: false, // 购买弹窗
|
|
|
- tabSelectFlag: false,
|
|
|
- sectionPropsArr: [],
|
|
|
- scrollTopArray: [],
|
|
|
- winHeight: '',
|
|
|
- isShowButton: true,
|
|
|
- isCouponEmpty: false,
|
|
|
- currentTab: 0,
|
|
|
- couponParam: {
|
|
|
- // 获取弹窗优惠券领取参数
|
|
|
- userId: 0,
|
|
|
- productId: 0,
|
|
|
- status: 1,
|
|
|
- source: 2
|
|
|
- },
|
|
|
- bottomCartNumber: 0,
|
|
|
- navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
|
|
|
- isPreviewImage: false,
|
|
|
- opentype: '',
|
|
|
- collectionType: false,
|
|
|
- isShowSupportingList: false,
|
|
|
- supportingList: [],
|
|
|
- supportingNum: 0, // 组合商品总数
|
|
|
- contentModalText: '', //操作文字提示语句
|
|
|
- modal: false,
|
|
|
- modalButton: [
|
|
|
- {
|
|
|
- text: '取消',
|
|
|
- type: 'gray',
|
|
|
- plain: true //是否空心
|
|
|
- },
|
|
|
- {
|
|
|
- text: '去升级',
|
|
|
- customStyle: {
|
|
|
- color: '#fff',
|
|
|
- bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
|
|
|
- },
|
|
|
- plain: false
|
|
|
- }
|
|
|
- ],
|
|
|
- showModal: false,
|
|
|
- isShowCaimeiShop: false,
|
|
|
- unitPopupType: 0, // 选择类型 1 点击加入购物车 立即购买 2：点击规格选择
|
|
|
- returnGoodsStutas: false,
|
|
|
- helpContent: '',
|
|
|
- posterData: {}, // 商品详情
|
|
|
- suid: 0 ,// 协销id
|
|
|
- scene: {} ,//获取二维码参数
|
|
|
- options: {},
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
|
|
|
- },
|
|
|
- filters: {
|
|
|
- TypeFormat(value) {
|
|
|
- switch (value) {
|
|
|
- case 0:
|
|
|
- return '活动券'
|
|
|
- break
|
|
|
- case 1:
|
|
|
- return '品类券'
|
|
|
- break
|
|
|
- case 2:
|
|
|
- return '用户专享券'
|
|
|
- break
|
|
|
- case 3:
|
|
|
- return '店铺券'
|
|
|
- break
|
|
|
- case 4:
|
|
|
- return '新用户券'
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isNavbarFiexd(val) {
|
|
|
- if (!this.isRequest || !val) return
|
|
|
- let timer = null
|
|
|
- clearTimeout(timer)
|
|
|
- timer = setTimeout(() => {
|
|
|
- if (this.sectionPropsArr.length > 0) return
|
|
|
- this.getSectionProps()
|
|
|
- }, 200)
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- if (option.scene) { // 识别小程序二维码
|
|
|
- this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
|
|
|
- }
|
|
|
- this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId = option.id || this.scene.id //获取商品ID
|
|
|
- if (option.typeId) {
|
|
|
- this.typeId = option.typeId
|
|
|
- }
|
|
|
- this.opentype = option.open
|
|
|
- this.isShareType = option.type
|
|
|
- this.linkPath = option.path
|
|
|
- this.isHeaderPoduct = true
|
|
|
- if (option.page == 2) {
|
|
|
- this.backPage = option.page
|
|
|
- }
|
|
|
- this.options = option.scene ? this.scene : option
|
|
|
- this.getWinHeight()
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- if (this.opentype == 'caimei') {
|
|
|
- // 跳转到资料详情
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- this.isNavbarFiexd = true
|
|
|
- this.tabClick(3)
|
|
|
- uni.hideLoading()
|
|
|
- }, 2000)
|
|
|
- }
|
|
|
- console.log('是iPhoneX', this.isIphoneX)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initGetStotage() {
|
|
|
- // 初始化
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
- this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
- this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
- this.shopID = userInfo.shopId ? userInfo.shopId : 0
|
|
|
- this.firstClubType = this.clubType
|
|
|
- if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
|
|
|
- this.isShowButton = true
|
|
|
- } else {
|
|
|
- this.isShowButton = false
|
|
|
- }
|
|
|
- if (isPreviewImg) {
|
|
|
- isPreviewImg = false
|
|
|
- return
|
|
|
- } else {
|
|
|
- this.initData()
|
|
|
- }
|
|
|
- },
|
|
|
- initData() {
|
|
|
- // 初始化商品详情查询
|
|
|
- this.ProductService.QueryProductDetils({
|
|
|
- userId: this.userId,
|
|
|
- productId: this.productId,
|
|
|
- identity: this.identity,
|
|
|
- typeId: this.typeId
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- let productLabel = ''
|
|
|
- this.productImage = []
|
|
|
- this.shop = response.data.shop
|
|
|
- this.shopId = response.data.shopId
|
|
|
- const dataStr = JSON.stringify(response.data)
|
|
|
- this.product = JSON.parse(dataStr)
|
|
|
- this.skuProduct = JSON.parse(dataStr)
|
|
|
- this.skusCount = this.product.skus.length
|
|
|
- this.addParams.skuId = this.product.skuId
|
|
|
- if (this.product.tinyTypeName) {
|
|
|
- productLabel = this.product.tinyTypeName
|
|
|
- } else if (!this.product.tinyTypeName && this.product.smallTypeName) {
|
|
|
- productLabel = this.product.smallTypeName
|
|
|
- } else {
|
|
|
- productLabel = this.product.bigTypeName
|
|
|
- }
|
|
|
- //设置统计数据标签
|
|
|
- if (this.product.relatedLabels) {
|
|
|
- uni.setStorageSync('productLabel', this.product.relatedLabels)
|
|
|
- } else {
|
|
|
- uni.setStorageSync(
|
|
|
- 'productLabel',
|
|
|
- `${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
|
|
|
- )
|
|
|
- }
|
|
|
- //校验是否为ross
|
|
|
- this.checkedIsRossSet()
|
|
|
- //判断是否可以跳转供应商主页
|
|
|
- if (this.product.shopType === 2) {
|
|
|
- this.isShowCaimeiShop = true
|
|
|
- }
|
|
|
- // 判断是否显示已收藏
|
|
|
- if (this.product.userLike && this.product.userLike == 1) {
|
|
|
- this.collectionType = true
|
|
|
- } else {
|
|
|
- this.collectionType = false
|
|
|
- }
|
|
|
- //已删除/已冻结
|
|
|
- if (this.product.validFlag === 0 || this.product.validFlag == 10) {
|
|
|
- this.isInvalid = true
|
|
|
- } else if (this.product.validFlag === 9) {
|
|
|
- if (this.userIdentity == 1) {
|
|
|
- this.isInvalid = false
|
|
|
- } else {
|
|
|
- this.isInvalid = true
|
|
|
- }
|
|
|
- }
|
|
|
- this.ladderPriceFlag = this.product.ladderPriceFlag
|
|
|
- this.html = this.adaptRichTextImg(this.product)
|
|
|
- this.stock = this.product.stock
|
|
|
- this.number = this.product.minBuyNumber
|
|
|
- this.minBuyNumber = this.product.minBuyNumber
|
|
|
-
|
|
|
- //处理商品图片列表
|
|
|
- this.product.imageList.forEach(item => {
|
|
|
- this.productImage.push(item.image)
|
|
|
- })
|
|
|
- //处理阶梯价格
|
|
|
- if (this.product.ladderPriceList != null) {
|
|
|
- this.ladderPriceList = this.product.ladderPriceList
|
|
|
- }
|
|
|
- //拆分金额并转千分位格式显示
|
|
|
- if (this.product.price != null) {
|
|
|
- this.retailPrice = this.product.price.toFixed(2)
|
|
|
- }
|
|
|
- //处理下架商品和售罄商品
|
|
|
- if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
|
|
|
- this.isNoneDisabled = true
|
|
|
- this.disabled = true
|
|
|
- } else {
|
|
|
- this.disabled = false
|
|
|
- this.isNoneDisabled = false
|
|
|
- this.goodsData.disabledText = ''
|
|
|
- }
|
|
|
- if (this.product.priceFlag == 1) {
|
|
|
- this.disabled = true
|
|
|
- } else if (this.product.priceFlag == 2) {
|
|
|
- if (this.userIdentity == 4 && this.vipFlag != 1) {
|
|
|
- this.disabled = true
|
|
|
- } else {
|
|
|
- this.disabled = false
|
|
|
- }
|
|
|
- } else if (this.product.priceFlag == 3) {
|
|
|
- if (this.userIdentity == 4) {
|
|
|
- this.disabled = true
|
|
|
- } else if (this.userIdentity == 2 && this.firstClubType != 1) {
|
|
|
- this.disabled = true
|
|
|
- } else {
|
|
|
- this.disabled = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.disabled = false
|
|
|
- }
|
|
|
- this.goodsData.disabled = this.disabled
|
|
|
- this.goodsData.isNoneDisabled = this.isNoneDisabled
|
|
|
- if (this.product.validFlag == 3) {
|
|
|
- this.goodsData.disabledText = '下架'
|
|
|
- }
|
|
|
- if (this.product.validFlag == 10) {
|
|
|
- this.goodsData.disabledText = '停售'
|
|
|
- }
|
|
|
- if (this.product.saleOutFlag === 1) {
|
|
|
- this.goodsData.disabledText = '售罄'
|
|
|
- }
|
|
|
- console.log(this.disabled)
|
|
|
- // setTimeout(() => {
|
|
|
- // this.getSectionProps()
|
|
|
- // }, 2000)
|
|
|
- this.handleShowProductType(this.product.commodityDetailsFlag)
|
|
|
- if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
|
|
|
- this.ProductCartNumber()
|
|
|
- }
|
|
|
- this.queryProductDetilsCoupons()
|
|
|
- this.getCommodityCombinationList()
|
|
|
- // 特殊商品退货须知
|
|
|
- this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
|
|
|
- this.helpContent = response.data.helpContent
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.skeletonShow = false
|
|
|
- this.isRequest = true
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- handleShowProductType(flag = '') {
|
|
|
- // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
|
|
|
- const flagMap = {
|
|
|
- '2': true,
|
|
|
- '3': true,
|
|
|
- '4': true
|
|
|
- }
|
|
|
- if (!this.hasLogin) {
|
|
|
- this.showModal = flagMap[flag]
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.vipFlag === 1) {
|
|
|
- this.showModal = false
|
|
|
- return
|
|
|
- }
|
|
|
- if (flag === 3 && this.userIdentity === 4) {
|
|
|
- this.showModal = true
|
|
|
- return
|
|
|
- }
|
|
|
- if (flag === 4 && this.userIdentity === 4) {
|
|
|
- this.showModal = true
|
|
|
- return
|
|
|
- }
|
|
|
- if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
|
|
|
- this.showModal = true
|
|
|
- return
|
|
|
- }
|
|
|
- },
|
|
|
- hideMobel1() {
|
|
|
- this.modal1 = false
|
|
|
- this.$api.navigateBack(1)
|
|
|
- },
|
|
|
-
|
|
|
- adaptRichTextImg(product) {
|
|
|
- // 商品详情
|
|
|
- let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
|
|
|
- let html = ''
|
|
|
- if (product.productDetailChose == 1) {
|
|
|
- // 同资质机构显示商品详情
|
|
|
- html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
|
|
|
- } else {
|
|
|
- if (this.hasLogin && this.userIdentity != 4) {
|
|
|
- html = product.productDetail
|
|
|
- ? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
|
|
|
- : defaulHtml
|
|
|
- } else {
|
|
|
- if (product.productDetail.commonDetailInfo) {
|
|
|
- html = product.productDetail
|
|
|
- ? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
|
|
|
- : defaulHtml
|
|
|
- } else {
|
|
|
- html = defaulHtml
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return html
|
|
|
- },
|
|
|
- getCommodityCombinationList() {
|
|
|
- // 初始化商品详情配套商品
|
|
|
- this.ProductService.getCommodityCombinationList({
|
|
|
- userId: this.userId,
|
|
|
- productId: this.productId,
|
|
|
- source: 2,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 4
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- const data = response.data
|
|
|
- this.supportingList = data.results
|
|
|
- this.supportingNum = data.totalRecord
|
|
|
- if (this.supportingList.length > 0) {
|
|
|
- if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
|
|
|
- this.isShowSupportingList = true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取组合商品列表失败')
|
|
|
- })
|
|
|
- },
|
|
|
- queryProductDetilsCoupons() {
|
|
|
- // 初始化商品详情优惠券信息
|
|
|
- this.ProductService.QueryProductDetilsCoupons(this.couponParam)
|
|
|
- .then(response => {
|
|
|
- this.productCoupon = response.data.list
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取优惠券列表失败')
|
|
|
- })
|
|
|
- },
|
|
|
- queryPopupCoupons() {
|
|
|
- // 获取弹窗优惠券列表
|
|
|
- this.ProductService.QueryProductDetilsCoupons(this.couponParam)
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- this.navbar[0].num = data.notCouponNum
|
|
|
- this.navbar[1].num = data.couponNum
|
|
|
- if (data.couponList && data.couponList.length > 0) {
|
|
|
- this.productCouponList = data.couponList
|
|
|
- this.isCouponEmpty = false
|
|
|
- } else {
|
|
|
- this.isCouponEmpty = true
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取优惠券列表失败')
|
|
|
- })
|
|
|
- },
|
|
|
- ProductCartNumber() {
|
|
|
- // 获取用户购物车储量
|
|
|
- this.ProductService.ProductCartNumber({ userId: this.userId })
|
|
|
- .then(response => {
|
|
|
- this.bottomCartNumber = response.data
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取购物车数量失败')
|
|
|
- })
|
|
|
- },
|
|
|
- receiveCoupon(coupon) {
|
|
|
- // 点击优惠券领取按钮,友盟埋点收集领取优惠券
|
|
|
- if (process.env.NODE_ENV != 'development') {
|
|
|
- this.$uma.trackEvent('Um_Event_productCouponReceive', {
|
|
|
- Um_Key_PageName: '商品详情',
|
|
|
- Um_Key_EvenName: '领取优惠券',
|
|
|
- Um_Key_CouponId: `${coupon.couponId}`
|
|
|
- })
|
|
|
- }
|
|
|
- this.ProductService.ReceiveCoupon({
|
|
|
- userId: this.couponParam.userId,
|
|
|
- couponId: coupon.couponId,
|
|
|
- source: 1
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg('领取成功', 1500, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.currentTab = 1
|
|
|
- this.couponParam.status = 2
|
|
|
- this.queryPopupCoupons()
|
|
|
- }, 1500)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- toDeductCoupon(coupon) {
|
|
|
- // 点击采美豆抵扣优惠券
|
|
|
- if (process.env.NODE_ENV != 'development') {
|
|
|
- this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
|
|
|
- Um_Key_PageName: '领券中心',
|
|
|
- Um_Key_EvenName: '抵扣优惠券',
|
|
|
- Um_Key_CouponId: `${coupon.couponId}`
|
|
|
- })
|
|
|
- }
|
|
|
- if (this.hasLogin) {
|
|
|
- if (this.userIdentity === 1 || this.userIdentity === 3) {
|
|
|
- this.$util.msg('您的身份暂不支持领取优惠券', 2000)
|
|
|
- return
|
|
|
- }
|
|
|
- this.WeChatPayCouponBeans(coupon)
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login')
|
|
|
- }
|
|
|
- },
|
|
|
- WeChatPayCouponBeans(coupon) {
|
|
|
- // 采美豆抵扣优惠券
|
|
|
- this.PayService.WeChatPayCouponBeans({
|
|
|
- source: 1, //领取渠道 1 小程序 2 网站
|
|
|
- userId: this.couponParam.userId,
|
|
|
- couponId: coupon.couponId
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg('抵扣成功', 1500)
|
|
|
- setTimeout(() => {
|
|
|
- this.currentTab = 1
|
|
|
- this.couponParam.status = 2
|
|
|
- this.queryPopupCoupons()
|
|
|
- }, 1500)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- toPayCoupon(coupon) {
|
|
|
- // 点击购买优惠券,友盟埋点收集购买优惠券
|
|
|
- if (process.env.NODE_ENV != 'development') {
|
|
|
- this.$uma.trackEvent('Um_Event_productCouponBuy', {
|
|
|
- Um_Key_PageName: '商品详情',
|
|
|
- Um_Key_EvenName: '购买优惠券',
|
|
|
- Um_Key_CouponId: `${coupon.couponId}`
|
|
|
- })
|
|
|
- }
|
|
|
- this.createCouponRecord(coupon)
|
|
|
- },
|
|
|
- createCouponRecord(coupon) {
|
|
|
- // 生成购买优惠券记录Id
|
|
|
- this.PayService.WeChatCouponRecord({
|
|
|
- userId: this.userId,
|
|
|
- couponId: coupon.couponId
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.MiniWxPayFor(coupon, response.data.couponRecordId)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- if (error.code == -1) {
|
|
|
- //个人机构不能购买
|
|
|
- this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
|
|
|
- this.modal = true
|
|
|
- } else if (error.code == -2) {
|
|
|
- //会员机构不是医美机构不能购买
|
|
|
- this.$util.msg('该优惠券仅限医美机构购买', 2000)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- async MiniWxPayFor(coupon, couponRecordId) {
|
|
|
- const wechatcode = await authorize.getCode('weixin')
|
|
|
- const params = {
|
|
|
- userId: this.userId,
|
|
|
- couponId: coupon.couponId,
|
|
|
- couponRecordId: couponRecordId,
|
|
|
- payType: 'XCX',
|
|
|
- code: wechatcode,
|
|
|
- source: 1 //支付来源 1 小程序 2 WWW
|
|
|
- }
|
|
|
- this.weChatMiniCouponWxPay(
|
|
|
- params,
|
|
|
- 'Um_Event_productCouponPay',
|
|
|
- '商品详情',
|
|
|
- '线上支付优惠券',
|
|
|
- coupon.couponId,
|
|
|
- this.userId
|
|
|
- )
|
|
|
- },
|
|
|
- hideMobel() {
|
|
|
- this.modal = false
|
|
|
- },
|
|
|
- handleClick(e) {
|
|
|
- //个人机构跳转升级页面
|
|
|
- if (e.index == 1) {
|
|
|
- this.$api.navigateTo('/pages/login/apply')
|
|
|
- }
|
|
|
- this.modal = false
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- //顶部商品图片切换
|
|
|
- const index = e.detail.current
|
|
|
- this.current = index
|
|
|
- },
|
|
|
- previewImg1(url) {
|
|
|
- let mentuzArray = []
|
|
|
- mentuzArray.push(url)
|
|
|
- uni.previewImage({
|
|
|
- urls: mentuzArray,
|
|
|
- current: 0
|
|
|
- })
|
|
|
- },
|
|
|
- previewImg(index) {
|
|
|
- //顶部商品图片预览
|
|
|
- isPreviewImg = true
|
|
|
- let previewUrls = this.productImage
|
|
|
- uni.previewImage({
|
|
|
- current: index, //图片索引
|
|
|
- urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
- longPressActions: ''
|
|
|
- })
|
|
|
- },
|
|
|
- //商品详情&&供应商信息tab切换
|
|
|
- tabClick(index) {
|
|
|
- // 重新标记
|
|
|
- this.getSectionProps()
|
|
|
- this.tabCurrentIndex = index
|
|
|
- this.tabSelectFlag = true
|
|
|
- let timer = null
|
|
|
- clearTimeout(timer)
|
|
|
- // 点击tab 300ms才执行跳转，避免出错（来回跳动）
|
|
|
- timer = setTimeout(() => {
|
|
|
- this.tabClickAction(index)
|
|
|
- }, 500)
|
|
|
- },
|
|
|
- // 跳转执行
|
|
|
- tabClickAction(index) {
|
|
|
- const that = this
|
|
|
- if (index === 3) {
|
|
|
- return uni.pageScrollTo({
|
|
|
- duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
- scrollTop: this.sectionPropsArr[0].scrollTop
|
|
|
- })
|
|
|
- }
|
|
|
- uni.pageScrollTo({
|
|
|
- duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
- scrollTop: this.sectionPropsArr[index].scrollTop,
|
|
|
- success() {
|
|
|
- setTimeout(() => {
|
|
|
- that.tabSelectFlag = false
|
|
|
- }, 300)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleContact(e) {
|
|
|
- //跳转小程序客服
|
|
|
- console.log(e.detail.path)
|
|
|
- console.log(e.detail.query)
|
|
|
- },
|
|
|
- buyProductCart() {
|
|
|
- //底部购物车按钮点击
|
|
|
- if (this.hasLogin) {
|
|
|
- // 友盟埋点商品详情购物车入口点击事件
|
|
|
- if (process.env.NODE_ENV != 'development') {
|
|
|
- this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
|
|
|
- Um_Key_PageName: '去购物车',
|
|
|
- Um_Key_SourcePage: '商品详情购物车入口'
|
|
|
- })
|
|
|
- }
|
|
|
- this.$api.navigateTo('/pages/goods/cart')
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- },
|
|
|
- btnGetConfirm(type) {
|
|
|
- //加入购物车&&立即购买点击
|
|
|
- if (this.hasLogin) {
|
|
|
- this.btnType = type
|
|
|
- this.popupShow3 = true
|
|
|
- this.unitPopupType = 1
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- },
|
|
|
- getAddProductCart() {
|
|
|
- //增加购物车成功和toast弹窗提示成功
|
|
|
- this.ProductService.shoppingAddCart({
|
|
|
- productId: this.productId,
|
|
|
- userId: this.userId,
|
|
|
- productCount: this.number,
|
|
|
- source: 2
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.specClass = 'hide'
|
|
|
- this.$util.msg('加入购物车成功', 1500, true, 'success')
|
|
|
- this.isAnimation = true
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none'
|
|
|
- }, 200)
|
|
|
- setTimeout(() => {
|
|
|
- this.isAnimation = false
|
|
|
- }, 2000)
|
|
|
- this.bottomCartNumber = response.data
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('error', error.msg)
|
|
|
- })
|
|
|
- },
|
|
|
- setHeaderBtnPosi() {
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- setSysteminfo() {
|
|
|
- let systeminfo
|
|
|
- uni.getSystemInfo({
|
|
|
- // 获取设备信息
|
|
|
- success: res => {
|
|
|
- systeminfo = res
|
|
|
- }
|
|
|
- })
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- goIndex() {
|
|
|
- //商城首页
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/tabBar/home/index'
|
|
|
- })
|
|
|
- },
|
|
|
- goSupplier() {
|
|
|
- //跳供应商资料页
|
|
|
- if (!this.isShowCaimeiShop) {
|
|
|
- this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + this.shopId)
|
|
|
- }
|
|
|
- },
|
|
|
- discard() {
|
|
|
- //丢弃
|
|
|
- },
|
|
|
- onShare(res) {
|
|
|
- //分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&id=${this.productId}`,
|
|
|
- imageUrl: `${this.productImage[0]}`
|
|
|
- }
|
|
|
- },
|
|
|
- // 分享海报
|
|
|
- handleShare() {
|
|
|
- this.posterData = {
|
|
|
- productName: this.product.name,
|
|
|
- productImage: this.productImage[0],
|
|
|
- suid: this.suid,
|
|
|
- path: 'pages/goods/product',
|
|
|
- id: this.productId
|
|
|
- }
|
|
|
- this.$refs.sharePopup.open()
|
|
|
- },
|
|
|
- handleCollection() {
|
|
|
- // 收藏
|
|
|
- if (this.hasLogin) {
|
|
|
- this.ProductService.getProductUserLike({
|
|
|
- userId: this.userId,
|
|
|
- productId: this.product.productId
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.collectionType = !this.collectionType
|
|
|
- this.$util.msg(response.data, 1500, true, 'success')
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login')
|
|
|
- }
|
|
|
- },
|
|
|
- showPopup(index) {
|
|
|
- switch (index) {
|
|
|
- case 0:
|
|
|
- this.popupShow0 = true
|
|
|
- break
|
|
|
- case 1:
|
|
|
- this.popupShow1 = true
|
|
|
- break
|
|
|
- case 2:
|
|
|
- if (this.hasLogin) {
|
|
|
- this.queryPopupCoupons()
|
|
|
- this.popupShow2 = true
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login')
|
|
|
- }
|
|
|
- break
|
|
|
- case 3:
|
|
|
- this.popupShow3 = true
|
|
|
- this.unitPopupType = 2
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- hidePopup(index) {
|
|
|
- switch (index) {
|
|
|
- case 0:
|
|
|
- this.popupShow0 = false
|
|
|
- break
|
|
|
- case 1:
|
|
|
- this.popupShow1 = false
|
|
|
- break
|
|
|
- case 2:
|
|
|
- this.popupShow2 = false
|
|
|
- break
|
|
|
- case 3:
|
|
|
- this.popupShow3 = false
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- couponChange(e) {
|
|
|
- this.currentTab = e.index
|
|
|
- switch (this.currentTab) {
|
|
|
- case 0:
|
|
|
- this.couponParam.status = 1
|
|
|
- this.queryPopupCoupons()
|
|
|
- break
|
|
|
- case 1:
|
|
|
- this.couponParam.status = 2
|
|
|
- this.queryPopupCoupons()
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- handleSupporting() {
|
|
|
- // 跳转组合商品页面
|
|
|
- this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
|
|
|
- },
|
|
|
- // 获取每个tab对应区域的区间
|
|
|
- async getSectionProps() {
|
|
|
- const sectionPropsArr = [],
|
|
|
- scrollTopArray = [],
|
|
|
- className = 'product-details'
|
|
|
-
|
|
|
- // 获取相关节点元素信息
|
|
|
- const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
|
|
|
- const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
|
|
|
- const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
|
|
|
+<template>
|
|
|
+ <view
|
|
|
+ class="product "
|
|
|
+ :style="{
|
|
|
+ paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
|
|
|
+ paddingTop: CustomBar + 'px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <custom-p
|
|
|
+ v-if="isHeaderPoduct"
|
|
|
+ :systeminfo="systeminfo"
|
|
|
+ :navbar-data="nvabarData"
|
|
|
+ :headerBtnPosi="headerBtnPosi"
|
|
|
+ :headerColor="headerColor"
|
|
|
+ :type="isShareType"
|
|
|
+ :page="backPage"
|
|
|
+ ></custom-p>
|
|
|
+ <view
|
|
|
+ class="product-topnav"
|
|
|
+ id="topBar"
|
|
|
+ v-show="isNavbarFiexd"
|
|
|
+ :class="navbarFiexd"
|
|
|
+ :style="{ top: CustomBar - 2 + 'px' }"
|
|
|
+ >
|
|
|
+ <view class="search-input">
|
|
|
+ <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
|
|
|
+ <view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
|
|
|
+ <view class="search-text">搜索商品/项目仪器</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="navbar">
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 0 }"
|
|
|
+ @click="tabClick(0)"
|
|
|
+ >
|
|
|
+ <text>详情</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 1 }"
|
|
|
+ @click="tabClick(1)"
|
|
|
+ >
|
|
|
+ <text>服务项目</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 2 }"
|
|
|
+ @click="tabClick(2)"
|
|
|
+ v-if="product.qualificationImg"
|
|
|
+ >
|
|
|
+ <text>商品资质</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 3 }"
|
|
|
+ @click="tabClick(3)"
|
|
|
+ >
|
|
|
+ <text>推荐</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 4 }"
|
|
|
+ @click="tabClick(4)"
|
|
|
+ v-if="product.archiveId !== 0"
|
|
|
+ >
|
|
|
+ <text>相关资料</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ ></tui-skeleton>
|
|
|
+ <template v-else>
|
|
|
+ <view class="cart-content empty" v-if="isInvalid">
|
|
|
+ <view class="empty-container">
|
|
|
+ <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
|
+ <text class="error-text">商品已失效，去商城逛逛别的吧~</text>
|
|
|
+ <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-product tui-skeleton" v-else>
|
|
|
+ <view class="container-product-main">
|
|
|
+ <view class="product-top">
|
|
|
+ <view class="banner-section">
|
|
|
+ <!-- <view class="cm-product-tags"> -->
|
|
|
+ <!-- <view class="cm-product-cover" v-if="product.appletsActType === 1"
|
|
|
+ >云上美博会</view
|
|
|
+ > -->
|
|
|
+ <view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
|
|
|
+ <view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
|
|
|
+ <!-- </view> -->
|
|
|
+ <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
|
|
|
+ <swiper
|
|
|
+ class="banner tui-banner tui-skeleton-rect"
|
|
|
+ @change="swiperChange"
|
|
|
+ :duration="800"
|
|
|
+ :autoplay="false"
|
|
|
+ :circular="true"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
+ <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="swiper__dots-box">
|
|
|
+ <tui-tag
|
|
|
+ padding="12rpx 24rpx"
|
|
|
+ type="translucent"
|
|
|
+ shape="circleLeft"
|
|
|
+ size="32rpx"
|
|
|
+ :scaleMultiple="0.82"
|
|
|
+ originRight
|
|
|
+ >
|
|
|
+ {{ current + 1 }}/{{ productImage && productImage.length }}
|
|
|
+ </tui-tag>
|
|
|
+ </view>
|
|
|
+ </uni-swiper-dot>
|
|
|
+ </view>
|
|
|
+ <view class="product-wrap clearfix">
|
|
|
+ <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
|
+ <view class="wrap-top-price">
|
|
|
+ <cm-price
|
|
|
+ v-if="isRequest"
|
|
|
+ :product="product"
|
|
|
+ :userIdentity="userIdentity"
|
|
|
+ :shopID="shopID"
|
|
|
+ :promotions="product.promotions"
|
|
|
+ :ladderPriceList="ladderPriceList"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="p-title tui-skeleton-fillet">
|
|
|
+ <view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
|
|
|
+ <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
|
|
|
+ {{ product.name == undefined ? '' : product.name }}
|
|
|
+ </view>
|
|
|
+ <button
|
|
|
+ open-type="share"
|
|
|
+ class="p-title-share tui-share-position"
|
|
|
+ @tap="onShare"
|
|
|
+ v-if="userInfo.userIdentity !== 1"
|
|
|
+ >
|
|
|
+ <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
+ <view class="">分享</view>
|
|
|
+ </button>
|
|
|
+ <button class="p-title-share tui-share-position" @click="handleShare" v-else>
|
|
|
+ <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
+ <view class="">分享</view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="wrap-label" v-if="product.tagsList && product.tagsList.length > 0">
|
|
|
+ <view
|
|
|
+ class="label-a tui-skeleton-fillet"
|
|
|
+ v-for="(label, index) in product.tagsList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-seve" v-if="hasLogin">
|
|
|
+ <text class="label">采美承诺：</text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
+ <text class="text">无忧退货</text>
|
|
|
+ </text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
+ <text class="text">快速退款</text>
|
|
|
+ </text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect">
|
|
|
+ <text class="text">正品保证</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="productRemarks"
|
|
|
+ v-if="product.productRemarks != '' && product.productRemarks != null"
|
|
|
+ >
|
|
|
+ 备注:{{ product.productRemarks }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item-none" v-if="goodsData.isNoneDisabled">
|
|
|
+ <image class="none-image" :src="productNoneImage" mode=""></image>
|
|
|
+ <view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
|
|
|
+ <view class="none-text">咨询类似商品，请联系客服!</view>
|
|
|
+ </view>
|
|
|
+ <!-- 选择规格 -->
|
|
|
+ <view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
|
|
|
+ <text class="title">选择：</text>
|
|
|
+ <text class="name">共{{ skusCount }}种规格可选</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 参数 -->
|
|
|
+ <view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
|
|
|
+ <text class="title">参数：</text>
|
|
|
+ <text class="name">品牌 分类...</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 特殊商品退货须知 -->
|
|
|
+ <view class="return-instructions" v-if="returnGoodsStutas">
|
|
|
+ <cm-return-instructions :content="helpContent"></cm-return-instructions>
|
|
|
+ </view>
|
|
|
+ <!-- 配套商品 -->
|
|
|
+ <view
|
|
|
+ class="product-supporting"
|
|
|
+ v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
|
|
|
+ @click.stop="handleSupporting"
|
|
|
+ >
|
|
|
+ <view class="product-supporting-title">配套商品({{ supportingNum }})</view>
|
|
|
+ <view class="product-supporting-list">
|
|
|
+ <view
|
|
|
+ class="list"
|
|
|
+ v-for="(supporting, index) in supportingList"
|
|
|
+ :key="index"
|
|
|
+ v-if="index < 4"
|
|
|
+ >
|
|
|
+ <image class="list-image" :src="supporting.image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 优惠券 -->
|
|
|
+ <view
|
|
|
+ class="product-parameter coupon"
|
|
|
+ v-if="isShowButton && productCoupon.length > 0"
|
|
|
+ @click="showPopup(2)"
|
|
|
+ >
|
|
|
+ <text class="title">优惠券：</text>
|
|
|
+ <view class="coupon">
|
|
|
+ <text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
|
|
|
+ 满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 仪器培训方案 -->
|
|
|
+ <view
|
|
|
+ class="product-parameter"
|
|
|
+ @click="showPopup(1)"
|
|
|
+ v-if="product.commodityType == 2 && product.trainingMethod"
|
|
|
+ >
|
|
|
+ <text class="title">培训方案：</text>
|
|
|
+ <text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 供应商 -->
|
|
|
+ <view class="product-supplier" @click="goSupplier">
|
|
|
+ <view class="logo">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ shop.logo
|
|
|
+ ? shop.logo
|
|
|
+ : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="name">{{ shop.name }}</view>
|
|
|
+ <view class="massgs">
|
|
|
+ <view class="label">满意度:</view>
|
|
|
+ <view class="p-stars">
|
|
|
+ <uni-stars
|
|
|
+ :stars="6"
|
|
|
+ :iconClass="iconClass"
|
|
|
+ :iconColor="iconColor"
|
|
|
+ :fontSize="36"
|
|
|
+ :widthInfo="176"
|
|
|
+ ></uni-stars>
|
|
|
+ </view>
|
|
|
+ <view class="acount">
|
|
|
+ <text>{{ shop.normalNum }}</text>
|
|
|
+ 件商品
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="!isShowCaimeiShop"><text class="iconfont icon-xiayibu"></text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品详情 -->
|
|
|
+ <view v-show="tabCurrentIndex !== 3">
|
|
|
+ <view class="product-details product-details0">
|
|
|
+ <view class="title"><view class="title-tab">商品详情</view></view>
|
|
|
+ <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
+ <template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
|
|
|
+ <mp-html :content="html" :tag-style="tagStyle" />
|
|
|
+ </template>
|
|
|
+ <view class="product-rich-text-none" v-else>暂无商品信息</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 服务项目 -->
|
|
|
+ <view class="product-details service product-details1">
|
|
|
+ <view class="title"><view class="title-tab">服务项目</view></view>
|
|
|
+ <view
|
|
|
+ class="content service"
|
|
|
+ v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
|
|
|
+ >
|
|
|
+ <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
|
|
|
+ </view>
|
|
|
+ <view class="content-none" v-else><text>暂无服务项目</text></view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品资质 -->
|
|
|
+ <view class="product-details qualifications product-details2" v-if="product.qualificationImg">
|
|
|
+ <view class="title"><view class="title-tab">商品资质</view></view>
|
|
|
+ <view class="product-details-image">
|
|
|
+ <view class="product-details-table clearfix" v-if="product.qualificationNo">
|
|
|
+ <view class="ladder-tr">
|
|
|
+ <view class="ladder-item-td th">证书编号</view>
|
|
|
+ <view class="ladder-item-td th">产品名称</view>
|
|
|
+ <view class="ladder-item-td th">详情</view>
|
|
|
+ </view>
|
|
|
+ <view class="ladder-tr">
|
|
|
+ <view class="ladder-item-td">
|
|
|
+ <view class="te-text">{{ product.qualificationNo }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="ladder-item-td">
|
|
|
+ <view class="te-text">{{ product.productName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="ladder-item-td">
|
|
|
+ <view class="te-text last">{{ product.qualificationLink }}</view>
|
|
|
+ <view class="te-copy">
|
|
|
+ <text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
|
|
|
+ 复制
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="qualificationImg-image"
|
|
|
+ :src="product.qualificationImg"
|
|
|
+ mode="aspectFill"
|
|
|
+ @click="previewImg1(product.qualificationImg)"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 相关推荐 -->
|
|
|
+ <view class="product-details recommend product-details3">
|
|
|
+ <view class="title"><view class="title-tab">相关推荐</view></view>
|
|
|
+ <view class="content hot">
|
|
|
+ <cm-recommend
|
|
|
+ :query-productid="product.productId"
|
|
|
+ :query-type="product.recommendType"
|
|
|
+ v-if="isRequest"
|
|
|
+ ></cm-recommend>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 相关资料 -->
|
|
|
+ <view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
|
|
|
+ <cm-product-doc
|
|
|
+ @previewImage="changePreViewImageStatus"
|
|
|
+ :archiveId="product.archiveId"
|
|
|
+ :userId="userId"
|
|
|
+ ></cm-product-doc>
|
|
|
+ </view>
|
|
|
+ <!-- 优惠券 -->
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="title">优惠券</view>
|
|
|
+ <view class="tui-popup-close" @click="hidePopup(2)">
|
|
|
+ <text class="iconfont icon-iconfontguanbi"></text>
|
|
|
+ </view>
|
|
|
+ <view class="tui-popup-tabs">
|
|
|
+ <coupon-tabs
|
|
|
+ :tabs="navbar"
|
|
|
+ :currentTab="currentTab > 2 ? 0 : currentTab"
|
|
|
+ @change="couponChange"
|
|
|
+ :itemWidth="100 / navbar.length + '%'"
|
|
|
+ selectedColor="#FF5B00"
|
|
|
+ sliderBgColor="#FF5B00"
|
|
|
+ ></coupon-tabs>
|
|
|
+ </view>
|
|
|
+ <div class="tui-popup-main coupon">
|
|
|
+ <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
+ <view class="coupon-empty" v-if="isCouponEmpty">
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
|
|
|
+ ></image>
|
|
|
+ <text class="error-text">暂无可领的优惠券~</text>
|
|
|
+ </view>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ v-for="(coupon, index) in productCouponList"
|
|
|
+ :key="index"
|
|
|
+ :id="coupon.couponId"
|
|
|
+ class="coupon-list"
|
|
|
+ >
|
|
|
+ <view class="list-cell-le">
|
|
|
+ <view class="coupon-maxMoney">
|
|
|
+ <text class="small">￥</text>
|
|
|
+ {{ coupon.couponAmount }}
|
|
|
+ </view>
|
|
|
+ <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <view class="list-cell-top">
|
|
|
+ <view class="list-cell-type">
|
|
|
+ <view class="list-cell-tags">
|
|
|
+ <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
+ <text class="tags" v-if="coupon.moneyCouponType == 1">
|
|
|
+ 意向{{ coupon.couponType | TypeFormat }}
|
|
|
+ </text>
|
|
|
+ <text class="tags" v-else>
|
|
|
+ 定向{{ coupon.couponType | TypeFormat }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <text class="tags">
|
|
|
+ {{ coupon.couponType | TypeFormat }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-texts">
|
|
|
+ <text v-if="coupon.couponType == 0">
|
|
|
+ {{
|
|
|
+ coupon.productType && coupon.productType == 1
|
|
|
+ ? '全商城商品通用'
|
|
|
+ : '仅可购买指定商品'
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 1">
|
|
|
+ {{
|
|
|
+ coupon.categoryType == 1
|
|
|
+ ? '仅限购买产品类商品'
|
|
|
+ : '仅限购买仪器类商品'
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 3">
|
|
|
+ 仅限购买店铺【{{ coupon.shopName }}】的商品
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">
|
|
|
+ 全商城商品通用
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-btn">
|
|
|
+ <view class="icon-used">
|
|
|
+ <template v-if="coupon.couponBtnType == 0">
|
|
|
+ <template v-if="coupon.couponPayWay == 2">
|
|
|
+ <view class="icon-used-text">
|
|
|
+ {{ coupon.moneyCouponPrice }}采美豆
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn receive"
|
|
|
+ @click="toDeductCoupon(coupon)"
|
|
|
+ >
|
|
|
+ 抵扣
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="coupon.couponPayWay == 1">
|
|
|
+ <view class="icon-used-text">购买</view>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn receive"
|
|
|
+ @click="toPayCoupon(coupon)"
|
|
|
+ >
|
|
|
+ ￥{{ coupon.moneyCouponPrice }}
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn receive"
|
|
|
+ @click="receiveCoupon(coupon)"
|
|
|
+ >
|
|
|
+ 领取
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn make"
|
|
|
+ v-if="coupon.couponBtnType == 1"
|
|
|
+ >
|
|
|
+ 已领取
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-time">
|
|
|
+ {{ coupon.startDate }} - {{ coupon.endDate }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 培训方案 -->
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="title">培训方案</view>
|
|
|
+ <div class="tui-popup-main">
|
|
|
+ <scroll-view class="tui-popup-scroll train" scroll-y="true">
|
|
|
+ <view class="content-tr">
|
|
|
+ <view class="content-td">培训方式：</view>
|
|
|
+ <view class="content-th">
|
|
|
+ {{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-tr">
|
|
|
+ <view class="content-td">培训费用：</view>
|
|
|
+ <view class="content-th">
|
|
|
+ {{ product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ <view
|
|
|
+ class="tui-right-flex tui-popup-btn"
|
|
|
+ :style="{ paddingBottom: isIphoneX ? '68rpx' : '.34rpx' }"
|
|
|
+ >
|
|
|
+ <view class="tui-flex-1"><view class="tui-button" @click="hidePopup(1)">收起</view></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="menu" v-if="isShowButton">
|
|
|
+ <view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
+ <view class="bottom-le">
|
|
|
+ <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
|
|
|
+ <image src="../../static/icon-home-active@3x.png"></image>
|
|
|
+ <text>首页</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-bt" @click="handleCollection">
|
|
|
+ <image
|
|
|
+ :src="
|
|
|
+ collectionType
|
|
|
+ ? StaticUrl + 'icon/icon-collection@2x.png'
|
|
|
+ : StaticUrl + 'icon/icon-collection-none@2x.png'
|
|
|
+ "
|
|
|
+ ></image>
|
|
|
+ <text>{{ collectionType ? '已收藏' : '收藏' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-bt" @click="buyProductCart()">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
|
|
|
+ <text>购物车</text>
|
|
|
+ <text
|
|
|
+ v-if="hasLogin && bottomCartNumber > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
+ :class="[bottomCartNumber < 10 ? 'goleft' : '']"
|
|
|
+ >
|
|
|
+ {{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
|
|
|
+ </text>
|
|
|
+ <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-ri">
|
|
|
+ <button
|
|
|
+ :disabled="goodsData.disabled"
|
|
|
+ class="btn btn-cart"
|
|
|
+ :class="[goodsData.disabled ? 'disabled' : '']"
|
|
|
+ @tap.stop="btnGetConfirm('add')"
|
|
|
+ >
|
|
|
+ 加入购物车
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ :disabled="goodsData.disabled"
|
|
|
+ class="btn btn-bay"
|
|
|
+ :class="[goodsData.disabled ? 'disabled' : '']"
|
|
|
+ @tap.stop="btnGetConfirm('buy')"
|
|
|
+ >
|
|
|
+ 立即购买
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 商品参数 -->
|
|
|
+ <cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product"></cm-prams-popup>
|
|
|
+ <!-- 选择规格弹窗 -->
|
|
|
+ <cm-unit-popup
|
|
|
+ v-if="popupShow3"
|
|
|
+ :popupShow="popupShow3"
|
|
|
+ :skuProduct="skuProduct"
|
|
|
+ :productCoupon="productCoupon"
|
|
|
+ :type="unitPopupType"
|
|
|
+ :btnType="btnType"
|
|
|
+ :goodsData="goodsData"
|
|
|
+ @buyConfirm="handleBuyConfirm"
|
|
|
+ @skuClick="handleSkuClick"
|
|
|
+ ></cm-unit-popup>
|
|
|
+ <!-- 弹窗提示 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="handleClick"
|
|
|
+ @cancel="hideMobel"
|
|
|
+ :content="contentModalText"
|
|
|
+ :button="modalButton"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ ></tui-modal>
|
|
|
+ <!-- 商品详情可见度弹窗提醒 -->
|
|
|
+ <cm-product-modal
|
|
|
+ v-if="showModal"
|
|
|
+ :showModal="showModal"
|
|
|
+ :commodityDetailsFlag="product.commodityDetailsFlag"
|
|
|
+ :isShareType="isShareType"
|
|
|
+ :userIdentity="userIdentity"
|
|
|
+ :firstClubType="firstClubType"
|
|
|
+ />
|
|
|
+ <!-- ross弹窗 -->
|
|
|
+ <cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml"></cmRossPopup>
|
|
|
+
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
+ <cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>
|
|
|
+
|
|
|
+ <!-- 协销名片 -->
|
|
|
+ <cm-seller-modal :suid="suid"></cm-seller-modal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import customP from './components/cm-header.vue' //自定义导航
|
|
|
+import cmPrice from './components/cm-price.vue' //价格显示
|
|
|
+import cmAttributes from './components/cm-attributes.vue' //规格信息
|
|
|
+import cmRecommend from './components/recommend' //相关推荐
|
|
|
+import cmParameter from './components/cm-parameter' //相关参数
|
|
|
+import cmService from './components/cm-service' //服务项目
|
|
|
+import cmProductDoc from './components/cm-product-doc.vue'
|
|
|
+import cmProductModal from './components/cm-product-modal.vue'
|
|
|
+import cmPramsPopup from './components/cm-prams-popup.vue'
|
|
|
+import cmUnitPopup from './components/cm-unit-popup.vue'
|
|
|
+import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
|
|
|
+import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
|
|
|
+import cmReturnInstructions from './components/cm-return-instructions.vue'
|
|
|
+import authorize from '@/common/config/authorize.js'
|
|
|
+import wxLogin from '@/common/config/wxLogin.js'
|
|
|
+import { debounce } from '@/common/config/common.js'
|
|
|
+import payMixins from '@/mixins/payMixins.js'
|
|
|
+import proMixins from './mixins/proMixins.js'
|
|
|
+import cmSrsMixins from '@/utils/cmSrsMixins.js'
|
|
|
+import thorui from '@/components/clipboard/clipboard.thorui.js'
|
|
|
+import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
|
|
|
+import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
|
|
|
+import { queryParse } from './mixins/share.helper.js'
|
|
|
+var isPreviewImg
|
|
|
+export default {
|
|
|
+ mixins: [payMixins, proMixins, cmSrsMixins],
|
|
|
+ components: {
|
|
|
+ customP,
|
|
|
+ cmRecommend,
|
|
|
+ cmPrice,
|
|
|
+ cmAttributes,
|
|
|
+ cmParameter,
|
|
|
+ cmService,
|
|
|
+ couponTabs,
|
|
|
+ cmProductDoc,
|
|
|
+ cmPramsPopup,
|
|
|
+ cmUnitPopup,
|
|
|
+ cmProductModal,
|
|
|
+ cmRossPopup,
|
|
|
+ cmReturnInstructions,
|
|
|
+ cmSharePopup,
|
|
|
+ cmSellerModal
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl: this.$Static, //静态图片路径
|
|
|
+ clickPath: '/pages/search/search',
|
|
|
+ html: '',
|
|
|
+ productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
+ mode: 'round',
|
|
|
+ iconClass: 'icon-aixin',
|
|
|
+ iconColor: '#ff9100',
|
|
|
+ specClass: '', // 规格弹窗css类，控制开关动画
|
|
|
+ isBtnType: '',
|
|
|
+ isRequest: false,
|
|
|
+ isScrollTop: false,
|
|
|
+ current: 0,
|
|
|
+ isShareType: '',
|
|
|
+ isHeaderPoduct: false,
|
|
|
+ isNavbarFiexd: false,
|
|
|
+ navbarFiexd: 'none',
|
|
|
+ ladderPriceFlag: '',
|
|
|
+ ladderPriceList: '',
|
|
|
+ isInvalid: false,
|
|
|
+ isEvaluate: false,
|
|
|
+ isAnimation: false,
|
|
|
+ skeletonShow: true,
|
|
|
+ isStock: false,
|
|
|
+ disabled: false,
|
|
|
+ isNoneDisabled: false,
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ userId: 0,
|
|
|
+ shopId: 0,
|
|
|
+ shopID: 0,
|
|
|
+ typeId: 0,
|
|
|
+ vipFlag: 0,
|
|
|
+ firstClubType: 0,
|
|
|
+ productId: 0,
|
|
|
+ skusCount: 0, // 规格种类
|
|
|
+ userIdentity: 0, // 用户类型
|
|
|
+ goodsData: {}, // 自定义数据
|
|
|
+ shop: {}, //供应商信息
|
|
|
+ product: {}, //采美
|
|
|
+ productImage: [],
|
|
|
+ retailPrice: 0,
|
|
|
+ stock: 0,
|
|
|
+ number: 0,
|
|
|
+ minBuyNumber: 0,
|
|
|
+ productsList: [],
|
|
|
+ goodListData: [],
|
|
|
+ productCoupon: [], // 优惠券
|
|
|
+ productCouponList: [], // 优惠券弹窗列表
|
|
|
+ headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
|
|
|
+ systeminfo: this.setSysteminfo(), // 获取设备信息
|
|
|
+ windowHeight: '',
|
|
|
+ headerColor: false,
|
|
|
+ backPage: 1,
|
|
|
+ nvabarData: {
|
|
|
+ // 顶部自定义导航
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
|
|
|
+ title: '' // 导航栏 中间的标题
|
|
|
+ },
|
|
|
+ linkPath: '',
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ popupShow0: false, // 参数弹窗
|
|
|
+ popupShow1: false, // 培训方案
|
|
|
+ popupShow2: false, // 优惠券
|
|
|
+ popupShow3: false, // 购买弹窗
|
|
|
+ tabSelectFlag: false,
|
|
|
+ sectionPropsArr: [],
|
|
|
+ scrollTopArray: [],
|
|
|
+ winHeight: '',
|
|
|
+ isShowButton: true,
|
|
|
+ isCouponEmpty: false,
|
|
|
+ currentTab: 0,
|
|
|
+ couponParam: {
|
|
|
+ // 获取弹窗优惠券领取参数
|
|
|
+ userId: 0,
|
|
|
+ productId: 0,
|
|
|
+ status: 1,
|
|
|
+ source: 2
|
|
|
+ },
|
|
|
+ bottomCartNumber: 0,
|
|
|
+ navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
|
|
|
+ isPreviewImage: false,
|
|
|
+ opentype: '',
|
|
|
+ collectionType: false,
|
|
|
+ isShowSupportingList: false,
|
|
|
+ supportingList: [],
|
|
|
+ supportingNum: 0, // 组合商品总数
|
|
|
+ contentModalText: '', //操作文字提示语句
|
|
|
+ modal: false,
|
|
|
+ modalButton: [
|
|
|
+ {
|
|
|
+ text: '取消',
|
|
|
+ type: 'gray',
|
|
|
+ plain: true //是否空心
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '去升级',
|
|
|
+ customStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
|
|
|
+ },
|
|
|
+ plain: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ showModal: false,
|
|
|
+ isShowCaimeiShop: false,
|
|
|
+ unitPopupType: 0, // 选择类型 1 点击加入购物车 立即购买 2：点击规格选择
|
|
|
+ returnGoodsStutas: false,
|
|
|
+ helpContent: '',
|
|
|
+ posterData: {}, // 商品详情
|
|
|
+ suid: 0, // 协销id
|
|
|
+ scene: {}, //获取二维码参数
|
|
|
+ options: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ TypeFormat(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 0:
|
|
|
+ return '活动券'
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ return '品类券'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ return '用户专享券'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ return '店铺券'
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ return '新用户券'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isNavbarFiexd(val) {
|
|
|
+ if (!this.isRequest || !val) return
|
|
|
+ let timer = null
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ if (this.sectionPropsArr.length > 0) return
|
|
|
+ this.getSectionProps()
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ if (option.scene) {
|
|
|
+ // 识别小程序二维码
|
|
|
+ this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
|
|
|
+ }
|
|
|
+ this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId =
|
|
|
+ option.id || this.scene.id //获取商品ID
|
|
|
+ if (option.typeId) {
|
|
|
+ this.typeId = option.typeId
|
|
|
+ }
|
|
|
+ this.opentype = option.open
|
|
|
+ this.isShareType = option.type
|
|
|
+ this.linkPath = option.path
|
|
|
+ this.isHeaderPoduct = true
|
|
|
+ if (option.page == 2) {
|
|
|
+ this.backPage = option.page
|
|
|
+ }
|
|
|
+ this.options = option.scene ? this.scene : option
|
|
|
+ this.getWinHeight()
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ if (this.opentype == 'caimei') {
|
|
|
+ // 跳转到资料详情
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isNavbarFiexd = true
|
|
|
+ this.tabClick(3)
|
|
|
+ uni.hideLoading()
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ console.log('是iPhoneX', this.isIphoneX)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initGetStotage() {
|
|
|
+ // 初始化
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
+ this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
+ this.shopID = userInfo.shopId ? userInfo.shopId : 0
|
|
|
+ this.firstClubType = this.clubType
|
|
|
+ if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
|
|
|
+ this.isShowButton = true
|
|
|
+ } else {
|
|
|
+ this.isShowButton = false
|
|
|
+ }
|
|
|
+ if (isPreviewImg) {
|
|
|
+ isPreviewImg = false
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.initData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ // 初始化商品详情查询
|
|
|
+ this.ProductService.QueryProductDetils({
|
|
|
+ userId: this.userId,
|
|
|
+ productId: this.productId,
|
|
|
+ identity: this.identity,
|
|
|
+ typeId: this.typeId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ let productLabel = ''
|
|
|
+ this.productImage = []
|
|
|
+ this.shop = response.data.shop
|
|
|
+ this.shopId = response.data.shopId
|
|
|
+ const dataStr = JSON.stringify(response.data)
|
|
|
+ this.product = JSON.parse(dataStr)
|
|
|
+ this.skuProduct = JSON.parse(dataStr)
|
|
|
+ this.skusCount = this.product.skus.length
|
|
|
+ this.addParams.skuId = this.product.skuId
|
|
|
+ if (this.product.tinyTypeName) {
|
|
|
+ productLabel = this.product.tinyTypeName
|
|
|
+ } else if (!this.product.tinyTypeName && this.product.smallTypeName) {
|
|
|
+ productLabel = this.product.smallTypeName
|
|
|
+ } else {
|
|
|
+ productLabel = this.product.bigTypeName
|
|
|
+ }
|
|
|
+ //设置统计数据标签
|
|
|
+ if (this.product.relatedLabels) {
|
|
|
+ uni.setStorageSync('productLabel', this.product.relatedLabels)
|
|
|
+ } else {
|
|
|
+ uni.setStorageSync(
|
|
|
+ 'productLabel',
|
|
|
+ `${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
|
|
|
+ )
|
|
|
+ }
|
|
|
+ //校验是否为ross
|
|
|
+ this.checkedIsRossSet()
|
|
|
+ //判断是否可以跳转供应商主页
|
|
|
+ if (this.product.shopType === 2) {
|
|
|
+ this.isShowCaimeiShop = true
|
|
|
+ }
|
|
|
+ // 判断是否显示已收藏
|
|
|
+ if (this.product.userLike && this.product.userLike == 1) {
|
|
|
+ this.collectionType = true
|
|
|
+ } else {
|
|
|
+ this.collectionType = false
|
|
|
+ }
|
|
|
+ //已删除/已冻结
|
|
|
+ if (this.product.validFlag === 0 || this.product.validFlag == 10) {
|
|
|
+ this.isInvalid = true
|
|
|
+ } else if (this.product.validFlag === 9) {
|
|
|
+ if (this.userIdentity == 1) {
|
|
|
+ this.isInvalid = false
|
|
|
+ } else {
|
|
|
+ this.isInvalid = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.ladderPriceFlag = this.product.ladderPriceFlag
|
|
|
+ this.html = this.adaptRichTextImg(this.product)
|
|
|
+ this.stock = this.product.stock
|
|
|
+ this.number = this.product.minBuyNumber
|
|
|
+ this.minBuyNumber = this.product.minBuyNumber
|
|
|
+
|
|
|
+ //处理商品图片列表
|
|
|
+ this.product.imageList.forEach(item => {
|
|
|
+ this.productImage.push(item.image)
|
|
|
+ })
|
|
|
+ //处理阶梯价格
|
|
|
+ if (this.product.ladderPriceList != null) {
|
|
|
+ this.ladderPriceList = this.product.ladderPriceList
|
|
|
+ }
|
|
|
+ //拆分金额并转千分位格式显示
|
|
|
+ if (this.product.price != null) {
|
|
|
+ this.retailPrice = this.product.price.toFixed(2)
|
|
|
+ }
|
|
|
+ //处理下架商品和售罄商品
|
|
|
+ if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
|
|
|
+ this.isNoneDisabled = true
|
|
|
+ this.disabled = true
|
|
|
+ } else {
|
|
|
+ this.disabled = false
|
|
|
+ this.isNoneDisabled = false
|
|
|
+ this.goodsData.disabledText = ''
|
|
|
+ }
|
|
|
+ if (this.product.priceFlag == 1) {
|
|
|
+ this.disabled = true
|
|
|
+ } else if (this.product.priceFlag == 2) {
|
|
|
+ if (this.userIdentity == 4 && this.vipFlag != 1) {
|
|
|
+ this.disabled = true
|
|
|
+ } else {
|
|
|
+ this.disabled = false
|
|
|
+ }
|
|
|
+ } else if (this.product.priceFlag == 3) {
|
|
|
+ if (this.userIdentity == 4) {
|
|
|
+ this.disabled = true
|
|
|
+ } else if (this.userIdentity == 2 && this.firstClubType != 1) {
|
|
|
+ this.disabled = true
|
|
|
+ } else {
|
|
|
+ this.disabled = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.disabled = false
|
|
|
+ }
|
|
|
+ this.goodsData.disabled = this.disabled
|
|
|
+ this.goodsData.isNoneDisabled = this.isNoneDisabled
|
|
|
+ if (this.product.validFlag == 3) {
|
|
|
+ this.goodsData.disabledText = '下架'
|
|
|
+ }
|
|
|
+ if (this.product.validFlag == 10) {
|
|
|
+ this.goodsData.disabledText = '停售'
|
|
|
+ }
|
|
|
+ if (this.product.saleOutFlag === 1) {
|
|
|
+ this.goodsData.disabledText = '售罄'
|
|
|
+ }
|
|
|
+ console.log(this.disabled)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.getSectionProps()
|
|
|
+ // }, 2000)
|
|
|
+ this.handleShowProductType(this.product.commodityDetailsFlag)
|
|
|
+ if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
|
|
|
+ this.ProductCartNumber()
|
|
|
+ }
|
|
|
+ this.queryProductDetilsCoupons()
|
|
|
+ this.getCommodityCombinationList()
|
|
|
+ // 特殊商品退货须知
|
|
|
+ this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
|
|
|
+ this.helpContent = response.data.helpContent
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ this.isRequest = true
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleShowProductType(flag = '') {
|
|
|
+ // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
|
|
|
+ const flagMap = {
|
|
|
+ '2': true,
|
|
|
+ '3': true,
|
|
|
+ '4': true
|
|
|
+ }
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ this.showModal = flagMap[flag]
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.vipFlag === 1) {
|
|
|
+ this.showModal = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (flag === 3 && this.userIdentity === 4) {
|
|
|
+ this.showModal = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (flag === 4 && this.userIdentity === 4) {
|
|
|
+ this.showModal = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
|
|
|
+ this.showModal = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideMobel1() {
|
|
|
+ this.modal1 = false
|
|
|
+ this.$api.navigateBack(1)
|
|
|
+ },
|
|
|
+
|
|
|
+ adaptRichTextImg(product) {
|
|
|
+ // 商品详情
|
|
|
+ let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
|
|
|
+ let html = ''
|
|
|
+ if (product.productDetailChose == 1) {
|
|
|
+ // 同资质机构显示商品详情
|
|
|
+ html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
|
|
|
+ } else {
|
|
|
+ if (this.hasLogin && this.userIdentity != 4) {
|
|
|
+ html = product.productDetail
|
|
|
+ ? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
|
|
|
+ : defaulHtml
|
|
|
+ } else {
|
|
|
+ if (product.productDetail.commonDetailInfo) {
|
|
|
+ html = product.productDetail
|
|
|
+ ? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
|
|
|
+ : defaulHtml
|
|
|
+ } else {
|
|
|
+ html = defaulHtml
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return html
|
|
|
+ },
|
|
|
+ getCommodityCombinationList() {
|
|
|
+ // 初始化商品详情配套商品
|
|
|
+ this.ProductService.getCommodityCombinationList({
|
|
|
+ userId: this.userId,
|
|
|
+ productId: this.productId,
|
|
|
+ source: 2,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ const data = response.data
|
|
|
+ this.supportingList = data.results
|
|
|
+ this.supportingNum = data.totalRecord
|
|
|
+ if (this.supportingList.length > 0) {
|
|
|
+ if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
|
|
|
+ this.isShowSupportingList = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取组合商品列表失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryProductDetilsCoupons() {
|
|
|
+ // 初始化商品详情优惠券信息
|
|
|
+ this.ProductService.QueryProductDetilsCoupons(this.couponParam)
|
|
|
+ .then(response => {
|
|
|
+ this.productCoupon = response.data.list
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取优惠券列表失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryPopupCoupons() {
|
|
|
+ // 获取弹窗优惠券列表
|
|
|
+ this.ProductService.QueryProductDetilsCoupons(this.couponParam)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.navbar[0].num = data.notCouponNum
|
|
|
+ this.navbar[1].num = data.couponNum
|
|
|
+ if (data.couponList && data.couponList.length > 0) {
|
|
|
+ this.productCouponList = data.couponList
|
|
|
+ this.isCouponEmpty = false
|
|
|
+ } else {
|
|
|
+ this.isCouponEmpty = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取优惠券列表失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ProductCartNumber() {
|
|
|
+ // 获取用户购物车储量
|
|
|
+ this.ProductService.ProductCartNumber({ userId: this.userId })
|
|
|
+ .then(response => {
|
|
|
+ this.bottomCartNumber = response.data
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取购物车数量失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ receiveCoupon(coupon) {
|
|
|
+ // 点击优惠券领取按钮,友盟埋点收集领取优惠券
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ this.$uma.trackEvent('Um_Event_productCouponReceive', {
|
|
|
+ Um_Key_PageName: '商品详情',
|
|
|
+ Um_Key_EvenName: '领取优惠券',
|
|
|
+ Um_Key_CouponId: `${coupon.couponId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.ProductService.ReceiveCoupon({
|
|
|
+ userId: this.couponParam.userId,
|
|
|
+ couponId: coupon.couponId,
|
|
|
+ source: 1
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('领取成功', 1500, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.currentTab = 1
|
|
|
+ this.couponParam.status = 2
|
|
|
+ this.queryPopupCoupons()
|
|
|
+ }, 1500)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toDeductCoupon(coupon) {
|
|
|
+ // 点击采美豆抵扣优惠券
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
|
|
|
+ Um_Key_PageName: '领券中心',
|
|
|
+ Um_Key_EvenName: '抵扣优惠券',
|
|
|
+ Um_Key_CouponId: `${coupon.couponId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.hasLogin) {
|
|
|
+ if (this.userIdentity === 1 || this.userIdentity === 3) {
|
|
|
+ this.$util.msg('您的身份暂不支持领取优惠券', 2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.WeChatPayCouponBeans(coupon)
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/login/login')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ WeChatPayCouponBeans(coupon) {
|
|
|
+ // 采美豆抵扣优惠券
|
|
|
+ this.PayService.WeChatPayCouponBeans({
|
|
|
+ source: 1, //领取渠道 1 小程序 2 网站
|
|
|
+ userId: this.couponParam.userId,
|
|
|
+ couponId: coupon.couponId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('抵扣成功', 1500)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.currentTab = 1
|
|
|
+ this.couponParam.status = 2
|
|
|
+ this.queryPopupCoupons()
|
|
|
+ }, 1500)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toPayCoupon(coupon) {
|
|
|
+ // 点击购买优惠券,友盟埋点收集购买优惠券
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ this.$uma.trackEvent('Um_Event_productCouponBuy', {
|
|
|
+ Um_Key_PageName: '商品详情',
|
|
|
+ Um_Key_EvenName: '购买优惠券',
|
|
|
+ Um_Key_CouponId: `${coupon.couponId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.createCouponRecord(coupon)
|
|
|
+ },
|
|
|
+ createCouponRecord(coupon) {
|
|
|
+ // 生成购买优惠券记录Id
|
|
|
+ this.PayService.WeChatCouponRecord({
|
|
|
+ userId: this.userId,
|
|
|
+ couponId: coupon.couponId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.MiniWxPayFor(coupon, response.data.couponRecordId)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ if (error.code == -1) {
|
|
|
+ //个人机构不能购买
|
|
|
+ this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
|
|
|
+ this.modal = true
|
|
|
+ } else if (error.code == -2) {
|
|
|
+ //会员机构不是医美机构不能购买
|
|
|
+ this.$util.msg('该优惠券仅限医美机构购买', 2000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async MiniWxPayFor(coupon, couponRecordId) {
|
|
|
+ const wechatcode = await authorize.getCode('weixin')
|
|
|
+ const params = {
|
|
|
+ userId: this.userId,
|
|
|
+ couponId: coupon.couponId,
|
|
|
+ couponRecordId: couponRecordId,
|
|
|
+ payType: 'XCX',
|
|
|
+ code: wechatcode,
|
|
|
+ source: 1 //支付来源 1 小程序 2 WWW
|
|
|
+ }
|
|
|
+ this.weChatMiniCouponWxPay(
|
|
|
+ params,
|
|
|
+ 'Um_Event_productCouponPay',
|
|
|
+ '商品详情',
|
|
|
+ '线上支付优惠券',
|
|
|
+ coupon.couponId,
|
|
|
+ this.userId
|
|
|
+ )
|
|
|
+ },
|
|
|
+ hideMobel() {
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ //个人机构跳转升级页面
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.$api.navigateTo('/pages/login/apply')
|
|
|
+ }
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ //顶部商品图片切换
|
|
|
+ const index = e.detail.current
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+ previewImg1(url) {
|
|
|
+ let mentuzArray = []
|
|
|
+ mentuzArray.push(url)
|
|
|
+ uni.previewImage({
|
|
|
+ urls: mentuzArray,
|
|
|
+ current: 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ previewImg(index) {
|
|
|
+ //顶部商品图片预览
|
|
|
+ isPreviewImg = true
|
|
|
+ let previewUrls = this.productImage
|
|
|
+ uni.previewImage({
|
|
|
+ current: index, //图片索引
|
|
|
+ urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
+ longPressActions: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //商品详情&&供应商信息tab切换
|
|
|
+ tabClick(index) {
|
|
|
+ // 重新标记
|
|
|
+ this.getSectionProps()
|
|
|
+ this.tabCurrentIndex = index
|
|
|
+ this.tabSelectFlag = true
|
|
|
+ let timer = null
|
|
|
+ clearTimeout(timer)
|
|
|
+ // 点击tab 300ms才执行跳转，避免出错（来回跳动）
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ this.tabClickAction(index)
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ // 跳转执行
|
|
|
+ tabClickAction(index) {
|
|
|
+ const that = this
|
|
|
+ if (index === 3) {
|
|
|
+ return uni.pageScrollTo({
|
|
|
+ duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
+ scrollTop: this.sectionPropsArr[0].scrollTop
|
|
|
+ })
|
|
|
+ }
|
|
|
+ uni.pageScrollTo({
|
|
|
+ duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
+ scrollTop: this.sectionPropsArr[index].scrollTop,
|
|
|
+ success() {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.tabSelectFlag = false
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleContact(e) {
|
|
|
+ //跳转小程序客服
|
|
|
+ console.log(e.detail.path)
|
|
|
+ console.log(e.detail.query)
|
|
|
+ },
|
|
|
+ buyProductCart() {
|
|
|
+ //底部购物车按钮点击
|
|
|
+ if (this.hasLogin) {
|
|
|
+ // 友盟埋点商品详情购物车入口点击事件
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
|
|
|
+ Um_Key_PageName: '去购物车',
|
|
|
+ Um_Key_SourcePage: '商品详情购物车入口'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$api.navigateTo('/pages/goods/cart')
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ btnGetConfirm(type) {
|
|
|
+ //加入购物车&&立即购买点击
|
|
|
+ if (this.hasLogin) {
|
|
|
+ this.btnType = type
|
|
|
+ this.popupShow3 = true
|
|
|
+ this.unitPopupType = 1
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAddProductCart() {
|
|
|
+ //增加购物车成功和toast弹窗提示成功
|
|
|
+ this.ProductService.shoppingAddCart({
|
|
|
+ productId: this.productId,
|
|
|
+ userId: this.userId,
|
|
|
+ productCount: this.number,
|
|
|
+ source: 2
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.specClass = 'hide'
|
|
|
+ this.$util.msg('加入购物车成功', 1500, true, 'success')
|
|
|
+ this.isAnimation = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isAnimation = false
|
|
|
+ }, 2000)
|
|
|
+ this.bottomCartNumber = response.data
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('error', error.msg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHeaderBtnPosi() {
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo() {
|
|
|
+ let systeminfo
|
|
|
+ uni.getSystemInfo({
|
|
|
+ // 获取设备信息
|
|
|
+ success: res => {
|
|
|
+ systeminfo = res
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ },
|
|
|
+ goIndex() {
|
|
|
+ //商城首页
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goSupplier() {
|
|
|
+ //跳供应商资料页
|
|
|
+ if (!this.isShowCaimeiShop) {
|
|
|
+ this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + this.shopId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ discard() {
|
|
|
+ //丢弃
|
|
|
+ },
|
|
|
+ onShare(res) {
|
|
|
+ //分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `${this.product.name}`,
|
|
|
+ path: `pages/goods/product?type=share&id=${this.productId}`,
|
|
|
+ imageUrl: `${this.productImage[0]}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分享海报
|
|
|
+ handleShare() {
|
|
|
+ this.posterData = {
|
|
|
+ productName: this.product.name,
|
|
|
+ productImage: this.productImage[0],
|
|
|
+ suid: this.suid,
|
|
|
+ path: 'pages/goods/product',
|
|
|
+ id: this.productId
|
|
|
+ }
|
|
|
+ this.$refs.sharePopup.open()
|
|
|
+ },
|
|
|
+ handleCollection() {
|
|
|
+ // 收藏
|
|
|
+ if (this.hasLogin) {
|
|
|
+ this.ProductService.getProductUserLike({
|
|
|
+ userId: this.userId,
|
|
|
+ productId: this.product.productId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.collectionType = !this.collectionType
|
|
|
+ this.$util.msg(response.data, 1500, true, 'success')
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/login/login')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showPopup(index) {
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.popupShow0 = true
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.popupShow1 = true
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ if (this.hasLogin) {
|
|
|
+ this.queryPopupCoupons()
|
|
|
+ this.popupShow2 = true
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/login/login')
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.popupShow3 = true
|
|
|
+ this.unitPopupType = 2
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hidePopup(index) {
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.popupShow0 = false
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.popupShow1 = false
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.popupShow2 = false
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.popupShow3 = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ couponChange(e) {
|
|
|
+ this.currentTab = e.index
|
|
|
+ switch (this.currentTab) {
|
|
|
+ case 0:
|
|
|
+ this.couponParam.status = 1
|
|
|
+ this.queryPopupCoupons()
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.couponParam.status = 2
|
|
|
+ this.queryPopupCoupons()
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSupporting() {
|
|
|
+ // 跳转组合商品页面
|
|
|
+ this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
|
|
|
+ },
|
|
|
+ // 获取每个tab对应区域的区间
|
|
|
+ async getSectionProps() {
|
|
|
+ const sectionPropsArr = [],
|
|
|
+ scrollTopArray = [],
|
|
|
+ className = 'product-details'
|
|
|
+
|
|
|
+ // 获取相关节点元素信息
|
|
|
+ const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
|
|
|
+ const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
|
|
|
+ const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
|
|
|
/*
|
|
|
说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
|
|
|
scrollTop = 上一个的scrollTop + 上一个的高度
|
|
|
- */
|
|
|
- productDetail.forEach((item, index) => {
|
|
|
- // 上一个 prdocut-details 的 scrollTop 值
|
|
|
- const prev = sectionPropsArr[index - 1]
|
|
|
- const prevScrollTop = prev ? prev.scrollTop : productMain.height
|
|
|
- // 上一个 prdocut-details 的高度
|
|
|
- const add = productDetail[index - 1]
|
|
|
- // 第一个需要减去tabs的高度
|
|
|
- const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
|
|
|
-
|
|
|
- sectionPropsArr.push({
|
|
|
- className: `${className}-${index}`,
|
|
|
- scrollTop: prevScrollTop + addHeight
|
|
|
- })
|
|
|
- // - topBar.height
|
|
|
- })
|
|
|
- this.sectionPropsArr = sectionPropsArr
|
|
|
- console.log('更新tab影响区域')
|
|
|
- },
|
|
|
- //当滑动时也能同步激活tab
|
|
|
- activeTab: debounce(
|
|
|
- (top, _this) => {
|
|
|
- const { sectionPropsArr } = _this
|
|
|
- if (sectionPropsArr && sectionPropsArr.length > 0) {
|
|
|
- sectionPropsArr.forEach((item, index) => {
|
|
|
- // 当前位置为开始位置， 下个起始位置为结束位置
|
|
|
- const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
|
|
|
- const next = sectionPropsArr[index + 1]
|
|
|
- const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
|
|
|
- if (top >= openInterval && top < closedInterval) {
|
|
|
- _this.tabCurrentIndex = index
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- 100,
|
|
|
- true
|
|
|
- ),
|
|
|
- debounce(fn, delay) {
|
|
|
- let timer = null //借助闭包
|
|
|
- return function() {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer)
|
|
|
- }
|
|
|
- timer = setTimeout(fn, delay) // 简化写法
|
|
|
- }
|
|
|
- },
|
|
|
- clipboard(data) {
|
|
|
- thorui.getClipboardData(data, res => {
|
|
|
- if (res) {
|
|
|
- this.$util.msg('复制成功', 2000, true, 'success')
|
|
|
- } else {
|
|
|
- this.$util.msg('复制失败', 2000, true, 'none')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getWinHeight() {
|
|
|
- this.winHeight = wx.getSystemInfoSync().windowHeight
|
|
|
- },
|
|
|
- changePreViewImageStatus(falg) {
|
|
|
- this.isPreviewImage = falg
|
|
|
- },
|
|
|
- },
|
|
|
- onPageScroll(e) {
|
|
|
- //实时获取到滚动的值
|
|
|
- const { scrollTop } = e
|
|
|
- this.debounce(this.getSectionProps(), 1000)
|
|
|
- if (!this.tabSelectFlag) {
|
|
|
- this.activeTab(scrollTop, this)
|
|
|
- }
|
|
|
- if (e.scrollTop > 60) {
|
|
|
- this.headerColor = true
|
|
|
- this.navbarFiexd = 'fixed'
|
|
|
- this.isNavbarFiexd = true
|
|
|
- this.nvabarData = {
|
|
|
- showCapsule: 1,
|
|
|
- title: '商品详情'
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.headerColor = false
|
|
|
- this.isNavbarFiexd = false
|
|
|
- this.navbarFiexd = 'none'
|
|
|
- this.nvabarData = {
|
|
|
- showCapsule: 1,
|
|
|
- title: ''
|
|
|
- }
|
|
|
- }
|
|
|
- if (e.scrollTop > 700) {
|
|
|
- this.isScrollTop = true
|
|
|
- } else {
|
|
|
- this.isScrollTop = false
|
|
|
- }
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- //分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=4&id=${this.productId}&suid=${
|
|
|
- this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
|
|
|
- }&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
|
|
|
- imageUrl: `${this.productImage[0]}`
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- wxLogin.wxLoginAuthorize()
|
|
|
- // 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
|
|
|
- if (!this.isPreviewImage) {
|
|
|
- this.initGetStotage()
|
|
|
- }
|
|
|
- this.isPreviewImage = false
|
|
|
- const suid = this.options.suid ? this.options.suid : this.scene.suid ? this.scene.suid : uni.getStorageSync('suid') * 1 ? uni.getStorageSync('suid') * 1 : 0 // 协销userId
|
|
|
- const spId = this.options.spId ? this.options.spId : this.scene.spId ? this.scene.spId : uni.getStorageSync('spId') * 1 ? uni.getStorageSync('spId') * 1 : 0 // 协销id
|
|
|
- const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
|
|
|
- if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) { // 分享进入 且 用户非协销 或不是从分享进入有缓存
|
|
|
- if (!uni.getStorageSync('spUserId') || (uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1)) {// 如果未分配或者分配相同
|
|
|
- this.suid = suid
|
|
|
- uni.setStorageSync('suid', suid)
|
|
|
- uni.setStorageSync('spId', spId)
|
|
|
- } else {
|
|
|
- uni.setStorageSync('suid', 0)
|
|
|
- this.suid = 0
|
|
|
- uni.setStorageSync('spId', 0)
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #ffffff;
|
|
|
-}
|
|
|
-.banner-section {
|
|
|
- width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- position: relative;
|
|
|
- .cm-product-tags {
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- top: 0;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
- .cm-product-type {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- text-align: justify;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx;
|
|
|
- border-radius: 0 0 8rpx 8rpx;
|
|
|
- background-color: #33ccbf;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 25rpx;
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
- top: 0;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
- .cm-product-cover {
|
|
|
- width: 120rpx;
|
|
|
- height: 77rpx;
|
|
|
- line-height: 57rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
|
|
|
- background-size: 120rpx;
|
|
|
- float: left;
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- top: 0;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-}
|
|
|
-.banner {
|
|
|
- width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- .product-img {
|
|
|
- width: 750rpx;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .banner-item {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-}
|
|
|
-.swiper__dots-box {
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- bottom: 30rpx;
|
|
|
- right: 0;
|
|
|
-}
|
|
|
-.product-wrap {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- padding: 24rpx 0 0 0;
|
|
|
- background-color: #ffffff;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- .productRemarks {
|
|
|
- height: 48rpx;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .wrap-top {
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 1px solid #f8f8f8;
|
|
|
- &.none {
|
|
|
- .p-title {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .p-title {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .p-title-name {
|
|
|
- width: 602rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- &.indent {
|
|
|
- text-indent: 95rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .mclap-tag {
|
|
|
- display: block;
|
|
|
- width: 84rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
- border-radius: 4rpx 48rpx 4px 4px;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 6rpx;
|
|
|
- }
|
|
|
- .p-title-share {
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- color: #999999;
|
|
|
- font-size: $font-size-24;
|
|
|
- box-sizing: border-box;
|
|
|
- display: block;
|
|
|
- background: transparent;
|
|
|
- border-radius: 0;
|
|
|
- border: 0;
|
|
|
- margin: 0;
|
|
|
- padding: 8rpx 0;
|
|
|
- z-index: 20;
|
|
|
- .icon-fenxiang1 {
|
|
|
- font-size: $font-size-34;
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-share-btn::after {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .wrap-main-text {
|
|
|
- line-height: 56rpx;
|
|
|
- color: #ff2a2a;
|
|
|
- font-size: $font-size-26;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- .wrap-main-none {
|
|
|
- display: block;
|
|
|
- width: 256rpx;
|
|
|
- height: 44rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
- border-radius: 11rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- float: right;
|
|
|
- line-height: 44rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
-
|
|
|
- .p-price-none {
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #666;
|
|
|
- text-decoration: line-through;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- .p-minBuy {
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- float: right;
|
|
|
- padding: 0 18rpx;
|
|
|
- border-radius: 22rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- color: #7f7f7f;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- .min-text {
|
|
|
- margin: 0 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .p-login {
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- color: $color-system;
|
|
|
- font-size: $font-size-24;
|
|
|
- &.grade {
|
|
|
- .price-left {
|
|
|
- float: left;
|
|
|
- .none {
|
|
|
- display: block;
|
|
|
- font-size: $font-size-20;
|
|
|
- line-height: 48rpx;
|
|
|
- color: #4a4b54;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 5rpx;
|
|
|
- text {
|
|
|
- letter-spacing: 4rpx;
|
|
|
- font-size: $font-size-32;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .p-no {
|
|
|
- float: left;
|
|
|
- margin-right: 5rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .p-login-btn {
|
|
|
- display: block;
|
|
|
- height: 44rpx;
|
|
|
- padding: 0 10rpx 0 20rpx;
|
|
|
- border-radius: 11rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- float: right;
|
|
|
- line-height: 44rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .wrap-label {
|
|
|
- float: left;
|
|
|
- width: 85%;
|
|
|
- box-sizing: border-box;
|
|
|
- .label-a {
|
|
|
- padding: 0 18rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- border-radius: 6rpx;
|
|
|
- background: #ffe6dc;
|
|
|
- margin: 0 20rpx 15rpx 0;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- .wrap-top-price {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- .wrap-main-item {
|
|
|
- width: 100%;
|
|
|
- height: 56rpx;
|
|
|
- .p-price {
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- float: left;
|
|
|
- color: #ff2a2a;
|
|
|
- font-weight: bold;
|
|
|
- &.none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- margin: 0 2rpx;
|
|
|
- }
|
|
|
- .txt.sm {
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- .txt.big {
|
|
|
- font-size: $font-size-34;
|
|
|
- }
|
|
|
- }
|
|
|
- .p-right-price {
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- float: right;
|
|
|
- color: #999999;
|
|
|
- font-size: $font-size-30;
|
|
|
- .none {
|
|
|
- font-size: $font-size-26;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-act {
|
|
|
- height: 56rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- padding: 10rpx 0;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- .floor-item-btn {
|
|
|
- float: right;
|
|
|
- height: 40rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- .btn {
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- color: #ffffff;
|
|
|
- font-size: $font-size-20;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .wrap-info {
|
|
|
- float: left;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx 24rpx 0 24rpx;
|
|
|
- border-bottom: 1px solid #f8f8f8;
|
|
|
- .info-viewT {
|
|
|
- width: 100%;
|
|
|
- min-height: 40rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: left;
|
|
|
- &.none {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .info-viewL {
|
|
|
- min-width: 350rpx;
|
|
|
- float: left;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- .info-viewR {
|
|
|
- min-width: 352rpx;
|
|
|
- float: left;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .info-viewB {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .info-f {
|
|
|
- width: 50%;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- line-height: 40rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.product-seve {
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- line-height: 60rpx;
|
|
|
- .label {
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- color: #fea785;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #fea785;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.product-item-none {
|
|
|
- min-height: 348rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 0;
|
|
|
- .none-image {
|
|
|
- width: 284rpx;
|
|
|
- height: 225rpx;
|
|
|
- }
|
|
|
- .none-text {
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #fea785;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.product-supporting {
|
|
|
- width: 100%;
|
|
|
- height: 274rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 30rpx 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- .product-supporting-title {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- text-align: left;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .product-supporting-list {
|
|
|
- width: 100%;
|
|
|
- height: 154rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 13rpx 0;
|
|
|
- position: relative;
|
|
|
- .icon-xiayibu {
|
|
|
- line-height: 154rpx;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- width: 80rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- color: #b2b2b2;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .list {
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- float: left;
|
|
|
- border: 1px solid #e1e1e1;
|
|
|
- border-radius: 8rpx;
|
|
|
- .list-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.return-instructions {
|
|
|
- padding: 0 24rpx;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
-}
|
|
|
-.product-parameter {
|
|
|
- width: 702rpx;
|
|
|
- height: 90rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- position: relative;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- &.coupon {
|
|
|
- .title {
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- .icon-xiayibu {
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- .coupon {
|
|
|
- float: right;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 29rpx 0;
|
|
|
- padding-right: 35rpx;
|
|
|
- .tags {
|
|
|
- height: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #fff1eb;
|
|
|
- line-height: 28rpx;
|
|
|
- color: #f94b4b;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding: 0 10rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- border: 1px solid #f94b4b;
|
|
|
- float: right;
|
|
|
- margin: 0 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .name {
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- padding-right: 48rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .icon-xiayibu {
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- width: 48rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
-}
|
|
|
-.product-supplier {
|
|
|
- width: 100%;
|
|
|
- height: 174rpx;
|
|
|
- padding: 30rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #ffffff;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- .logo {
|
|
|
- width: 128rpx;
|
|
|
- height: 92rpx;
|
|
|
- float: left;
|
|
|
- border: 1px solid #efefef;
|
|
|
- border-radius: 6rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- border-radius: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- width: 470rpx;
|
|
|
- height: 92rpx;
|
|
|
- float: left;
|
|
|
- margin-left: 20rpx;
|
|
|
- .name {
|
|
|
- width: 100%;
|
|
|
- line-height: 46rpx;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- float: right;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .massgs {
|
|
|
- width: 100%;
|
|
|
- line-height: 46rpx;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- .label {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .p-stars {
|
|
|
- float: left;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- .acount {
|
|
|
- float: right;
|
|
|
- text {
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon-xiayibu {
|
|
|
- line-height: 154rpx;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- width: 48rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
-}
|
|
|
-.product-details {
|
|
|
- width: 100%;
|
|
|
- background: #ffffff;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
- &.recommend {
|
|
|
- background-color: #f7f7f7;
|
|
|
- border-bottom: none;
|
|
|
- .title {
|
|
|
- .title-tab {
|
|
|
- background-color: #f7f7f7;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .product-details-image {
|
|
|
- width: 100%;
|
|
|
- min-height: 856rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- .product-details-table {
|
|
|
- width: 100%;
|
|
|
- min-height: 160rpx;
|
|
|
- border: 1px solid #e1e1e1;
|
|
|
- border-radius: 10rpx;
|
|
|
- .ladder-tr {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- justify-content: center;
|
|
|
- height: 80rpx;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #e1e1e1;
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- .ladder-item-td {
|
|
|
- height: 80rpx;
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx;
|
|
|
- float: left;
|
|
|
- .te-text {
|
|
|
- line-height: 28rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- color: #999999;
|
|
|
- &.last {
|
|
|
- width: 60%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .te-copy {
|
|
|
- width: 40%;
|
|
|
- float: right;
|
|
|
- font-size: $font-size-24;
|
|
|
- padding-top: 10rpx;
|
|
|
- .clipboard {
|
|
|
- width: 84rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: #4688fa;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 18rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- &.th {
|
|
|
- display: flex;
|
|
|
- height: 80rpx;
|
|
|
- align-items: center;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- &:nth-child(1) {
|
|
|
- width: 25%;
|
|
|
- border-right: 1px solid #e1e1e1;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- width: 35%;
|
|
|
- border-right: 1px solid #e1e1e1;
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .qualificationImg-image {
|
|
|
- width: 100%;
|
|
|
- height: 856rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-rich-text-none {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- line-height: 60rpx;
|
|
|
- &.bold {
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .content-none {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- .title-tab {
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- background: #fff;
|
|
|
- z-index: 10;
|
|
|
- font-size: $font-size-30;
|
|
|
- text-align: left;
|
|
|
- color: $text-color;
|
|
|
- line-height: 100rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .title-msg {
|
|
|
- width: 100%;
|
|
|
- height: 236rpx;
|
|
|
- padding: 18rpx;
|
|
|
- background-color: rgba(225, 86, 22, 0.1);
|
|
|
- color: $color-system;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .tit {
|
|
|
- line-height: 46rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- line-height: 38rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-}
|
|
|
-.isLower {
|
|
|
- width: 100%;
|
|
|
- height: 116rpx;
|
|
|
- line-height: 116rpx;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- font-size: $font-size-32;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-.bottom-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background: #ffffff;
|
|
|
- z-index: 99;
|
|
|
- .bottom-le {
|
|
|
- width: 300rpx;
|
|
|
- height: 100rpx;
|
|
|
- padding: 10rpx 20rpx 10rpx 0;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- .item-bt {
|
|
|
- width: 80rpx;
|
|
|
- height: 100%;
|
|
|
- margin-right: 15rpx;
|
|
|
- display: flex;
|
|
|
- float: left;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: $text-color;
|
|
|
- line-height: 34rpx;
|
|
|
- position: relative;
|
|
|
- .animation-num {
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #ff2a2a;
|
|
|
- position: absolute;
|
|
|
- top: -12rpx;
|
|
|
- right: 4rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .animation {
|
|
|
- animation: showAmnation 2.2s ease-in-out both;
|
|
|
- }
|
|
|
- .restion {
|
|
|
- animation: hideAmnation 1s ease-in-out both;
|
|
|
- }
|
|
|
- .icon-num {
|
|
|
- position: absolute;
|
|
|
- right: -12rpx;
|
|
|
- top: -5rpx;
|
|
|
- }
|
|
|
- .icon-num.goleft {
|
|
|
- right: 2rpx;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- }
|
|
|
- button.contact-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- line-height: 34rpx;
|
|
|
- border-radius: 0;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- overflow: hidden;
|
|
|
- color: $text-color;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom-ri {
|
|
|
- width: 450rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 13rpx 20rpx 13rpx 0;
|
|
|
- .btn {
|
|
|
- flex: 1;
|
|
|
- width: 200rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .btn-cart {
|
|
|
- background-color: #ffe6dc;
|
|
|
- color: $color-system;
|
|
|
- border-radius: 42rpx 0 0 42rpx;
|
|
|
- }
|
|
|
- .btn-cart.disabled {
|
|
|
- background-color: #e1e1e1;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .btn-bay {
|
|
|
- background: linear-gradient(to right, #f28f31 0%, #ff5b00 100%);
|
|
|
- border-radius: 0 42rpx 42rpx 0;
|
|
|
- }
|
|
|
- .btn-bay.disabled {
|
|
|
- background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.uni-badge--small {
|
|
|
- -webkit-transform: scale(0.8);
|
|
|
- -ms-transform: scale(0.8);
|
|
|
- transform: scale(0.8);
|
|
|
- -webkit-transform-origin: center center;
|
|
|
- -ms-transform-origin: center center;
|
|
|
- transform-origin: center center;
|
|
|
-}
|
|
|
-.uni-badge {
|
|
|
- font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1;
|
|
|
- display: inline-block;
|
|
|
- padding: 3px 6px;
|
|
|
- color: #333;
|
|
|
- border-radius: 100px;
|
|
|
- background-color: #f1f1f1;
|
|
|
-}
|
|
|
-.uni-badge-error {
|
|
|
- color: #fff;
|
|
|
- background-color: #dd524d;
|
|
|
-}
|
|
|
-.product-topnav {
|
|
|
- width: 100%;
|
|
|
- height: 174rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #ffffff;
|
|
|
- z-index: 990;
|
|
|
- position: fixed;
|
|
|
- opacity: 1;
|
|
|
- left: 0;
|
|
|
- &.fixed {
|
|
|
- animation: showFixedColor 0.1s ease-in-out both;
|
|
|
- }
|
|
|
- &.none {
|
|
|
- animation: hideFixedColor 0.1s ease-in-out both;
|
|
|
- }
|
|
|
- .navbar {
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- display: flex;
|
|
|
- .nav-item {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 60rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .line {
|
|
|
- width: 60rpx;
|
|
|
- height: 2px;
|
|
|
- border-radius: 1px;
|
|
|
- background: #ffffff;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- margin-left: -30rpx;
|
|
|
- }
|
|
|
- &.current {
|
|
|
- color: $color-system;
|
|
|
- .line {
|
|
|
- background: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .search-input {
|
|
|
- width: 100%;
|
|
|
- height: 114rpx;
|
|
|
- padding: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .gosearch-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 66rpx;
|
|
|
- color: #b2b2b2;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 66rpx;
|
|
|
- &.fixed {
|
|
|
- background: rgba(70, 70, 70, 0.1);
|
|
|
- }
|
|
|
- &.none {
|
|
|
- background: rgba(70, 70, 70, 0.1);
|
|
|
- }
|
|
|
- .search-icon {
|
|
|
- width: 66rpx;
|
|
|
- height: 66rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 2rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 66rpx;
|
|
|
- .icon-iconfonticonfontsousuo1 {
|
|
|
- margin: 0 6rpx;
|
|
|
- font-size: $font-size-34;
|
|
|
- color: #b2b2b2;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-text {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 66rpx;
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes showFixedColor {
|
|
|
- 0% {
|
|
|
- background: rgba(255, 255, 255, 0);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes hideFixedColor {
|
|
|
- 0% {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- background: rgba(255, 255, 255, 0);
|
|
|
- }
|
|
|
-}
|
|
|
-/* 加入购物模态层*/
|
|
|
-@keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes showAmnation {
|
|
|
- 0% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- top: -60rpx;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes hideAmnation {
|
|
|
- 0% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-popup-box {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- min-height: 220rpx;
|
|
|
- padding: 40rpx 24rpx 0 24rpx;
|
|
|
- .tui-popup-close {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 24rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- text-align: center;
|
|
|
- color: #b2b2b2;
|
|
|
- .icon-iconfontguanbi {
|
|
|
- font-size: $font-size-40;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: $font-size-34;
|
|
|
- color: $text-color;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .tui-popup-main {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- &.coupon {
|
|
|
- padding-bottom: 40rpx;
|
|
|
- .coupon-empty {
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- position: fixed;
|
|
|
- background: $bg-color;
|
|
|
- .empty-container-image {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- margin-bottom: 0;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .error-text {
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #999999;
|
|
|
- line-height: 88rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-popup-scroll {
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- .coupon-list {
|
|
|
- width: 100%;
|
|
|
- height: 200rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
|
|
|
- background-size: cover;
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- .list-cell-le {
|
|
|
- width: 224rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 37rpx 0;
|
|
|
- float: left;
|
|
|
- .coupon-maxMoney {
|
|
|
- width: 100%;
|
|
|
- height: 78rpx;
|
|
|
- line-height: 78rpx;
|
|
|
- font-size: 56rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- .small {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-minMoney {
|
|
|
- width: 100%;
|
|
|
- height: 33rpx;
|
|
|
- line-height: 33rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-ri {
|
|
|
- width: 478rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 24rpx 0 24rpx;
|
|
|
- float: right;
|
|
|
- .list-cell-top {
|
|
|
- width: 100%;
|
|
|
- height: 121rpx;
|
|
|
- float: left;
|
|
|
- border-bottom: 1px solid #e1e1e1;
|
|
|
- .list-cell-type {
|
|
|
- width: 286rpx;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- .list-cell-tags {
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- margin-bottom: 7rpx;
|
|
|
- .tags {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 10rpx;
|
|
|
- height: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- background-color: #ffdcce;
|
|
|
- color: #f94b4b;
|
|
|
- font-size: $font-size-20;
|
|
|
- border-radius: 8rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-texts {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- line-height: 35rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-btn {
|
|
|
- width: 128rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- .icon-used {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-top: 28rpx;
|
|
|
- .icon-used-text {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- line-height: 26rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- .icon-used-btn {
|
|
|
- width: 128rpx;
|
|
|
- height: 48rpx;
|
|
|
- border-radius: 28rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- text-align: center;
|
|
|
- &.receive {
|
|
|
- background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- &.make {
|
|
|
- border: solid 1px #f94b4b;
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-time {
|
|
|
- width: 100%;
|
|
|
- height: 58rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: $font-size-20;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.train {
|
|
|
- height: 240rpx;
|
|
|
- }
|
|
|
- .content-tr {
|
|
|
- width: 100%;
|
|
|
- min-height: 58rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- display: flex;
|
|
|
- .content-td {
|
|
|
- display: flex;
|
|
|
- flex: 3;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .content-th {
|
|
|
- display: flex;
|
|
|
- flex: 7;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-shopping-main {
|
|
|
- width: 100%;
|
|
|
- .layer-smimg {
|
|
|
- width: 114rpx;
|
|
|
- height: 114rpx;
|
|
|
- float: left;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- image {
|
|
|
- width: 114rpx;
|
|
|
- height: 114rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .layer-nunbox {
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 536rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- .layer-nunbox-t {
|
|
|
- width: 100%;
|
|
|
- height: 44rpx;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- .text {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 48rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .layer-nunbox-text {
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- .number-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 2rpx solid #ffe6dc;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-24;
|
|
|
- padding: 0 18rpx;
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- background: #fef6f3;
|
|
|
- &.icon-jianhao {
|
|
|
- border-radius: 30rpx 0 0 30rpx;
|
|
|
- }
|
|
|
- &.icon-jiahao {
|
|
|
- border-radius: 0 30rpx 30rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-input {
|
|
|
- width: 62rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-step {
|
|
|
- position: absolute;
|
|
|
- left: 45rpx;
|
|
|
- bottom: 0;
|
|
|
- height: 44rpx;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .layer-nunbox-b {
|
|
|
- width: 100%;
|
|
|
- height: 44rpx;
|
|
|
- margin-top: 13rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- .p {
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- .p:first-child {
|
|
|
- margin-left: 30rpx;
|
|
|
- }
|
|
|
- .p.sm {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-popup-btn {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- .tui-button {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-/*富文本样式*/
|
|
|
-rich-text.p {
|
|
|
- width: 702rpx !important;
|
|
|
- padding: 0 24rpx;
|
|
|
- text-align: justify;
|
|
|
-}
|
|
|
-rich-text.img {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
+ */
|
|
|
+ productDetail.forEach((item, index) => {
|
|
|
+ // 上一个 prdocut-details 的 scrollTop 值
|
|
|
+ const prev = sectionPropsArr[index - 1]
|
|
|
+ const prevScrollTop = prev ? prev.scrollTop : productMain.height
|
|
|
+ // 上一个 prdocut-details 的高度
|
|
|
+ const add = productDetail[index - 1]
|
|
|
+ // 第一个需要减去tabs的高度
|
|
|
+ const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
|
|
|
+
|
|
|
+ sectionPropsArr.push({
|
|
|
+ className: `${className}-${index}`,
|
|
|
+ scrollTop: prevScrollTop + addHeight
|
|
|
+ })
|
|
|
+ // - topBar.height
|
|
|
+ })
|
|
|
+ this.sectionPropsArr = sectionPropsArr
|
|
|
+ console.log('更新tab影响区域')
|
|
|
+ },
|
|
|
+ //当滑动时也能同步激活tab
|
|
|
+ activeTab: debounce(
|
|
|
+ (top, _this) => {
|
|
|
+ const { sectionPropsArr } = _this
|
|
|
+ if (sectionPropsArr && sectionPropsArr.length > 0) {
|
|
|
+ sectionPropsArr.forEach((item, index) => {
|
|
|
+ // 当前位置为开始位置， 下个起始位置为结束位置
|
|
|
+ const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
|
|
|
+ const next = sectionPropsArr[index + 1]
|
|
|
+ const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
|
|
|
+ if (top >= openInterval && top < closedInterval) {
|
|
|
+ _this.tabCurrentIndex = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 100,
|
|
|
+ true
|
|
|
+ ),
|
|
|
+ debounce(fn, delay) {
|
|
|
+ let timer = null //借助闭包
|
|
|
+ return function() {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ }
|
|
|
+ timer = setTimeout(fn, delay) // 简化写法
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clipboard(data) {
|
|
|
+ thorui.getClipboardData(data, res => {
|
|
|
+ if (res) {
|
|
|
+ this.$util.msg('复制成功', 2000, true, 'success')
|
|
|
+ } else {
|
|
|
+ this.$util.msg('复制失败', 2000, true, 'none')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getWinHeight() {
|
|
|
+ this.winHeight = wx.getSystemInfoSync().windowHeight
|
|
|
+ },
|
|
|
+ changePreViewImageStatus(falg) {
|
|
|
+ this.isPreviewImage = falg
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ const { scrollTop } = e
|
|
|
+ this.debounce(this.getSectionProps(), 1000)
|
|
|
+ if (!this.tabSelectFlag) {
|
|
|
+ this.activeTab(scrollTop, this)
|
|
|
+ }
|
|
|
+ if (e.scrollTop > 60) {
|
|
|
+ this.headerColor = true
|
|
|
+ this.navbarFiexd = 'fixed'
|
|
|
+ this.isNavbarFiexd = true
|
|
|
+ this.nvabarData = {
|
|
|
+ showCapsule: 1,
|
|
|
+ title: '商品详情'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.headerColor = false
|
|
|
+ this.isNavbarFiexd = false
|
|
|
+ this.navbarFiexd = 'none'
|
|
|
+ this.nvabarData = {
|
|
|
+ showCapsule: 1,
|
|
|
+ title: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (e.scrollTop > 700) {
|
|
|
+ this.isScrollTop = true
|
|
|
+ } else {
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ //分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `${this.product.name}`,
|
|
|
+ path: `pages/goods/product?type=4&id=${this.productId}&suid=${
|
|
|
+ this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
|
|
|
+ }&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
|
|
|
+ imageUrl: `${this.productImage[0]}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ // 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
|
|
|
+ if (!this.isPreviewImage) {
|
|
|
+ this.initGetStotage()
|
|
|
+ }
|
|
|
+ this.isPreviewImage = false
|
|
|
+ const suid = this.options.suid
|
|
|
+ ? this.options.suid
|
|
|
+ : this.scene.suid
|
|
|
+ ? this.scene.suid
|
|
|
+ : uni.getStorageSync('suid') * 1
|
|
|
+ ? uni.getStorageSync('suid') * 1
|
|
|
+ : 0 // 协销userId
|
|
|
+ const spId = this.options.spId
|
|
|
+ ? this.options.spId
|
|
|
+ : this.scene.spId
|
|
|
+ ? this.scene.spId
|
|
|
+ : uni.getStorageSync('spId') * 1
|
|
|
+ ? uni.getStorageSync('spId') * 1
|
|
|
+ : 0 // 协销id
|
|
|
+ const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
|
|
|
+ if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) { // 分享进入 且 用户非协销 或不是从分享进入有缓存
|
|
|
+ if (
|
|
|
+ !uni.getStorageSync('spUserId') || // 未绑定
|
|
|
+ uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1 // 绑定未更换
|
|
|
+ ) {
|
|
|
+ this.suid = suid
|
|
|
+ uni.setStorageSync('suid', suid)
|
|
|
+ uni.setStorageSync('spId', spId)
|
|
|
+ } else {
|
|
|
+ uni.setStorageSync('suid', 0)
|
|
|
+ this.suid = 0
|
|
|
+ uni.setStorageSync('spId', 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.banner-section {
|
|
|
+ width: 100%;
|
|
|
+ height: 750rpx;
|
|
|
+ position: relative;
|
|
|
+ .cm-product-tags {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .cm-product-type {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ text-align: justify;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 0 0 8rpx 8rpx;
|
|
|
+ background-color: #33ccbf;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 30rpx;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .cm-product-cover {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 77rpx;
|
|
|
+ line-height: 57rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
|
|
|
+ background-size: 120rpx;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+}
|
|
|
+.banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 750rpx;
|
|
|
+ .product-img {
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .banner-item {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper__dots-box {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 30rpx;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.product-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 24rpx 0 0 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .productRemarks {
|
|
|
+ height: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .wrap-top {
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+ &.none {
|
|
|
+ .p-title {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p-title {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .p-title-name {
|
|
|
+ width: 602rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ &.indent {
|
|
|
+ text-indent: 95rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mclap-tag {
|
|
|
+ display: block;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
+ border-radius: 4rpx 48rpx 4px 4px;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 6rpx;
|
|
|
+ }
|
|
|
+ .p-title-share {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: block;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 0;
|
|
|
+ border: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 8rpx 0;
|
|
|
+ z-index: 20;
|
|
|
+ .icon-fenxiang1 {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-share-btn::after {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-main-text {
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .wrap-main-none {
|
|
|
+ display: block;
|
|
|
+ width: 256rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ border-radius: 11rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ float: right;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-price-none {
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ .p-minBuy {
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ float: right;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ .min-text {
|
|
|
+ margin: 0 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p-login {
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: $color-system;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ &.grade {
|
|
|
+ .price-left {
|
|
|
+ float: left;
|
|
|
+ .none {
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #4a4b54;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ text {
|
|
|
+ letter-spacing: 4rpx;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p-no {
|
|
|
+ float: left;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .p-login-btn {
|
|
|
+ display: block;
|
|
|
+ height: 44rpx;
|
|
|
+ padding: 0 10rpx 0 20rpx;
|
|
|
+ border-radius: 11rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ float: right;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-label {
|
|
|
+ float: left;
|
|
|
+ width: 85%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .label-a {
|
|
|
+ padding: 0 18rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: #ffe6dc;
|
|
|
+ margin: 0 20rpx 15rpx 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-top-price {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .wrap-main-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ .p-price {
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ float: left;
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-weight: bold;
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ margin: 0 2rpx;
|
|
|
+ }
|
|
|
+ .txt.sm {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .txt.big {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p-right-price {
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ float: right;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ .none {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floor-item-act {
|
|
|
+ height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .floor-item-btn {
|
|
|
+ float: right;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .btn {
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-info {
|
|
|
+ float: left;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+ .info-viewT {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.none {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .info-viewL {
|
|
|
+ min-width: 350rpx;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .info-viewR {
|
|
|
+ min-width: 352rpx;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-viewB {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .info-f {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-seve {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ line-height: 60rpx;
|
|
|
+ .label {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ color: #fea785;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #fea785;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-item-none {
|
|
|
+ min-height: 348rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx 0;
|
|
|
+ .none-image {
|
|
|
+ width: 284rpx;
|
|
|
+ height: 225rpx;
|
|
|
+ }
|
|
|
+ .none-text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #fea785;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-supporting {
|
|
|
+ width: 100%;
|
|
|
+ height: 274rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .product-supporting-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .product-supporting-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 154rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 13rpx 0;
|
|
|
+ position: relative;
|
|
|
+ .icon-xiayibu {
|
|
|
+ line-height: 154rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 80rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #e1e1e1;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ .list-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.return-instructions {
|
|
|
+ padding: 0 24rpx;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+}
|
|
|
+.product-parameter {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ &.coupon {
|
|
|
+ .title {
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .icon-xiayibu {
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .coupon {
|
|
|
+ float: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 29rpx 0;
|
|
|
+ padding-right: 35rpx;
|
|
|
+ .tags {
|
|
|
+ height: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #fff1eb;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border: 1px solid #f94b4b;
|
|
|
+ float: right;
|
|
|
+ margin: 0 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ padding-right: 48rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .icon-xiayibu {
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 48rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-supplier {
|
|
|
+ width: 100%;
|
|
|
+ height: 174rpx;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .logo {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #efefef;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 470rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ float: right;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .massgs {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ .label {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .p-stars {
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .acount {
|
|
|
+ float: right;
|
|
|
+ text {
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-xiayibu {
|
|
|
+ line-height: 154rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 48rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-details {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ &.recommend {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-bottom: none;
|
|
|
+ .title {
|
|
|
+ .title-tab {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-details-image {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 856rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .product-details-table {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 160rpx;
|
|
|
+ border: 1px solid #e1e1e1;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ .ladder-tr {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ height: 80rpx;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .ladder-item-td {
|
|
|
+ height: 80rpx;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx;
|
|
|
+ float: left;
|
|
|
+ .te-text {
|
|
|
+ line-height: 28rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #999999;
|
|
|
+ &.last {
|
|
|
+ width: 60%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .te-copy {
|
|
|
+ width: 40%;
|
|
|
+ float: right;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .clipboard {
|
|
|
+ width: 84rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #4688fa;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.th {
|
|
|
+ display: flex;
|
|
|
+ height: 80rpx;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 25%;
|
|
|
+ border-right: 1px solid #e1e1e1;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 35%;
|
|
|
+ border-right: 1px solid #e1e1e1;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qualificationImg-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 856rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-rich-text-none {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 60rpx;
|
|
|
+ &.bold {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-none {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title-tab {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 10;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ text-align: left;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .title-msg {
|
|
|
+ width: 100%;
|
|
|
+ height: 236rpx;
|
|
|
+ padding: 18rpx;
|
|
|
+ background-color: rgba(225, 86, 22, 0.1);
|
|
|
+ color: $color-system;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .tit {
|
|
|
+ line-height: 46rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ line-height: 38rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.isLower {
|
|
|
+ width: 100%;
|
|
|
+ height: 116rpx;
|
|
|
+ line-height: 116rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.bottom-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 99;
|
|
|
+ .bottom-le {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 10rpx 20rpx 10rpx 0;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .item-bt {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ float: left;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 34rpx;
|
|
|
+ position: relative;
|
|
|
+ .animation-num {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #ff2a2a;
|
|
|
+ position: absolute;
|
|
|
+ top: -12rpx;
|
|
|
+ right: 4rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .animation {
|
|
|
+ animation: showAmnation 2.2s ease-in-out both;
|
|
|
+ }
|
|
|
+ .restion {
|
|
|
+ animation: hideAmnation 1s ease-in-out both;
|
|
|
+ }
|
|
|
+ .icon-num {
|
|
|
+ position: absolute;
|
|
|
+ right: -12rpx;
|
|
|
+ top: -5rpx;
|
|
|
+ }
|
|
|
+ .icon-num.goleft {
|
|
|
+ right: 2rpx;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ button.contact-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ line-height: 34rpx;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ color: $text-color;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-ri {
|
|
|
+ width: 450rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 13rpx 20rpx 13rpx 0;
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ width: 200rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .btn-cart {
|
|
|
+ background-color: #ffe6dc;
|
|
|
+ color: $color-system;
|
|
|
+ border-radius: 42rpx 0 0 42rpx;
|
|
|
+ }
|
|
|
+ .btn-cart.disabled {
|
|
|
+ background-color: #e1e1e1;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .btn-bay {
|
|
|
+ background: linear-gradient(to right, #f28f31 0%, #ff5b00 100%);
|
|
|
+ border-radius: 0 42rpx 42rpx 0;
|
|
|
+ }
|
|
|
+ .btn-bay.disabled {
|
|
|
+ background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.uni-badge--small {
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
+ -ms-transform: scale(0.8);
|
|
|
+ transform: scale(0.8);
|
|
|
+ -webkit-transform-origin: center center;
|
|
|
+ -ms-transform-origin: center center;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+.uni-badge {
|
|
|
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 6px;
|
|
|
+ color: #333;
|
|
|
+ border-radius: 100px;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+.uni-badge-error {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #dd524d;
|
|
|
+}
|
|
|
+.product-topnav {
|
|
|
+ width: 100%;
|
|
|
+ height: 174rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 990;
|
|
|
+ position: fixed;
|
|
|
+ opacity: 1;
|
|
|
+ left: 0;
|
|
|
+ &.fixed {
|
|
|
+ animation: showFixedColor 0.1s ease-in-out both;
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ animation: hideFixedColor 0.1s ease-in-out both;
|
|
|
+ }
|
|
|
+ .navbar {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ display: flex;
|
|
|
+ .nav-item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .line {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -30rpx;
|
|
|
+ }
|
|
|
+ &.current {
|
|
|
+ color: $color-system;
|
|
|
+ .line {
|
|
|
+ background: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 114rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .gosearch-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 66rpx;
|
|
|
+ &.fixed {
|
|
|
+ background: rgba(70, 70, 70, 0.1);
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ background: rgba(70, 70, 70, 0.1);
|
|
|
+ }
|
|
|
+ .search-icon {
|
|
|
+ width: 66rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 2rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 66rpx;
|
|
|
+ .icon-iconfonticonfontsousuo1 {
|
|
|
+ margin: 0 6rpx;
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: #b2b2b2;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes showFixedColor {
|
|
|
+ 0% {
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideFixedColor {
|
|
|
+ 0% {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 加入购物模态层*/
|
|
|
+@keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes showAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ top: -60rpx;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 220rpx;
|
|
|
+ padding: 40rpx 24rpx 0 24rpx;
|
|
|
+ .tui-popup-close {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 24rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #b2b2b2;
|
|
|
+ .icon-iconfontguanbi {
|
|
|
+ font-size: $font-size-40;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .tui-popup-main {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ &.coupon {
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ .coupon-empty {
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ background: $bg-color;
|
|
|
+ .empty-container-image {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .error-text {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-scroll {
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ .coupon-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .list-cell-le {
|
|
|
+ width: 224rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 37rpx 0;
|
|
|
+ float: left;
|
|
|
+ .coupon-maxMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ line-height: 78rpx;
|
|
|
+ font-size: 56rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ .small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-minMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 33rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-ri {
|
|
|
+ width: 478rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 24rpx 0 24rpx;
|
|
|
+ float: right;
|
|
|
+ .list-cell-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 121rpx;
|
|
|
+ float: left;
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ .list-cell-type {
|
|
|
+ width: 286rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ .list-cell-tags {
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-bottom: 7rpx;
|
|
|
+ .tags {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background-color: #ffdcce;
|
|
|
+ color: #f94b4b;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-texts {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-btn {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ .icon-used {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 28rpx;
|
|
|
+ .icon-used-text {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .icon-used-btn {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-align: center;
|
|
|
+ &.receive {
|
|
|
+ background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &.make {
|
|
|
+ border: solid 1px #f94b4b;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-time {
|
|
|
+ width: 100%;
|
|
|
+ height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.train {
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+ .content-tr {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ display: flex;
|
|
|
+ .content-td {
|
|
|
+ display: flex;
|
|
|
+ flex: 3;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .content-th {
|
|
|
+ display: flex;
|
|
|
+ flex: 7;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-shopping-main {
|
|
|
+ width: 100%;
|
|
|
+ .layer-smimg {
|
|
|
+ width: 114rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ float: left;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ image {
|
|
|
+ width: 114rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .layer-nunbox {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 536rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .layer-nunbox-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .layer-nunbox-text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .number-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #ffe6dc;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #fef6f3;
|
|
|
+ &.icon-jianhao {
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
+ }
|
|
|
+ &.icon-jiahao {
|
|
|
+ border-radius: 0 30rpx 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-input {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-step {
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .layer-nunbox-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ .p {
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ .p:first-child {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .p.sm {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .tui-button {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+/*富文本样式*/
|
|
|
+rich-text.p {
|
|
|
+ width: 702rpx !important;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ text-align: justify;
|
|
|
+}
|
|
|
+rich-text.img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
</style>
|
xiebaomin