epc/pages/mobile/SelectCarModel.vue

<template>
	<view class="box">
		
		
			 <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':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>
					</template>
				 </view>
	        </scroll-view >
			
		
		
	</view>
</template>

	
<script>

export default {
	 components: {  
	       
	 },
	data() {
		return {
			carList:'',
			carModelList:'',
			toView:'',
			type:'right',
			brand:'',
			carSeriesList:'',
			selectedCarBrand:'',
			manufactor:'',
			carSeries:'',
			displacementList:'',
			displacementListShow:false,
			selectedCarSeries:'',
			displacement:'',
			carGroupList:'',
			carGroupListShow:false,
			type:'',
			delId:'',
			
		}
	},
	onLoad(opt) {
	  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	  if(opt.type==2){
		  this.type=2
	  }
	  if(opt.add){
		  this.addNum=opt.add
	  }
	  this.delId=opt.delId;
      // this.queryCarModelGroupPackage();
	},
	methods: {
		
		
		selectBrand(item){
			console.log(item)
			this.selectedCarBrand=item;
			this.$refs.popup.open("right")
			this.popupShow=true;
			this.brand=item.brand
			this.getbrand()
		},
		selectCarFactory(manufactor,item){
			this.manufactor=manufactor;
			this.carSeries=item;
			//this.selectedCarSeries=item
			this.displacementListShow=true;
			this.getdisplacementList()
		},
		selectDisplacement(item){
			this.displacement=item;
			this.carGroupListShow=true;
			this.getmodelList();
		},
		getmodelList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
			  brand:this.brand,
			  manufactor:this.manufactor,
			  carSeries:this.carSeries,
			  displacement:this.displacement
			 },'GET').then(res => {
				uni.hideLoading();
				this.carGroupList=res.data.carGroupList
			})
		},
		getdisplacementList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
			  brand:this.brand,
			  manufactor:this.manufactor,
			  carSeries:this.carSeries
			 },'GET').then(res => {
				uni.hideLoading();
				this.displacementList=res.data.displacementList
			})
		},
		queryCarModelGroupPackage(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
			  
			 },'GET').then(res => {
				uni.hideLoading();
				this.carModelList=res.data.brands
			})
		},
		bindToView(item){
			console.log(item)
			if(item['首字母']=='热门'){
					this.toView ='rm'
			}else{
					this.toView = item['首字母']
			}
		
			console.log(this.toView)
			//this.scrollTop = 0
		
		},
       /* login(){
			uni.navigateTo({
				url:'../login/login'
			})
		} */
		close(){
			this.$refs.popup.close()
		},
		getbrand(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
			  brand:this.brand
			 },'GET').then(res => {
				uni.hideLoading();
				this.carSeriesList=res.data.carSeriesList
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.box{
		min-height: 100vh;
		background:#F4F5F7;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.baiheibackImg{
		width: 70rpx;
		height: 44rpx;
	}
	.gaunbiIMg{
		width: 20px;
		height: 20px;
		padding: 12px;
	}
	
	.sltpImg{
		width: 704rpx;
		height: 353rpx;
	}
	
	.sltp{
		padding-top: 20rpx;
	}
	
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
	}
	.addBtn{
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 23rpx;
		left: 30rpx;
	}
	.carlistBox{
		padding-bottom: 120rpx;
	}
	.tab{
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 93rpx;
		color: #3C3C3C;
		font-size: 30rpx;
		border-bottom: 1px solid #F4F5F7;
	}
	.activeTab{
		color: #FF4F00;text-decoration: underline
	}
	/* .brand-select-title{
		height: 80px;
		background:rgba(247,247,247,1);
		position: relative;
	} */
	.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:24rpx;
	  font-weight:500;
	  line-height:35rpx;
	  color: rgb(153, 153, 153);
	  a{
	    display: block;
	  }
	  .select{
	    color: #FF4F00;
	  }
	}
	.scroll-view{
		height: calc(100vh - 93rpx);
	}
	.popup-height {
	
		width: 200px;
	}
	.popup-content{
		width: 590rpx;
		background: #FFFFFF;
		height: 100vh;
	}
	.carModel-nav-title{
	  height:100rpx;
	  background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
	  line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	   background: linear-gradient(134deg, #FF8635 0%, #FF4828 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;
	  }
	}
	.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(134deg, #FF8635 0%, #FF4828 100%);
	 line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	    background: linear-gradient(134deg, #FF8635 0%, #FF4828 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;
	  }
	}
	.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);
	}
	.displacementListBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:44px;
		/*  #endif  */
	}
	.carGroupListBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:44px;
		/*  #endif  */
	}
	.brandList{
		height: calc(100vh - 250rpx);
	}
	.brand-select-titleselect{
		    color: #FF4F00 !important;
	}
</style>