|
@@ -1,68 +1,85 @@
|
|
|
|
|
|
<template>
|
|
<template>
|
|
<view class="product" :style="{paddingBottom: userIdentity==1 ? '0rpx' :'188rpx'}">
|
|
<view class="product" :style="{paddingBottom: userIdentity==1 ? '0rpx' :'188rpx'}">
|
|
- <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="navbar" :class="navbarFiexd">
|
|
|
|
+ <!-- -->
|
|
|
|
+ <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)"
|
|
|
|
+ v-if="product.brandInfo!='' && product.brandInfo!=null">
|
|
|
|
+ <text>品牌</text>
|
|
|
|
+ <text class="line"></text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
|
+ <text>推荐</text>
|
|
|
|
+ <text class="line"></text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
<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 class="container-product tui-skeleton">
|
|
<view class="container-product tui-skeleton">
|
|
- <view class="product-top">
|
|
|
|
- <view class="banner-section">
|
|
|
|
- <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
|
- <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
|
- <swiper-item v-for="(item, index) in product.imageList" :key="index" class="banner-item">
|
|
|
|
- <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
- <view class="swiper__dots-box">
|
|
|
|
- <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ product.imageList.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" v-if="!goodsData.isNoneDisabled">
|
|
|
|
- <cm-price v-if="isRequest"
|
|
|
|
- :product="product"
|
|
|
|
- :userIdentity="userIdentity"
|
|
|
|
- :promotions="product.promotions"
|
|
|
|
- :ladderPriceList="ladderPriceList"/>
|
|
|
|
- </view>
|
|
|
|
- <view class="p-title tui-skeleton-fillet">
|
|
|
|
- <view class="p-title-name">
|
|
|
|
- {{product.name == undefined ? '' : product.name}}
|
|
|
|
|
|
+ <view class="container-product-main">
|
|
|
|
+ <view class="product-top">
|
|
|
|
+ <view class="banner-section">
|
|
|
|
+ <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
|
+ <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
|
+ <swiper-item v-for="(item, index) in product.imageList" :key="index" class="banner-item">
|
|
|
|
+ <image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+ <view class="swiper__dots-box">
|
|
|
|
+ <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ product.imageList.length }}</tui-tag>
|
|
</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="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
|
|
- <text class="text">{{product.productRemarks}}</text>
|
|
|
|
- </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>
|
|
|
|
|
|
+ </uni-swiper-dot>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="product-seve">
|
|
|
|
- <text class="title">服务:</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="product-parameter" @click="showPopup">
|
|
|
|
- <text class="title">参数:</text>
|
|
|
|
- <text class="name">品牌 起订量 分类...</text>
|
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
|
|
|
+ <view class="product-wrap clearfix">
|
|
|
|
+ <view class="wrap-top" >
|
|
|
|
+ <view class="wrap-top-price">
|
|
|
|
+ <second-price v-if="isRequest" :product="product"></second-price>
|
|
|
|
+ </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="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
|
|
+ <text class="text">{{product.productRemarks}}</text>
|
|
|
|
+ </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>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="product-seve">
|
|
|
|
+ <text class="title">服务:</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="product-parameter" @click="showPopup">
|
|
|
|
+ <text class="title">参数:</text>
|
|
|
|
+ <text class="name">品牌 起订量 分类...</text>
|
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- <view class="product-details">
|
|
|
|
|
|
+ <view class="product-details productDetails0">
|
|
<!-- 商品详情 -->
|
|
<!-- 商品详情 -->
|
|
<view class="title">
|
|
<view class="title">
|
|
<view class="title-tab">商品详情</view>
|
|
<view class="title-tab">商品详情</view>
|
|
@@ -82,16 +99,16 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="product-details secondBrand">
|
|
|
|
|
|
+ <view class="product-details secondBrand productDetails1" v-if="product.brandInfo!=''&&product.brandInfo!=null">
|
|
<!-- 品牌信息 -->
|
|
<!-- 品牌信息 -->
|
|
<view class="title">
|
|
<view class="title">
|
|
<view class="title-tab">品牌信息</view>
|
|
<view class="title-tab">品牌信息</view>
|
|
</view>
|
|
</view>
|
|
<text class="brandinfo">
|
|
<text class="brandinfo">
|
|
- 品牌描述品牌描述品牌描述品牌描述品牌描述品牌描述品牌描述品牌描述
|
|
|
|
|
|
+ {{product.brandInfo}}
|
|
</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
- <view class="product-details recommend">
|
|
|
|
|
|
+ <view class="product-details recommend productDetails2">
|
|
<!-- 相关推荐 -->
|
|
<!-- 相关推荐 -->
|
|
<view class="title">
|
|
<view class="title">
|
|
<view class="title-tab">相关推荐</view>
|
|
<view class="title-tab">相关推荐</view>
|
|
@@ -115,7 +132,7 @@
|
|
</tui-bottom-popup>
|
|
</tui-bottom-popup>
|
|
<!-- 侧边 -->
|
|
<!-- 侧边 -->
|
|
<scroll-top v-if="isScrollTop"></scroll-top>
|
|
<scroll-top v-if="isScrollTop"></scroll-top>
|
|
- </view>
|
|
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -177,7 +194,8 @@
|
|
title: '' // 导航栏 中间的标题
|
|
title: '' // 导航栏 中间的标题
|
|
},
|
|
},
|
|
linkPath:'',
|
|
linkPath:'',
|
|
- popupShow:false//参数弹窗
|
|
|
|
|
|
+ popupShow:false,//参数弹窗
|
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
onLoad(option) {
|
|
@@ -199,12 +217,10 @@
|
|
})
|
|
})
|
|
}
|
|
}
|
|
this.SecondService.ProductCount({productId:this.productID}).then(res =>{
|
|
this.SecondService.ProductCount({productId:this.productID}).then(res =>{
|
|
- if(res.code==0){
|
|
|
|
- console.log(res)
|
|
|
|
- }else {
|
|
|
|
- console.log(res)
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ console.log(res)
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
|
+ });
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
...mapState(['hasLogin','isWxAuthorize'])
|
|
...mapState(['hasLogin','isWxAuthorize'])
|
|
@@ -240,17 +256,18 @@
|
|
tabClick(index) {//商品详情&&供应商信息tab切换
|
|
tabClick(index) {//商品详情&&供应商信息tab切换
|
|
console.log(index)
|
|
console.log(index)
|
|
this.tabCurrentIndex = index;
|
|
this.tabCurrentIndex = index;
|
|
- switch(index){
|
|
|
|
- case 1:
|
|
|
|
- this.isRarameter = true
|
|
|
|
- break;
|
|
|
|
- case 2:
|
|
|
|
- this.isService = true
|
|
|
|
- break;
|
|
|
|
- case 3:
|
|
|
|
- this.isRecommend = true
|
|
|
|
- break;
|
|
|
|
- }
|
|
|
|
|
|
+ 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){//跳转小程序客服
|
|
|
|
|
|
@@ -356,6 +373,49 @@
|
|
page{
|
|
page{
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
+ .navbar {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ background: #ffe6dc;
|
|
|
|
+ z-index: 10;
|
|
|
|
+ display: flex;
|
|
|
|
+ position: fixed;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ &.fixed{
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ .nav-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex: 1;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.productRemarks{
|
|
.productRemarks{
|
|
height: 36rpx;
|
|
height: 36rpx;
|
|
margin: 8rpx 0;
|
|
margin: 8rpx 0;
|
|
@@ -849,47 +909,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .navbar {
|
|
|
|
- width: 702rpx;
|
|
|
|
- height: 96rpx;
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
- background: #fff;
|
|
|
|
- z-index: 10;
|
|
|
|
- display: flex;
|
|
|
|
- border-bottom: 1px solid #F8F8F8;
|
|
|
|
- &.fixed{
|
|
|
|
- position: fixed;
|
|
|
|
- left: 0;
|
|
|
|
- }
|
|
|
|
- .nav-item {
|
|
|
|
- display: flex;
|
|
|
|
- flex: 1;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 96rpx;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- color: $text-color;
|
|
|
|
- position: relative;
|
|
|
|
- float: left;
|
|
|
|
- position: relative;
|
|
|
|
- .line{
|
|
|
|
- width: 60%;
|
|
|
|
- height: 2px;
|
|
|
|
- border-radius: 1px;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 50%;
|
|
|
|
- margin-left: -30%;
|
|
|
|
- }
|
|
|
|
- &.current{
|
|
|
|
- color:$color-system;
|
|
|
|
- .line{
|
|
|
|
- background: $color-system;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
.content{
|
|
.content{
|
|
width: 100%;
|
|
width: 100%;
|
|
min-height: 750rpx;
|
|
min-height: 750rpx;
|