|
@@ -1,14 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
|
|
<view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
|
|
- <custom-p v-if="isHeaderPoduct"
|
|
|
|
|
|
+ <!-- <custom-p v-if="isHeaderPoduct"
|
|
:systeminfo='systeminfo'
|
|
:systeminfo='systeminfo'
|
|
:navbar-data='nvabarData'
|
|
:navbar-data='nvabarData'
|
|
:headerBtnPosi ="headerBtnPosi"
|
|
:headerBtnPosi ="headerBtnPosi"
|
|
:headerColor="headerColor"
|
|
:headerColor="headerColor"
|
|
:type="isShareType"
|
|
:type="isShareType"
|
|
:page='backPage'>
|
|
:page='backPage'>
|
|
- </custom-p>
|
|
|
|
|
|
+ </custom-p> -->
|
|
<view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
|
|
<view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
|
|
|
|
+ <!-- 搜索区域 -->
|
|
<view class="search-input">
|
|
<view class="search-input">
|
|
<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
|
|
<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
|
|
<view class="search-icon">
|
|
<view class="search-icon">
|
|
@@ -17,6 +18,7 @@
|
|
<view class="search-text">搜索商品/供应商/项目仪器</view>
|
|
<view class="search-text">搜索商品/供应商/项目仪器</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 导航栏 -->
|
|
<view class="navbar">
|
|
<view class="navbar">
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
<text>详情</text>
|
|
<text>详情</text>
|
|
@@ -34,6 +36,7 @@
|
|
</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>
|
|
<template v-else >
|
|
<template v-else >
|
|
|
|
+ <!-- 如果商品下架 -->
|
|
<view class="cart-content empty" v-if="isInvalid">
|
|
<view class="cart-content empty" v-if="isInvalid">
|
|
<view class="empty-container">
|
|
<view class="empty-container">
|
|
<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
@@ -41,9 +44,11 @@
|
|
<view class="login-btn" @click="goIndex">去商城</view>
|
|
<view class="login-btn" @click="goIndex">去商城</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
<view class="container-product tui-skeleton" v-else>
|
|
<view class="container-product tui-skeleton" v-else>
|
|
<view class="container-product-main">
|
|
<view class="container-product-main">
|
|
<view class="product-top">
|
|
<view class="product-top">
|
|
|
|
+ <!-- 轮播图 -->
|
|
<view class="banner-section">
|
|
<view class="banner-section">
|
|
<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
<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 class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
@@ -59,6 +64,7 @@
|
|
<view class="product-wrap clearfix">
|
|
<view class="product-wrap clearfix">
|
|
<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
<view class="wrap-top-price">
|
|
<view class="wrap-top-price">
|
|
|
|
+ <!-- 价格 -->
|
|
<cm-price v-if="isRequest"
|
|
<cm-price v-if="isRequest"
|
|
:product="product"
|
|
:product="product"
|
|
:userIdentity="userIdentity"
|
|
:userIdentity="userIdentity"
|
|
@@ -67,22 +73,27 @@
|
|
:ladderPriceList="ladderPriceList"/>
|
|
:ladderPriceList="ladderPriceList"/>
|
|
</view>
|
|
</view>
|
|
<view class="p-title tui-skeleton-fillet">
|
|
<view class="p-title tui-skeleton-fillet">
|
|
|
|
+ <!-- 美博会 -->
|
|
<view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
|
|
<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>
|
|
<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">
|
|
<button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
|
|
<view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
<view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
<view class="">分享</view>
|
|
<view class="">分享</view>
|
|
</button>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 产品标签 -->
|
|
<view class="wrap-label" v-if="product.tagsList.length>0">
|
|
<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 class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 承诺 -->
|
|
<view class="product-seve">
|
|
<view class="product-seve">
|
|
<text class="label">采美承诺:</text>
|
|
<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>
|
|
<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>
|
|
|
|
+ <!-- 备注信息 -->
|
|
<view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
<view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
备注:{{product.productRemarks}}
|
|
备注:{{product.productRemarks}}
|
|
</view>
|
|
</view>
|
|
@@ -93,12 +104,14 @@
|
|
<image class="none-image" :src="productNoneImage" mode=""></image>
|
|
<image class="none-image" :src="productNoneImage" mode=""></image>
|
|
<view class="none-text">此商品已{{goodsData.disabledText}},请浏览以下推荐商品~</view>
|
|
<view class="none-text">此商品已{{goodsData.disabledText}},请浏览以下推荐商品~</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 选择商品参数按钮 -->
|
|
<view class="product-parameter" @click="showPopup" v-if="!goodsData.isNoneDisabled">
|
|
<view class="product-parameter" @click="showPopup" v-if="!goodsData.isNoneDisabled">
|
|
<text class="title">参数:</text>
|
|
<text class="title">参数:</text>
|
|
<text class="name">品牌 起订量 分类...</text>
|
|
<text class="name">品牌 起订量 分类...</text>
|
|
<text class="iconfont icon-chakangengduo"></text>
|
|
<text class="iconfont icon-chakangengduo"></text>
|
|
</view>
|
|
</view>
|
|
- <view class="product-supplier" @click="goSupplier">
|
|
|
|
|
|
+ <!-- 机构满意度评分 -->
|
|
|
|
+ <!-- <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="logo"><img :src="shop.logo ? shop.logo :'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'" alt=""></view>
|
|
<view class="main">
|
|
<view class="main">
|
|
<view class="name">{{shop.name}}</view>
|
|
<view class="name">{{shop.name}}</view>
|
|
@@ -113,7 +126,7 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right"><text class="iconfont icon-chakangengduo"></text></view>
|
|
<view class="right"><text class="iconfont icon-chakangengduo"></text></view>
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
</view>
|
|
</view>
|
|
<view class="product-details product-details0">
|
|
<view class="product-details product-details0">
|
|
<!-- 商品详情 -->
|
|
<!-- 商品详情 -->
|
|
@@ -137,15 +150,15 @@
|
|
<text>暂无服务项目</text>
|
|
<text>暂无服务项目</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="product-details recommend product-details2">
|
|
|
|
- <!-- 相关推荐 -->
|
|
|
|
|
|
+ <!-- 相关推荐 -->
|
|
|
|
+ <!-- <view class="product-details recommend product-details2">
|
|
<view class="title">
|
|
<view class="title">
|
|
<view class="title-tab">相关推荐</view>
|
|
<view class="title-tab">相关推荐</view>
|
|
</view>
|
|
</view>
|
|
<view class="content hot">
|
|
<view class="content hot">
|
|
<recommend :query-productid="product.productID" :query-type="product.recommendType" v-if="isRequest"></recommend>
|
|
<recommend :query-productid="product.productID" :query-type="product.recommendType" v-if="isRequest"></recommend>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
<!-- 商品参数 -->
|
|
<!-- 商品参数 -->
|
|
<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
<view class="tui-popup-box clearfix">
|
|
<view class="tui-popup-box clearfix">
|
|
@@ -190,6 +203,7 @@
|
|
</view>
|
|
</view>
|
|
</tui-bottom-popup>
|
|
</tui-bottom-popup>
|
|
<!-- 底部按钮 -->
|
|
<!-- 底部按钮 -->
|
|
|
|
+ <!-- 加入购物车
|
|
<view class="menu" v-if="isShowButton">
|
|
<view class="menu" v-if="isShowButton">
|
|
<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
|
|
<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
|
|
<view class="bottom-le">
|
|
<view class="bottom-le">
|
|
@@ -226,9 +240,9 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ -->
|
|
<!--底部选择模态层弹窗组件 -->
|
|
<!--底部选择模态层弹窗组件 -->
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
|
|
- <!-- 遮罩层 -->
|
|
|
|
|
|
+ <!-- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
<view class="mask"></view>
|
|
<view class="mask"></view>
|
|
<view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
|
|
<view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
|
|
<view class="content">
|
|
<view class="content">
|
|
@@ -257,7 +271,7 @@
|
|
</view>
|
|
</view>
|
|
<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
<!-- 侧边 -->
|
|
<!-- 侧边 -->
|
|
<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
</view>
|
|
</view>
|