样式修改

manifest.json

@@ -55,12 +55,12 @@
             "urlCheck" : false
         },
         "usingComponents" : true,
-		"plugins":{
-		"player": {
-			"version": "2.1.15",
-			"provider": "wxa75efa648b60994b"
-		}
-		}
+        "plugins" : {
+            "player" : {
+                "version" : "2.1.15",
+                "provider" : "wxa75efa648b60994b"
+            }
+        }
     },
     "mp-alipay" : {
         "usingComponents" : true

pages.json

@@ -116,6 +116,27 @@
 				"navigationBarTitleText": "变速箱滤清器",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/index/goodsList",
+			"style": {
+				"navigationBarTitleText": "适配蓄电池",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/installation",
+			"style": {
+				"navigationBarTitleText": "电池安装",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/sgoodsList",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	/* "tabBar": {

pages/index/byItem.vue

@@ -160,7 +160,7 @@
 		   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
+			   	url:'/pages/index/goodsList?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+item.ids+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
 			   })
 		   },
            goEngineOil(){
@@ -168,7 +168,7 @@
 				  this.$refs.popup.open()
 			   }else{
 				   uni.navigateTo({
-				   	url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+this.optdata.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
+				   	url:'/pages/index/goodsList?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+this.optdata.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
 				   })
 			   }
 			   

pages/index/carConfiguration.vue

@@ -21,46 +21,119 @@
 		 <view class="carName">{{info.manufactor}}-{{info.carSeries}}-{{info.salesName}}</view>
 	  </view>
 	  <view class="box" v-if="loading">
-		  <view class="line">
-			  <view class="lineLeft">品牌</view>
-			  <view class="lineRight">{{info.brand}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">车型</view>
-			  <view class="lineRight">{{info.carModel}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">销售名称</view>
-			  <view class="lineRight">{{info.salesName}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">款型年份</view>
-			  <view class="lineRight">{{info.listedYear}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">生产年份</view>
-			  <view class="lineRight">{{info.productionYear}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">停产年份</view>
-			  <view class="lineRight">{{info.discontinuationYear}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">排量</view>
-			  <view class="lineRight">{{info.displacement}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">进气形式</view>
-			  <view class="lineRight">{{info.intakeForm}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">燃油类型</view>
-			  <view class="lineRight">{{info.fuelLabeling}}</view>
-		  </view>
-		  <view class="line">
-			  <view class="lineLeft">发动机型号</view>
-			  <view class="lineRight">{{info.engineDescription}}</view>
-		  </view>
+		    <view class="line">
+		  			  <view class="lineLeft">厂家</view>
+		  			  <view class="lineRight">{{info.manufactor}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">品牌</view>
+		  			  <view class="lineRight">{{info.brand}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">车型</view>
+		  			  <view class="lineRight">{{info.carModel}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">销售名称</view>
+		  			  <view class="lineRight">{{info.salesName}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">款型年份</view>
+		  			  <view class="lineRight">{{info.listedYear}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">上市年份</view>
+		  		  			  <view class="lineRight">{{info.productionYear}}</view>
+		  		  </view>
+		  		 
+		  		  <view class="line">
+		  			  <view class="lineLeft">停产年份</view>
+		  			  <view class="lineRight">{{info.discontinuationYear}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">排量</view>
+		  			  <view class="lineRight">{{info.displacement}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  		<view class="lineLeft">底盘号</view>
+		  		  		<view class="lineRight">{{info.chassisNum}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">进气形式</view>
+		  			  <view class="lineRight">{{info.intakeForm}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">燃油类型</view>
+		  			  <view class="lineRight">{{info.fuelLabeling}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">发动机型号</view>
+		  			  <view class="lineRight">{{info.engineDescription}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  				  <view class="lineLeft">发动机启停技术</view>
+		  				  <view class="lineRight">{{info.startStop}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  				  <view class="lineLeft">变速箱描述</view>
+		  				  <view class="lineRight">{{info.transmissionDescription}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">档位数</view>
+		  			  <view class="lineRight">{{info.gearsNum}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">排放标准</view>
+		  		  			  <view class="lineRight">{{info.emissionStandard}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">进气形式</view>
+		  		  			  <view class="lineRight">{{info.intakeForm}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">气缸容积</view>
+		  			  <view class="lineRight">{{info.cylinderVolume}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  			  <view class="lineLeft">最大功率</view>
+		  			  <view class="lineRight">{{info.maxPower}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">最大马力</view>
+		  		  			  <view class="lineRight">{{info.maxHorsepower}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">最大功率</view>
+		  		  			  <view class="lineRight">{{info.maxHorsepower}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">驱动形式</view>
+		  		  			  <view class="lineRight">{{info.drivingForm}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">变速箱类型</view>
+		  		  			  <view class="lineRight">{{info.transmissionType}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">车身型式</view>
+		  		  			  <view class="lineRight">{{info.bodyType}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">车门数</view>
+		  		  			  <view class="lineRight">{{info.doorsNum}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">气缸排列形式</view>
+		  		  			  <view class="lineRight">{{info.cylinderArrangement}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">气缸数</view>
+		  		  			  <view class="lineRight">{{info.cylinderNum}}</view>
+		  		  </view>
+		  		  <view class="line">
+		  		  			  <view class="lineLeft">国产合资进口类型</view>
+		  		  			  <view class="lineRight">{{info.domesticJointventureImportedType}}</view>
+		  		  </view>
 	  </view>
 	  
 	</view>

pages/index/carGroup.vue

@@ -55,11 +55,18 @@
 		methods: {
 		   goItem(e){
 			   this.optdata.nLevelID=e.carModelInfo.nLevelID
-			  if(this.type==1){
+			 if(this.type==1){
 				  this.optdata.value=e.value
 				  
 			  		this.queryEnginemodel(e)	
-			  }else if(this.type==2){
+			  }else{
+				  this.optdata.value=e.value
+				  uni.navigateTo({
+				  	url:'/pages/index/goodsList?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin+'&type='+this.type
+				  })
+			  }
+			  
+			  /* 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
 				  })
@@ -78,7 +85,7 @@
 				 uni.navigateTo({
 				 	url:'/pages/index/byItem?nLevelID='+e.carModelInfo.nLevelID+'&logo='+this.optdata.logo+'&manufactor='+this.optdata.manufactor+'&carSeries='+this.optdata.carSeries+'&brand='+this.optdata.brand+'&value='+e.value+'&id='+e.id
 				 })  
-			  }
+			  } */
 			  
 		   },
 		   queryEnginemodel(e){
@@ -91,7 +98,7 @@
 						 	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
+							url:'/pages/index/goodsList?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin+'&type=1'
 						   })
 						 }
 				   })
@@ -99,7 +106,7 @@
 		   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
+		   			   	url:'/pages/index/goodsList?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+item.ids+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
 		   			   })
 		   },
            getmodelList(){

pages/index/goodsList.vue

@@ -0,0 +1,432 @@
+<template>
+	<view class="content">
+		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'适配蓄电池'"></homenav>
+		<view class="box">
+			<view class="historyLine">
+				<view class="historyLogoBox">
+					<image :src="optdata.logo" mode="" class="historylinecarImg"></image>
+				</view>
+				<view>
+					<view class="historylinecar">{{optdata.value}}</view>
+					<view class="historyLineVin" v-if="optdata.isVin==1"><!--  -->
+						<view class="vinms">VIN</view>
+						<view class="vinNum">{{optdata.vin}}</view>
+						<view class="copyVin">复制</view>
+					</view>
+				</view>
+				
+			</view>
+			<view class="topBtnBox">
+				<view class="topBtn" @click="goinstallation">电池安装</view>
+				<view class="topBtn" @click="gopz">车辆详情</view>
+			</view>
+		</view>
+		<view class="cont">
+			<!-- <view class="topBox">
+				<view class="topLine" @click="goby">
+					<image src="../../static/img/icon_baoyang.png" mode="" class="toplineImg"></image>
+					<view class="topName">保养周期</view>
+				</view>
+				<view class="topsx"></view>
+				<view class="topLine" @click="gopz">
+					<image src="../../static/img/icon_cheliang.png" mode="" class="toplineImg"></image>
+					<view class="topName">车辆配置</view>
+				</view>
+			</view> -->
+			<view class="jiyouBox" v-if="loading">
+				 <!-- <view class="modelRemarkBox">
+					<view class="modelRemarkLine" @click="modelRemarkTab(1)" :class="{activeMr:modelRemarkNum==1}">0-10万公里</view>
+					<view class="modelRemarkLine" @click="modelRemarkTab(2)" :class="{activeMr:modelRemarkNum==2}">10万公里以上</view>
+				</view> -->
+				<view class="brandBox">
+					<view class="brandBtn" :class="{brandActive:type==1}" @click="ckBrand(1)">阿诺德</view>
+					<view class="brandBtn" :class="{brandActive:type==2}" @click="ckBrand(2)">鸿雁</view>
+					<view class="brandBtn" :class="{brandActive:type==3}" @click="ckBrand(3)">三冠</view>
+					<view class="brandBtn" :class="{brandActive:type==4}" @click="ckBrand(4)">威斯康</view>
+				</view>
+				<view class="jylineBox">
+					<view class="jyline" v-for="(item,index) in 5" @click="godetail(item)"><!-- MaintainPartList -->
+						<view class="jyimgBox">
+							<!-- <image v-if="item.imgs.split(',')[0]" :src="item.imgs.split(',')[0]" mode="aspectFit" class="jyimg"></image> -->
+							<image  src="../../static/img/noimg.png" mode="aspectFit" class="jyimg"></image>
+						</view>
+						<view class="lineRgiht">
+							<view class="goodsName">品牌 规格型号</view>
+							<view class="goodsMs">长了就换行显示，不要省略,长了就换行显示，不要省略,长了就换行显示，不要省略</view>
+						</view>
+						
+					</view>
+				</view>
+				<nodata v-if="MaintainPartList.length==0"></nodata>
+			</view>
+			
+			<!-- <view class="jiyouBox"  v-if="loading">
+				<view class="jiyouTop">
+					<view class="jiyoutopTitle">原厂售后推荐</view>
+				</view>
+				<view class="salesLine">
+					<view class="salesLeft">建议加注量</view>
+					<view class="salesRight">{{oilusage}}</view>
+				</view>
+				<view class="salesLine">
+					<view class="salesLeft">规格型号</view>
+					<view class="salesRight">{{spec}}</view>
+				</view>
+			</view> -->
+
+
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	import homenav from "../../components/homenav/nav.vue"
+	export default {
+		components: {
+            nodata,homenav
+		},
+		data() {
+			return {
+               optdata:'',
+			   MaintainPartList:[],
+			   oilusage:'',
+			   iStatusBarHeight:'',
+			   loading:false,
+			   spec:'',
+			   modelRemarkNum:1,
+			   oldMaintainPartList:'',
+			   type:'',
+			}
+		},
+		onLoad(opt) {
+			  console.log(opt)
+			   this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+              this.optdata=opt;
+			  if(this.optdata.type){
+				  this.type=this.optdata.type
+			  }
+			  this.queryMaintainPartList()
+			  this.queryOilInfoByGroupID()
+		},
+		methods: {
+		    ckBrand(num){
+			  this.type=num	
+			},
+			goinstallation(){
+			   uni.navigateTo({
+			   	url:'installation?groupIds='+this.optdata.id+'&componentId='
+			   })	
+			},
+			 modelRemarkTab(num){
+				 this.modelRemarkNum=num
+				 if(num == 1){
+					 var name='0-10万公里'
+					 var arr=[]
+					 this.oldMaintainPartList.forEach(item=>{
+						 var state=false
+						 item.ruleList.forEach(v=>{
+							 if(v.version == name){
+								 state=true
+							 }
+						 })
+						 if(state){
+						 	 arr.push(item)
+						 }
+					 })
+					
+					 this.MaintainPartList=arr
+					  //this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
+				 }else{
+					 var name='10万公里以上'
+					 var arr=[]
+					this.oldMaintainPartList.forEach(item=>{
+						 var state=false
+						 item.ruleList.forEach(v=>{
+							 if(v.version == name){
+								 state=true
+							 }
+						 })
+						 if(state){
+							 arr.push(item)
+						 }
+					})
+					 this.MaintainPartList=arr 
+					 //this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
+				 }
+			 },
+             queryMaintainPartList(){
+				 this.loading=false;
+				 uni.showLoading({ title: '加载中'});
+				 this.$http('partsByOpen/queryMaintainPartList', {
+				   groupId:this.optdata.id,
+				   componentCode:'015001',
+				   
+				  },'POST').then(res => {
+					  this.loading=true;
+				 	  uni.hideLoading();
+				 	  this.MaintainPartList=res.data
+					  this.oldMaintainPartList=res.data
+					 // this.modelRemarkTab(1)
+				 })
+			 },
+			 queryOilInfoByGroupID(){
+				 var that=this;
+				 this.$http('matchingByOpen/queryOilInfoByGroupID', {
+				  // mileage:'30000',
+				   groupId:this.optdata.id,
+				   
+				  },'POST').then(res => {
+				 		var arr = res.data
+						arr.forEach(item=>{
+							if(item[0]=='机油'){
+								that.oilusage=item[2]
+								that.spec=item[1]
+							}
+							
+						})
+						console.log(that.oilusage)
+				 })
+			 },
+			 goby(){
+				 uni.navigateTo({
+				 	url:'/pages/index/maintenance?nLevelID='+this.optdata.nLevelID+'&id='+this.optdata.id
+				 })
+			 },
+			 godetail(e){
+				 uni.navigateTo({
+				 	url:'/pages/index/goodsDetail?id='+e.id
+				 })
+			 },
+			 gopz(){
+				 uni.navigateTo({
+				 	url:'/pages/index/carConfiguration?nLevelID='+this.optdata.nLevelID
+				 })
+			 }
+		}
+	}
+</script>
+
+<style scoped>
+.salesLine{
+	display: flex;
+	font-size: 24rpx;
+	line-height: 30rpx;
+	padding: 20rpx 0;
+}
+.salesLeft{
+	width: 200rpx;
+	color: #999999;
+}
+	.content {
+		min-height: 100vh;
+		background: #F4F5F7;
+	}
+    .jyimgBox{
+		border: 1px solid #EEEEEE;    width: 90rpx;border-radius: 10rpx;
+		height: 90rpx;
+	}
+	.box {
+		padding: 0 24rpx;
+		background: #ffffff;
+	}
+
+	.historylinecarImg{
+		width: 54rpx;
+		height: 54rpx;
+	}
+	.historyLogoBox{
+			display: flex;align-items: center;
+			padding-right: 14rpx;
+		}
+
+	.historylinecar {
+		font-weight: 500;
+		font-size: 26rpx;
+		color: #1A1A1A;
+		line-height: 46rpx;
+		width: 636rpx;
+	}
+
+	.historyLine {
+		 display: flex;
+		padding: 30rpx 0;
+		/* border-top: 1rpx solid #EEEEEE; */
+		padding-bottom: 16rpx;
+	}
+
+	.cont {
+		/* padding: 30rpx 24rpx; */
+	}
+	.toplineImg{
+		width: 35rpx;
+		height: 34rpx;
+	}
+	.topName{
+		line-height: 34rpx;font-weight: 400;
+color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
+	}
+	.topBox{
+		width: 702rpx;
+		height: 98rpx;
+		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
+		border-radius: 16rpx;
+		display: flex;justify-content: center;
+	}
+	.topsx{
+		width: 2rpx;background: #ffffff;
+		margin-left: 85rpx;margin-right: 85rpx;
+		height: 54rpx;margin-top: 22rpx;
+	}
+	.topLine{
+		display: flex;padding-top: 34rpx;
+	}
+	.jiyouTop{
+		display: flex;justify-content: space-between;
+	}
+	.jiyouBox{
+		margin-top: 30rpx;
+		background: #ffffff;
+		padding: 30rpx;
+	}
+	.jiyoutopTitle{
+		font-weight: 500;font-size: 28rpx;
+		color: #1A1A1A;
+		line-height: 40rpx;
+	}
+	.jyzl{
+		font-weight: 400;line-height: 40rpx;
+		color: #666666;font-size: 24rpx;
+	}
+	.jyimg{
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 10rpx;
+	}
+	.jyline{
+		padding-top: 30rpx;
+		display: flex;
+	}
+	.jyName{
+		font-weight: 400;font-size: 22rpx;
+		color: #1A1A1A;
+		line-height:36rpx ;
+		overflow: hidden; 
+		text-overflow: ellipsis; 
+		display: -webkit-box; 
+		-webkit-box-orient: vertical; 
+		-webkit-line-clamp: 2;
+		padding-top: 10rpx;
+	}
+	.best{
+		color: #FF4F00;border-radius: 6rpx;
+		padding: 0 8rpx;border: 1px solid #FF4F00;
+	}
+	.jylineBox{
+		/* display: flex;justify-content: space-between;flex-wrap: wrap; */
+	}
+	.historyLineVin{
+		display: flex;background: #ffffff;
+	}
+	.historyLineCar{
+		display: flex;justify-content: space-between;
+	}
+	.vinNum{
+		font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
+		color: #999999;line-height: 30rpx;
+	}
+	.vinms{
+		width: 38rpx;
+		height: 26rpx;
+		background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
+		border-radius: 4rpx;
+		text-align: center;
+		line-height: 26rpx;
+		font-weight: 600;
+		color: #FFFFFF;
+		font-size: 18rpx;
+		margin-top: 2rpx;
+	}
+	.ruleListSpan{
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #999999;
+		    line-height: 36rpx;
+			padding-right: 6rpx;
+	}
+	.modelRemarkBox{
+		display: flex;padding-bottom: 20rpx;
+	}
+	.modelRemarkLine{
+		background: #eee;
+		padding: 6rpx 20rpx;
+		border-radius: 6rpx;
+		margin-right: 30rpx;
+		font-size: 26rpx;
+	}
+	.activeMr{
+		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
+		color: #FFF;
+	}
+	.topBtnBox{
+		display: flex;padding-bottom: 30rpx;
+		padding-left: 70rpx;
+	}
+	.topBtn{
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #F19D01;
+		width: 180rpx;
+		height: 56rpx;
+		border-radius: 28rpx;
+		border: 1px solid #F19D01;
+		line-height: 56rpx;
+		text-align: center;
+		margin-right: 30rpx;
+	}
+	.copyVin{
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #3C3C3C;
+		width: 62rpx;
+		height: 34rpx;
+		background: #F4F5F7;
+		border-radius: 4rpx;
+		line-height: 34rpx;
+		text-align: center;
+		margin-left: 16rpx;
+	}
+	.brandBox{
+		display: flex;
+	}
+	.brandBtn{
+		font-size: 26rpx;
+		color: #3C3C3C;
+		padding: 10rpx 20rpx;
+		background: #F6F6F6;
+		border-radius: 6rpx;
+		margin-right: 20rpx;
+	}
+	.lineRgiht{
+		padding-left: 24rpx;
+	}
+	.goodsName{
+		font-size: 28rpx;
+		color: #3C3C3C;
+		line-height: 40rpx;
+	}
+	.goodsMs{
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 33rpx;
+		padding-top: 10rpx;
+	}
+	.brandActive{
+		background: rgba(255,79,0,0.08);
+		border-radius: 6rpx;
+		color: #FF4F00;
+	}
+</style>

pages/index/index.vue

@@ -58,7 +58,7 @@
 			 <view style="height: 43px;"></view>
 			 <view class="topNavBox">
 			 	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
-			 	<view class="indexnav">精准用油</view>
+			 	<view class="indexnav">巨江电源</view>
 			 </view>
 			 <!-- 轮播-->
 			 <view class="swpBox">
@@ -66,7 +66,7 @@
 			 			 				: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>
+			 			 			<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/06A3DFF0-2663-4CF2-B9F3-2AA99C9C59EA.png" mode="widthFix"></image>
 			 			 		</view>	
 			 			 	</swiper-item>
 			 				<swiper-item >
@@ -80,17 +80,25 @@
 			 <view class="contBox">
 			 			 <view class="vincar">
 			 				 <view class="vincarTab">
-			 					  <view class="vincarTabLine anVin">按VIN</view>
-			 					  <view class="vincarTabLine" @click="goCarModel">按车型</view>
+			 					  <view class="vincarTabLine anVin " :class="{vincarActive:vincarActiveNum==1}" @click="vincarActiveFn(1)">按VIN</view>
+			 					  <view class="vincarTabLine" style="margin-right: 50rpx;" @click="goCarModel">按车型</view>
+								  <view class="vincarTabLine" :class="{vincarActive:vincarActiveNum==3}" @click="vincarActiveFn(3)">按商品</view>
 			 				 </view>
-			 				 <view class="inputsBox">
+			 				 <view class="inputsBox" v-if="vincarActiveNum==1">
 			 					 <view class="searchInputBox" @click="goSearch">
 			 					 	<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
 			 					 	<input type="text" placeholder="请输入车辆品牌、车系或VIN码" placeholder-class="ip" class="ssinput">
 			 					 </view>
 			 					 <view class="inputsBtn">查询</view>
 			 				 </view>
-			 				 <view class="historyBox" >
+							 <view class="inputsBox" v-if="vincarActiveNum==3">
+									 <view class="searchInputBox" @click="goSgoods">
+										<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
+										<input type="text" placeholder="请输入品牌" placeholder-class="ip" class="ssinput">
+									 </view>
+									 <view class="inputsBtn">查询</view>
+							 </view>
+			 				 <view class="historyBox"  v-if="vincarActiveNum==1">
 			 					 <view class="historyLeft" >
 			 						 <view class="historyLeftTxt">历史查询：</view>
 									 <view v-if="historyvinLoding">
@@ -105,24 +113,24 @@
 			 				 </view>
 			 			 </view>
 			 			 
-			 			 <view class="productBox">
+			 			 <view class="productBox"  v-if="vincarActiveNum==1">
 			 			 		<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>
+			 							<image class="productImg" src="/static/img/and.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>
+			 							<image class="productImg" src="/static/img/hy.png" mode=""></image>
+			 							<view class="productTxt" >鸿雁</view>
 			 						</view>
 			 						<view class="productLine" @click="goCarModelType(3)">
-			 							<image class="productImg" src="/static/img/bsxglq.png" mode=""></image>
-			 							<view class="productTxt" >变速箱滤清器</view>
+			 							<image class="productImg" src="/static/img/sg.png" mode=""></image>
+			 							<view class="productTxt" >三冠</view>
 			 						</view>
 			 						<view class="productLine" @click="goCarModelType(4)">
-			 							<image class="productImg" src="/static/img/yusha.png" mode=""></image>
-			 							<view class="productTxt" >雨刮</view>
+			 							<image class="productImg" src="/static/img/wsk.png" mode=""></image>
+			 							<view class="productTxt" >威斯康</view>
 			 						</view>
 			 					</view>
 			 			 </view>
@@ -176,6 +184,7 @@
 				tabIndex:1,
 				byItem:'',
 				historyvinLoding:false,
+				vincarActiveNum:1,
 			}
 		},
 		onLoad() {
@@ -198,6 +207,14 @@
 			}
 		},
 		methods: {
+			vincarActiveFn(num){
+				this.vincarActiveNum=num
+			},
+			goSgoods(){
+				uni.navigateTo({
+					  url:'sgoodsList'
+				})
+			},
 			tabFn(num){
 				this.tabIndex=num
 			},
@@ -461,7 +478,7 @@ margin-top: 20rpx;
 	display: flex;justify-content: space-between;
 }
 .productImg{
-	width: 90rpx;height: 90rpx;
+	width: 125rpx;height: 44rpx;
 }
 .productLine{
 	text-align: center;
@@ -471,6 +488,7 @@ margin-top: 20rpx;
 	text-align: center;
 	font-size: 26rpx;
 	color: #1A1A1A;
+	padding-top: 22rpx;
 }
 .vincar{
 	background: #FFFFFF;
@@ -488,9 +506,12 @@ margin-top: 20rpx;
 .anVin{
 	font-weight: 500;
 	font-size: 28rpx;
-	color: #FF4F00;
+	
 	margin-right: 50rpx;
-	border-bottom: 4rpx solid  #FF4F00;
+	
+}
+.vincarActive{
+	color: #FF4F00;border-bottom: 4rpx solid  #FF4F00;
 }
 .inputsBox{
 	border-radius: 10rpx;

pages/index/installation.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="content">
+		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'电池安装'"></homenav>
+	  <view class="box">
+		 <video style="width:750rpx;" class="edui-faked-video twtcs" :src="videoUrl" width="420" height="280" enable-danmu danmu-btn controls></video>
+		  
+	  </view>
+	</view>
+</template>
+
+<script>
+	import homenav from "../../components/homenav/nav.vue"
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			homenav,nodata
+		},
+		data() {
+			return {
+				videoUrl:"https://66km.oss-cn-beijing.aliyuncs.com/yanghuziliao/jiyou/%E6%AC%A7%E6%B4%B2%E7%BB%B4%E4%BF%AE%E6%A0%87%E5%87%86%E6%8D%A2%E6%B2%B9SOP%E6%B5%81%E7%A8%8B.mp4",
+				historyList:[],
+				iStatusBarHeight:'',
+				loading:false,
+			}
+		},
+		onLoad(opt) {
+			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+           // this.queryHistory()
+		},
+		methods: {
+			goDetail(e){
+				uni.navigateTo({
+					url:'/pages/index/byItem?nLevelID='+e.nLevelID+'&logo='+e.logo+'&value='+e.title+'&id='+e.groupID+'&isVin='+e.ifVin+'&vin='+e.vin
+				}) 
+			},
+           queryHistory(){
+			 this.loading=false;
+			 this.$http2('queryHistory', {
+			   
+			  
+			  },'POST').then(res => {
+					this.loading=true;		
+					this.historyList=res.data
+			 })
+           },
+		}
+	}
+</script>
+
+<style scoped>
+.box{
+	
+}
+.historylinecarImg{
+	width: 54rpx;
+	height: 54rpx;
+}
+.historylinecar{
+	font-weight: 400;font-size: 26rpx;
+	color: #1A1A1A;
+	line-height: 46rpx;width: 636rpx;
+}
+.historyLine{
+	
+	padding: 30rpx 0;border-top: 1rpx solid #EEEEEE;
+}
+.historyLineCar{
+	display: flex;justify-content: space-between;
+}
+.vinms{
+	width: 38rpx;
+	height: 26rpx;
+	background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
+	border-radius: 4rpx;
+	text-align: center;
+	line-height: 26rpx;
+	font-weight: 600;
+	color: #FFFFFF;
+	font-size: 18rpx;
+	margin-top: 2rpx;
+}
+.historyLineVin{
+	display: flex;
+}
+.vinNum{
+	font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
+	color: #999999;line-height: 30rpx;
+}
+.historyLogoBox{
+		display: flex;align-items: center;
+	}
+</style>

pages/index/sgoodsList.vue

@@ -0,0 +1,409 @@
+<template>
+	<view class="content">
+		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'搜索'"></homenav>
+	<view class="sTopBox">
+			  <view class="searchInputBox" >
+			  	<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
+			  	<input v-model="value" type="text"  placeholder="请输入商品" 
+				placeholder-class="ip" class="ssinput" @confirm="searchFn" focus>
+				<image src="../../static/img/icon_search_del.png" mode="" class="search_del" @click="searchDel"></image>
+			  </view>
+			  <view class="searchBtn" @click="searchFn">
+			  	搜索
+			  </view>
+	</view>
+		<view class="cont">
+			
+			<view class="jiyouBox" v-if="loading">
+				
+				<view class="jylineBox">
+					<view class="jyline" v-for="(item,index) in 5" @click="godetail(item)"><!-- MaintainPartList -->
+						<view class="jyimgBox">
+							<!-- <image v-if="item.imgs.split(',')[0]" :src="item.imgs.split(',')[0]" mode="aspectFit" class="jyimg"></image> -->
+							<image  src="../../static/img/noimg.png" mode="aspectFit" class="jyimg"></image>
+						</view>
+						<view class="lineRgiht">
+							<view class="goodsName">品牌 规格型号</view>
+							<view class="goodsMs">长了就换行显示，不要省略,长了就换行显示，不要省略,长了就换行显示，不要省略</view>
+						</view>
+						
+					</view>
+				</view>
+				<nodata v-if="MaintainPartList.length==0"></nodata>
+			</view>
+			
+			
+
+
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	import homenav from "../../components/homenav/nav.vue"
+	export default {
+		components: {
+            nodata,homenav
+		},
+		data() {
+			return {
+               optdata:'',
+			   MaintainPartList:[],
+			   oilusage:'',
+			   iStatusBarHeight:'',
+			   loading:false,
+			   spec:'',
+			   modelRemarkNum:1,
+			   oldMaintainPartList:'',
+			}
+		},
+		onLoad(opt) {
+			  console.log(opt)
+			   this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+              this.optdata=opt;
+			  this.queryMaintainPartList()
+			  this.queryOilInfoByGroupID()
+		},
+		methods: {
+			goinstallation(){
+			   uni.navigateTo({
+			   	url:'installation?groupIds='+this.optdata.id+'&componentId='
+			   })	
+			},
+			 modelRemarkTab(num){
+				 this.modelRemarkNum=num
+				 if(num == 1){
+					 var name='0-10万公里'
+					 var arr=[]
+					 this.oldMaintainPartList.forEach(item=>{
+						 var state=false
+						 item.ruleList.forEach(v=>{
+							 if(v.version == name){
+								 state=true
+							 }
+						 })
+						 if(state){
+						 	 arr.push(item)
+						 }
+					 })
+					
+					 this.MaintainPartList=arr
+					  //this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
+				 }else{
+					 var name='10万公里以上'
+					 var arr=[]
+					this.oldMaintainPartList.forEach(item=>{
+						 var state=false
+						 item.ruleList.forEach(v=>{
+							 if(v.version == name){
+								 state=true
+							 }
+						 })
+						 if(state){
+							 arr.push(item)
+						 }
+					})
+					 this.MaintainPartList=arr 
+					 //this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
+				 }
+			 },
+             queryMaintainPartList(){
+				 this.loading=false;
+				 uni.showLoading({ title: '加载中'});
+				 this.$http('partsByOpen/queryMaintainPartList', {
+				   groupId:this.optdata.id,
+				   componentCode:'015001',
+				   
+				  },'POST').then(res => {
+					  this.loading=true;
+				 	  uni.hideLoading();
+				 	  this.MaintainPartList=res.data
+					  this.oldMaintainPartList=res.data
+					 // this.modelRemarkTab(1)
+				 })
+			 },
+			 queryOilInfoByGroupID(){
+				 var that=this;
+				 this.$http('matchingByOpen/queryOilInfoByGroupID', {
+				  // mileage:'30000',
+				   groupId:this.optdata.id,
+				   
+				  },'POST').then(res => {
+				 		var arr = res.data
+						arr.forEach(item=>{
+							if(item[0]=='机油'){
+								that.oilusage=item[2]
+								that.spec=item[1]
+							}
+							
+						})
+						console.log(that.oilusage)
+				 })
+			 },
+			 goby(){
+				 uni.navigateTo({
+				 	url:'/pages/index/maintenance?nLevelID='+this.optdata.nLevelID+'&id='+this.optdata.id
+				 })
+			 },
+			 godetail(e){
+				 uni.navigateTo({
+				 	url:'/pages/index/goodsDetail?id='+e.id
+				 })
+			 },
+			 gopz(){
+				 uni.navigateTo({
+				 	url:'/pages/index/carConfiguration?nLevelID='+this.optdata.nLevelID
+				 })
+			 }
+		}
+	}
+</script>
+
+<style scoped>
+.salesLine{
+	display: flex;
+	font-size: 24rpx;
+	line-height: 30rpx;
+	padding: 20rpx 0;
+}
+.salesLeft{
+	width: 200rpx;
+	color: #999999;
+}
+	.content {
+		/* min-height: 100vh;
+		background: #F4F5F7; */
+	}
+    .jyimgBox{
+		border: 1px solid #EEEEEE;    width: 90rpx;border-radius: 10rpx;
+		height: 90rpx;
+	}
+	.box {
+		padding: 0 24rpx;
+		background: #ffffff;
+	}
+
+	.historylinecarImg{
+		width: 54rpx;
+		height: 54rpx;
+	}
+	.historyLogoBox{
+			display: flex;align-items: center;
+			padding-right: 14rpx;
+		}
+
+	.historylinecar {
+		font-weight: 500;
+		font-size: 26rpx;
+		color: #1A1A1A;
+		line-height: 46rpx;
+		width: 636rpx;
+	}
+
+	.historyLine {
+		 display: flex;
+		padding: 30rpx 0;
+		/* border-top: 1rpx solid #EEEEEE; */
+		padding-bottom: 16rpx;
+	}
+
+	.cont {
+		/* padding: 30rpx 24rpx; */
+	}
+	.toplineImg{
+		width: 35rpx;
+		height: 34rpx;
+	}
+	.topName{
+		line-height: 34rpx;font-weight: 400;
+color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
+	}
+	.topBox{
+		width: 702rpx;
+		height: 98rpx;
+		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
+		border-radius: 16rpx;
+		display: flex;justify-content: center;
+	}
+	.topsx{
+		width: 2rpx;background: #ffffff;
+		margin-left: 85rpx;margin-right: 85rpx;
+		height: 54rpx;margin-top: 22rpx;
+	}
+	.topLine{
+		display: flex;padding-top: 34rpx;
+	}
+	.jiyouTop{
+		display: flex;justify-content: space-between;
+	}
+	.jiyouBox{
+		
+		background: #ffffff;
+		padding: 30rpx;
+		padding-top: 0;
+	}
+	.jiyoutopTitle{
+		font-weight: 500;font-size: 28rpx;
+		color: #1A1A1A;
+		line-height: 40rpx;
+	}
+	.jyzl{
+		font-weight: 400;line-height: 40rpx;
+		color: #666666;font-size: 24rpx;
+	}
+	.jyimg{
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 10rpx;
+	}
+	.jyline{
+		padding-bottom: 24rpx;
+		display: flex;
+		border-bottom: 1px solid #eaeaea;
+		padding-top: 24rpx;
+	}
+	.jyName{
+		font-weight: 400;font-size: 22rpx;
+		color: #1A1A1A;
+		line-height:36rpx ;
+		overflow: hidden; 
+		text-overflow: ellipsis; 
+		display: -webkit-box; 
+		-webkit-box-orient: vertical; 
+		-webkit-line-clamp: 2;
+		padding-top: 10rpx;
+	}
+	.best{
+		color: #FF4F00;border-radius: 6rpx;
+		padding: 0 8rpx;border: 1px solid #FF4F00;
+	}
+	.jylineBox{
+		/* display: flex;justify-content: space-between;flex-wrap: wrap; */
+	}
+	.historyLineVin{
+		display: flex;background: #ffffff;
+	}
+	.historyLineCar{
+		display: flex;justify-content: space-between;
+	}
+	.vinNum{
+		font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
+		color: #999999;line-height: 30rpx;
+	}
+	.vinms{
+		width: 38rpx;
+		height: 26rpx;
+		background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
+		border-radius: 4rpx;
+		text-align: center;
+		line-height: 26rpx;
+		font-weight: 600;
+		color: #FFFFFF;
+		font-size: 18rpx;
+		margin-top: 2rpx;
+	}
+	.ruleListSpan{
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #999999;
+		    line-height: 36rpx;
+			padding-right: 6rpx;
+	}
+	.modelRemarkBox{
+		display: flex;padding-bottom: 20rpx;
+	}
+	.modelRemarkLine{
+		background: #eee;
+		padding: 6rpx 20rpx;
+		border-radius: 6rpx;
+		margin-right: 30rpx;
+		font-size: 26rpx;
+	}
+	.activeMr{
+		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
+		color: #FFF;
+	}
+	.topBtnBox{
+		display: flex;padding-bottom: 30rpx;
+		padding-left: 70rpx;
+	}
+	.topBtn{
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #F19D01;
+		width: 180rpx;
+		height: 56rpx;
+		border-radius: 28rpx;
+		border: 1px solid #F19D01;
+		line-height: 56rpx;
+		text-align: center;
+		margin-right: 30rpx;
+	}
+	.copyVin{
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #3C3C3C;
+		width: 62rpx;
+		height: 34rpx;
+		background: #F4F5F7;
+		border-radius: 4rpx;
+		line-height: 34rpx;
+		text-align: center;
+		margin-left: 16rpx;
+	}
+	.brandBox{
+		display: flex;
+	}
+	.brandBtn{
+		font-size: 26rpx;
+		color: #3C3C3C;
+		padding: 10rpx 20rpx;
+		background: #F6F6F6;
+		border-radius: 6rpx;
+		margin-right: 20rpx;
+	}
+	.lineRgiht{
+		padding-left: 16rpx;
+	}
+	.goodsName{
+		font-size: 28rpx;
+		color: #3C3C3C;
+		line-height: 40rpx;
+	}
+	.goodsMs{
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 33rpx;
+		padding-top: 10rpx;
+	}
+	.sTopBox{
+		display: flex;padding: 30rpx 24rpx;
+		padding-bottom: 0;
+	}
+	.searchBtn{
+		font-weight: 400;font-size: 28rpx;padding-left: 24rpx;
+		color: #1A1A1A;line-height: 80rpx;
+	}
+	.searchInputBox{
+		width: 622rpx;display: flex;
+		height: 80rpx;position: relative;
+		background: #F9F9F9;
+		border-radius: 16rpx;
+	}
+	.ssinput{
+		font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 80rpx;height: 80rpx;
+		width: 480rpx;
+	}
+	.search_del{
+		width: 36rpx;height: 36rpx;padding-top: 23rpx;padding-bottom: 10px;padding-right: 10rpx;
+		position: absolute;
+		    right: 0;
+	}
+	.simg{
+		width: 36rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
+	}
+</style>