|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx'}">
|
|
|
+ <view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
|
|
|
<custom-p v-if="isHeaderPoduct"
|
|
|
:systeminfo='systeminfo'
|
|
|
:navbar-data='nvabarData'
|
|
|
@@ -8,20 +8,30 @@
|
|
|
:type="isShareType"
|
|
|
:page='backPage'>
|
|
|
</custom-p>
|
|
|
- <view class="navbar" :class="navbarFiexd" :style="{top:CustomBar +'px'}">
|
|
|
- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
|
- <text>详情</text>
|
|
|
- <text class="line"></text>
|
|
|
+ <view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'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="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
|
|
|
- <text>服务项目</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
- <text>推荐</text>
|
|
|
- <text class="line"></text>
|
|
|
+ <view class="navbar">
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
|
+ <text>详情</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
|
|
|
+ <text>服务项目</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
+ <text>推荐</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </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">
|
|
|
@@ -184,13 +194,16 @@
|
|
|
<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="https://static.caimei365.com/app/img/icon/icon-logo.png"></image>
|
|
|
+ <image src="../../static/icon-home-active@3x.png"></image>
|
|
|
+ <text>首页</text>
|
|
|
</view>
|
|
|
<view class="item-bt" @click="goSupplier">
|
|
|
<image src="../../static/icon-shop@3x.png"></image>
|
|
|
+ <text>店铺</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 && goodsData.cartCount>0"
|
|
|
class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
:class="[goodsData.cartCount < 10 ? 'goleft':'']">
|
|
|
@@ -279,6 +292,7 @@
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
+ clickPath:'/search/pages/search/search',
|
|
|
html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
|
productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
mode:'round',
|
|
|
@@ -292,6 +306,7 @@
|
|
|
shopId:0,
|
|
|
isShareType:'',
|
|
|
isHeaderPoduct:false,
|
|
|
+ isNavbarFiexd:false,
|
|
|
navbarFiexd:'none',
|
|
|
ladderPriceFlag:'',
|
|
|
ladderPriceList:'',
|
|
|
@@ -694,15 +709,17 @@
|
|
|
if(!this.tabSelectFlag) {
|
|
|
this.activeTab(scrollTop, this);
|
|
|
}
|
|
|
- if(e.scrollTop>100){
|
|
|
+ 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,
|
|
|
@@ -1308,7 +1325,7 @@
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: $font-size-24;
|
|
|
+ font-size: $font-size-22;
|
|
|
color: $text-color;
|
|
|
line-height: 34rpx;
|
|
|
position: relative;
|
|
|
@@ -1329,18 +1346,17 @@
|
|
|
.icon-num{
|
|
|
position: absolute;
|
|
|
right:-12rpx;
|
|
|
- top: 0;
|
|
|
+ top: -5rpx;
|
|
|
}
|
|
|
.icon-num.goleft{
|
|
|
- right: 4rpx;
|
|
|
+ right: 2rpx;
|
|
|
}
|
|
|
&:last-child{
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
image {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
}
|
|
|
button.contact-btn{
|
|
|
width: 100%;
|
|
|
@@ -1421,61 +1437,111 @@
|
|
|
color: #fff;
|
|
|
background-color: #dd524d;
|
|
|
}
|
|
|
- .navbar {
|
|
|
+ .product-topnav{
|
|
|
width: 100%;
|
|
|
- height: 80rpx;
|
|
|
+ height: 174rpx;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
- z-index: 10;
|
|
|
- display: flex;
|
|
|
+ z-index: 1000;
|
|
|
position: fixed;
|
|
|
- opacity: 0;
|
|
|
+ opacity: 1;
|
|
|
left: 0;
|
|
|
&.fixed{
|
|
|
- animation: showFixedColor 0.3s ease-in-out both;
|
|
|
+ animation: showFixedColor 0.1s ease-in-out both;
|
|
|
}
|
|
|
&.none{
|
|
|
- animation: hideFixedColor 0.3s ease-in-out both;
|
|
|
+ animation: hideFixedColor 0.1s ease-in-out both;
|
|
|
}
|
|
|
- .nav-item {
|
|
|
+ .navbar {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
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;
|
|
|
+ .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{
|
|
|
- background: $color-system;
|
|
|
+ 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);opacity: 0;}
|
|
|
- 50% {background: rgba(255,255,255,0.5);opacity: 0.5;}
|
|
|
- 100% {background: rgba(255,255,255,1);opacity: 1;}
|
|
|
+ 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);opacity: 1;}
|
|
|
- 50% {background: rgba(255,255,255,0.5);opacity: 0.5;}
|
|
|
- 100% {background: rgba(255,255,255,0);opacity: 0;}
|
|
|
+ 0% {background: rgba(255,255,255,1);}
|
|
|
+ 50% {background: rgba(255,255,255,0.5);}
|
|
|
+ 100% {background: rgba(255,255,255,0);}
|
|
|
}
|
|
|
/* 加入购物模态层*/
|
|
|
@keyframes showPopup {
|
