|
@@ -14,233 +14,241 @@
|
|
<text class="line"></text>
|
|
<text class="line"></text>
|
|
</view>
|
|
</view>
|
|
<view class="nav-item tui-skeleton-fillet"
|
|
<view class="nav-item tui-skeleton-fillet"
|
|
- :class="{ current: tabCurrentIndex === 2 }"
|
|
|
|
- @click="tabClick(2)"
|
|
|
|
|
|
+ :class="{ current: tabCurrentIndex === 1 }"
|
|
|
|
+ @click="tabClick(1)"
|
|
v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
|
|
v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
|
|
<text>服务项目</text>
|
|
<text>服务项目</text>
|
|
<text class="line"></text>
|
|
<text class="line"></text>
|
|
</view>
|
|
</view>
|
|
- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 3 }" @click="tabClick(3)">
|
|
|
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
<text>推荐</text>
|
|
<text>推荐</text>
|
|
<text class="line"></text>
|
|
<text class="line"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
- <view v-else 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="product-top">
|
|
|
|
- <view class="banner-section">
|
|
|
|
- <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
|
- <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
|
- <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
|
- <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
- <view class="swiper__dots-box">
|
|
|
|
- <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
|
|
|
|
- </view>
|
|
|
|
- </uni-swiper-dot>
|
|
|
|
|
|
+ <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="product-wrap clearfix">
|
|
|
|
- <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
|
|
- <view class="wrap-top-price" v-if="!goodsData.isNoneDisabled">
|
|
|
|
- <cm-price v-if="isRequest"
|
|
|
|
- :product="product"
|
|
|
|
- :userIdentity="userIdentity"
|
|
|
|
- :shopID= "shopID"
|
|
|
|
- :promotions="product.promotions"
|
|
|
|
- :ladderPriceList="ladderPriceList"/>
|
|
|
|
|
|
+ </view>
|
|
|
|
+ <view class="container-product tui-skeleton" v-else>
|
|
|
|
+ <view class="container-product-main">
|
|
|
|
+ <view class="product-top">
|
|
|
|
+ <view class="banner-section">
|
|
|
|
+ <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
|
+ <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
|
+ <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
|
+ <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+ <view class="swiper__dots-box">
|
|
|
|
+ <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
|
|
|
|
+ </view>
|
|
|
|
+ </uni-swiper-dot>
|
|
</view>
|
|
</view>
|
|
- <view class="p-title tui-skeleton-fillet">
|
|
|
|
- <view class="p-title-name">
|
|
|
|
- {{product.name == undefined ? '' : product.name}}
|
|
|
|
|
|
+ <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="p-title-name">
|
|
|
|
+ {{product.name == undefined ? '' : product.name}}
|
|
|
|
+ </view>
|
|
|
|
+ <button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
|
|
|
|
+ <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
|
+ <view class="">分享</view>
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="wrap-label" v-if="product.tagsList.length>0">
|
|
|
|
+ <view class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="product-seve">
|
|
|
|
+ <text class="iconfont icon-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>
|
|
- <button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
|
|
|
|
- <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
|
- <view class="">分享</view>
|
|
|
|
- </button>
|
|
|
|
- </view>
|
|
|
|
- <view class="wrap-label" v-if="product.tagsList.length>0">
|
|
|
|
- <view class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-seve">
|
|
|
|
- <text class="iconfont icon-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>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-parameter" @click="showPopup">
|
|
|
|
- <text class="title">参数:</text>
|
|
|
|
- <text class="name">品牌 起订量 分类...</text>
|
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-supplier" @click="goSupplier">
|
|
|
|
- <view class="logo"><img :src="shop.logo" 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 class="product-item-none" v-if="goodsData.isNoneDisabled">
|
|
|
|
+ <image class="none-image" :src="productNoneImage" mode=""></image>
|
|
|
|
+ <view class="none-text">此商品已{{goodsData.disabledText}},请浏览以下推荐商品~</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="product-parameter" @click="showPopup">
|
|
|
|
+ <text class="title">参数:</text>
|
|
|
|
+ <text class="name">品牌 起订量 分类...</text>
|
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="product-supplier" @click="goSupplier">
|
|
|
|
+ <view class="logo"><img :src="shop.logo" 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>
|
|
|
|
+ <view class="right"><text class="iconfont icon-xiayibu"></text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="right"><text class="iconfont icon-xiayibu"></text></view>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-details">
|
|
|
|
- <!-- 商品详情 -->
|
|
|
|
- <view class="title">
|
|
|
|
- <view class="title-tab">商品详情</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
|
- <parser :html="html" :img-mode="widthFix"></parser>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-details service" v-show="product.productDetail.orderInfo || product.productDetail.serviceInfo">
|
|
|
|
- <!-- 服务项目 -->
|
|
|
|
- <view class="title">
|
|
|
|
- <view class="title-tab">服务项目</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content service">
|
|
|
|
- <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-details recommend">
|
|
|
|
- <!-- 相关推荐 -->
|
|
|
|
- <view class="title">
|
|
|
|
- <view class="title-tab">相关推荐</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content hot">
|
|
|
|
- <recommend :query-productid="product.productID" v-if="isRequest"></recommend>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 商品参数 -->
|
|
|
|
- <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
|
- <view class="tui-popup-box clearfix">
|
|
|
|
- <view class="title">商品参数</view>
|
|
|
|
- <view class="content">
|
|
|
|
- <view class="content-tr">
|
|
|
|
- <view class="content-td">起订量</view>
|
|
|
|
- <view class="content-th">{{product.minBuyNumber}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content-tr">
|
|
|
|
- <view class="content-td">品牌</view>
|
|
|
|
- <view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content-tr">
|
|
|
|
- <view class="content-td">包装规格</view>
|
|
|
|
- <view class="content-th">{{product.unit}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content-tr">
|
|
|
|
- <view class="content-td">商品编码</view>
|
|
|
|
- <view class="content-th">{{product.productCode}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content-tr">
|
|
|
|
- <view class="content-td">库存</view>
|
|
|
|
- <view class="content-th">{{product.stock}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
|
|
|
|
- <view class="content-td">{{item.paramsName}}</view>
|
|
|
|
- <view class="content-th">{{item.paramsContent}}</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="product-details productDetails0">
|
|
|
|
+ <!-- 商品详情 -->
|
|
|
|
+ <view class="title">
|
|
|
|
+ <view class="title-tab">商品详情</view>
|
|
</view>
|
|
</view>
|
|
- <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
|
- <view class="tui-flex-1">
|
|
|
|
- <view class="tui-button" @click="hidePopup()">收起</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
|
+ <parser :html="html" :img-mode="widthFix"></parser>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </tui-bottom-popup>
|
|
|
|
- <!-- 底部按钮 -->
|
|
|
|
- <view class="menu" v-if="userIdentity!=1 && userIdentity != 3">
|
|
|
|
- <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">
|
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
|
- <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
|
- <image src="../../static/severs@3x.png"></image>
|
|
|
|
- <text>客服</text>
|
|
|
|
- </button>
|
|
|
|
- <!-- #endif -->
|
|
|
|
- </view>
|
|
|
|
- <view class="item-bt" @click="buyProductCart()">
|
|
|
|
- <image src="../../static/icon-cart-active@3x.png"></image>
|
|
|
|
- <text>购物车</text>
|
|
|
|
- <text v-if="hasLogin && goodsData.cartCount>0"
|
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
|
- :class="[goodsData.cartCount < 10 ? 'goleft':'']">
|
|
|
|
- {{ goodsData.cartCount >= 100 ? '99+': goodsData.cartCount}}
|
|
|
|
- </text>
|
|
|
|
- <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="product-details service productDetails1" v-show="product.productDetail.orderInfo || product.productDetail.serviceInfo">
|
|
|
|
+ <!-- 服务项目 -->
|
|
|
|
+ <view class="title">
|
|
|
|
+ <view class="title-tab">服务项目</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 class="content service">
|
|
|
|
+ <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <!--底部选择模态层弹窗组件 -->
|
|
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
|
|
- <!-- 遮罩层 -->
|
|
|
|
- <view class="mask"></view>
|
|
|
|
- <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
|
|
|
|
- <view class="content">
|
|
|
|
- <view class="layer-smimg">
|
|
|
|
- <image :src="product.mainImage" mode=""></image>
|
|
|
|
|
|
+ <view class="product-details recommend productDetails2">
|
|
|
|
+ <!-- 相关推荐 -->
|
|
|
|
+ <view class="title">
|
|
|
|
+ <view class="title-tab">相关推荐</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content hot">
|
|
|
|
+ <recommend :query-productid="product.productID" v-if="isRequest"></recommend>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 商品参数 -->
|
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
|
+ <view class="title">商品参数</view>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="content-tr">
|
|
|
|
+ <view class="content-td">起订量</view>
|
|
|
|
+ <view class="content-th">{{product.minBuyNumber}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content-tr">
|
|
|
|
+ <view class="content-td">品牌</view>
|
|
|
|
+ <view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content-tr">
|
|
|
|
+ <view class="content-td">包装规格</view>
|
|
|
|
+ <view class="content-th">{{product.unit}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content-tr">
|
|
|
|
+ <view class="content-td">商品编码</view>
|
|
|
|
+ <view class="content-th">{{product.productCode}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content-tr">
|
|
|
|
+ <view class="content-td">库存</view>
|
|
|
|
+ <view class="content-th">{{product.stock}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
|
|
|
|
+ <view class="content-td">{{item.paramsName}}</view>
|
|
|
|
+ <view class="content-th">{{item.paramsContent}}</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- <view class="layer-nunbox">
|
|
|
|
- <view class="layer-nunbox-t" v-if="product.step === 2">
|
|
|
|
- <view class="text">*该商品只能以起订量的整数倍购买</view>
|
|
|
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
|
+ <view class="tui-flex-1">
|
|
|
|
+ <view class="tui-button" @click="hidePopup()">收起</view>
|
|
</view>
|
|
</view>
|
|
- <view class="layer-nunbox-t">
|
|
|
|
- <view class="layer-nunbox-text">数量:</view>
|
|
|
|
- <view class="number-box">
|
|
|
|
- <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
|
|
|
|
- <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
|
|
|
|
- <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </tui-bottom-popup>
|
|
|
|
+ <!-- 底部按钮 -->
|
|
|
|
+ <view class="menu" v-if="userIdentity!=1 && userIdentity != 3">
|
|
|
|
+ <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">
|
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
|
+ <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
|
+ <image src="../../static/severs@3x.png"></image>
|
|
|
|
+ <text>客服</text>
|
|
|
|
+ </button>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-bt" @click="buyProductCart()">
|
|
|
|
+ <image src="../../static/icon-cart-active@3x.png"></image>
|
|
|
|
+ <text>购物车</text>
|
|
|
|
+ <text v-if="hasLogin && goodsData.cartCount>0"
|
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
|
+ :class="[goodsData.cartCount < 10 ? 'goleft':'']">
|
|
|
|
+ {{ goodsData.cartCount >= 100 ? '99+': goodsData.cartCount}}
|
|
|
|
+ </text>
|
|
|
|
+ <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bottom-ri">
|
|
|
|
+ <button
|
|
|
|
+ :disabled="goodsData.disabled"
|
|
|
|
+ class="btn btn-cart"
|
|
|
|
+ :class="[goodsData.disabled ? 'disabled':'']"
|
|
|
|
+ @tap.stop="btnGetConfirm('add')">加入购物车</button>
|
|
|
|
+ <button
|
|
|
|
+ :disabled="goodsData.disabled"
|
|
|
|
+ class="btn btn-bay"
|
|
|
|
+ :class="[goodsData.disabled ? 'disabled':'']"
|
|
|
|
+ @tap.stop="btnGetConfirm('buy')">立即购买</button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!--底部选择模态层弹窗组件 -->
|
|
|
|
+ <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
|
|
+ <!-- 遮罩层 -->
|
|
|
|
+ <view class="mask"></view>
|
|
|
|
+ <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="layer-smimg">
|
|
|
|
+ <image :src="product.mainImage" mode=""></image>
|
|
</view>
|
|
</view>
|
|
- <view class="layer-nunbox-b">
|
|
|
|
- <view class="text">单价:
|
|
|
|
- <text class="p sm">¥</text>
|
|
|
|
- <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
|
|
|
|
|
|
+ <view class="layer-nunbox">
|
|
|
|
+ <view class="layer-nunbox-t" v-if="product.step === 2">
|
|
|
|
+ <view class="text">*该商品只能以起订量的整数倍购买</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="layer-nunbox-t">
|
|
|
|
+ <view class="layer-nunbox-text">数量:</view>
|
|
|
|
+ <view class="number-box">
|
|
|
|
+ <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
|
|
|
|
+ <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
|
|
|
|
+ <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="layer-nunbox-b">
|
|
|
|
+ <view class="text">单价:
|
|
|
|
+ <text class="p sm">¥</text>
|
|
|
|
+ <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
</view>
|
|
</view>
|
|
- <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 侧边 -->
|
|
|
|
+ <scroll-top v-if="isScrollTop"></scroll-top>
|
|
</view>
|
|
</view>
|
|
- <!-- 侧边 -->
|
|
|
|
- <scroll-top v-if="isScrollTop"></scroll-top>
|
|
|
|
- </view>
|
|
|
|
|
|
+ </template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -271,7 +279,7 @@
|
|
data(){
|
|
data(){
|
|
return{
|
|
return{
|
|
html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
- disabledTabNavList:[{name:'相关推荐'}],
|
|
|
|
|
|
+ productNoneImage:'http://static-b.caimei365.com/app/img/icon/icon-pnone.png',
|
|
mode:'round',
|
|
mode:'round',
|
|
iconClass:'icon-aixin',
|
|
iconClass:'icon-aixin',
|
|
iconColor:'#ff9100',
|
|
iconColor:'#ff9100',
|
|
@@ -282,7 +290,6 @@
|
|
current:0,
|
|
current:0,
|
|
shopId:0,
|
|
shopId:0,
|
|
isShareType:'',
|
|
isShareType:'',
|
|
- productNoneImage:'http://static-b.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
|
isHeaderPoduct:false,
|
|
isHeaderPoduct:false,
|
|
navbarFiexd:'none',
|
|
navbarFiexd:'none',
|
|
ladderPriceFlag:'',
|
|
ladderPriceFlag:'',
|
|
@@ -386,12 +393,10 @@
|
|
if(this.product.validFlag =='3' || this.stock == 0 ){
|
|
if(this.product.validFlag =='3' || this.stock == 0 ){
|
|
this.disabled = true
|
|
this.disabled = true
|
|
this.isNoneDisabled = true
|
|
this.isNoneDisabled = true
|
|
- this.tabCurrentIndex = 3;// 页面显示是默认选中第一
|
|
|
|
this.goodsData.disabledText = '下架'
|
|
this.goodsData.disabledText = '下架'
|
|
}else{
|
|
}else{
|
|
this.disabled = false
|
|
this.disabled = false
|
|
this.isNoneDisabled = false
|
|
this.isNoneDisabled = false
|
|
- this.tabCurrentIndex = 0;// 页面显示是默认选中第三
|
|
|
|
this.goodsData.disabledText = ''
|
|
this.goodsData.disabledText = ''
|
|
}
|
|
}
|
|
if(this.product.price1TextFlag == "1"){
|
|
if(this.product.price1TextFlag == "1"){
|
|
@@ -433,6 +438,18 @@
|
|
tabClick(index) {//商品详情&&供应商信息tab切换
|
|
tabClick(index) {//商品详情&&供应商信息tab切换
|
|
console.log(index)
|
|
console.log(index)
|
|
this.tabCurrentIndex = index;
|
|
this.tabCurrentIndex = index;
|
|
|
|
+ let classIndex = '.productDetails'+index;
|
|
|
|
+ uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
|
+ uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
|
+ uni.pageScrollTo({
|
|
|
|
+ duration:300,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
|
|
|
|
+ scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
|
+ })
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.tabSelectFlag = false;
|
|
|
|
+ },500)
|
|
|
|
+ }).exec()
|
|
|
|
+ }).exec()
|
|
},
|
|
},
|
|
handleContact(e){//跳转小程序客服
|
|
handleContact(e){//跳转小程序客服
|
|
|
|
|
|
@@ -718,11 +735,12 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
height: auto;
|
|
float: left;
|
|
float: left;
|
|
|
|
+ position: relative;
|
|
.p-title-name{
|
|
.p-title-name{
|
|
width:602rpx;
|
|
width:602rpx;
|
|
- height: 96rpx;
|
|
|
|
|
|
+ height: auto;
|
|
float: left;
|
|
float: left;
|
|
- line-height: 42rpx;
|
|
|
|
|
|
+ line-height:48rpx;
|
|
font-size: $font-size-28;
|
|
font-size: $font-size-28;
|
|
color: $text-color;
|
|
color: $text-color;
|
|
-o-text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
@@ -736,7 +754,8 @@
|
|
.p-title-share{
|
|
.p-title-share{
|
|
width: 96rpx;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
height: 96rpx;
|
|
- float: right;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #999999;
|
|
color: #999999;
|
|
font-size: $font-size-24;
|
|
font-size: $font-size-24;
|
|
@@ -975,6 +994,25 @@
|
|
margin-left: 10rpx;
|
|
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: #999999;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.product-parameter{
|
|
.product-parameter{
|
|
width: 702rpx;
|
|
width: 702rpx;
|
|
height: 90rpx;
|
|
height: 90rpx;
|