zhongshuo/pages/index/carModel.vue

<template>
	<view class="carbox">
		<view class="carSs">
			<view class="carssBox">
				<img src="../../static/img/icon_search.png" alt="" class="carSsImg">
				<input type="text" placeholder="请输入车型品牌或车系名称" class="carssInput" @input="carNameInput" v-model="carName" @confirm="getcarsslist"> 
			</view>
		</view>
		<view style="height: 220rpx;"></view>
		
		<view class="tab1 ">
			 <scroll-view  class="scroll-view" :scroll-into-view="toView" scroll-y="true" >
				<view class="brand-select">
					<template v-for="item in carModelList">
					  <view :id="item['首字母']" v-if="item['首字母']!='热'">
						<view class="brand-select-title" :id="item['首字母']+'-model'">
						  <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
						</view>
					   
							<view class="brand-select-wrapper">
								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
								  <img :src="item2.logo" class="brand-select-item-icon">
								  <span>{{item2.brand||item2.name}}</span>
								</a>
							</view>
					   
					  </view>
					  <view :id="'rm'" v-if="item['首字母']=='热'">
						<view class="brand-select-title" :id="item['首字母']+'-model'">
						  <h5 :class="{'brand-select-titleselect':toView=='rm'}">{{item['首字母']}}</h5>
						</view>
		   
							<view class="brand-select-wrapper">
								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
								  <img :src="item2.logo" class="brand-select-item-icon">
								  <span>{{item2.brand||item2.name}}</span>
								</a>
							</view>
					   
					  </view>
					</template>
				 </view>
		    </scroll-view >
			<div class="fast-navigation">
				<a class="fast-navigation-sel" v-if="item['首字母']=='热'" :class="{'select':toView=='rm'}" v-for="item in carModelList" @tap="bindToView(item)">热</a>
			  <a class="fast-navigation-sel" v-if="item['首字母']!=='热'" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
			</div>
			
		</view>
		
		<uni-popup ref="popup" type="right" :mask-click="true" @change="popupc">
			<view class="popup-content" >
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<view style="height: 44px;"></view>
				<view style="height: 122rpx;"></view>
				<h3 class="carModel-nav-title " style="padding-top: 4rpx;">
					<view class="carModel-nav-title—left">
						<img :src="selectedCarBrand.logo" class="carModel-nav-title-img">
						<span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }}</span>
					</view>
				
				</h3>
				<scroll-view class="brandList" scroll-y="true">
					<view v-for="item in carSeriesList" :key="item.manufactor" >
					  <h3 class="cell-item-title">{{ item.manufactor }}</h3>
					  <span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
					</view>
					<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
					<view class="status_bar" style="height: 50px;"></view>
				</scroll-view>
				
			</view>
		</uni-popup>
		
		<!-- 排量 -->
		
		
		<view class="displacementListBox" v-show="displacementListShow">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<!-- 	<view style="height: 44px;"></view> -->
			<h3 class="carModel-nav-title">
				<view class="carModel-nav-title—left">
					<img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
					<span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
				</view>
			    <view class="carBack" @click="carBack(1)">上一步</view>
			  
			</h3>
			<scroll-view scroll-y="true" class="brandList">
			  <view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
			    {{item}}
			  </view>
			  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			  <view class="status_bar" style="height: 50px;"></view>
			</scroll-view>
		</view>
		<!-- 排量 -->
		<!-- 离合器 -->
		<view class="carGroupListBox" v-show="carGroupListShow">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<!-- <view style="height: 44px;"></view> -->
			<h3 class="carModel-nav-title">
				<view class="carModel-nav-title—left">
					<img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
					<span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
				</view>
				<view class="carBack" @click="carBack(2)">上一步</view>
			</h3>
			<scroll-view scroll-y="true" class="brandList">
			  <view @click="goList(item)" v-for="item in carGroupList" class="displacementListLine" >
			    {{item.title}}
			  </view>
			  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			  <view class="status_bar" style="height: 50px;"></view>
			</scroll-view>
		</view>
		<!-- 离合器 -->
		
		<!-- 搜索的 -->
		<view class="carssListBox" v-show="carssListShow" @click="carssListShow=false">
			<view class="carssListBoxCont" >
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<h3 class="carModel-nav-title">
					<view class="carModel-nav-title—left">
						<span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{carName}}</span>
					</view>
					<!-- <view class="carBack" @click="secondShow=false">上一步</view> -->
				</h3>
				<scroll-view scroll-y="true" class="brandList">
				  <view @click.stop="ssitem(item)" v-for="item in carsslist" class="carsslineTxt" >
				    {{item.title}}
				  </view>
				  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				  <view class="status_bar" style="height: 50px;"></view>
				</scroll-view>
			</view>
		</view>
		
		<view class="carssListBox2" v-show="secondShow" @click.stop="secondShow=false">
			<view class="carssListBoxCont">
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<h3 class="carModel-nav-title">
					<view class="carModel-nav-title—left">
						<span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{ssname1}}</span>
					</view>
					<view class="carBack" @click="secondShow=false">上一步</view>
				</h3>
				<scroll-view scroll-y="true" class="brandList">
				  <view @click.stop="seconditem(item)" v-for="item in secondlist" class="carsslineTxt" >
				    {{item.title}}
				  </view>
				  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				  <view class="status_bar" style="height: 50px;"></view>
				</scroll-view>
			</view>
			
		</view>
		<view class="carssListBox2" v-show="ssdisplacementListShow" @click.stop="ssdisplacementListShow=false">
			<view class="carssListBoxCont">
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<h3 class="carModel-nav-title">
					<view class="carModel-nav-title—left">
						<span class="carModel-nav-title-msg " style="padding-left: 24rpx;">{{ssname2}}</span>
					</view>
					<view class="carBack" @click="ssdisplacementListShow=false">上一步</view>
				</h3>
				<scroll-view scroll-y="true" class="brandList">
				  <view @click="golistnew(item)" v-for="item in ssdisplacementList" class="carsslineTxt" >
				    {{item.displacement}}
				  </view>
				  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				  <view class="status_bar" style="height: 50px;"></view>
				</scroll-view>
			</view>
			
		</view>
		<!-- 搜索的 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carModelList:'',
				toView:'',
				type:'right',
				iStatusBarHeight:'',
				selectedCarBrand:'',
				brand:'',
				carSeriesList:'',
				manufactor:'',
				carSeries:'',
				displacementList:'',
				displacementListShow:false,
				selectedCarSeries:'',
				displacement:'',
				carGroupList:'',
				carGroupListShow:false,
				carsslist:[],
				carName:'',
				carssListShow:false,
				secondShow:false,
				secondlist:'',
				carItem:'',
				ssdisplacementListShow:false,
				ssdisplacementList:'',
				ssname1:'',
				ssname2:'',
			}
		},
		onLoad() {
          console.log("?")
		  
		   
		},
		methods: {
		  popupc(e){
			  console.log(e)
			  if(!e.show){
				  this.displacementListShow=false;
				  this.carGroupListShow=false;
			  }
		  },
		  carBack(num){
				if(num==2){
					this.carGroupListShow=false;
				}
				if(num==1){
					this.displacementListShow=false;
				}
		  },
		  getcarsslist(){
			  this.secondShow=false;
			  this.ssdisplacementListShow=false;
			   uni.showLoading({ title: '加载中'});
			  this.$http('matchingByOpen/queryCarModelGroupIiPackage', {
			  		name:this.carName	
			  }, 'POST').then(res => {
				  uni.hideLoading();
				  this.carssListShow=true;
				  this.carsslist=res.data
			  //	this.carModelList=res.data.brands
			  	
			  })
		  },
		  ssitem(item){
			  this.carItem=item;
			  uni.showLoading({ title: '加载中'});
			  if(item.type==1){
				  var params={
					  type:item.type,
					  manufactor:item.manufactor,
				  }
				  this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
				  	this.secondlist=res.data;
				  				this.secondShow=true;
				  	  uni.hideLoading();
				  })
			  }else if(item.type==2){
				  var params={
					  type:item.type,
					  manufactor:item.manufactor,
					  brand:item.brand,
					  carSeries:item.carSeries
				  }
				  this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
				  	this.secondlist=res.data;
				  			this.secondShow=true;
				  	  uni.hideLoading();
				  })
			  }else{
				  if(item.displacementList.length==1){
					  uni.navigateTo({
					  	url:'list?type=2&id='+item.displacementList[0].id
					  })
				  }else{
					  this.ssdisplacementList=item.displacementList;
					  this.ssdisplacementListShow=true;
					  this.ssname2=item.title;
				  }
				 
				  
			  }
			   this.ssname1=item.title
			 
			  
		  },
		  seconditem(item){
			  if(item.displacementList.length==1){
			  					  uni.navigateTo({
			  					  	url:'list?type=2&id='+item.displacementList[0].id
			  					  })
			  }
			  else{
				 this.ssdisplacementList=item.displacementList;
				 this.ssdisplacementListShow=true;
				 this.ssname2=item.title 
			  }
			  
			 // this.$refs.popup.open("right2")
			  //this.popupShow=true;
		  },
		  carNameInput(){
			//console.log(this.carName)  
			if(this.carName==''){
				this.carssListShow=false;
				this.secondShow=false;
				this.ssdisplacementListShow=false;
			}
		  },
          getdata(){
			  uni.showLoading({ title: '加载中'});
			  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			  this.$http('matchingByOpen/queryCarModelGroupPackage', {
			
			  }, 'POST').then(res => {
			  	this.carModelList=res.data.brands
			  	  uni.hideLoading();
			  })
		  },
		  selectBrand(item){
		  	console.log(item)
		  	this.selectedCarBrand=item;
		  	this.$refs.popup.open("right")
		  	this.popupShow=true;
		  	this.brand=item.brand
		  	this.getbrand()
		  },
		  getbrand(){
		  	uni.showLoading({ title: '加载中'});
		  	this.$http('matchingByOpen/queryCarModelGroupPackage', {
		  	  brand:this.brand
		  	 },'POST').then(res => {
		  		uni.hideLoading();
		  		this.carSeriesList=res.data.carSeriesList
		  	})
		  },
		  selectCarFactory(manufactor,item){
		  	this.manufactor=manufactor;
		  	this.carSeries=item;
		  	//this.selectedCarSeries=item
		  	this.displacementListShow=true;
		  	this.getdisplacementList()
		  },
		  getdisplacementList(){
		  	uni.showLoading({ title: '加载中'});
		  	this.$http('matchingByOpen/queryCarModelGroupPackage', {
		  	  brand:this.brand,
		  	  manufactor:this.manufactor,
		  	  carSeries:this.carSeries
		  	 },'POST').then(res => {
		  		uni.hideLoading();
		  		this.displacementList=res.data.displacementList
		  	})
		  },
		  selectDisplacement(item){
		  	this.displacement=item;
		  	this.carGroupListShow=true;
		  	this.getmodelList();
		  },
		  getmodelList(){
		  	uni.showLoading({ title: '加载中'});
		  	this.$http('matchingByOpen/queryCarModelGroupPackage', {
		  	  brand:this.brand,
		  	  manufactor:this.manufactor,
		  	  carSeries:this.carSeries,
		  	  displacement:this.displacement
		  	 },'post').then(res => {
		  		uni.hideLoading();
		  		this.carGroupList=res.data.carGroupList
		  	})
		  },
		  goList(item){
			  console.log(item)
			   this.$store.commit('mutationslistId', item.id)
			  uni.navigateTo({
			  	url:'list?name='+item.value+'&nLevelID='+item.carModelInfo.nLevelID+'&id='+item.id
			  })
		  },
		  golistnew(item){
			  uni.navigateTo({
			  	url:'list?type=2&id='+item.id
			  })
		  },
		  bindToView(item){
		  	console.log(item)
		  	if(item['首字母']=='热'){
		  			this.toView ='rm'
		  	}else{
		  			this.toView = item['首字母']
		  	}
		  	console.log(this.toView)
		  	
		  },
		  close(){
		  	this.$refs.popup.close()
		  },
		}
	}
</script>

<style scoped lang="scss">
	.carModel-nav-title—left{
		display: flex;
	}
	.carModel-nav-title{
		display: flex;
		justify-content: space-between;
	}
	.carBack{
		line-height: 100rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding-right: 24rpx;
	}
	.carSs{
		width: 750rpx;
		height: 96rpx;
		background: #FFFFFF;
		padding-top: 24rpx;
		position: fixed;
		z-index: 999;
		left: 0;
		top:90rpx;
		/* top: calc(44px + 96rpx); */
	}
	.carssBox{
		width: 702rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		margin: 0 auto;
		
	}
	.carSsImg{
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}
	.carssInput{
		line-height:72rpx;
		font-size: 28rpx;
		height:72rpx;
		padding-left: 16rpx;
		width: 600rpx;
	}
	.carssBox{
		display: flex;
	}
	.brand-select{
	  .brand-select-title{
	    height: 80rpx;
	    background:rgba(247,247,247,1);
	    position: relative;
	    h5{
	      position: absolute;
	      height:40rpx;
	      font-size:28rpx;
	      font-weight:500;
	      color:rgba(102,102,102,1);
	      line-height:40rpx;
	      top: 20rpx;
	      left: 30rpx;
	    }
	  }
	  .brand-select-wrapper{
	    display: flex;
	    flex-wrap: wrap;
	    background:rgba(255,255,255,1);
		width: 100vw;
	    .brand-select-item{
	      display: block;
	      width: 80rpx;
	      height: 100rpx;
	      padding: 30rpx;
	      img{
	        display: inline-block;
	        margin-left: 10rpx;
	        width: 60rpx;
	        height: 60rpx;
	      }
	      span{
	        display: inline-block;
	        text-align: center;
	        height:33rpx;
	        width: 90rpx;
	        font-size:24rpx;
	        font-weight:400;
	        color:rgba(51,51,51,1);
	        line-height:33rpx;
	      }
	    }
	
	  }
	}
	.fast-navigation{
	  position: fixed;
	  text-align: center;
	  right: 16rpx;
	  top: 360rpx;
	  width: 23rpx;
	  font-size:26rpx;
	  font-weight:500;
	  line-height:35rpx;
	  color: rgb(153, 153, 153);
	  a{
	    display: block;
		padding-top: 5rpx;
	  }
	  .select{
	    color: #FF4F00;
	  }
	}
	.scroll-view{
		height: calc(100vh - 120rpx);
	}
	.brand-select{
		padding-bottom: 100rpx;
	}
	.popup-height {
	
		width: 200px;
	}
	.popup-content{
		width: 80vw;
		background: #FFFFFF;
		height: 100vh;
	}
	.carModel-nav-title{
	  height:100rpx;
	  background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	  line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	   background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	  }
	  .carModel-nav-title-box{
	    width: 100%;
	    display: flex;
	  }
	  .carModel-nav-title-img{
	    margin: 20rpx;
	    width: 60rpx;
	    height: 60rpx;
	  }
	  .carModel-nav-title-msg{
	    font-size:30rpx;
	    font-weight:400;
	    color:rgba(255,255,255,1);
	    display: block;
	    padding-right: 20rpx;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis; 
				white-space: nowrap; 
	  }
	  .carModel-nav-title-msg1{
		  width: 300rpx;
	  }
	}
	.cell-item-title{
	  height:60rpx;
	  background:rgba(250,250,250,1);
	  font-size:28rpx;
	  font-weight:400;
	  color:rgba(102,102,102,1);
	  line-height:60rpx;
	  padding-left: 26rpx;
	}
	.span-cell{
	  position: relative;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  width: 100%;
	  padding: 6rpx 30rpx;
	  overflow: hidden;
	  color: #323233;
	  font-size: 3.73333vw;
	  line-height: 82rpx;
	  height: 82rpx;
	  background-color: #fff;
	  border-bottom: 1px solid #ebedf0;
	
	}
	.carModel-nav-title{
	  height:100rpx;
	 background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	 line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	   background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	  }
	  .carModel-nav-title-box{
	    width: 100%;
	    display: flex;
	  }
	  .carModel-nav-title-img{
	    margin: 20rpx;
	    width: 60rpx;
	    height: 60rpx;
	  }
	  .carModel-nav-title-msg{
	    font-size:30rpx;
	    font-weight:400;
	    color:rgba(255,255,255,1);
	    display: block;
	    padding-right: 20px;
	  }
	}
	.carbox{
		height: calc(100vh - 120rpx);
	}
	.brandList{
		height: calc(100vh - 310rpx);
		/* padding-bottom:var(--status-bar-height); */
	}
	.displacementListLine{
		min-height: 50rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		font-size:28rpx;
		font-weight:600;
		color:rgba(51,51,51,1);
		line-height:50rpx;
		border-top: 2rpx solid rgb(238, 238, 238);
		background-color: rgb(255, 255, 255);
	}
	.carsslineTxt{
		// height: 98rpx;
		background: #FFFFFF;
		line-height:50rpx;
		color: #333333;
		font-size: 28rpx;
		padding: 0 24rpx;
		border-bottom: 1px solid #EEEEEE;
		padding: 20rpx 20rpx 20rpx 30rpx;
	}
	.displacementListBox{
		position: fixed;
		top: 97rpx;
		left: 20vw;
		width: 80vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:calc(210rpx);
		/*  #endif  */
	}
	.carGroupListBox{
		position: fixed;
		top: 0;
		left: 20vw;
		width: 80vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		top: 210rpx;
		/*  #ifdef H5 */
	/* 	top:calc(44px + 220rpx); */
		/*  #endif  */
	}
	.carssListBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 200vw;
		height: 100vh;
		background: rgba(0,0,0,0.5) ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:calc( 210rpx);
		/*  #endif  */
	}
	.carssListBoxCont{
		background: #FFFFFF;width: 80vw;margin-left: 20vw;height: 100vh;
	}
	.carssListBox2{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0) ;
		z-index: 11112;
		top:calc(210rpx);
		
	}
	.brand-select-titleselect{
		    color: #FF4F00 !important;
	}
</style>