shell/pages/index/search.vue

<template>
	<view class="content">
	  <view class="sTopBox">
		  <view class="searchInputBox" >
		  	<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
		  	<input v-model="value" type="text"  placeholder="请输入车型品牌,车系名称或VIN码" 
			placeholder-class="ip" class="ssinput" @confirm="searchFn">
		  </view>
		  <view class="searchBtn" @click="searchFn">
		  	搜索
		  </view>
	  </view>
		
	  <view class="box">
		  <view class="historyLine" v-for="(item,index) in carMlist">
		  <!-- 	<image src="http://img.db.66km.cn/carbrandlogo/B - 宝马.png" mode="" class="historylinecarImg"></image> -->
		  	<view class="historylinecar" @click="carMbtn(item)">{{item.title}}</view>
		  </view>
	  </view>
	  
	  <!-- 选择车型 -->
	  <view class="ckcarBox" v-if="ckCarShow">
	  	<view class="ckcar">
	  		<view class="ckcarTop flex">
	  			<view class="ckcarTitle">请选择车型</view>
	  			<image src="../../static/img/icon_quxiao.png" mode="" class="ckcarClose" @click="ckcarClose"></image>
	  		</view>
	  		<view class="ckcarlineBox">
	  			<view class="ckcarline flex" v-for="(item,index) in vinList">
	  				<view class="ckcarLeft">{{item.title}}</view>
	  				<image src="../../static/img/icon_arrow.png" mode="" class="ckcarJtimg"></image>
	  			</view>
	  		</view>
	  	</view>
	  </view>
	  
	  <view class="popupone"  @click="popupc" v-if="popuponeShow">
	  	<view class="popup-content" @click.stop="">
			<view style="padding: 24rpx 0;">
				<view class="manufactorP">{{manufactor}}</view>
			</view>
	  		
	  		<scroll-view class="brandList" scroll-y="true">
	  			<view class="pLine" v-for="(item,index) in popuponeList" @click="popuponeBtn(item)">{{item.title}}</view>
	  		</scroll-view>
	  		
	  	</view>
	  </view>
	  <view class="popupone popupTwo" @click="popupcTwo" v-if="popupTwoShow">
	  	<view class="popup-content" @click.stop="">
	  		<view style="">
	  			<!-- <view class="manufactorP">{{displacement}}</view> -->
				<view class="manufactorPTow"> <span>{{displacement}}</span>  
				  <span @click="poneHide">上一步</span>
				</view>
	  		</view>
	  		
	  		<scroll-view class="brandList" scroll-y="true">
	  			<view class="pLine" v-for="(item,index) in displacementList" @click="">{{item.displacement}}</view>
	  		</scroll-view>
	  		
	  	</view>
	  </view>
	  
	  
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				value:'',
				ckCarShow:false,
				vinList:[],
				carMlist:[],
				carMshow:false,
				popuponeShow:false,
				popuponeList:[],
				manufactor:'',
				displacementList:'',
				type:'',
				popupTwoShow:false,
				displacement:'',
				brand:'',
				carSeries:'',
			}
		},
		onLoad(opt) {
         
		},
		methods: {
		   carMbtn(e){
			   this.type=e.type;
			   if(e.type==1){
				   this.manufactor=e.manufactor;
				   this.getpopuponeList()
			   }else{
				   this.brand=e.brand
				   this.carSeries=e.carSeries
				   this.manufactor=e.manufactor
				   this.getpopuponeList()
			   }
		   },
		   popuponeBtn(item){
			   console.log(item.displacementList)
			   this.displacementList=item.displacementList;
			   this.displacement=item.title;
			   this.popupTwoShow=true;
		   },
		   poneHide(){
			   this.popupTwoShow=false;
		   },
		   popupcTwo(){
			   this.popupTwoShow=false;
		   },
		   getpopuponeList(){
			   uni.showLoading({ title: '加载中'});
			   if(this.type==1){
				  var params={
				  		manufactor: this.manufactor,type:this.type
				  } 
			   }else{
				 var params={
				 		manufactor: this.manufactor,type:this.type,carSeries:this.carSeries,brand:this.brand
				 }   
			   }
			   
			   this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params,'POST').then(res => {
			     	uni.hideLoading();
			        this.popuponeList=res.data;
			   		this.popuponeShow=true;
			   })
		   },
		   popupc(){
			   this.popuponeShow=false;
		   },
           searchFn(){
			   console.log(this.value.length)
			   if(this.value.length==17){
				   uni.showLoading({ title: '加载中'});
				   this.$http('matchingByOpen/queryCarModelGroupByVinAggregation', {
				     vin: this.value,type:2
				    },'POST').then(res => {
				     	uni.hideLoading();
				        this.vinList=res.data;
				   		this.ckCarShow=true;
						this.carMshow=false;
				   })
			   }else{
				   uni.showLoading({ title: '加载中'});
				   this.$http('matchingByOpen/queryCarModelGroupIiPackage', {
				     name: this.value,
				    },'POST').then(res => {
				     	uni.hideLoading();
				        this.carMlist=res.data;
				   		this.carMshow=true;
						this.ckCarShow=false;
				   })
			   }
			   
			   
		   },
		   ckcarClose(){
			   this.ckCarShow=false;
		   }
		}
	}
</script>

<style scoped>
	.manufactorP{
		line-height: 69rpx;padding-left: 24rpx;
		 width: 504rpx;margin-left: 30rpx;
		 height: 69rpx;
		 background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
		 border-radius: 16rpx;
		 font-weight: 500;
		 color: #FFFFFF;font-size: 28rpx;
	}
	.manufactorPTow{
		line-height: 69rpx;padding-left: 24rpx;
		padding-right: 24rpx;display: flex;
		justify-content: space-between;
		background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
		font-weight: 500;
		color: #FFFFFF;font-size: 28rpx;
	}
	.brandList{
		height: calc(100vh - 200rpx);
		/* padding-bottom:var(--status-bar-height); */
	}
	.pLine{
		border-bottom: 1rpx solid #EEEEEE;
		font-weight: 400;
		color: #333333;font-size: 26rpx;
		padding: 30rpx 24rpx;
	}
	.popupone{
		width: 100vw;height: 100vh;
		background:rgba(0, 0, 0, 0.4) ;
		position: fixed;top: 0;left: 0;
		z-index: 11;
	}
	.popupTwo{
		z-index: 111;
	}
	.popup-content{
		width: 80vw;
		background: #FFFFFF;
		height: 100vh;
		margin-left: 20vw;
	}
	.ckcarJtimg{
		width: 26rpx;height: 26rpx;margin-top: 4rpx;
	}
	.ckcarlineBox{
	  padding:24rpx ;	
	  border-bottom: 1px solid #EEEEEE;
	}
	.ckcarLeft{
		font-weight: 400;line-height: 36rpx;
		color: #1A1A1A;font-size: 26rpx;
	}
	.ckcarBox{
		width: 100vw;height: 100vh;
		background:rgba(0, 0, 0, 0.4) ;
		position: fixed;top: 0;left: 0;
	}
	.ckcar{
		width: 750rpx;
		height: 772rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.ckcarClose{
		width: 30rpx;height: 30rpx;
	}
	.ckcarTitle{
		font-weight: 500;font-size: 28rpx;
		color: #1A1A1A;
		line-height: 40rpx;
	}
	.ckcarTop{
		padding: 40rpx 26rpx 20rpx 24rpx;
	}
.box{
	padding: 0 24rpx;
}
.sTopBox{
	display: flex;padding: 30rpx 24rpx;
}
.searchBtn{
	font-weight: 400;font-size: 28rpx;padding-left: 24rpx;
	color: #1A1A1A;line-height: 80rpx;
}
.searchInputBox{
	width: 622rpx;display: flex;
	height: 80rpx;
	background: #F9F9F9;
	border-radius: 16rpx;
}
.ssinput{
	font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 80rpx;height: 80rpx;
}
.simg{
	width: 34rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
}
.historylinecarImg{
	width: 46rpx;
	height: 46rpx;
}
.historylinecar{
	font-weight: 400;font-size: 26rpx;
	color: #1A1A1A;
	line-height: 37rpx;width: 636rpx;
}
.historyLine{
	display: flex;justify-content: space-between;
	padding: 30rpx 0;border-bottom: 1rpx solid #EEEEEE;
}
</style>