commit-m 商品详情

components/cm-module/headerNavbar/header-poduct.vue

@@ -1,17 +1,20 @@
 <template name="headerNavbar">
 	<!-- 自定义导航栏 -->
-	<view class='navbar-wrap' :class="[headerColor? 'bg-color' : 'no-color']" :style="{height:navbarHeight+'px',paddingTop:statusBarHeight+'px'}"> 
+	<view class='navbar-wrap' :class="[headerColor? 'bg-color' : 'bg-color']" :style="{height:navbarHeight+'px',paddingTop:CustomBar/2+'px'}"> 
 	  	<view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true" 
-			  :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:navbarBtn.right+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
+			  :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:12+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
 			  <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
 			  <text v-else  @click="_goHome" class="iconfont icon-shouye"></text>
 	  	</view>
 		<view class="navbar-text" :style="{top:navbarBtn.top + statusBarHeight+'px;',height:navbarBtn.height+'px;',fontSize:fontSizeSetting+'px;'}">
+			<image class="logo" :style="{width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}" src="https://static.caimei365.com/app/img/icon/logo-top@2x.png" mode=""></image>
+		</view>
+ 		<!--<view class="navbar-text" :style="{top:navbarBtn.top + statusBarHeight+'px;',height:navbarBtn.height+'px;',fontSize:fontSizeSetting+'px;'}">
 	    	<view class="gosearch-btn" :style="{paddingLeft:navbarBtn.height+'px;',right:(navbarBtn.width+30)+'px;',borderRadius:(navbarBtn.height/2)+'px;',width:(375-navbarBtn.width*2)+'px;',lineHeight:navbarBtn.height+'px;'}">
 				<text class="iconfont icon-sousuo" :style="{width:navbarBtn.height+'px;',height:navbarBtn.height+'px;',lineHeight:navbarBtn.height+'px;'}"></text>
 				<view class="input" @click="this.$api.navigateTo(clickPath)">搜索商品/供应商/项目仪器</view>
 			</view>
-	  	</view>
+	  	</view> -->
 	</view>
 </template>
 
@@ -45,6 +48,7 @@
 		data() {
 			return{
 				headerType:'',
+				CustomBar:this.CustomBar,// 顶部导航栏高度
 				clickPath:'/search/pages/search/search',
 				haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
 			    statusBarHeight: 0, // 状态栏高度
@@ -139,6 +143,10 @@
 		 color: #000000;
 		 font-weight: 500;
 		 position: fixed;
+		 .logo{
+			 margin: 0 auto;
+			 display: block;
+		 }
 	}
 	.gosearch-btn{
 		height: 100%;

pages.json

@@ -560,7 +560,8 @@
 					"path": "pages/product/product-details",
 					"style": {
 						"navigationBarTitleText": "商品详情",
-						"enablePullDownRefresh":true
+						"enablePullDownRefresh":true,
+						"navigationStyle":"custom"
 					}
 				}
 			]	

pages/goods/product.vue

@@ -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 {

pages/user/order/order-pay.vue

@@ -521,7 +521,7 @@
 			.btn{
 				width: 702rpx;
 				height: 88rpx;
-				border-radius: 14rpx;
+				border-radius: 44rpx;
 				font-size: $font-size-28;
 				line-height: 88rpx;
 				color: #FFFFFF;

pages/user/order/order-payment.vue

@@ -459,7 +459,7 @@
 			.btn{
 				width: 662rpx;
 				height: 88rpx;
-				border-radius: 14rpx;
+				border-radius: 44rpx;
 				font-size: $font-size-28;
 				line-height: 88rpx;
 				color: #FFFFFF;

second/pages/product/product-details.vue

@@ -1,18 +1,36 @@
 
 <template>
-	<view class="product">
-		<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 class="product" :style="{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" 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>
 		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
@@ -145,7 +163,8 @@
 			cmParameter,
 		},
 		data(){
-			return{			
+			return{		
+				clickPath:'/search/pages/search/search-second',
 				disabledTabNavList:[{name:'相关推荐'}],
 				mode:'round',
 				iconClass:'icon-aixin',
@@ -156,6 +175,7 @@
 				current:0,
 				isShareType:'',
 				isHeaderPoduct:false,
+				isNavbarFiexd:false,
 				navbarFiexd:'none',
 				isRecommend:false,
 				isRarameter:true,
@@ -378,6 +398,7 @@
 			if(e.scrollTop>100){
 				this.headerColor = true
 				this.navbarFiexd = 'fixed'
+				this.isNavbarFiexd = true
 				this.nvabarData={							
 					showCapsule: 1, 
 					title: '商品详情', 		
@@ -385,6 +406,7 @@
 			}else{
 				this.headerColor = false
 				this.navbarFiexd = 'none'
+				this.isNavbarFiexd = false
 				this.nvabarData={
 					showCapsule: 1, 
 					title: '', 		
@@ -427,44 +449,97 @@
 	page{
 		background-color: #FFFFFF;
 	}
-	.navbar {
+	.product-topnav{
 		width: 100%;
-		height: 80rpx;
+		height: 174rpx;
 		box-sizing: border-box;
-		padding: 0 24rpx;
-		background: #fff;
-		z-index: 10;
-		display: flex;
+		background: #FFFFFF;
+		z-index: 1000;
 		position: fixed;
-		opacity: 0;
+		opacity: 1;
 		left: 0;
 		&.fixed{
-			opacity: 1;
+			animation: showFixedColor 0.1s ease-in-out both;
+		}
+		&.none{
+		   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;
-				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;
 				}
 			}
 		}