tab

pages/index/carGroup.vue

@@ -16,6 +16,14 @@
 				{{item.title}}
 			</view>
 		</view> 
+		<uni-popup ref="popup" type="bottom" background-color="#fff">
+				  <view class="popupTitle">请选择发动机</view>
+				  <view style="popupLineBox">
+					   <view @click="ckengin(item)" class="popupLine" v-for="(item,index) in engineList">{{item.engineModel}}</view>
+					 
+				  </view>
+		
+		</uni-popup>
 	</view>
 </template>
 
@@ -35,6 +43,7 @@
 				carGroupList:[],
 				iStatusBarHeight:'',
 				type:'',
+				engineList:'',
 			}
 		},
 		onLoad(opt) {
@@ -45,7 +54,10 @@
 		},
 		methods: {
 		   goItem(e){
-			  if(this.type==2){
+			  if(this.type==1){
+				  this.optdata.value=e.value
+			  		this.queryEnginemodel(e)	
+			  }else if(this.type==2){
 				  uni.navigateTo({
 				  	url:'/pages/index/gearboxOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+e.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
 				  })
@@ -56,6 +68,27 @@
 			  }
 			  
 		   },
+		   queryEnginemodel(e){
+				   this.$http('matchingByOpen/queryEnginemodel', {
+					 ids:this.optdata.id,
+					
+					},'POST').then(res => {
+						this.engineList=res.data
+						 if(this.engineList.length>1){
+						 	his.$refs.popup.open()
+						 }else{
+						   uni.navigateTo({
+							url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
+						   })
+						 }
+				   })
+		   },
+		   ckengin(item){
+		   			   console.log(item)
+		   			   uni.navigateTo({
+		   			   	url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+item.ids+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
+		   			   })
+		   },
            getmodelList(){
            	uni.showLoading({ title: '加载中'});
            	this.$http('matchingByOpen/queryCarModelGroupPackage', {
@@ -109,4 +142,24 @@
 	color: #333333;font-size: 26rpx;
 	padding: 30rpx 0;
 }
+.picker-view {
+		width: 750rpx;
+		height: 600rpx;
+		margin-top: 20rpx;
+	}
+	.popupLine {
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 28rpx;
+	    display: block;
+	}
+	.popupLineBox{
+		 padding-bottom: env(safe-area-inset-bottom);
+	}
+	.popupTitle{
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 30rpx;
+		color: #999999;
+	}
 </style>

pages/index/index.vue

@@ -53,91 +53,110 @@
 			</view>
 		</view>
 		 -->
-		 <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
-		 <view style="height: 43px;"></view>
-		 <view class="topNavBox">
-		 	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
-		 	<view class="indexnav">精准用油</view>
-		 </view>
-		 <!-- 轮播-->
-		 <view class="swpBox">
-			 <swiper class="swiperTk" circular  :autoplay="true" :interval="interval"
-			 				:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" :indicator-active-color="'#'+themeColor">
-			 	<swiper-item >
-			 		<view class="swiper-itemTk" >
-			 			<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/084CAE69-DFFC-48FC-9F82-04E94696AE56.png" mode="widthFix"></image>
-			 		</view>	
-			 	</swiper-item>
-				<swiper-item >
-					<view class="swiper-itemTk" >
-						<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/37B94D9D-5D8A-4754-9BBF-5715C1B5F665.jpg" mode="widthFix"></image>
-					</view>	
-				</swiper-item>
-			 </swiper>
-		 </view>
-		 
-		 <view class="contBox">
-			 <view class="vincar">
-				 <view class="vincarTab">
-					  <view class="vincarTabLine anVin">按VIN</view>
-					  <view class="vincarTabLine" @click="goCarModel">按车型</view>
-				 </view>
-				 <view class="inputsBox">
-					 <view class="searchInputBox" @click="goSearch">
-					 	<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
-					 	<input type="text" placeholder="输入17位VIN查询" placeholder-class="ip" class="ssinput">
-					 </view>
-					 <view class="inputsBtn">查询</view>
-				 </view>
-				 <view class="historyBox">
-					 <view class="historyLeft">
-						 <view class="historyLeftTxt">历史查询：</view>
-						 <view class="historyLeftNum" v-if="historyvin">{{historyvin}}	</view>
-						 <view class="historyLeftNum" v-else>暂无</view>
-					 </view>
-					 <view class="historyMore" @click="gohistory">更多
-					   <image src="../../static/img/lanjt.png" mode="" class="lanjt"></image>
-					 </view>
-				 </view>
+		 <view class="viewBox" v-if="tabIndex==1">
+			 <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			 <view style="height: 43px;"></view>
+			 <view class="topNavBox">
+			 	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			 	<view class="indexnav">精准用油</view>
 			 </view>
-			 
-			 <view class="productBox">
-			 		<view class="productTitle">产品列表</view>
-					<view class="productLinBox">
-						<view class="productLine">
-							<image class="productImg" src="/static/img/jiyou.png" mode=""></image>
-							<view class="productTxt" >机油</view>
-						</view>
-						<view class="productLine" @click="goCarModelType(2)">
-							<image class="productImg" src="/static/img/bsxy.png" mode=""></image>
-							<view class="productTxt" >变速箱油</view>
-						</view>
-						<view class="productLine">
-							<image class="productImg" src="/static/img/bsxglq.png" mode=""></image>
-							<view class="productTxt" >变速箱滤清器</view>
-						</view>
-						<view class="productLine">
-							<image class="productImg" src="/static/img/yusha.png" mode=""></image>
-							<view class="productTxt" >雨刮</view>
-						</view>
-					</view>
+			 <!-- 轮播-->
+			 <view class="swpBox">
+			 			 <swiper class="swiperTk" circular  :autoplay="true" :interval="interval"
+			 			 				:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" :indicator-active-color="'#'+themeColor">
+			 			 	<swiper-item >
+			 			 		<view class="swiper-itemTk" >
+			 			 			<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/084CAE69-DFFC-48FC-9F82-04E94696AE56.png" mode="widthFix"></image>
+			 			 		</view>	
+			 			 	</swiper-item>
+			 				<swiper-item >
+			 					<view class="swiper-itemTk" >
+			 						<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/37B94D9D-5D8A-4754-9BBF-5715C1B5F665.jpg" mode="widthFix"></image>
+			 					</view>	
+			 				</swiper-item>
+			 			 </swiper>
 			 </view>
 			 
+			 <view class="contBox">
+			 			 <view class="vincar">
+			 				 <view class="vincarTab">
+			 					  <view class="vincarTabLine anVin">按VIN</view>
+			 					  <view class="vincarTabLine" @click="goCarModel">按车型</view>
+			 				 </view>
+			 				 <view class="inputsBox">
+			 					 <view class="searchInputBox" @click="goSearch">
+			 					 	<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
+			 					 	<input type="text" placeholder="输入17位VIN查询" placeholder-class="ip" class="ssinput">
+			 					 </view>
+			 					 <view class="inputsBtn">查询</view>
+			 				 </view>
+			 				 <view class="historyBox">
+			 					 <view class="historyLeft">
+			 						 <view class="historyLeftTxt">历史查询：</view>
+			 						 <view class="historyLeftNum" @click="gocarDetail" v-if="historyvin">{{historyvin}}	</view>
+			 						 <view class="historyLeftNum" v-else>暂无</view>
+			 					 </view>
+			 					 <view class="historyMore" @click="gohistory">更多
+			 					   <image src="../../static/img/lanjt.png" mode="" class="lanjt"></image>
+			 					 </view>
+			 				 </view>
+			 			 </view>
+			 			 
+			 			 <view class="productBox">
+			 			 		<view class="productTitle">产品列表</view>
+			 					<view class="productLinBox">
+			 						<view class="productLine" @click="goCarModelType(1)">
+			 							<image class="productImg" src="/static/img/jiyou.png" mode=""></image>
+			 							<view class="productTxt" >机油</view>
+			 						</view>
+			 						<view class="productLine" @click="goCarModelType(2)">
+			 							<image class="productImg" src="/static/img/bsxy.png" mode=""></image>
+			 							<view class="productTxt" >变速箱油</view>
+			 						</view>
+			 						<view class="productLine">
+			 							<image class="productImg" src="/static/img/bsxglq.png" mode=""></image>
+			 							<view class="productTxt" >变速箱滤清器</view>
+			 						</view>
+			 						<view class="productLine">
+			 							<image class="productImg" src="/static/img/yusha.png" mode=""></image>
+			 							<view class="productTxt" >雨刮</view>
+			 						</view>
+			 					</view>
+			 			 </view>
+			 			 
+			 			 
+			 </view>
 			 
 		 </view>
-		 
-		
+	    <user v-if="tabIndex==2" :iStatusBarHeight="iStatusBarHeight"></user>
+		<view class="bTabBox">
+			<view class="btabLine" @click="tabFn(1)">
+				<image class="btabLineImg" v-if="tabIndex==1" src="/static/img/index1.png" mode=""></image>
+				<image class="btabLineImg" v-if="tabIndex==2" src="/static/img/index2.png" mode=""></image>
+				<view class="btabLineTxt">首页</view>
+			</view>
+			<view class="btabLine">
+				<image @click="stBtn" class="btabLineImg2" src="/static/img/vin.png" mode=""></image>
+			</view>
+			<view class="btabLine" @click="tabFn(2)">
+				<image class="btabLineImg"  v-if="tabIndex==2"  src="/static/img/user1.png" mode=""></image>
+				<image class="btabLineImg"  v-if="tabIndex==1"  src="/static/img/user2.png" mode=""></image>
+				<view class="btabLineTxt">我的</view>
+			</view>
+		</view>
 		 
 	</view>
 </template>
 
 <script>
 	import carModel from './carModel.vue'
+	import user from './user.vue'
 	export default {
 		components: {
 			carModel, //注册子组件
-			
+			user
 		},
+		//props:['iStatusBarHeight',],
 		data() {
 			return {
 				fileURl: '',
@@ -151,10 +170,13 @@
 				duration:500,
 				interval:3000,
 				historyvin:'',
+				tabIndex:1,
+				byItem:'',
 			}
 		},
 		onLoad() {
 			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+			//console.log(this.iStatusBarHeight) 
            var that=this;
 		   this.uniLogin()
           /* setTimeout(function(){
@@ -166,18 +188,22 @@
 		   this.aaa= `calc(100vh - ${bb} - ${cc})`
 		},
 		onShow() {
-				
+			
 			if(this.openId){
 				this.queryHistory()
 			}
 		},
 		methods: {
+			tabFn(num){
+				this.tabIndex=num
+			},
 			goCarModel(){
 			   uni.navigateTo({
 			   	  url:'carModel2'
 			   })	
 			},
 			goCarModelType(type){
+				
 				uni.navigateTo({
 					  url:'carModel2?type='+type
 				})
@@ -232,6 +258,7 @@
 						if(item.vin){
 							if(!this.historyvin){
 								this.historyvin=item.vin
+								this.byItem=item
 							}
 							
 						}
@@ -252,7 +279,8 @@
 					this.aaa= `calc(100vh - ${bb} - ${cc})`
 				 })
 			 },
-			 gocarDetail(e){
+			 gocarDetail(){
+				  var e=this.byItem
 				 uni.navigateTo({
 				 	url:'/pages/index/byItem?nLevelID='+e.nLevelID+'&logo='+e.logo+'&value='+e.title+'&id='+e.groupID+'&isVin='+e.ifVin+'&vin='+e.vin
 				 })
@@ -643,4 +671,33 @@ margin-top: 20rpx;
 	.historyLogoBox{
 		display: flex;align-items: center;
 	}
+	
+	.bTabBox{
+		width: 100vw;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		background: #FFFFFF;
+		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom); 
+		display: flex;
+		justify-content: space-around;
+	}
+	.btabLineImg{
+		width: 42rpx;height: 42rpx;
+	}
+	.btabLineTxt{
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #1A1A1A;
+		
+	}
+	.btabLine{
+		padding-top: 21rpx;
+	}
+	.btabLineImg2{
+		width: 140rpx;height: 140rpx;
+		margin-top: -70rpx;
+	}
 </style>

pages/index/user.vue

@@ -1,5 +1,11 @@
 <template>
 	<view class="content">
+		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+		<view style="height: 43px;" class="topH"></view>
+		<view class="topNavBox">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view class="indexnav">我的</view>
+		</view>
 		<view class="top1">
 			<view class="touxiang">
 				<image class="touxiangImg" src="/static/img/touxiang.png" mode=""></image>
@@ -9,7 +15,7 @@
 		<view class="fuwu">
 			<view class="fuwuTitle">我的服务</view>
 			<view class="lineBox">
-				<view class="line">
+				<view class="line" @click="gohistory">
 					<image src="/static/img/lscx.png" mode="" class="lineImg"></image>
 					<view class="lineTxt">历史查询</view>
 				</view>
@@ -21,13 +27,14 @@
 <script>
 	
 	export default {
+		props:['iStatusBarHeight',],
 		components: {
 		
 			
 		},
 		data() {
 			return {
-				
+				iStatusBarHeight:'',
 			}
 		},
 		onLoad() {
@@ -37,7 +44,11 @@
 		
 		},
 		methods: {
-		
+		   gohistory(){
+			 uni.navigateTo({
+				url:'/pages/index/history'
+			 })
+		   },
 			
 		},
 		onShareAppMessage(){
@@ -56,6 +67,28 @@
 	background: #FF4F00;
 	border-radius: 0 0 5% 5%;
 }
+.indexnav{
+		height: 44px;
+		line-height: 44px;
+		text-align: center;
+		font-size: 36rpx;
+	/* 	color: #FFFFFF; */
+	}
+.topNavBox{
+	background: #FF4F00;
+	width: 750rpx;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 111;
+    color: #FFF;
+}
+.topH{
+		background: #FF4F00;
+}
+.status_bar{
+	background: #FF4F00;
+}
 .touxiangImg{
 	width: 90rpx;height: 90rpx;
 }